Recommended Image Sizes

Xidipity post/page titled "Recommended Image Sizes" header image

½×

Getting images right goes a long way in creating a great web experience but it is never as easy as it sounds. Web designers are challenged by trying to satisfy the needs of high definition devices while keeping the mobile experience snappy.

 

In some respects images are like paint and by that I mean for the best result they should natively cover the space where they are placed. Everyone has experienced seeing an image which looks grainy. The most likely reason for this is the image was stretched to fill the available space.

 

The rule of thumb is – an image can be too big but it can’t be too small.

 

From a design perspective, the next important item to consider is aspect ratio. Simply put, aspect ratio is the relationship of width to height. The best practice is to group images to their purpose and use images assigned to a purpose which should share the same aspect ratio.

 

An example of an image group is the blog post featured image. An image with a 4×3 aspect ratio works well but this not the only choice.

 

measurements

 

Page With Sidebar

The width of the content area on a page with a sidebar is 865 pixels. An image which will be used full width should be at least 865 pixels wide. 

 

Page Without Sidebar

The width of the content area of a page without the sidebar is 1165 pixels. An image which will be used full width should be at least 1165 pixels wide. 

 

Sidebar

The width of the content area of the sidebar is 221 pixels. An image which will be used full width should be at least 221 pixels wide. 

 

In those cases where the images will be responsive, always consider an image which satisfies the largest scenario. 

 

aspect ratios

 

In most cases I use Google Drawing to prepare images. It supports the standard 4×3, widescreen 16×9, widescreen 16×10, and custom sizes. On my laptop, the standard aspect ratios are a width of 960 pixels. For example, a standard 4×3 canvas is 960×720 pixels. For pages with sidebars, featured images, and even sidebar images this works. For pages without sidebars, I have to manually set the dimensions of the page.

 

1
width @ 960 pixels

 

Aspect Ratio Dimensions
1×1 960×960
4×3 960×720
6×4 960×640 Classic Film
7×5 960×686
16×10 960×600
16×9 960×540 High Definition
21×9 960×411 Cinemascope 
Custom As needed

 

2
height @ 1080 pixels

 

For those who are drawn to a standard 16×9 HD image, the following are dimensions locked to a 1080 height.

Aspect Ratio Dimensions
1×1 1080×1080
4×3 1440×1080
6×4 1620×1080 Classic Film
7×5 1512×1080
16×10 1728×1080
16×9 1920×1080 High Definition
21×9 2523×1080 Cinemascope 
Custom As needed

 

use cases

 

Featured Image

The suggested dimensions of the featured image are 960x720px which is a 4×3 aspect ratio. This image is displayed on the blog summary page.

 

Gallery Image

Unless noted otherwise, all aspect ratios are choices.

 

Page Header Image

This is where it can get interesting. Page banners can range from thin one quarter high to full size images.

 

Two Column Image 

All aspect ratios are supported.

 

Site Header

The site header supports two images.

 

1. header image
The purpose is to add style the entire header area with a logo image when the site title and description is not displayed or a background image to be used when the site title and description is displayed. The suggested size for this image is 1165×100 pixels.
2. site identity logo image
The logo is a 425×100 pixel image which can be displayed left, center, or right. This is configured by editing the “title-align” align variable located in the blog-var.css file. The default is “center”.  If you combine the header image with the logo to create a blended presentation. It should be noted the logo will be the dominant displayed on mobile. The 425 pixel image will accommodate most phones two generations old or newer. If the desire is to support older devices a 320 pixel image may be a better fit.

 

Icon-32×32

This is the site icon or favorite icon in either “png” or “ico” format.

 

Performance

A best practice is to compress images to improve performance.