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.
A 16:9 aspect ratio full width image designed to span all available space.
This size is sometimes referred to as a ¼ height full width most often use at the top of a page or post.
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.
Standard 16×9 High Definition image.
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.
A modification of the full width image designed to be used to fill ½ of the available space.
A modification of the full width image designed to be used to fill ⅓ of the available space.
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.
This image has free lance dimensions.
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.
This is the site icon or favorite icon in either “png” or “ico” format.