How to optimise images for web and SEO: A quick guide

In the internet’s infancy, there were no such things as images. Text was the way to go. Luckily, the internet has changed for the better. Today, we wouldn’t imagine designing a website without images. Images turn websites from boring, dull text into vivid and evocative experiences that complement or even enhance the text and overall website impression. And creating vivid digital images has become even easier with platforms such as Dall E built by OpenAI.

Different numbers exist, but the average website uses 40%-60% of its backend storage and visual space for images. That’s a lot, especially considering what all of us know by now: that nothing scares away potential visitors faster than slow loading websites. Additionally, Google has made clear that its algorithms that determine a page’s search position on Google consider page speed as a significant factor. This is why most websites have to walk a thin line between image quality and image size. On the one hand, we don’t want to compromise on image quality, while on the other, we need to keep image sizes down to preserve website performance.  

“Building a new website without optimising images is like buying a Ferrari and driving it with the handbrake activated. It will simply perform poorly.”

Keeping this in mind, there is a lot we can do to: 1) Ensure visitors do not have loading trouble when they enter our websites, and 2) Optimise our website’s performance on search engines. 

Elements of an image online

For images online, we need to see the bigger picture (no pun intended).  An image online is more than what’s displayed on your screen. A few hidden elements help search engines and CMSes make sense of any image on your website. The following ones are the most important: 

File-name. SEO professionals themselves don’t know for sure whether this affects SEO performance. However, it makes sense that Google considers it because it is one more element that helps it make sense of a website’s content. The file-name should therefore first and foremost describe what is in the picture. Second, it should include important keywords for the page the image is displayed on. Following this system of naming the file will also help any other team member working on the project to understand what the image is for. 

Do remember, 5d99fb0b6e7 b4802b40d8a corganisation’s%20skills.png is not a good image name. 

Alt-text. The web is for everyone. Therefore, alt-texts provide a description of what the image consists of for people who are not able to see. Additionally the alt-text is displayed in the placeholder of a picture if it can’t load properly. Google favours websites with alt-texts on ALL images as it believes the internet should be accessible to everyone.

That said, make sure you don’t keyword-stuff alt-tags in your images since the intention behind alt-texts has always been accessibility for disabled people. Alt-tags should best describe what the image is doing or representing.

Image description. Many CMSs give editors the opportunity to add an image description. Don’t waste it! The description serves both as an opportunity to make your images stand out among all the text surrounding it, and enables Google to make further sense of your content. Do note that you should only add image descriptions in pages that are content-heavy such as customer cases, blogs and other resources. In a landing or home page it would look stupid to have a description alongside every picture you have. 

File-format. Depending on what is in the image, different file formats are more or less suitable. The most common ones are JPG, JPEG, PNG and more recently WebP. We will tell you more about when to use which format below. 

Size. Size is perhaps the most important part of an image even though it’s not even seen anywhere. Why? Because it influences load speed significantly. The file size of the image you upload must be as small as possible. On the internet, size really matters!

How do you optimise images for web and SEO?

Short answer: It depends. “On what?” you are probably thinking? Below we have addressed the most common questions with regard to optimising your images for web. At the very end, you will find a six-step model you can follow to make sure you don’t miss anything important. 

What pictures should I use on the website?

Use any that you think fits your branding and overall style. It can be both images of people, landscapes or any other setting, or illustrations of any kind. The choice is up to you (or us if we are designing your new website). 

How do I frame and size images correctly? 

To frame images to the correct size, we use Figma, the collaborative design tool. There, you can simply create a frame in the size you want your picture in (in pixels) and drag or paste the picture into the frame. Typically for the web, your file dimensions should have a maximum width of 1440px. This is a very important step for photographic images as you would otherwise exceed size limits despite compressing the image file. 

If you are responsible for selecting images to use, we usually give you the size we need for different placeholders on the website. Then, to frame images to the right size you can use other tools such as Sketch or Adobe Suite (none of which we prefer though, hehe). 

Tip: Make sure to lock ratios on images so they don’t get squeeeeeeezed out in any direction.  

What should I think of when I export the image file? 

Our general advice to ensure you do not lose out on quality is to export the image from Figma in 2X size, or even 4X if it is an illustration. To keep things neat and tidy, create a folder structure where you have a folder for each landing page. Lastly, make sure to save the image with the correct file name and in the right format. 

What file format should I use?

It depends (as usual). For images that should not be transparent, go with the .JPG format. For illustrations or images that are supposed to be transparent, PNG is the best format. An alternative can also be a WebP file format, that provides superior lossless and lossy compression specifically for the web. And no, changing the file name at the end as .png or .jpg doesn’t automatically convert the image type. In Figma, you can simply choose PNG when you export frames. For other file formats there is usually a drop-down bar where you can choose the file format when you download the file. 

What is a good file name?

As we have mentioned earlier, a good file name is anything that accurately reflects what the image visualises! Some people use dash or underscore instead of space between words in the name to avoid messing up things when compressing the file, as some software removes spaces. 

What file size should I aim for? 

Every file should  occupy less than 150KB. Period. If you can’t achieve this, you’ll have to return to the drawing board (meaning Figma or your interface design tool for sizing and framing correctly). 

What image compression tools should I use? 

It depends on the type of image. If it's a JPG and contains photographic elements (photographic or photo realistic images), compress them using ImageOptim. But make sure you resize the image to a screen size before compressing it (fewer pixels). Otherwise if you compress a 10MB file you'll only go down to 2MB if you're lucky, but that's still way too high for an image on the web. Your aim is for the image to be less than 150KB.

If you have a PNG file type, you can use TinyPNG, a pretty nifty free tool that helps you easily compress PNGs directly from your browser. Keep in mind that exporting a photographic image that don't have any transparency as PNGs is not good practice. JPGs should work perfectly fine for those use cases. PNGs compress really well for illustrative artwork.

Is there a difference between compressing a photograph and an illustration? 

Yes! While photographs usually occupy as much as 10 MB on initial download, an illustration occupies way less space. Hence, different actions need to be taken depending on what kind of file it is.

How do I upload the image into the CMS?

For some CMSs such as Webflow, which we prefer to use, there is an editor mode. It is rather straightforward to both upload pictures into placeholders, and add them to blogs and other CMS items. In blogs, you can just paste them into the text boxes. For landing pages where we have created placeholders, you can simply press the placeholder to upload a file. 

What should I think of when uploading images into the CMS?

Make sure it is the right file (the compressed one) and it looks good on all devices. 

What image-text(s) should I edit after I have uploaded the images? 

After the images have been uploaded, make sure to edit the alt-texts on ALL of them. Simply describe what the image visualises and you should be good. Nothing more, nothing less. For images in blogs and other CMS-items you can add a description if you like. If you don’t have editor access, you still need to make sure the alt-texts are correct. Write them in a document and send them to the designer or developer. Then nag them until they are all updated. 

Wrap-up

To conclude, follow these six simple steps to optimise your images for web: 

‍

Step 1 - Select the pictures or illustrations you want to use.

Step 2 - Frame and size them correctly in an image-editor of your choice, such as Figma.

Step 3 - Export the file with the right size and name the file properly.

Step 4 - Run all images through an image-compression tool to size them below 150KB.

Step 5 -  Upload the image into the CMS.

Step 6 - Edit all necessary image-texts (alt-text, image description, etc.). 

And you are done! 

Happy optimisation!