Before you understand how to optimise images for the web, you need to understand a little bit about digital images and how your website uses them.
When you build a website the images need to be high quality but what is a high quality image? Just because it may look good to your naked eye doesn’t mean it will look good across all digital devices.
To understand how digital images look good across different devices, there are a few terms you need to understand, pixels and resolution.
What are pixels?
Pixels are the tiny blocks of colour that when put together, make up your image. It’s a bit like a jigsaw, only each jigsaw piece is one block of colour The more pieces that make up your image the sharper the image will look.
Take a look at the before and after images below of my logo. One is a logo of 2000 pixels by 1433 pixels (2866000 pixels in total) and the the other is a logo of 100 pixels by 72 pixels (7200 pixels in total) .Can you see how the lower quality logo looks more pixelated? To understand this further let me explain a little about image resolution.
What is image resolution?
By now you can see that images are made up of thousands of pixels. But having a low number of pixels doesn’t necessarily mean the image will be a low quality image when viewed. So what determines the quality the resolution the image? The resolution is the number of pixels an image contains divided by the size the image is being viewed at.
The two logos above are being viewed at the same size, that is 300 x 215 pixels (64500 pixels in total). This is the viewing area or the viewing window. So how does the viewing area affect the resolution? Well, in the first image I am squeezing 2866000 pixels into an area containing 64500 pixels, so I have more than enough pixels, in fact, too many pixels! If I divide 2866000 by 64500, I get a ratio of 44.44 so m image is 44 times the size it needs to be to fit that window. While the second image I am stretching 7200 pixels across 64500 pixels, as you can see thats not enough pixels at all. The ratio is 0.11. For a well optimised image we want a ratio of 1.
What about PPI (pixels per inch)?
So far I have not mentioned PPI, pixels per inch. You may see across the web people advising that your image needs to be 72 PPI. In fact, this doesn’t really matter when it comes to the resolution of your image on the web. Why? Because you cannot change the number of pixels in an inch of your screen. The number of pixels per inch is fixed. The only measurement that affects your resolution is the number of pixels in your image.
The above statement is not strictly true, in your monitor settings you can change your resolution which changes your PPI but 99% of the time we will all have our monitors set to the best resolution possible.
Where PPI matters?
Pixels per inch matters when it comes to optimising file sizes. In image editing software you may have the option to change the PPI or DPI (dots per inch) settings. This is useful for printing on paper but still not useful for web. When you lower the PPI or DPI setting you are removing information from your image. If you take an image with your camera or download an image with high PPI / DPI you have an image with a lot of data so the file size will be very large. So if you intend for your readers to download and print your images then you need to consider the PPI / DPI, otherwise don’t worry about it.
How to optimise your image for the web
Large images really slow your site down and slow sites lose you customers and lose you SEO ranking. Fast loading websites are important in todays world where no one wants to wait for slow websites. Optimising your images needs to be thought about before you upload them. yes, there are plugins to optimise your images if you are using WordPress but it’s much better to optimise them before you upload them.
There are two steps to optimising your images for the web (providing you don’t want them downloaded and printed).
- First, resize them to fit the view port in which they are intended to be displayed. This will make sure your images are not physically oversized.
- Run them through an image compression tool. This will ensure you don’t have excess PPI that are bloating your images.
It’s as easy as that.
You don’t need Photoshop either!
Here is a tool that can resize and optimise your image, https://imageresize.org/
Now you have no excuse.
Let me know in the comments if this has helped you optimise your image, or maybe you know of a better tool?