Website: Image Sizes and Formats to Follow

Documentation
March 20, 2023
3 min
Preview of image formats in Figma
Key points

Resizing your images to the correct format is essential! Why adjust the size of your images? For several reasons:

  • A properly sized image is a quality image
  • A resized image is optimized for SEO (as it is less heavy)
  • Images in the correct formats allow for better performance on your website

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

To do this, there are no-code tools like Figma (for creating and resizing your images), Ilovimg (for resizing and compressing your images), or even Canva (for creation and resizing).

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

1. Optimizing Images for a Website

1.1 Favicon: The Ideal Format?

A favicon is a small image representing your site. It appears in the tab of the browser above the search bar. This icon helps to personalize your site. Google will resize your favicon to 16*16 pixels, but it is crucial not to provide an icon of that exact dimension. Various image formats can be used (PNG, ICO, GIF, JPG, JPEG, etc.) and different dimensions starting from 32*32 pixels, 48*48 pixels, 96*96 pixels, 144*144 pixels, etc. We recommend using the 32*32 pixels format for your icon.

1.2 WebClip: The Ideal Size?

A WebClip is an Apple feature. It serves as a shortcut in the form of an icon to a website that can be placed on the homepage of your iPhone. The recommended dimension for this icon is 256*256 pixels.

1.3 Images in Blog Articles

Most screens have a resolution of 1920*1080 pixels. Therefore, initially, it is strongly advised not to add an image or any other type of media file on your site that exceeds 1920 px in width. On the other hand, an image that takes up the entire space on your screen is not necessarily a desired effect, especially in a blog article, so avoid exceeding 1080 px in height.

For images within your blog article, try to resize them considering the width of the text container (For example, at Digidop, we resize our images so they do not exceed 1000px in width).

1.4 Open Graph Image

The open graph image is the image that will display when you share the link (URL) of one of your site's pages. It is an image that generates engagement and encourages clicks. This image has a specific format that must be followed. Thus, the dimension of your open graph image should be 1200*630 pixels.

1.5 Other Images on Your Website

Like the images in your blog articles, all images on your site should be adapted based on the container. During the development of your website, the developer will have specific places or blocks for inserting images. It is important that your images match the size of the block for optimal performance.

For example, if one of the pages of my site has a section comprising a block of 700 X 500 px that is meant to contain your image, it should match that dimension.

More broadly, you should consult with your website developer to ensure your images are optimally formatted for this aspect.

2. Optimizing Images for a Google My Business (GMB) Listing

2.1 Logo for the GMB Listing: What Size?

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

2.2 Cover Photo for the GMB Listing: What Dimension?

The cover photo of your GMB listing serves to showcase (highlight) your establishment. Optimizing this image is important to ensure good resolution, appropriate file size, and quality to promote your local business. The ideal format is 1080*608 pixels.

2.3 Optimizing Other GMB Photos

To enhance your local SEO, you can add a variety of photos and images to your establishment in your Google My Business listing. The ideal format for these images is 497*373 pixels.

3. Optimizing Images for Your YouTube Channel

3.1 Optimal Size: YouTube Channel Logo

The logo, or image of your YouTube channel, is an important element. To optimize the appearance of this image or logo, Google recommends inserting a JPG, GIF, BMP, or PNG file (no animated GIFs). The recommended size for this image is 800*800 pixels.

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

3.2 Ideal Dimensions: YouTube Channel Banner

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

3.3 Optimizing the Image: YouTube Video Thumbnail

Finally, regarding YouTube, the last crucial image format to adhere to is that of the video thumbnail. YouTube recommends using an image of 1280 x 720 pixels while maintaining a 16:9 ratio. The display will be optimized for all types of devices.

For further information, you can also discover how to optimize (even more) your images for SEO and web accessibility. Also learn how to convert your images into WEBP format in Webflow to create an even more efficient website!

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Suggested articles

Webflow Localization, Credial's Use Case
Documentation
Webflow

Webflow Localization: Practical Guide & Credial's Use Case

Webflow Localization: Practical Guide & Credial's Use Case
Visuel showcasing digidop.fr switching to digidop.com
News
Digidop

Digidop.fr is now Digidop.com

Digidop.fr is now Digidop.com
Photo of the Digidop team with the Digidop Logo 2024
News
Digidop

A Look Back at an Exceptional 2024 and Vision 2025

A Look Back at an Exceptional 2024 and Vision 2025

Want to turn your website into your most valuable asset?

Contact us today