I have written quite a few SEO articles on optimizing site speed and did a presentation on it, but none in particular on dealing with WordPress Image Optimization. None on images and their size slowing down your site and the solutions out there to bypass the issue.
Images are one of the if not the main reason why many of you out there have slow sites. And when you check it using Google PageSpeed Insights you will see Google punishes you heavily for having images that are not scaled properly and or that have not been compressed properly.
Type of Images
When using images, picking the right type of image for the job matters. Use vector images where possible. They scale well, meaning they resize flawlessly across different viewports and will never look stretched thin like raster images will when they are presented on larger screens. They are also light, especially when loading using gzip and or minimized using SVGO.
If not, and to be frank we used raster images more often than not, use jpegs. Pngs are more detailed and can be loaded with transparent backgrounds, but are therefore also heavier. If you do need a bigger palette and or more colors or a transparent background use them. OSX loves PNGs and all screenshots are saved as such.
Gifs are basically only useful if you need some sort of animated image. PNG is its better follow up format for almost all reasons like size and quality and has better compression than gifs so they are only used for animation these days.
TIFs are basically used by photographers, as they are basically raw in format and can be edited without quality losss. They are also very large. So no, don’t use the for your web application. We mainly use pngs and jpegs.
Compression
Compression of raster images such as jpegs and pngs and here we mean lossless compression without quality loss is a way to compress the images while preserving its quality. There are ready made tools/ plugins to help you with that. I will get back to that later. But let’s first talk about some nerdy tools. On *Nix systems you can install optipng and or jpegtran. With these command line tools you can compress and or bul compress an x amount of images before uploading them. That is better than taking care of it at the server at a later stage.
Example of using optipng from the command line to optimize all images in your uploads folder locally or on server:
cd /path/to/wp-content/uploads
find . -type f -iname "*.png" -print0 | xargs -I {} -0 optipng -o5 -quiet -keep -preserve -log optipng.log "{}"
FYI This could take a while!
Another great command line tool using Node / NPM is Gulp Imagemin , a tool used by the great Roots, Sage theme as well. It takes care of several raster type images as well as the vector based SVG format. As stated in the README it comes bundled with the following lossless optimizers:
- gifsicle — Compress GIF images
- jpegtran — Compress JPEG images
- optipng — Compress PNG images
- svgo — Compress SVG images
EWWW Imagewize Optimizer Plugin
If you have most images on your server and these have never been setup properly you can use a plugin like EWWW Image Optimizer. Using it you can optimize images in bulk. It could potentially slow down your site as it will use server resources, but it is a free option and does not require you to install anything that requires lots of knowledge. All the compressing is done in the background and all images are compressed losslessly. And, all new images will be compressed automatically.
NB To use all compression options including a more aggressive lossless compression you will need a commercial license
Other Compression Tools
Another options to use are graphics design program like Photoshop and save them as picking a certain level of quality. Affinity Photo, used by Imagewize at the moment is also a great design tool and a lot cheaper than Photoshop. Try them out. There are also other open source options out there of course for the Linux and open source lovers. Gimp and Inkscape come to mind and the latter I have used extensively and still do for SVGs.
Minification and Gzip Compression
If you are using vector based images such as svgs (.eps and .ai are also vector based but not supported on the web), and you should, you have to make sure the files are minified and compressed. SVG files are in XML format and all text based files can be minified removing whitespace. All these text based formats can be compressed very well using gzip/deflate as well. Gzip compression can also be used for raster images, but when you already compressed and scaled them properly gzip compression won’t help much anymore.
To minimize the SVGs you can use Gulp Imagemin as mentioned before or SVGO separately. Both tools help you to minimize the vector based Scalable Vector Images by removing elements such as empty tags and information that is not relevant for the web such as information specific for the program that was used to create it and so on.
To compress the vector images you can also use Gzip/Deflate both available for NGINX and Apache servers. Using their config files you can activate Gzip compression. This and the proper modules having been installed of course. We use Gzip Compression for all our client sites, mainly Apache, but more and more NGINX as well. And it works really well. For the gzip compression setup for Apache see our article here. For NGINX one can use something like:
gzip on; gzip_disable "msie6"; gzip_proxied any; gzip_types text/plain text/html text/xml text/css text/javascript application/json application/x-javascript application/xml application/xml+rss; include /etc/nginx/conf.d/*.conf; include /etc/nginx/sites-enabled/*;}
To learn more about Gzip compression in general you can read this article at Google Developer and quoting them:
GZIP is a generic compressor that can be applied to any stream of bytes: under the hood it remembers some of the previously seen content and attempts to find and replace duplicate data fragments in an efficient way – for the curious, great low-level explanation of GZIP.
Scaling
You need to scale images properly! Scaling images means serving them at the right size, at the right moment. Unfortunately many themes still display source images scaled smaller in certain locations instead of loading a different image of the same source. And that often means loading a larger image than necessary. It also means that the browser has to do work resizing the image so it is displayed as dictated by HTML or CSS. Don’t do this and server images in full. Don’t manipulate their size using HTML or CSS. If your premium theme does this contact the author and ask him to use different image sizes in the functions.php instead of scaling based on the same source image over and over again.
Good Reads
The Image Optimization Checklist by Google Developer is a a great checklist. It goes through the ins and outs of vector images, raster images, what compression is and how you can losslessly compress images so they do become smaller, but without loosing its quality.
