Recommended Image Sizes

Sergei Eisenstein’s 120th Birthday Doodle

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.

 

Images needs to cover the intended space natively and images which serve a single purpose should share the same aspect ratio. Examples of a single purpose include galleries and slideshows. Common aspect ratios supported by Xidipity are included in the dictionary.

 

It is important to remember an aspect ratio may contain images of different sizes. For example a standard HD 1920×1080 image and a Quad HD image of 2560×1440 both share a 16:9 aspect ratio.

 

A best practice is to compress images to improve performance.

 

Full Width-1630×917

Design Notes

A 16:9 aspect ratio full width image designed to span all available space.

 

Banner-1630×229

Design Notes

This size is sometimes referred to as a ¼ height full width most often use at the top of a page or post.

 

Cinemascope-1630×699

Design Notes

This image size supports a 21:9 aspect ratio and is a carry over from the motion picture industry. A potential use case is slideshows.

 

HD-1920×1080

Design Notes

Standard 16×9 High Definition image.

 

Featured-1000×714

Design Notes

The featured image is a 7×5 aspect ratio image associated with a post and is displayed at the top of the front page summary. 

 

Half Width-800×450

Design Notes

A modification of the full width image designed to be used to fill ½ of the available space.

 

Third Width-512×288

Design Notes

A modification of the full width image designed to be used to fill ⅓ of the available space.

 

Sidebar 1024×731

Design Notes

The sidebar will accept images of any size, however just like a gallery the images should share the same aspect ratio. On Xidipity.com the images are a 7×5 aspect ratio with a width greater than 672 pixels.

 

Custom-dimension

Design Notes

This image has free lance dimensions. 

 

Header-2560×360

Design Notes

The header supports two images.

 

1. header background image
The purpose of the background image is to style the header when the site title and description is displayed. The image also displays behind the menu bar. It can also be used with the logo.
2. header logo image
The logo image is full width and will most likely be used when the site title and description are not displayed.

Icon-32×32

Design Notes

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