How to optimize images for the web
June 1, 2015 10:46 am
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 1.4MB, 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 3663 pixels by 2400 pixels at full size. It has a file size of 1.5MB. 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 732KB without any compression at all.
For good load times, though, 732KB 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.
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 five of the best.
1. Shrink O’Matic
This neat little Adobe AIR program will let you compress lots of images in batches – very useful if you run something like an e-commerce site and are regularly adding new images. It will handle .JPGs, .GIFs, and .PNGs, and you can specify the image length, width, and rotation. It supports EXIF data, so no information about your image will be lost after processing.
Lightweight, fast and easy-to-use, RIOT is a free image optimization tool that will allow you to compress your images using both lossless and lossy compression.
3. PNG Gauntlet
A .PNG optimizer that will reduce file sizes without impacting on quality. It will convert .JPG, .GIF, .TIFF and .BMP files to .PNG. You can watch your images getting crushed using with the status bar; the status box will also tell you what percentage file size savings you’ve gained from using the tool.
ImageOptim is a free app for lossless image compression that will find the best compression parameters and remove junk metadata and unnecessary color profiles. It will handle .PNGs, .JPGs and .GIFs. The interface is a handy drag-and-drop one – just drop images or folders into the window and they’ll be optimized there and then.
5. JPEG Optimizer
Another simple, free online tool, this one will only let you produce compressed images in a .JPEG format. It will let you set the compression percentage (anywhere between 0 and 99%) as well as setting the image dimensions.
Main image: Nicolas Alejandro