Skip to main content
Dimensions of images on websitesAnete Lūsiņa on Unsplash

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

Graphic representation of different aspect ratios of images: 16:9, 3:2, 1:1, 4:3, 1.91:1

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


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

Graphic representation of the ratio for Favicon 1:1

Logo (in the website header)

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

Graphic representation of the proportions for the Logo 3:2


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

Graphic representation of aspect ratio for Hero image 16:9

Or ½ height of Hero image

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

Graphic representation of proportions for 1/2 Hero image


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.

Graphic representation of proportions for images in posts and page content


Useful Adobe app for resizing images:

Andrzej Dąbrowski

Andrzej Dąbrowski

UI Designer & Junior Frontend Developer