How to optimise images for your website

We love launching new websites for companies and it’s great to be able to give clients full control over updating their own sites. Adding news articles, case studies and updating text are things that ideally can be done in-house very easily. When it comes to adding images though, things can get messy!

Here at Gravity, we’re often phoned to help ‘fix’ a website after being updated by a client. “It takes ages to load” or “the image is really blurry”. And recently, “I set some images to upload overnight and they haven’t even got halfway this morning”. Hmmm. I can guess what the problems are straight away, but then I’ve been using Photoshop since version 1 (there was only one undo step – it was a nightmare!).

Okay, I know I don’t look that old (no Photoshop expert does) but here are a few tips to help you with getting the best results for your website that I’ve picked up over the last couple of years (or so) and remember, you don’t only have to use Photoshop (see below for alternatives).

Crop, Resize

Cropping the image is the first thing you need to do. It’s hard to teach but here are a few pointers:

• Crop out unnecessary details to redirect focus to the subject.
• Don’t always centre the subject and don’t forget the rule of thirds. Most cameras and image editors have a Rule of Thirds guide built-in. You can also experiment with rotating an image to produce a more dynamic composition.
• For a series of photos, keep your cropping consistent.
• Don’t try to fit a portrait photo into a landscape space and vice versa. Just have a new photo taken – it will look much better.

When it comes to replacing or adding a similar image, you can easily find the size of an existing image on your website by right clicking and viewing the image properties (or if missing click on Inspect) in your browser.

Make sure you save the new image at this size to avoid any problems. Most programs allow you to set the image size in pixels (both width and height) so you can crop and resize in one go. Just don’t forget to work on a copy in case you need to revert to your original version.

Adjust levels and sharpen

At this point it’s also a good idea to check the colour levels and sharpness of the image. If using professional photography then you should only need to use the ‘Sharpen’ filter. It can make a big difference…

Saving images and reducing files sizes

It’s so important to compress images when saving them for the web. It’s important for visitors, who will only wait a few seconds before going elsewhere, and it’s important for Google. Large images are the number one cause of slow websites and if your web site is slow to load, it won’t rank as highly as some of your competitors.

If using Photoshop, when you’ve cropped and resized the image, use the File > Export option and select ‘Save for Web’. In this window you can select the file type (more below) and select the quality. The lower the quality, the smaller the file size (which means it loads faster). Don’t reduce the quality too much though, otherwise the image won’t look great. Experiment with each image to get the best compromise between quality and size.

Choosing a file type. JPEG, PNG or GIF??

As a rule of thumb, use jpeg’s for photos and PNG files for things like logos and graphics. Jpeg’s use ‘lossy’ compression, meaning the image quality is reduced as the file size decreases. PNG files come in either PNG-8 (which is 256 colours – the same as GIF files but when saved are even smaller) and PNG-24 which have lossless compression (but for most images are larger file sizes than Jpegs). PNG-24 files can use transparency though, so are great if you want to overlay an image onto an existing background.

Lower quality = smaller file = faster loading. Higher quality = bigger file = slower loading times.

Write SEO Friendly Image Names

Creating short, relevant file names for your images is not only a good practice but also crucial for search engine optimisation (SEO). Default file names, such as “IMG_123.jpg,” offer no value to search engines or users in understanding the content of the image. By saving your images with clear, descriptive terms, you enable search engines to better understand your images, significantly enhancing your site’s SEO. Don’t overdo it though by stuffing the image name full of keywords, or else they can be seen as spam. Keep it to a maximum of five words, separated by hyphens.

Photoshop alternatives

There are lots of free applications and online services you can use to resize images. A great open-source one is called GIMP (Google it. No, sorry don’t – just go here: https://www.gimp.org/ it might be safer) or search for ‘Resize images online’. There are 1000’s of options.

Canva can also be used to resize images especially when being used for social media posts, emails or specific file sizes.

If you’re responsible for keeping your website updated, there really is no excuse for not converting and saving your images at the correct size. If you’re a technophobe or just simply don’t have the time to alter your images, get your photographer or marketing agency (or even your kids!) to supply you with web ready images.

Just remember, photography can make or break a website – literally.