Google Page Speed Insights - Optimize Images

Question

The top recommendation from Google Page Speed Insights is to optimize & compress images. How do I do that? It lists dozens of images and that would be practically impossible to do it all manually.

Should Fix: Optimize images Properly formatting and compressing images can save many bytes of data. Optimize the following images to reduce their size by 1MiB (88% reduction).

Answer 1

First, don't let Google Insights drive you to chase an ROI that might not be there. Maybe for 1M of image data improvement, it is worth looking into - but after awhile that tool will have you minifying 1K css files to save 100 bytes.

Second, regarding images - don't just blindly reduce ('compress'...really a misnomer) jpeg images. jpeg is a lossy format and if the quality of the images is important to you, you will notice the degradation especially if the image has large areas of similar color value. Blue sky for example - starts to look highly pixelated when you go beyond 10 percent sample reduction.

Did you read the recommended guide for image management:

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization

If the images are yours to modify and they are static, it may be worth spending some time on them with PhotoShop or similar, to see if you can resize or re-sample them. Also keep in mind with proper cache header settings (e.g. in Apache config or .htaccess), your user's browser is going to cache the static images so will only be "slow" on the first load.

If you are allowing users to upload images then you'll want to put some constraints on them or programatically re-size them as required.

Answer 2

The question is old. However, there are a lot of people who are facing the same issue in 2018. So, I am giving the the most effective answer.

There are different ways to optimize images:

• Use the right format: Make sure to upload iamges to your WordPress website in JPEG format, rather than PNG. The latter one eats up a lot of space.

• Resize Images: You can use different plugins to resize images, including Imsanity. Here are the steps:

  1. Install and activate the plugin.
  2. Head to Settings > Imsanity.
  3. A new page will appear. Set your preferred image size within a page or post. Also, set the size of images uploaded directly to the Media Library, along with Theme Headers, logos and other places.
  4. Choose the conversion option. If you want to convert PNG to JPG, choose Yes option.
  5. Finally, click on Save Changes button.
• Compress Images: There are different plugins to do it, including ShortPixel. You can find the detailed steps here.

The cool thing about all of these image optimization plugins is they resize and compress all the images automatically. So, you don't have to worry about spending a lot of time doing the functions manually in each of the images one by one.

Answer 3

Edit your functions.php file and add this code at the end

add_filter( 'jpeg_quality', create_function('', 'return 50;' ) );