Websites with fast loading images rank higher on search engines. This post explains how to resize an image in pixels and KB, so that it downloads quickly for your website visitors.
There are two stages to a fast loading image:
- Resize the image in pixels first, so it is the right size for its spot on the website.
There are a few oddities in image sizing 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 must also consider users with very poor internet connections.
- Reduce the size of the image in KB – known as compression.
Compressing an image reduces the number of pixels in the image, it lowers kilobytes. It is possible to do this without losing too much quality.
I’ll show you the best practises for resizing an image and how to do it.
The complications with images
Let’s start by talking about responsive images – those that resize to look good on different screen sizes.
We design for mobile first, so I will begin by referencing the mobile version of a website.
On mobile websites the image usually spans the full width of the screen. Images stack on top of text and users are very used to scrolling quickly down long, mobile friendly web pages.
For a mobile device a very good width for an image is 450 pixels. The height can be anything you wish.
But image sizing doesn’t end there. One size does not fit all.
Let’s think about that same image on an extra large monitor or a TV screen – yes websites are now accessible via your smart TV.
The image might sit in a column to the left of the text.
It might span the width of the screen as it did on the mobile version. We call these hero images.
Imagine how big that image needs to be now?
For a TV the image would be 1920 pixels or more wide.
An image that has been resized to 450 pixels for a mobile will look terrible stretched to 1920 pixels. Scaling images up does not work as it stretches all the pixels.
That is why images appear fuzzy on some websites.
Creating images at 1920 pixels doesn’t solve the problem either. These download so slowly, especially on slow internet connections which is likely when someone is using a mobile on a moving train for example.
We must be cautious and cater for slow connections. Search engines also reward a fast loading website with higher search engine results.
To add more to the complications : ideally, an image should be resized to the exact pixel size for use on the page. Search engines like to have a good idea of the width and height – known as dimensions.
So you can see – there is no standard size and it all gets quite complicated. All we can do is our best.
Plugins for adaptive images
There are a few WordPress plugins that help to serve the correct image size to the device, called adaptive images.
Basically a small image downloads first – whether that is in size or resolution.
If the screen resolution is large the plugin provides the bigger version. This speeds up the waiting time for the visitor.
This is the solution if you want to use big hero images but are concerned about download time.
Here are two adaptive image plugins that I like:
- Adaptive Images for WordPress by Nevma
Simply sends smaller versions of the images to mobile devices, so a very basic plugin that does the job once settings have been saved after activation.
- Shortpixel Adaptive Image by ShortPixel
This plugin is clever. It will start to crop and compress images for different screens as soon as it is activated. Although you can have greater control if required. The ShortPixel documentation is also comprehensive. You can even compare an image before and after compression with their image compression test.
So, what I would do is use these adaptive plugins, but don’t fully rely on them and dump photos onto your WordPress site straight off a camera. Keep your media library clean.
Resize the image first and compress minimally to bring the KB down. Once you upload it to WordPress, the adaptive image plugin will do the rest.
Let’s start resizing an image for the web.
Resize an image for the web – in pixels
With everything we’ve discussed in mind, choose your image width.
- A photographer who wants excellent quality images displayed at full width is going to need to start with a pretty large image. Resize photos to at least 1920 pixels – to cater for extra large monitors.
- Anyone else, I would advise to go for 1200 pixels. This is a good balance but people on extra large monitors will see a pixelation on full width images. It is a trade off for a really fast loading image on a mobile.
For my own website and blog I resize images to a maximum of 1200 pixels wide, most are 800. Here’s why:
- Full width images are never used on my website. I like to keep everything really speedy.
- People do not need to see my photos at such a high resolution.
- Opengraph doesn’t require anything bigger than 1200.
- From Google Analytics I know people visit my site using a handheld device or a laptop. Useful information.
I leave it to your discretion.
Free image editing software
There are plenty of free tools available to you online as well as image editing programmes that can be downloaded.
For photos stick to JPEG file format, and that is what we will cover here.
For vectors go for PNG or SVG – and that is for a future tutorial.
GIMP image editing software
‘GIMP’ (the GNU Image Manipulation Program) is an image editor that is completely free.
GIMP provides a tutorial on changing the size (dimensions) of an image (scale).
Online image editors
A quick search for ‘online resize image’ in Google will give you a whole host of options to enable you to upload, resize, compress and download your Jpeg.
The first result I found was resizeimage.net. Very simple to use – it crops, resizes and compresses an image.
If you’d like to crop the image, use option number 2, but I bypassed that and went straight to option number 4 where I can resize it by pixels.
Put 1200 into the width field, Nan in height and tick the box to Keep Aspect Ratio.
The output image format will be JPG.
Choose a compression option.
Progressive compression will show a pixelated version of the JPEG as soon as the visitor is on the page. The rest of the information will progressively download to build the final image. I quite like this option because the visitor knows to wait.
Reduce the quality of the image by about 75%, again depending on how ruthless you’d like to be.
Resizing an image in KBs – compression
Compressing is very different from resizing. All images should be compressed before upload, even if you are using an adaptive image plugin.
Compression lowers the file size of the image by reducing pixels, so it downloads faster.
During the compression stage try not to compromise the quality of the image too much.
Try to achieve a balance between the image looking good and downloading quickly.
Images can be compressed using the GIMP software too.
GIMP tutorial on changing the size (FileSize) of a Jpeg.