How to insert images to Webflow CMS and keep the SEO performance high

Related articles:

• How to Make Finsweet CMS Slider and CMS Tabs Work on Nested Collections

‍

Hey! Webflowers,

‍
I wanted to create this tutorial to show you what’s the best way to add images to your Webflow project. Since I'm also writing this article for my clients, who, in many cases, have limited experience with design tools, I can now refer them to this blog when I get this question.

Why does sizing matter?

Before we jump into why sizing matters, and how to insert images on Webflow, I want to present a few points as to why this is so important.

‍

Google creates an error for each wrong dimension.

Yes, dear readers, this is the reason why your images sometimes never look right. Let me show you an example:

Example problem: Your website has an image size of 500x500 pixel ratio. However, the image you have is an image from your product shooting. Your photographer handled it in the highest resolution (for example, 8 000 px width). Google does not recognize this, and this is why it gives you (your website) a lower score.

‍

The size of the image is enormous.

What happens to a website when the image resolution size uploaded is too large. If you receive your digital images from your photographer, the size may be between 10 to 25 MB.  Here at Karpi Design Studio, we use a maximum of 500 kB for the websites, in some cases, we can make an image that’s around 60 kB in size work. 

But here’s the deal, uploading big size images will result in a slower load, and Google will lower the score of your website.

‍

How to prepare the images

‍

Use proper dimensions

As we have seen, using proper dimensions is crucial. You can use any other photo editing software, or you can use the online picture editing tool picresize.com. It lets you easily edit your images for free

1. Upload the image to your photo editing software (here we used picresize)
2. Select continue to edit picture
3. On the “Resize Your Picture; Select a new size for your picture,” choose the option custom size
4. Add the width (as in our example above, 500 px), but do not add the height. The height will be sized automatically on Webflow
5. On the “Choose Special Effect” option, choose None
6. Before choosing to save on the “Save as” follow these guidelines for best  image size and quality result (this is the tricky part many are not aware). Remember this simple rule: Is the background transparent? If yes, then use PNG; If not, then use JPG.
7. JPG quality is best.

‍

‍

Convert the best format

Since November 2022 Webflow supports WebP format. For such is great to download the images from picresize and upload it to Convertio.

Compressing images

Some tools seamlessly compress the images., and one I like to use is called, TinyPNG. Tiny will compress the image without lowering the quality. It compress PNG and JPG.

‍

Combining the Pic resize, Convertio and TinyPNG, can reduce the size of images from 25 MB to a few hundred Kb, this gives quality optimized image resolution that creates a nice user experience, while retaining a high SEO.

‍

I hope you found the tutorial helpful. Good luck. And let me know how it goes.

‍

Karpi out!

‍