If you’re publishing a lot of content, you’ll find yourself attaching images left and right. This opens up the possibility of publishing unoptimised images, which can have the following consequences:
And to top it off, the combination of the above could have a negative impact on SEO.
Everyone and their dog claim that images improve engagement. But if you do it wrong, you might end up with fewer conversions and less traffic – and not everybody talks about that.
Thankfully, it’s easy to avoid this grim outcome. Depending on your content management system, you could avoid these mistakes in just a few minutes.
Here’s how to optimise images for the Web, with the most impactful steps first. You should be able to do at least the first few without needing a web developer.
Even if you don’t know how to change it, online converters will do it for you in a few seconds. Here’s the rule of thumb:
“Use PNG for images without background, and JPEG for photos with background.” – Tomasz, our founder & Web Design lead
Interested in the details? More often than not, saving a photo as a PNG will result in a heavier file. Because PNGs support transparency, the files include additional data to display the “empty” pixels. Saving a picture from your camera as PNG will add a lot of useless information to your files, increasing their weight.A note on SVGs and WebP
Vector graphics represented by the SVG file format are a good alternative. These files use code to display lines and shapes. Because of that, they scale indefinitely without increasing the size of the file – the volume of code remains the same and your computer just renders it differently.
Using WebP, another format with support for transparency, is becoming more of a valid option. The only hurdle? It’s still something that often doesn’t work out of the box on many content management systems.
Plus, there are issues with Safari and certain MacOS versions. These only affect a few percent of the general population but it’s common for businesses to use MacOS with only partial support for WebP. If you’re in B2B, it might make life tricky for you.
This is a huge one. Some images can be shrunk from over 1 MB to just 100 kB in an image compressor. We already did something similar by saving your non-transparent PNGs as JPEG. To kick it up a notch, you can find web apps that compress images. We recommend setting the quality to around 70%, especially for JPEG.
JPEGs use lossy compression, meaning your quality will suffer. How much? Play around with some compressors to find out. The rule of thumb is to compress JPEG files to 70% quality. You’re unlikely to notice any drop in quality at this level. For less complex images, dropping it down further can work as well.
This one is a bit tricky but still manageable. To get the leanest files possible, you’d need to know the different display sizes of each image on your website. But let’s start with the simple things.
Currently, the most popular display resolutions are 1920px and 1366px wide. On top of that, images rarely take up the entire width of the screen. Other than background images, you’re unlikely to exceed 1080 pixels of width. Because of that, there’s no point uploading 4K pictures.
There is one reason for images larger than 1080px, and it’s connected to Retina devices. But to make it simple, you can settle for this rule of thumb:
“Use images that are 1080px wide. If it’s obvious that the image displays at a smaller resolution (and you know how to check what it is), use that – or eyeball it.” – Łukasz, our Web Developer
Would you like to see a guide on how to check the display size of the image? Let me know in the comments.
No matter what you hear from SEOs, file names and alt text are not for SEO purposes.
“When an image is crucial for the context of your page, give it a useful name and write alternative text describing the context it provides.” – Dawid, our Product Manager & SEO lead
For decorative images, you can (and should) skip this step. Just make sure that empty alternative text is properly implemented on your website. You’ll probably need a developer for that, but if your decorative image is missing alt text in the wrong way, screen readers will attempt reading the title. And this might not be the greatest experience for people using them. When the alt text is empty, screen readers skip the decorative images – that’s what we want to happen.
Images are a big performance factor and their impact is often misunderstood. Similarly, scripts can slow down your website and it’s often impossible to optimise the third-party ones. So how can you improve your performance with such a big limitation? There is an incredible resource that measured how various scripts affect loading times, which might help you choose alternative providers of the integrations you’re using.
Originally published Jun 01, 2023 2:54:59 PM, updated June 2 2023.