If you’re just getting started with creating websites, or if you’re a business owner who’s thinking about launching or optimizing one, it’s important to understand how to optimize images for the web.
Anyone who has ever bought a digital camera or a camera phone knows that more pixels means a better image – right? Yes, it does, but those extra pixels come at a cost: they make the ‘file size’ of an image (the number of kilobytes needed to store it) bigger.
The number of pixels per inch in an image is the image’s ‘resolution’. The more pixels, the higher the resolution, and the better the image quality.
A higher resolution is a good thing if you’re planning on printing your image, but it can be a bad thing online. That’s because for an image to show up on your website (this is often described as an image
‘rendering’ on a website) a server has to send the image over a network – and the more data it has to send (i.e. the bigger your image’s file size) the longer that will take.
If you’re involved in e-commerce, a website that takes a long time to show up can be a real killer when it comes to conversions – you want your website to be as fast as possible!
When we talk about images having large file sizes it’s important not to confuse this with the size, in terms of length by width, of an image. An image that shows up as being 3 inches by 4 inches on your website could still be a ‘big’ image – i.e. its resolution is high, meaning lots of data has to be sent for it to render.
If you click on the image above, select ‘Save’, and download it, you’ll see in the file browser on your computer that it has a file size of 3.74MB, despite it looking, on the page, as if it’s a ‘small’ image.
So, does all this mean that you should only put images with low resolutions on your website? No! The problem with low-resolution images is that they’re also low-quality – and can look blurry and pixellated. Again, if you’re involved in e-commerce, you don’t want low-quality images of your
products!
What you need to do is find the sweet spot between image resolution (quality) and file size (how much data needs to be sent for it to render).
To do this, you’ll need to compress your images.
Understanding different kinds of images
Images come in two main ‘types’ – Vector images and Raster images.
A vector image uses lines, points and polygons to create an image. Vector images are great for simple graphics – like logos, for example – but they’re not suitable for more complex scenes, like photos. The advantage of vector images is that they will look the same no matter what their dimensions, and won’t ever become pixelated.
Raster images are made up of pixels, and have the familiar extensions .GIF, .PNG and .JPEG. These are the ones you’ll need to find the sweet spot for between quality and size. When raster images are scaled up enough, they will pixelate.
There are a few different ways to compress your images so that they’re optimized for the web.
Types of compression
There are two types of compression: lossy and lossless.
Lossy compression is, as the name implies, a form of compression that involves the ‘loss’ of something – what’s lost is some information in the image in question. .JPEG is probably the best-known ‘lossy’
image format. When you compress an image using lossy compression, the resulting, compressed image is not exactly the same as the original, and can’t be restored at the same quality as that original. But that need not be much of a problem on web, as long as you don’t compress too much!
Look at the two images below. One has an image size of 1.2MB – which is very big for the web. The other has been massively compressed – to 22KB, or, around a sixtieth of the size. See the difference?! Now look at the third image – it has also been compressed, but to only around a quarter of the size (it’s 224KB). It still looks good, but it’s much smaller. This means it will load faster on your website. That’s what we call the sweet spot!
Here’s where things get a tiny bit complicated – but not too much, don’t worry! We said above that when it comes to image ‘size’ you shouldn’t confuse that with the images dimensions – i.e. its length by its width. But that doesn’t mean dimensions don’t matter. Imagine the image above was 2000 pixels by 1333 pixels at full size. It has a file size of 1.41MB. Now, if you’re very concerned about image quality, and you don’t really want to do much compression on it. One thing you could do, is change the dimensions – and make the image literally ‘smaller’ (smaller images require less bytes of storage space). Unless you’re using it as a background image on your website, you’ll very rarely need such a big image – so why not start by changing the dimensions to something smaller? If you change this image’s dimensions to 800×524 (which is plenty big) you’ll get a file size of 700 KB without any compression at all.
For good load times, though, 700KB is probably still a little big – so we’d advise doing some compression too.
All good photo editors will have a setting that allows you
to choose how much to compress your .JPEG files. You’ll need to play around a
bit with your images to find the sweet spot for each one, but it’s definitely
worth taking the time to do so.
Lossless compression
The best-known lossless image format is .PNG. Bear in mind that if you have a .JPEG image, there’s no point in changing it to a .PNG –because information was ‘lost’ when your image was compressed to .JPEG, you can’t get it back. In general, you won’t want to use .PNGs on your website for anything more complicated than simple graphics – they’re not that well-suited to complicated photographic images.
Optimize images for the web: Image compression tools
There are tonnes of image compression tools out there – from free to premium. Here’s our list of 6 of the best.
- www.imagecompressor.com
- www.compressjpeg.com
- www.iloveimg.com
- tinypng.com
- www.compressnow.com
