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.
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.
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.
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.
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.
|6×4||960×640 Classic Film|
|16×9||960×540 High Definition|
For those who are drawn to a standard 16×9 HD image, the following are dimensions locked to a 1080 height.
|6×4||1620×1080 Classic Film|
|16×9||1920×1080 High Definition|
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.
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.
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.
This is the site icon or favorite icon in either “png” or “ico” format.
A best practice is to compress images to improve performance.