0

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).

2
  • How is this question wordpress specific? Sep 21, 2014 at 7:55
  • 1
    I think there are few image compression plugin which will do that for all the image attachements.
    – sakibmoon
    Sep 21, 2014 at 8:01

3 Answers 3

2

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.

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.

-2

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

add_filter( 'jpeg_quality', create_function('', 'return 50;' ) );
4
  • Please also explain what it does.
    – bravokeyl
    Dec 5, 2016 at 9:18
  • it will reduce your image size it compresses images. 50 means reduction will be 50% and 100 means no reduction. Dec 6, 2016 at 10:00
  • downvoted as with that kind of quality you might as well just show random pixels instead of the image, and this will affect all images on the site not just the problematic ones Jan 11, 2017 at 5:17
  • Never faced a problem like that as you have mentioned :) Jan 27, 2017 at 12:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.