We resize images for the web because we want to help images to download quickly for website visitors.
Websites with fast-loading images have more chance of ranking well on search engines. Search engines prefer to send visitors to websites that provide a good experience.
Useful post – How to resize an image for the web
Photos are made up of thousands of pixels which are tiny squares of colour.
A digital photo straight from a camera is high resolution, so it’s a large width and height, and there are plenty of pixels within the image so that it prints really sharply.
Not good for the internet because they’ll download slowly.
There are two steps toward a fast-loading image:
Resize image dimension in pixels
An original photo from a camera would be about 8 times bigger than a laptop screen.
So the first step in image optimisation is to resize the image dimensions in pixels. Dimension is the image’s width and height.
Resizing should always come first.
The photo needs to be just the right size for its spot on the web page. That’s the best practice for the web.
Since the introduction of responsive websites, an image needs to be the right size for a mobile, a tablet, a desktop and a TV. We’ll cover that later.
Reduce the size in kilobytes
The second step is to reduce the size of the image in kilobytes – known as compression.
Compressing reduces and combines the pixels within an image so it lowers the size in kilobytes.
It is possible to do this without losing too much quality.
Carrying out both these tasks – resizing and compressing – is known as optimising an image for the web.
Optimised images for the web
One image in the video above has been put onto the website straight off the camera or phone.
Its width is 2560 pixels and it’s reduced only in appearance – squeezed in to fit in the space and is about 18% of the original size. It still has all its colours in it, and it downloads slowly.
The other image has been optimised – it’s been resized to fit in the spot and then compressed so the file size is reduced.
The optimised image downloads much faster than one that hasn’t been optimised. You’ll see a comparison of images on the video.
Optimising images for the web will save space on your server too.
This cuts down the possibility of server overload and saves money on hosting.
It’s also more environmentally friendly. Bonus.
Hero images
At the moment, there’s a bit of a trend for large, full-screen images. These big images are known as hero images.
Hero images look nice, but a full-colour image will take a long time to download if you are not seeing the cached version.
Cached images
You may think that the image on your own website is loading fast, so you can’t see a problem.
This is because browsers cache images.
They store them temporarily to load them fast the next time you visit the same website.
One way to see if your image really is downloading quickly is to open up an INCOGNITO TAB and have a look at the website there.
Responsive images
Let’s dive a bit deeper into responsive images. Responsive images resize to look good on different screen sizes.
On mobile websites, the image usually spans the full width of the screen. They stack on top of the text.
Mobile visitors have become very used to scrolling quickly down long, mobile-friendly web pages.
For a mobile device, a very good width for an image is 640 pixels. We saw that size on the web page earlier. The height can be anything you like.
But image sizing doesn’t end there. One size does not fit all. Think about that same image on an extra-large monitor or a TV screen.
Depending on the page layout, the image might sit in a column to the side of the text. Or it could span the width of the screen as it did on the mobile version.
So that image needs to be much bigger.
For a TV, a pixel-perfect image would be 1920 pixels wide – or more.
If you’ve already downsized the image to 640 pixels for a mobile, it will look terrible if you try to upscale it to 1920 pixels. You’d be stretching it more than 400%.
Scaling images up
Scaling images up doesn’t look good – the tiny pixels stretch and expand. The image appears fuzzy.
Settling for images at 1920 pixels doesn’t solve the problem either. As we saw in the video, large images download slowly.
Bad for visitors, bad for search engine position.
To add to the complications: an image should really be an exact pixel size for use on the page. That pixel size should also be stated in the code.
Using percentages doesn’t work well for search engines. Search engines like to have a good idea of the dimensions. This is because – when the pixel size is known – browsers can render the page with everything in the correct position before images have been downloaded.
As you can see – there is no standard size and it gets quite complicated, but correct optimisation is so important.
The advice is to resize images for the web
We need to do our best.
WordPress does a pretty good job at responsive images these days. Images adapt to the screen size.
It’s still really good practice to resize images and you should most definitely compress them, even if you use a WordPress plugin to compress like SMUSH.
If you are a WordPress user my video on ADAPTIVE IMAGE PLUGINS FOR WORDPRESS will help you to cater better for all screen sizes.
I hope this post and video have helped to explain why we resize images for the web. It’s a complicated business!
