Getting images ready for the web

Setting up images correctly on your website has a big effect on how your audiences perceive your business.

This overview explains technical details and terminology it's helpful to understanding when you are a website administrator.

Bitmaps and vectors

Your images will be either bitmaps or vectors. The two file types suits different situations.

Bitmaps

Bitmap images are made up of pixels. (A pixel is a single-coloured dot or square.) They can’t be scaled-up any bigger than the original without losing image quality. They are best for displaying photographs. Bitmap files include:

.JPG
Often used in digital photography due to the relatively small file size compared with image quality. Uses lossy compression.

.GIF
Compresses images to a maximum 8-bit colour depth, so it's not suitable for complex photos. Uses lossless compression – and can be animated!

.PNG
Uses lossless compression, and is useful when you want a cut-out photographic image with a transparent background.

.WEBP
The newest file format, developed by Google, WebP offers 25-35% smaller file size than a .JPG, without loss of image quality. Uses both lossy and lossless compression, but requires the latest servers and browsers. (So, although it's not well supported right now, it's likely to become more widespread in future.)

Vectors

Vector images are constructed of lines, points, coordinates, and mathematical curves. They can be scaled to any size without a reduction in image quality, so are perfect for simple graphics like logos and icons.

.SVG
It’s possible to change the size and colour of a .SVG file using code (HTML). This makes it great for graphs and infographics – or your logo, if it needs to be displayed in different colours or sizes across your website.

Animated GIFs

GIFs are an interesting way of increasing engagement with your content.


free captain america GIF

Depending on the length and complexity of an animated GIF, the file size can get pretty large (as there are a lot of 'frames' included to create that animation). But you can compress them, using one of the many free online tools.

Compression

In the 'Bitmaps and vectors' section we talked about how certain image file formats use either 'lossy' or 'lossless' compression. What does that mean?

Lossy compression reduces a file's size by permanently removing data.

Lossless compression means that, as a file's size is compressed, the picture quality remains the same. Also, the file can be 'decompressed' back to its original quality.

Dimensions and resolution

An image's dimensions are the number of pixels (px) along its width and height. Resolution is the fineness of detail in a bitmap image, measured in pixels per inch (ppi).

In a world of responsive web design where layouts and images need to bend and flex to all kinds of different devices and screen sizes, it’s difficult to be specific about what dimensions are right for your images.

Currently – August 2021 – a typical large desktop screen is 1920x1080px. So, a good rule of thumb – if you intend an image to be shown full-screen, make sure it's around 2000px wide.

TIP: When adjusting an image's dimensions, make sure the height and width change in proportion with each other. You don't want a squashed or stretched image.

Unlike print where you'd be using a 300dpi (dots per inch) image for almost every printed item, screen resolutions vary. But if you're cropping your images to specific pixel dimensions to fit your website, you don’t need to worry about resolution. That will sort itself out.

File size and page weight

Not to be confused with 'image size' – which is the dimensions in pixels – file size is measured in kilobytes (KB) or megabytes (MB).

With bitmaps, the larger an image's dimensions, the larger its file size. With vectors, the complexity of the image defines its file size. So, the more points and paths there are, the larger the vector's file size.

Images are great at engaging, informing, and exciting audiences. But every image you add to a page increases the page weight (i.e. the amount of data every visitor has to download to view that page).

  • A typical .SVG logo might be 10KB
  • A (well-optimised) full-screen .JPG might be 200KB
  • An animated .GIF might be 2MB

A good content management system will automatically display correctly-resized images, based on layout and device size. But your CMS can't do everything. There are lots of online tools that can compress images for you, before you upload them to your website.

Heavy pages result in slower page loads, higher bandwidth costs (for you and your users). So be mindful of file sizes – as well as the number of images – you're using.

More