Optimising Your Website Images
6 September 2018
Share This Post
Without images, the internet would be a decidedly dull affair. In fact, I’d go as far to say that images are the best bit of any website. Just ask Tumblr. Without images, there would be no memes, no animated GIFs… You may as well just read a book.
However, with great power comes great responsibility – and this has never been truer than when optimising website images (ok, that’s a lie, it’s definitely been truer – but it’s still important).
Here, I’m going to give you a few image management pointers that will help your website run smoothly and speedily. Let’s get started.
If you run an e-commerce business with hundreds of product images on site, going through and renaming all of them can be a pain. But it’s important that you do. Search engines not only crawl the copy on your website, they crawl the images too. This is why you should describe each image as best as you can – and each image name should be different.
Take this image of a kitten asleep in a shoe. Initial thoughts: adorable. But it’s not enough being adorable if it’s never going to be seen. You could upload this image with the name your camera gave it: something like ‘IMG04578.JPG’ or you could change the name of the image to something more descriptive.
This means if people are searching for pictures of cute cats sleeping in shoes, they will be more likely to stumble across it (lucky them). If it were me, I would rename this image something along the lines of ‘cat-sleeping-in-shoe.jpg’
If you have an e-commerce website, make sure that you include your brand name in the image name – this way people will be more likely to find your images if they are searching for a specific product.
There are many different types of images file formats, and in order to retain the visual quality of an image, it’s important that you choose the right one. The main three that are used for the web are JPGs, PNGs and GIFs.
JPG files are the most popular file type and with good reason. They can be saved in low, medium or high quality, which makes it easy to balance the size and quality. JPGs are often used for product images, web images or homepage banners.
A PNG file is different to a JPG as, unlike a JPG, it can handle transparency. This makes them useful for logos, as they often require transparency. A PNG file has a more limited colour palette, so they are also good for line drawings or text.
When most people think of a GIF, they imagine Nicole Kidman clapping or a white guy blinking. But GIFs weren’t always the animated types you commonly see today. GIF actually stands for ‘graphical interchange format’ is one of the oldest image types. They were originally developed as a way to display images on computers with slow connections, to supplement JPGs. With today’s internet speeds there’s no reason you’d need to use a GIF format to display a static image.
For most web images, a JPG is your best bet. For logos, choose a PNG. And unless you’re creating a Buzzfeed article or blog post filled with animated GIFs, stay clear of them.
Have you ever visited a website only for it to take ages to load? How long would you wait? Research shows that if a web page takes more than 3 seconds to load, 40% of people will abandon it. This shows just how important it is to have a fast website – and if you’re not careful, images can slow it down.
If you take a high-quality image with a good camera, the chances are that when you upload it to your computer, it will be huge. But don’t worry – this can be changed. First, work out the size your image needs to be, something that is measured in pixels in the online world. Next, open your image in photoshop (or similar), go to image – image size and change the size of it (in pixels, not document size.)
As I’m inserting my image into a blog post I am going for 750×445 pixels, however, if it was a homepage image it would need to be bigger.
Many websites compress images automatically, but it doesn’t hurt to run them through a compressing tool such as Tiny PNG. This will compress the amount of data by reducing the number of colours in the image (this won’t be visible to the naked eye).
Completing image meta data e.g. titles, descriptions and alt tags can be a laborious task. If you don’t want to go back and redo all of this, consider at least just filling out the title and alt tags. This is a good standard practice and a great habit to get into. It will only take you an extra 20 seconds but could mean your images rank higher on Google.
Optimising your images can make all the difference when it comes to how long someone stays on your website. If an image takes too long to load, chances are your customers won’t stick around long enough to see it in full. However, by following these simple steps, you can ensure your website not only looks great, but is also search engine-friendly.