Display the correct image size

This is a very easy optimization. Sometimes you forget that you have 2000 pixels width image loaded but you display it in a 1000 width block. So your image could be 2 times smaller.

If you made this mistake a couple of times it could add up. This is very easy to see in the Google Lighthouse report we display at pages100.com.

How to fix 'Properly size images' message in the Google Lighthouse report?

You can download the images and resize these in PhotoShop, use a CND where you can edit these on the fly or properly use the CMS you use. WordPress, Drupal, Ghost and others have pretty good guides on how to display the correct image size.

Use srcset and sizes in your IMG tag

You give the browser a couple options. If this loads on a small screen display the small 320width version.

<img srcset="elva-fairy-320w.jpg 320w,
            elva-fairy-480w.jpg 480w,
            elva-fairy-800w.jpg 800w"
    sizes="(max-width: 320px) 280px,
           (max-width: 480px) 440px,
           800px"
    src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

More information about sizes and srcsets

Fix 'Properly size images' for WordPress websites.

In the new Gutenberg editor it automatically creates good versions of your images. Or you could use the Media Library to resize the images.

But if you have a theme where you show a thumbnail that's too big you can add size options. Like the example below. You can add this code to the functions.php.

add_action( 'after_setup_theme', 'pages100_theme_setup' );
function pages100_theme_setup() {
	add_image_size( 'header', 1000, 500, true );
	add_image_size( 'header_small', 600, 250, true );\
}

Don't forget to resize these images with this regenerate thumbnails plugin.