Coded4 Home Icon
Coded4 Email Icon
Coded4 Phone Icon

Resizing images to fit your website

How to gain quick speed boosts on your website by properly sizing images

Monday, May 10th 2021

 

Large images can be one of the biggest areas impacting the speed of your website.

When somebody visits your webpage and the images are loaded in, those files are downloaded to the user's device, whether that's a computer, phone or tablet. 

If those images a very large files, they can take quite a while to download - especially over mobile networks. That's why it's important to make sure they're sized properly and not needlessly large. 

When an image is added to a webpage, without any setup the image will be used as-is - so if you've taken a 4K photograph and upload it onto your site, it'll be huge. Normally it won't appear at it's full size however, if you imagine a website as being made up of building blocks, the image would be 'slotted' inside one of these blocks. 

Images inserted this way will often try to maintain their 'aspect ratio' - so a square image would remain square, and a rectangular image would remain rectangular, but it'll shrink the image down to fit into the container. 

This shrinking of the image doesn't actually change the physical file size of the image however, so a 4K image in a 100x100 box, will still download a large 4K image to the user's device, which is why it's important to properly size images.

So how do I resize my images?

There are a few ways to go about doing this, but one of the best ways is to load your site up on your computer and inspect the size it's displaying at. Now that's not to say you need to dust off the old ruler! Browsers thankfully have a handy tool to use that lets you see this information, though it might seem a bit daunting at first - we'll be using the browser's 'developer tools'.

To get started, find an image on your website and right-click on it. Depending on your browser the wording might be a little different, but you're looking for 'inspect'.

Once you click this, the browser should open up the developer tools, normally at the bottom or side of your screen. 

Don't panic - you haven't broken anything, you're just looking at the code that makes up your website.

The only part we're interested in for the image sizes is the image you're looking at, which should be highlighted in a different colour of your developer tools.

Once you find the highlighted line, you'll want to hover your mouse over the blue text which will normally end in an image extension (e.g. .jpg, .png) or if you look closely it'll be after src= - that's the image's source (i.e. where the image file is located).

Hover over the blue link to the file, and a little popup should appear showing the size of the image in pixels, and the 'intrinsic size' (or natural size).

This gives you the comparison between the size the image is displaying on your web page, and the size of the file itself. 

So how do I actually resize it?

The simplest way to resize the image is to open the file in your favourite image editor, something like Photoshop (if you have it), the GNU Image Manipulation Program (called G.I.M.P) or something like Paint.net.

These programs all contain tools that let you resize images, so shrink the image down to the size it displays on your website and save the file. Then you can re-upload it onto your website and confirm the new size fits using the method above. 

Isn't there a way to make this easier?

There is actually, many content-delivery-networks (CDNs) have image resizing functionality on-the-fly, which means that when your website tries to fetch the image file to send to a visitor, it can dynamically resize the image automatically. You'll need to ask your website's developer to implement this for you, but we implement it on all of our websites using a CDN called Uploadcare.

Some tools and site editors might not give you the flexibility to correctly size images in all instances, for example images entered via a rich text editor often output the raw image itself, and don't provide the developers with the flexibility to add necessary data for automatic resizing.

Other considerations

Image size is just one part of the web performance workflow, there's also the metadata for the image to be considered (extra data that isn't required for the image and generally just takes up space!). 

You also need to be careful when resizing images for different screen sizes - for example the image might be 600x400 on desktop, but only 300x200 on a mobile - you'd still be sending too large an image for smaller screens.

The best way to get specific advice for your website, is by using Google's web.dev tool, which gives you a full breakdown of where your website is at the moment, and practical advice on how to make improvements. 

Project Image

Working with Wylde Design Associates, we were tasked with rebuilding the Parker Oak website in a cos...

Project Image

Blackbox Systems have been providing manufacturers with insights into their energy usage for years. ...

Coded4 quote mark icon

The process started with the design aspect, which was very professional whilst encapsulating my brand & industry - we only a small handful of things until it was perfect. Then we went on to the setting up of the functionality, which was done incredibly efficiently, yet maintaining attention to detail - it was seamless.

Coded4 quote mark icon

A.I.D. Support & Solutions

Contact us
Scroll-to-top button