Over the last few weeks, we have been working on optimizing images on our site. This is a daunting task for even a small site like ours, but it must be done from time to time to keep your page speed up to par, and to force you to relook at all of your media files. Now that we are finally done, I thought that the knowledge that we learned for our 360-product photography studio’s site could help others with the same problem.
How do we increase our PageSpeed score by optimizing images?
The problem is pretty simple, we had a Google PageSpeed insights score of 27 out of 100 when we started. Now, that is not good. In fact, that is bad, but we are a photography studio, and we have lots of images on our pages. On top of this, we have these great 360 product photography views that need to load as well.
How are we going to increase our PageSpeed score?
The first part of fixing these issues is we started with the simple things first and moved on from there. SO, we went into Total Cache and tweaked our settings a little bit to combine our JavaScript files as well as our CSS files. This brought us up to a 35. We then found a major issue with our CDN and the way that we implemented the CDN on the site. After a couple more tweaks here and there, we got to a score that was over 50. We are getting there, but the images and the 360 views were still the outstanding issue. Well that along with the “serve images in next-gen format” error, that to this day, we have not gotten rid of.
So on to the pile of images. How do we deal with all those images in the media library? And this media library has been going since 2014. Now I had to do some digging to find a better answer on this issue. So off to Google I went. After a bit of reading, I came back with a plan for the team, and we started testing out some of the available WordPress Plugins for optimizing images. Little did we know that there are over 150 options out there. I we really wanted was a plugin that would compress all our images, and maybe, just maybe fix that Next-Gen issue at the same time.
We tried a few, we deleted a few, and we settled on one in the end. Keep in mind our goal was to do this without having a cost involved. The whole purpose of this process was to work down the free path of these plugins. If you are wanting a paid path, the results may be different.
The tools that can be used to optimize images
-
Smush
Smush came up top on the list, and so we tried this one out first. It seemed like it would do the part, and we added it up on the site. After changing settings for lazy load and re-sizing, we started in on compression. We found out really quick that this was not going to be the option for us. We could not process all our images as some were above the 1mb limit on the free version and to top that off, their paid version compresses a little bit better than their free version.
-
Autoptimize
This was the next plugin we reviewed. Looked good, and they said the following about their plugin. Autoptimize makes optimizing your site really easy. It can aggregate, minify and cache scripts and styles, injects CSS in the page head by default but can also inline critical CSS and defer the aggregated full CSS, moves and defers scripts to the footer and minifies HTML. You can optimize and lazy-load images (with support for WebP and AVIF formats), optimize Google Fonts, async non-aggregated JavaScript, remove WordPress core emoji cruft and more. As such it can improve your site’s performance even when already on HTTP/2! There is extensive API available to enable you to tailor Autoptimize to each and every site’s specific needs.
It had just a little too much overlap to some of our existing plugins and we didn’t want to muddy the water.
-
Short Pixel
We heard great things about this plugin and thought that it might do the trick. So off we go to add it to the site. Little did we know that it just wasn’t what we were looking for.
Increase your website’s SEO ranking, number of visitors and ultimately your sales by optimizing any image or PDF document on your website.
ShortPixel is an easy to use, lightweight, install-and-forget-about-it image optimization plugin that can compress all your past images and PDF documents with a single click. New images are automatically resized/rescaled and optimized on the fly, in the background. It’s also compatible with any gallery, slider or e-commerce plugin. -
Compress JPEG and PNG Images
This plugin looked great and would be great for a site that was just starting out, but it is limited to 100 images a month and connects to an account to do the compression.
-
Imsanity
OK, here is a simple little plugin that just works on images and stays out of other lanes. It is great if you have contributors that do not understand images sizes and are sending large images up to your WordPress site. It looks like it would be great at optimizing images, but it really does the stuff that we already do before we send out or images to the site.
-
Optimus
This was our final selection for our optimizing our images. It stays in its own lane and just works on images; it recompresses all your existing images. Now, it does them in a batch process that we had to restart a few times to work through all our images, but it did do them. Now that it is installed, and we are adding new posts, we do see a delay in the time it takes to add images to the media library, but that is a small price to pay for smaller images.
How the process worked out in the end.
Once we completed the image compression process, we also added click to play on some of the additional 360 views on the pages and now are score for the front page as of writing this post is 87 out of 100. Not perfect, but much better than when we started. Will our selection be the best for you, that is hard to tell, but it was the best selection for our situation.
About the author
Matt Smith, 360 Photographer at PhotoSpherix
I enjoy photography, woodworking, playing with technology, and enjoying time with the family.
Matt is not just a photographer at PhotoSpherix, he is also the founder. Starting in 1998, he was at the forefront of many of the technologies that we at PhotoSpherix take for granted every day. He built his first rotator with parts leftover in a machine shop and has not looked back since. As of late, he has been working with Rasberry PI and Arduino’s to take a little of the load off of day to day work at the studio.
After work, he enjoys creating things in his workshop or at his sawmill. As his children get older, he spends more time going back and forth driving them to school.
When asked what he will do next, his answer always is, “One day I think I will go sell hotdogs on the beach!”.
