Recommended image dimensions for websites

Anyone involved in designing websites (or having contact with them) knows how important it is to choose the right dimensions for images or graphics used on the site.

Using the appropriate formats (dimensions) can also be crucial for how content is perceived by visitors to our website. Therefore, it is essential to determine the image proportions (ratio) for various parts of the website, taking into account the function and significance of the graphics.

The following recommendations are just an introduction to the broad topic of images and graphics on websites.

1. Basic recommendations influencing the use and functionality of images depending on their proportions (ratio):

• 1:1 (square) – most commonly used in dimensions of 1080 x 1080 pixels. Therefore, it is perfect for images in text, sidebar ads, or Instagram posts.
• 16:9 (panoramic) – a very popular proportion for the so-called “Hero image.” It is an image that usually appears across the entire width at the top of the page and is also used in presentations. The most popular dimension is 1920 x 1080 (or proportionally larger or smaller, depending on the need).
• 3:2 (rectangle) – very popular in print and smartphone applications. Its typical dimension is 1080×720 pixels.
• 4:3 (rectangle) – it is similar to the 3:2 aspect ratio, so it was often used in the era before widescreen displays. It is most commonly used in dimensions of 640 x 480 pixels.
• 1.91:1 – widely used in social media. It is also very popular as an image on blogs and website content. The recommended width starts at 1080 pixels.
  Graphic representation of different image proportions: 16:9, 3:2, 1:1, 4:3, 1.91:1

2. A brief guide with divisions based on image functionality (most popular):

Favicons

Proportions (ratio): 1:1
Most popular pixel dimensions: 16 x 16 or 32 x 32

Logo (in the website header)

Proportions: 3:2 or 1:1
Most popular pixel dimensions: 250 x 100 or 160 x 160

Hero image (appearing at the “top” of the page)

Proportions: 16:9 (full-width screen image)
Pixel dimensions (depending on screen resolution): 1920 x 1080, 1366 x 768, 1536 x 864, 1440 x 900, 1280 x 720, 1600 x 900

Or ½ height of Hero image

Popular as a background or banner spanning the full width of the page.
Pixel dimensions: 1920 x 540

Hero image on mobile devices

Recommended proportions (depending on the project): 4:5, 1:1, or 1.91:1
Dimensions (according to the proportions mentioned above): 1080 x 1350, 1080 x 1080, 1080 x 680

Blog and “content” images(appearing in text on the website)

Most popular proportions: 1.91:1, 3:2, 4:3, 1:1
Most popular dimensions: Depending on the website’s UX design, diversity is allowed. It’s important to maintain the appropriate image proportions.

Useful Adobe app for resizing images:
https://www.adobe.com/express/feature/image/resize