Image sizes and formats

Unsure about image sizes on your website?
We’ll look at why sizing your images for your website is important.

What we are aiming for:

  1. Resize
  2. Name correctly and save in the appropriate format
  3. Compress
  4. Upload
  5. Fill in Alt text in your image library

First, a little about images:

  • They are made up of pixels and each pixel has a colour
  • The more pixels there are, the bigger the image
  • Images with pixels are often called Raster images which are resolution dependent. The bigger you make them, the worse they start to look, which is why you need to start big and go smaller rather than the other way round.

Below is a really small image which is 80px wide (the little one in the corner) – it’s great for a thumbnail but not much else.
The main image below shows the tiny image expanded up in size by 1600%, and you can see the individual pixels that make up the image.

If you want to use an image full screen, it has to be large enough to be placed at 100% size and not suffer the degradation we see below.

Below is a bigger image which is not massive but better for general use than the 80px version.

If we zoomed in, we’d still see the pixels but there are so many pixels that make up the image that we can display it full size without blowing it up and spoiling it.

Resolution

Resolution is measured in pixels per inch (for web) or dots per inch (for print). It’s more important for print as low resolution images quickly look bad. In print, you’d want 300dpi at the 100% the right size for the image in order for it to look beautifully crisp.

On websites, your resolution stays the same, based on what monitors can display. If the resolution stays the same, at a constant 72 or 96 pixels per inch, you’ll need to increase the number of pixels in the image if you’re to make that image larger.

Unfortunately, you can’t take a small image and increase the number of pixels in Photoshop as would not add extra detail. You really need to start off with a larger image and size it down to the size you need, not the other way around. You can’t add extra quality to an ‘already small’ image.

Fortunately, most modern cameras take photos well above the size needed for website so you’ll definitely want to crop and resize before you upload it to your web page.

Colour Mode

Colours work differently for print than they do online.

CMYK (Cyan, Magenta, Yellow, and Black) is used in printing with pigments or inks whereas the RGB (Red, Green, Blue) are used for images on a colour monitor.  Why is this important? You need to make sure that your jpgs are set to RGB if they are to be used online. RGB will give you a wider colour range, more vibrant, as well as better compression. You don’t need to worry about this if you’re using your own phone or camera but if you get sent a photo by someone else, it’s worth checking.

Formats

Jpeg (.jpeg or .jpg)

  • great for ordinary photos
  • compresses anything photo with gradients very well

PNG

  • good when you need a transparent background
  • or when you have text that needs to stay legible
  • great for logos and text

WebP

  • A format developed by Google boasting superior compression
  • Supports animation and transparency
  • Photoshop ver 23.2 onwards offers webp support – older version will need a plugin
  • You can use WP Rocket, Siteground Optimizer and EWWW Optimizer to create webp versions of your website images and serve them instead.

NOTE: If you save a regular photo as a PNG, it invariably has a larger filesize – something we see a lot of when doing SEO reviews on websites.

What is a good size?

It all depends on where it will likely be used. If you are going to show it as a full width feature image then 1920px wide would do. If you’re just showing it as an icon then you’ll need to size accordingly. If you use WordPress, the system will save off multiple versions of the images at different sizes. These can be used in place of the full size version.

Compression

Compression is a balance between squeezing an image a little smaller at the cost of quality. Whenever you save an image you’ll likely be faced with a decision of how much compression to add to an image. A drop in quality will mean a smaller file but it can get to the point where the image starts to show the quality loss.

Below is an over-optimised image. The filesize is great but the quality has suffered as a result. You can see the artifacts showing around the hard edges in the picture – that slight pixelation. Generally, a quality setting of 70-80% will give a good quality and reduced filesize.

You can use Photoshop to do this or you can use a service like TinyPNG.com

Image checklist

  1. Resize
  2. Name correctly and save in the appropriate format
  3. Compress
  4. Upload
  5. Fill in Alt text in your image library

Looking for an image editor or alternative to Photoshop? Find out more here >