Fix Compressing and resizing Issue that warns by Google

Basically, this is my error on optimizing images. https://developers.google.com/speed/pagespeed/insights/?url=animebusters.org

How can fix those image issues? Please help!

  • Adam Czajczyk

    Hello Mansoor,

    I hope you're well today and thank you for your question!

    I check PageSpeed report and what Patrick and Abdul were explaining during the chats is actually a way to go so let me try to describe it with some more details, to help you fix that if possible (please note: in some cases it might not be possible to deal with such issues entirely, it's mostly related to how the theme is built).

    How images work in Wordpress?

    Whenever you upload an image of any size, WordPress is automatically creating additional images out if it. By default, it stores four images per each image uploaded: full size image (that's the original, unchanged image that you upload), large image (resized but still big copy of your original one), medium (reasonably smaller) and a thumbnail (usually quite a small copy of original one).

    WordPress defines dimentions of those three additional images by default but theme developers can change them and they can add additional sizes. That is because the design may require images of a certain size that's not standard to WordPress core. Plugin developers might also do this for the same reasons.

    As a result, you end up having multiple copies of the same image uploaded to the site. While in media library you see a single image, when you e.g. put it into post, you usually can select which size should be used. However, there are some places (like e.g. featured thumbnail, thumbnails/images on archive pages etc) where you are not asked to select the size - images are automatically added there.

    Often, an image selected there automatically is not of an exact size that's needed but just "close to it" and is then resized by browser according to its container size (e.g. HTML "div" element inside which an image is displayed) and/or due to some CSS rules.

    That is particularly important in case of fully responsive themes where sizes of elements heavily depend on the devices they are displayed on.

    How PageSpeed Insights check analyzes images?

    What PageSpeed does is that it visits the site and when it finds an image there it:
    - takes an image
    - checks if it can be compressed (so dimensions and quality is the same but file size is smaller)
    - checks the size of image container and compares it against dimensions of file used.

    If it find that image can be compressed, it reports that "Compression" is necessary.

    If it finds that image doesn't exactly fit its container it actually reports "Compress and Resize".

    So, in case of images reported on your site, the crucial part here is resizing them so they would match their containers.

    How Smush works?

    Smush takes image from your site, sends it to our cloud to an optimization app and gets optimized image back. Smush doesn't analyze the site but instead it takes each and every image from the Media Library (based on database records) and processes them. It's doing compression on images and it can also resize them but only to the sizes you specify in its settings. It cannot take an image from the site, check its container size, resize image to that size upload it and replace in post/page etc. It might be able to do something like that in future but it's much more complex technically than it sounds :slight_smile:

    What's the solution?

    I believe you already have images smushed and that's the good part. The crucial aspect here is to resize the listed images so they would fit their containers. That is something that can only be done manually and usually I would say that you would want to:

    - find where the given image is used on site
    - use "Inspect element" browser tool to find about current image dimensions, real image dimensions and the container dimensions
    - download image and use some photo editing app to manually resize that image
    - then upload it back on server to replace the one that was there (and in some cases also manually replace image in post/page/theme/plugin settings).

    That being said, Abdul suggested a simpler solution but I'm afraid it won't work well in this case. I have downloaded those "optimized resources" for your site and there's only one image processed there, even despite Google lists more of them.

    Additional difficulty here is the fact that you're offloading images to Amazon S3 as you cannot directly replace them. So basically, the only solution here is (I'll explain using one image from PageSpeed list as example but procedure would be exactly the same for all of them):

    1. Take the image from the list and and look at it's URL (full URL is displayed in a tooltip after you hover over image URL on the list):

    http://s3.amazonaws.com/animebusterssiteimages/ab/wp-content/uploads/2018/02/18225220/thumb218-vegeta-788x486.jpg

    2. Above indicates that the image file "thumb218-vegeta-788x486.jpg" is the one in question; in this case file name also indicates image size (788x486 pixels).

    3. you will need to find where this image is used on site - on front-end, then use "Inspect Element" tool of a browser to find out what's the image dimension on site (it will be smaller most likely). Take a look here to get to know more on how to use tools like "Inspect Element" in Chrome browser:

    https://developer.chrome.com/devtools

    4. Now you need to save that image to your local computer, edit in using some photo editing app and resize there to make it much exactly the container element.

    5. Once you got that done, you can actually do this:
    - upload image to the Media Library
    - go to the post/page where it's used
    - edit that post/page and replace the image that's there with the one that you uploaded, selecting full size/original image - size; that is important here as this way exactly the image that you uploaded, resized one, will be used;

    6. One last thing to do and I'm not sure how to do this because I don't know what plugin are you using to offload images to S3, is to force that plugin to re-upload such images to S3 again. This way they would really get applied on your site.

    That should help quite a lot. However, even then, please note that if you're using a fully responsive theme, that might actually be not an ultimate solution and in case such as that, pushing theme developer to take care of the image sizes used and better handling responsiveness might be the only possible way to solve that.

    If you have any additional questions, let me know, please.

    Kind regards,
    Adam