Serving scaled images

robinwyatt

Hi,

My homepage is currently rated F by Google PageSpeed, which is a bit concern to me. The number one recommendation seems to be to serve scaled images. Researching this, I found people saying to upload images that are no more than the maximum width I'd like them to be displayable at. As we are to some extent a photography site, it's important that our images should look as sharp and detailed as possible on the widest possible spectrum of screens. A Retina 5K display has 5,120 pixels across the width, and I'm displaying many images full width. How can I therefore meet Google's requirement? Is there a method, tool or plugin you can recommend?

Many thanks!

Bryan

Hi,

You can change the image size by not changing its resolution.

There is an online tool called tinypng.com that makes the pictures smaller.

If your page is about photography and you want higher quality pictures you should not take the google page speed so seriously.

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

robinwyatt

Hi,

Thanks. I have actually already used tinypng for all images, prior to upload. I then used the WP Smush plugin. Between these two tools, I have achieved a 94% score for for image optimisation.

The problem is not image optimisation, it's image scaling (as, I think, you do understand). For example:

• http://communication-for-development.com/wp-content/uploads/2015/01/communication-for-development-world-bank-uganda-kevin-ouma.jpg is resized in HTML or CSS from 1944x1296 to 295x196. Serving a scaled image could save 352.4KiB (97% reduction).

I went to my File Manager in cPanel and downloaded all 15 versions of that image that WordPress had made in different dimensions when I uploaded it to my Media Library. I then ran them through tinypng, which made them only a little smaller (see a screenshot of what it saved here) and uploaded them to File Manager, overwriting the ones that were there before. I ran GTmetrix again and I still had 0% (F grade) for serving scaled images. Regarding this specific image, I was again told the exact same thing, and that I could achieve a 97% reduction if I served a scaled image.

How can I do this?  

Bryan

We do not know how to help you, this is a WordPress image handling problem, it has nothing to do with the theme. This is how Wordpress works, especially when you have retina screens now and many more mobile resolutions.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

robinwyatt

Ok, fair enough.