Badge Webflow Award Winner 2023

Website : Image sizes and formats to be respected

Published on 
3/2/2022
-
Amended on 
23/3/2023
Reading time: 5 min
Overview of image formats in Figma
Written by
Photo of Thibaut Legrand wearing a black t-shirt Digidop

Thibaut Legrand

Webflow Developer & SEO

Discover in this article, the ideal sizes, formats and dimensions of images to respect in order to optimize your website, your performance and more globally your online visibility!

Key points to remember

Resizing your images to the right size is important! Why adjust the size of your images? For several reasons:

  • The right size image is a quality image
  • A resized image is an SEO optimised image (because it is less heavy)
  • Images in the right format give your website better performance

SEO best practices recommend to : Resize, compress, rename, describe (alt text tag) and publish your image.

To do this, there are no-code tools such as Figma (create and resize your images) , Ilovimg (resize and compress your images) or even Canva (create and resize).

In this article, we will discuss the right sizes, dimensions or image formats to respect for your website.

1. Optimising images on a website

1. 1 Favicon: the ideal format?

A Favicon is a small image representing your site. It is placed in the search tab above the search bar. It is an icon that allows you to personalise your site. Google will resize your favicon to 16*16 pixels but you should not provide an icon of this size. Different image formats can be used (PNG, ICO, GIF, JPG, JPEG, etc.) and different dimensions from 32*32 pixels, 48*48 pixels, 96*96 pixels, 144*144 pixels, etc. For our part, we recommend that you use the 32*32 pixel format for your icon.

1.2 WebClip: the right size?

A WebClip is an Apple feature. It is a shortcut in the form of an icon to a website that can be inserted on the homepage of your IPhone. The recommended size for this icon is 256*256 pixels.

1.3 Images in blog posts

Most screens have a resolution of 1920*1080 pixels. This is why, in the first instance, it is strongly discouraged to add an image or other type of media file to your site that exceeds 1920 px in width. On the other hand, an image that takes up all the space on your screen is not necessarily a desired effect, at least in a blog post, so exceeding 1080 px in height.

For the images inside your blog post, try to resize them taking into account the width of your text content (For example for Digidop, we resize our images so that they do not exceed 1000px in width).

1.4 Open Graph Image

Theopen graph image is the image that will be displayed when you share the link (the URL) of one of the pages of your site. It is an image that creates engagement and encourages clicks. This image has a very specific format to respect. Thus, the size of your open graph image must be 1200*630 pixels.

1.5 Other images on your website

Just like the images in your blog posts, all the images on your site must be adapted to the content. In the development of your website, the developer will arrange places, precise blocks where to insert images. It is important that your images are the size of the block for good optimization.

For example, if on one of the pages of my site, a section includes a block of 700 X 500 px which must contain your image, it must correspond to this dimension.

More generally, you will need to check with your site developer to optimise your images to the right format for this part.

2. Optimising the images of a Google My Business (GMB) listing

2.1 GMB logo: how big?

The logo of a Google My Business listing is important for the user experience in local searches and therefore for local SEO. The recommended size for this type of image is 250*250 pixels.

2.2 The cover photo of the GMB sheet: what size?

The cover photo of your GMB business listing allows you to showcase (highlight) your business. The optimisation of this image is important to allow a good resolution, an adapted weight and a good quality to highlight your local business. The ideal format for this is 1080*608 pixels.

2.3 Optimising other GMB photos

To improve your local SEO, you can add a lot of photos and images to your business in the Google My Business listing. The ideal size for these images is 497*373 pixels.

3. Optimising the images on your YouTube channel

3.1 Optimal size: YouTube channel logo

The logo, the image of your YouTube channel is an important element. In order to optimize the rendering of this image or logo, it is recommended by Google to insert a JPG, GIF, BMP or PNG file (no animated GIF). The recommended size for this image is 800*800 pixels.

Note that the output will be a round or square image of 98 x 98 pixels.

3.2 Ideal size: YouTube channel banner

The banner of a YouTube channel is the second most important element for your branding. In order to comply with the recommendations and for the optimisation of this image, it is necessary to have an image of 2,560*1,440 pixels (format 16:9). The size of the media file should not exceed 6 MB.

3.3 Optimising the image: YouTube video thumbnail

Finally, with regard to YouTube, the last very important image format to respect is that of the video thumbnail. YouTube recommends using an image of 1280 x 720 pixels with a 16:9 ratio. The display will be optimised for all types of devices.

To go further, you can also discover how to optimize (even more) your images for SEO and web accessibility. Learn also how to convert your images in WEBP format in Webflow to have an even better performing website!

Flomodia by Digidop
Coudac project by Digidop
project Heka by DigidopFlaw by project DigidopMorfo project by Digidop