Image size

What image size should I use on my site?

If you're looking to add images to your site, there are a few things you should bear in mind. What size should your images be?

Sadly, there is no hard and fast answer to this question, it's really down to you.

What we do have is some information about how the editor publishes images and some guidelines which might help you decide.

Ratio

Image ratio is the width vs height and is usually expressed with 2 numbers, like so 16:9 or 4:3 - these numbers remain the same regardless of the pixel width, but mean that as the width of the image increases, the height of the image increases relative to the ratio numbers.

As a simplified example, a 4:3 image could be 40px wide and 30px high, but could also be 80px wide and 60px high. Both dimensions conform to the 4:3 ratio.

The ratio you decide to use is up to you. There are a few commonly known ratios - the regular 4:3 ratio from old-school television sets. The more modern 16:9 ratio which is now more common for monitors and widescreen films. There is also 1:1.618 which is often referred to as the Golden Ratio, since there is a belief that it exists in many natural things, and is the most beautiful to look at.

Personally, I tend to stick to 16:9 - it means my images are never too tall compared to their width, and the widescreen element feels more comfortable on the web (to me anyway).

The benefit to picking one ratio for images (especially if they're being used inline on the page, and not just as backgrounds) is consistency and when used inline on adjacent columns, they will keep the image height matched, so you don't need to worry about mis-aligned column heights too much.

The editor has an in-built image editor, which you can also use to crop your images to a few selected ratios: 1:1 (square) 4:3 and 16:9.

Dimensions

This is partly determined by the editor, but mostly down to your personal preference.

We recommend using images no wider than 2600px. This is because larger resolution file-sizes will be inappropriate for the web, and also because any image larger than this width will be re-sized to a maximum of 2600px when we publish the site anyway.

When you publish a site the process involves viewing the site at 3 different viewport widths: 2560px, 1199px and 767px - we check the image sizes in all three of these viewports.

The mobile images are saved out at the size they appear in the viewport. The tablet and desktop sites are compared and whichever instance has the larger image is used to save a second version of the image from the relevant viewport.

So the final site is published with 2 versions of every image - a desktop/tablet version and a mobile version.

With this in mind, it's worth keeping your images to a maximum of 2600px wide, and should you be using smaller images as call-outs or inline within the copy you may wish to lower the width to account for this.

File size

This is closely linked to dimensions, since the larger the width and height, the larger the file-size.

That said, it's also possible to compress images for the web with tools like Photoshop.

When we export images, we don't do any compression, we just re-size and re-save - so the image file size may be smaller, but only because there are less pixels within it (and therefore less information in the file).

The exception to this is images that are over 2600px - they will be re-sized and some compression may be added to the image when it's saved.

You will likely need to decide on a trade-off between file-size and image resolution - you will want the image big enough to look nice on larger screens, but also small enough to load quickly and not provide too heavy a site.

0 0
Feed