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.
To measure the layout I used a Google Pixelbook which has a resolution of 2400×1600 pixels. This is a 6×4 aspect ratio.
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.
Width @ 960 pixels
|6×4||960×640 Classic Film|
|16×9||960×540 High Definition|
Height @ 1080 pixels
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 standard 4×3 image works well but many of the other aspect ratios are also choices. 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 background image
- The purpose of the background image is to add style the header when the site title and description is displayed. The suggested size for this image is 1165×100 pixels.
- 2. header logo image
- The logo is a 360×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 background image with the logo a full width presentation can be achieved. It should be noted the logo is dependant upon mobile and the devices your site supports. The 360 pixel image will accommodate most phones two generations old and newer. If the desire is to support older devices a 320 pixel image may be a better fit. If mobile is not a concern, a wider image will certainly work.
This is the site icon or favorite icon in either “png” or “ico” format.
A best practice is to compress images to improve performance.