I uploaded a PNG image with alpha transparency to my server with the filename logo.png, however, when the image is used on a page and I go to see it’s file-path, I get:
http://example.com/i/300x300xlogo.png.pagespeed.ic.0A66xVq4G9.png
That file is nowhere to be seen on the server.
I don’t know if it affects it, but the actual image size is 400px by 400px, and I have it displayed in the HTML as 300px by 300px. (Don’t ask.)
Could it be my web-host doing this? Seems to prefix the file with the resolution to be displayed at: 300x300x and also has that weird suffix: .pagespeed.ic.0A66xVq4G9.png
The URL you’re seeing is as intended: mod_pagespeed rewrites the image URL to an optimized name and embeds the size, as well as the fingerprint of the content into the filename.
If you’re downscaling the image in HTML from the original size.. you’re wasting user’s bandwidth, which is especially painful on mobile. Advantage of mod_pagespeed is that it can do this resizing for you on the fly – simply specify the desired dimensions in the HTML and it will do the right thing.
You can read more about the various image optimizations done by mod_pagespeed here:
https://developers.google.com/speed/docs/mod_pagespeed/filter-image-optimize
What you’re describing as “loading slower” sounds like “image lazyload”:
https://developers.google.com/speed/docs/mod_pagespeed/filter-lazyload-images
The images are deferred until onload fires, which helps get the page painted faster to the screen. You can also configure mod_pagespeed to do this on-scroll, such that only visible images are loaded. Finally, you can also disable this specific filter, but keep the image optimization done above.
P.S. mod_pagespeed is no longer beta, the team recently shipped 1.0.