PageSpeed Part I – Image Optimization
In this post we will cover in depth how to address the “Optimize Images” suggestion provided by Google’s PageSpeed Insights.
Images likely make up the majority of your websites page size. Page size is one of the primary factors that influence a sites’ load time. When checking to see if your images are optimized you should be looking at 3 qualities: format, resolution, and size. When Google provides the “Optimize Images” suggestion it is because one or more of these qualities is not optimal.
First let’s discuss what format you should save your images in for use on a website. I will only be going over the 4 most common formats as they are the ones that should be used 99% of the time. The format you choose should depend on the content of the image.
JPG – JPG is a lossy format, this means that when you save the image it is compressed and artifacts are introduced, lessening image quality. When saved at a high enough quality these artifacts should be imperceptible to the human eye, especially at the resolutions used on the web. WordPress automatically saves your jpgs at 90% quality when they are uploaded. This image format is ideal for photographs and is likely the correct option for most of the images on your website.
PNG – PNG is a lossless format which means it can be saved with no loss in quality. The down side is that it produces images with a much larger file size than JPGs when there is usually no perceptible difference between jpg and png versions. PNG should be used on images that contain type, screenshots, images with less than 16 colors, and images that require transparency. The site header is commonly a PNG.
SVG – SVG is a vector format, this should be used when the image needs to be highly scalable, social media icons are commonly in vector format. PageSpeed insights will let you know if you have an svg file that is not being compressed. If you get that warning let us know and we can optimize your server configuration for SVG files.
GIF – The GIF format should almost never be used. Only use it when you require the use of animation. If you do use a GIF you should serve it from a server that is optimized for displaying GIFs such as giphy or gfycat. It is becoming more and more common for HTML5 video to replace GIFs.
The most common mistake here is when PNGs are used when JPGs would be optimal. In this case there are WordPress plugins that will convert all PNG files to JPGs. Using JPG instead of PNG also provides the benefit of taking up less space on your VPS.
Image resolution is one of the easiest things to get wrong on a WordPress blog. If an image has a problem with its’ resolution Google PageSpeed will call it an “improperly scaled image” A lot of the time it is wrong simply because of a poorly coded WordPress theme. If you look at the two images below they appear identical, but the first is being loaded and displayed at a 680px width, the second image is being loaded at a 1000px width and then scaled down to 680px.
The first image is ideal because it is displaying at exactly the width of the blogs content. It is not loading at a higher resolution and then scaled down. Higher resolution images mean larger page sizes.
A properly coded theme will tell WordPress what sizes of images to create whenever an image is uploaded. By default WordPress generates a thumbnail, medium, and large image for every image uploaded. If a theme needs a specific size it will tell WordPress to generate a new size with a different name. i.e. “Slideshow Size at 800x300px”. It will then tell WordPress to use a “Slideshow Image” in the relevant part of the theme. If the theme is coded poorly it may not specify what image to use, so WordPress will use the unoptimized full resolution source image by default.
Fixing this issue can unfortunately be technical and may require an experienced web developer. They will need to:
1. Either change your theme
2. Add correct image size definitions to the current theme in the themes functions file and in every file where images are referenced.
3. Run the ‘Regenerate Thumbnails’ plugin to create thumbnails for the new image definitions out of the original source image.
If you have changed themes in the past and now realize there are some improperly scaled images in some of your previous posts, it is because the correct image sizes were not generated for previously uploaded images. You will want to run ‘Regenerate Thumbnails’ to fix this issue. We also recommend running the ‘Thumbnail Cleaner’ Plugin if you have switched themes and ran ‘Regenerate Thumbnails’ previously. It will get rid of image sizes that are not being used by the current theme which would make the space on your VPS run out faster than usual.
Another common mistake made when it comes to image resolution is with images manually placed in a sidebar widget. The theme doesn’t automatically resize images placed manually, such as in a text widget, so a full size 1000x1200px source image will be used when a 300x300px size would be appropriate.
The size of an image is determined by the format, quality, and resolution of the image. If Google suggests “compressing” an image, they are suggesting you display the image at a lower quality. The easiest fix for this is to install an image compression plugin that will automatically compress your images on upload. These compressions should not cause a loss in quality noticeable to the naked eye. If you only care about compressing images going forward you just need to install a plugin (we recommend ShortPixel or EWWW image optimizer), activate it with the compression settings you want, and it will automatically compress every new image uploaded via WordPress. If you want to optimize all images previously uploaded to the server you will need to run the “bulk image optimizer” option. Most plugins charge for this service and depending on how many images your website contains it may be somewhat costly and take multiple hours to finish.
Hopefully this gives you a good idea of where to get started when Google’s PageSpeed Insights says you need to optimize images. To sum it up, if the details on the report say “Losslessly compressing <image> could save…” it’s a sign that you might want to use an image optimizer plugin. If the details say “Serve scaled image…” it means that either your theme is not generating/using the correct image size or you have a manually placed image that is over sized.
Join us next week as we cover how to handle several CSS and JS file problems in depth.