So I was reading a post over on the Bookworks blog where Carla King explains how to correctly size images before uploading to your site, but I have a problem with it. (A lot of my technical how to blog posts start that way.)
While her post is factually correct, it doesn't really solve the real problem. King explains how to correctly upload your next image, when the real problem is how to fix all the images we uploaded before we knew better (I include myself in that group, yes).
If there is one thing that I see on almost every website, it's images that are way too big for the space they've been stuck in. It might be that the theme automatically grabbed the full-sized image and put it somewhere the image is ten times bigger than required, or maybe a user had a good reason to use an over-sized image in a blog post.
Or, the developer who built the site forgot to check image sizes when building a page and used an image that was larger than it had to be. (Sometimes when we're trying to make a page look good, we forget to also make sure it works well).
In any case, image sizing is a huge issue in web design and maintenance. It even has a title: Image Optimization.
This is basically a fancy way of saying "fixing the images on a site", but the simple truth is that this problem is so common that experts have devoted lots of time and energy to automating the work required to solve it. They then released (or more often, licensed) their work so that everyone could use it.
If you have a WordPress site, you don't have to spend a lot of time fixing each image before you upload it to your site; instead, you can (mostly) solve the image size problem simply by installing a couple plugins (or have me do it for you). These plugins will fix the images you already uploaded, and make sure your future image uploads are no larger than they have to be.
There are many WordPress plugins that can solve the image optimization problem; I have tried bunches over the years, and I currently use two plugins on my sites. The first plugin prevents future image size problems, and the second fixes the many past mistakes I have made over the past ten years of blogging.
I use a service called Shortpixel. It has two plugins that help me in this area.
The Image Optimizer plugin helps by reducing an image's file size as small as possible without compromising quality, and the Adaptive Images plugin helps by making sure that when a visitor loads a page, the images shown to the visitor are exactly as large as they are supposed to be.
You'll need to install and activate the plugins,. Once you do that you will be prompted to register for an account with Shortpixel.
If you give them your email, you can get a free account without any hassle. (While they will prompt you to upgrade to a paid account, the free account is all you need right now - and for some users, it is all you will ever need.)
Once you have a Shortpixel account, you'll need to configure the plugins.
For the Adaptive Images plugin, go into its settings menu and check the boxes next to Webp support and "Fade-in effect". Then select the "Lossless" compression option, and click the save button.
The Image Optimizer plugin is a little more complex; it has several settings menus, and a menu under the media library where you can tell the plugin to optimize all your images.
You can see my settings in the screenshots below:
Some of the settings you should use include:
- Remove EXIF (this strips the metadata from your images, saving you from having to make sure you deleted the GPS data)
- Convert PNG images to JPEG (the latter have smaller file sizes than the former than the former, which is why you should usually choose JPG over PNG)
- Optimize PDFs (this can reduce PDF file sizes)
- Optimize media on upload (this automatically fixes any images you upload in the future)
- Optimize other thumbs (this tells the plugin to look for images elsewhere on your site, and fix them too)
And finally, under "Compression type" be choose to select "Lossless".
This plugin has three choices here because Shortpixel wanted to give you the option for trading image quality for file size. The option I usually choose ("Glossy") is a compromise between efficiency at compressing an image's file size while at the same time only having a minimal impact on an image's quality. The third option, "Lossy", has the smallest file sizes but also the greatest potential for damaging the quality of the image.
I am having you choose the "Lossless" option because while it is the least effective at compressing images, it is also the least likely to harm your images. Plus, if you decide opt for Glossy or Lossy later.
Once you have all this set, be sure to click the blue save button.
Once you have done that, I want you to go to the "Bulk Shortpixel" menu. Scroll up the admin menu page, find the "Media" option in the menu on the left, and hover your mouse over it. Select the "Bulk Shortpixel" option.
This will take you to the menu where you can tell Shortpixel to optimize all the images you have uploaded. Read the warnings, and then click the "Start Optimization" button.
*goes and gets a drink of water*
Okay, if you're on the free plan then you've probably run out of credits in just a few minutes. (This is not necessarily a bad thing.) Shortpixel is probably nagging you to buy a paid plan, but you should not do that just yet. What you should do instead is ask how many images you use on your site each month, and how much you want to pay to optimize the images.
You have three options: stay with the free plan, buy a monthly subscription, or buy one-time use credits.
Here's the thing:
- In my experience over half the people who are reading this will have their needs met by the free plan. You don't use many images every month, so if you are patient you can optimize a few every month and wait for the problem to solve itself.
- Almost everyone else will want to buy one-time use credits so they can take care of their existing uploads, and then use the free plan to handle new uploads.
- And then there's the small handful of bloggers who have thousands of images to optimize. This third group should get a monthly subscription, or, if you are both patient and cheap, you can wait until Shortpixel goes on sale.
About twice a year Appsumo has a lifetime license to Shortpixel on sale. Pay a flat price and you will be able to convert, say, 12,000 images every month. This is the option I choose, and now, six months after I started, I have optimized all of the images on my blog.
Now I plan to offer this as a service to anyone who is interested.