Before you understand how to optimise images for your website, 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 and the resolution of 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 my 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 your website
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!
I will now go into more detail for both of those steps.
STEP 1: Crop and resize images
It is easy to get confused about what crop and resize mean, they sound similar but they are very different.
Crop means to cut out a piece out of an image. e.g. You may have an image with an ex boyfriend init. You can remove him from the image by cropping out that section.
Resizing means making the whole image smaller or larger. You take nothing away, you just shrink or expand.
Cropping and resizing images isn’t hard to do but you do need to to plan ahead and give yourself a bit of time to get it right.
For each image you need to know the ideal height and width of the image.
How to find the ideal width and height of your images
To find this you need to know where your image is going to go on your web page. Is your image going to take up the full width of the screen, e.g is it going to be used as a section header or page header? Or is it going to take up a quarter of the screen?
Once you know the placement you can find out the width of that area in pixels, using this blog post that explains the sizes of the images you need if you are using the Divi builder. Click here to read it.
Before you know the height of your image, you need to know which aspect ratio you want for your images. Again, the blog post above will explain what that means.
Once you have the width and the aspect ratio you can then find the height (from the blog post above).
Now you have the height and width of your image you can crop your image to fit.
How to crop your image to the ideal height and width
Here is a tool that can resize and optimise your image, https://imageresize.org/
Go to the tool and click on the ‘Image Cropper’ tab at the top of the page.
Upload the image you want to crop.
Enter the size of the area you want to crop where is says ‘Adjust’. Enter the width and height.
When you type your height and width into the box a white box will appear on your image. You can drag and drop this box on your image until your box covers the area you want to crop.
When you are happy, click ‘Crop Image’ and download your new image.
At this point you may find your crop box is too small or too big, this means the image is either too small or too big.
I will use an example to explain.
I have a square logo that I am using in a row of 4 logos and I want them all to be the same size. 3 of the logos are rectangular but the 4th is square. I want it to be rectangular.
I have checked the out blog post above to find the width of an image that fits in a 1/4 of a column is 225 px and if I want a rectangular aspect ratio of 16:9 the the height of the image needs to be 128px. If none of this makes sense you must read the blog post above.
I upload the image to the cropping tool and when I enter the size of the area I want to crop I see that the image is HUGE!
The area I want to crop is a rectangle measuring 225 x 128 px but the image is so big that my crop area appears tiny. You can see the crop area is the white square in the image below.
What I need to do here is resize the image and make it smaller, then I crop it.
How to resize the image so it can be cropped
Using the same tool, go to the ‘resize’ tab at the top of the page.
Upload the image you want to resize. You can see the image size here. My image is a whopping 1800 x 1800 px.
Use the blue slider to resize the image to a size a little bit larger that you want. You can’t type in the box directly and the slider values won’t stop on the exact size you want so do your best. You should be ok if you go just a bit larger than your required cropping size. I have gone for 234 x 234.
Click on ‘Resize image now’ then download it to your computer.
Go back to the cropping tab, upload your newly resized image and now you should be able to crop it.
Step 2: Compress your images
Upload your image to this tool here >> Image compression tool
This is my preferred compression tool because you see a before and after so you can decide if the compression affected the image quality.
It is very important to use correct sizes and to compress your images. If you don’t, your website will look unprofessional and it will be slow. That will lose trust and visitors will not come back to your site.
Let me know in the comments if this has helped you optimise your image, or maybe you know of a better tool?
Q and A
Q. How important is it to go back through all my website images, re-compress and upload them? Is it really necessary?
If you are not getting many website visitors I would say it was a medium priority task. But if your website is getting traffic then it becomes more of a high priority because you want your website to load fast for a good user experience. If you are investing in SEO then the pages you are ‘SEO-ing’ need to load fast so those pages will need optimised images.
If you have a lot of images you can use compression plugins for WordPress but the results these plugins give can vary. It’s best practice to optimise your images before you upload them.