Websites inherently have plenty of images on them, and poorly optimized images can be one of the driving factors for slow site speed, which has a direct (negative) impact on SEO. Luckily, there are plenty of tools that can easily optimize images for better SEO on your website!
What does it mean to optimize images for the web?
There are two factors at play – the resolution of the photo itself, and the dimensions of the photo. Both of these things impact the overall size of the file (100 kb vs. 100 mb, for example) – and you guessed it, the larger the file, the slower the site.
These days even our iPhones produce photos that are way beyond the resolution and scale we need for a website. However, since Apple doesn’t know whether you’re blowing up that smoothie bowl photo to frame on your wall or use it in a blog post, they err on the side of caution. Therefore, every single photo you plan to put on your site should be optimized.
To optimize a photo for the web, you must reduce the resolution and also the scale (aka dimensions). This can get very complicated, and there are many articles that go in-depth on the different types of compression, etc. However, I’m going to highlight a few quick tips and tools I use.
As I said, most images on the web will never be viewed at a large scale, so they don’t need ridiculous resolution. Reducing the resolution to 150 ppi (pixels per inch) is generally fine. If it’s a really small image, maybe even go to 72 ppi.
I’m sure you’ve noticed that websites are pretty smart and they’ll resize a photo to fit the container it’s in – for example, the thumbnail for your blog post, the image behind a banner, or something else. But even though the image size is smaller, the original image is still there on your site… and if you upload an image that’s 3000 px (pixels) by 4000 px and it’s scaled to a 300 px by 300 px box, that’s a lot of extra pixels you don’t need. Granted, if the image is a thumbnail on one page and full-size on another, you don’t want to go making it too small – but if the image has a specific purpose and it’s small, scale the image down.
By reducing the resolution and scale of your image, you reduce the file size. I aim for 200-300 kb for the file size… definitely under 1 mb (and I’ll tell you why in a moment).
Before Uploading to Your Site
It’s a best practice to optimize your images BEFORE you upload them to your website. I do use plugins to optimize images once they’re uploaded too, but there are limitations there, which I’ll explain.
Here are some tools for optimizing your images before uploading them:
If you have Photoshop, you can use the “Save for Web” feature to optimize photos one by one or do them in bulk. It’s a little tricky to set up the bulk editing the first time, and this article is the best one I’ve found about it, but if you have a lot of photos you’re optimizing all at once, this could be a good solution for you.
Default Photo Editor on PC or Mac
These photo editing tools that ship with your computer are actually quite effective. You can open the image and find the settings for changing the image size and resolution, and adjust accordingly.
Have a lot of images to compress and don’t have/like the above tools? These websites allow you to upload the images in bulk and it will do the heavy lifting for you.
After Uploading to Your Site
I also then like to further optimize the images once I’ve uploaded them. This just helps reduce the file size even further and adds a few other compressions/optimizations that some of the above tools don’t have or are too complicated to implement (and who has time for that).
This free plugin will optimize all of your images in bulk or as you upload them. The free version will compress images up to 1 mb in size – larger images require a paid plan. Another cool feature of this plugin is that it will also highlight images on your site that are larger in dimensions than they need to be (i.e. the image container is 300×300 but the image is 1500×1500). You can then use this info to scale down the images in the WordPress image editor.
Similar to Smush, this will optimize your images once they’re uploaded. I like this better for dealing with images above 1 mb where you have a ton of photos to optimize at once. You can buy credits, rather than a subscription, to pay for just the images you need to compress.
WordPress Image Editor
Finally, you can also rescale images right in the media library while editing the image.
There you have it – a few tips and tools for optimizing images on your website. What’s your process for optimizing images on your website?