One of the common causes for slow websites are huge image file sizes. This negatively impacts your user experience and can also negatively impact your SEO. Most people will leave your website if it takes longer than 3 seconds to load according to Google’s Consumer Insights.
So here’s an article with recommendations on how we recommend optimizing your image file sizes for your website!
Choosing the right image format
Most websites can make use of the WebP format nowadays and all common browsers show these images as well. The reason WebP is so great is that the file sizes are a lot smaller than a JPG or PNG. So we definitely recommend using WebP where possible! (Sorry Squarespace users, WebP is not availabe to you yet! But you can still resize regular JPG and PNG files with the instructions below.)
A great free tool that we use to transform images to webp is Shortpixel, but of course you can use any tool you like. The principles remain the same.
Use Shortpixel to transform your files to WebP
What I’m sharing in in this section is the free online image resizing, but there’s also an option for WordPress users to use a plugin to optimize the entire website.
First go to the free online image compression tool.
There you click on “Settings” with the gear icon.
Next you make sure to click on the button next to “Generate WebP”.
Image compression before uploading your images
Making your image file sizes is as small as possible before you upload them to your website is the way to go! That way less computing power is needed. In case of ShortPixel, they offer: Lossy, Glossy or Lossless compression.
I personally find that the “lossy setting” creates images that are too unsharp. But when using “lossless”, you almost don’t compress the image at all, so we recommend “Glossy”.
Click on the “Glossy” button if it isn’t selected yet.
Image width and height in pixels
Often when downloading a stock image or when receiving images from photographers, the pixel sizes are huge, because you’d be able to print these photos on a larger scale. However this is unneccesary on your website!
That said, a banner image ideally is bigger than f.e. a small portrait photo or a blog image. Here are a couple of guidelines that we usually start from, but that you can test/adjust if you find the image quality is lacking.
- Full bleed banner image (so takes up the width of the entire screen): 1500-2000 px wide
- Regular image on blog/page: 1000-1500px on the long side (for example, my blog images here are 1200 wide)
- Icons and small embellishments: 300 px
Here’s where to choose the pixel size in Shortpixel:
If you don’t fill out the pixel size, the original size remains in place.
Now you’ve entered all the settings, you can drop the files in to compress and resize them!
Export your images from ShortPixel
You can choose to export all your images at once by clicking on the red download button (a logged-in account is needed). Keep in mind that ShortPixel always shares both WebP and JPG (or PNG) images when downloading all.
Another option if you only want to quickly download one image is to click on the arrow below an image and select WebP. No logged-in account is needed for this option.
But what if my website is already full of big image files?
This again depends on the platform that you’re using. But for WordPress, ShortPixel has a free plugin. It does become a paid plugin when you go over a certain number of images, but the nice part is that you can pay once and they’re not expensive. So it’s not needed to get a subscription.
Here’s how to install the plugin! (Make sure you get the right one, they all look similar)
Find the plugins section on the left side of your wordpress menu and next click on “Add New Plugin” at the top.
When typing in ShortPixel to search for the plugin at the upper right corner, many options will appear. make sure you get the “ShortPixel Image Optimizer” plugin and click on “Install Now”.
Once the plugin is installed, you get the option to activate it with this button.
Enter your information as a new customer and continue. This registration is in place so if you decide to purchase credits, they’re connected to your email address and information.
After submitting your email, the next screen you get is an overview screen. Before you start optimizing all images on your site, you want to check the settings under “Image Optimization” and “WebP/AVIG & CDN”.
ShortPixel plugin image optimization setting
Similarly to the settings in the online tool, choose for “Glossy” at the top (standard setting for the plugin).
Next you want to check all the boxes for optimization under the “What to Optimize” section. (If you’re not sure what something means, the help icons explain in detail what each section is for!). As far as converting PNG images to JPEG, keep in mind that if you have PNG images with transparency (for instance a transparent background), this will convert the transparent values to white. So you’ll lose the transparency effect. If this is not something you want, don’t convert to JPEG. WebP does support transparency when converting from PNG, so this is another reason to use this optimized format.
For PDF files, I personally keep mine out of the search results, so I’m not concerned about the load speed, but if yours are public, you can choose to check that box.
On the next page, you can remove the EXIF data, unless you feel strongly about keeping the location and metadata (if you have any) in your images. There’s a debate amongst SEO’s about the impact of EXIF data on SEO. f.e. if you’re a local photographer, it might be interesting to keep these data versus if you’re using stock photos and photos that don’t have location data, remove the EXIF.
In my opinion, the file name and alt tag will have a much bigger impact. But more about that in a future blog post!
ShortPixel plugin WebP generating
This section is to convert your existing images to WebP format. It’s also possible to use AVIF (even smaller than WebP) but at the time I’m writing this article, AVIF is still too new and not recognized by several systems. WebP is still a safer option.
If you only click on “Create WebP Images”, they only get created in your media library, but are not embedded on your website’s pages yet. So you’d have to go in manually to change that. That’s why in my example I opted to also click on “Serve WebP images from locally hosted files”.
ShortPixel does a good job at explaining what every item does. In my example, we added “without altering the page code”, because our host allows .htaccess, but maybe yours is different. So here you can test what works best for you.
After this step, it’s time to process your images!
ShortPixel plugin bulk processing
Start by clicking on the “Save and Go to Bulk Process” button. (It’s visible at the bottom of most pages! But the example shows it on the last page we discussed)
Click on the media library (where all your images files are stored) and click on “also create WebP versions of the images. Next click on Calculate.
In my example, because I only have a couple of images, I only need 23 credtis. (each image requires multiple credits because it gets created in multiple sizes for f.e. thumbnails etc.)
If you need to purchase extra credits, click on the “buy unlimited credits” button, but keep an eye out for a one time credit purchase! (In my opinion a one time purchase is always cheaper than monthly packages that are not needed, because once the images are optimized, they remain optimized)
Next this window will show the progress. In my example with only a few images, this goes quickly. But if you have a website that gathered photos for years, this process can take a while. You can keep running it in the backend or pause and return later.
Once everything is finished, you can click on the “Finish Bulk Process” button and you’re done!
Quick recap and what’s next
In this article we’ve discussed best practices for image file sizes.
- Use WebP if it’s an option
- Choose your pixel size according to the image use
- Choose a Glossy Compression (or equivalent in other compression tools)
Now the only thing left to do is rename your image files (yes, Google reads file names!) and upload them to your website.
If you have questions or need a hand with your files, reach out to us!
