This overview explains technical details and terminology it's helpful to understanding when you are a website administrator.
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.)
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.
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.
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.
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.
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 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.
