How to manage images on your website

Images are an important part of any website. In fact, websites with images get 94% more views than those without, so if you want to entice potential customers to your site, you can’t ignore them. However, you can’t just upload lots of randomly generated images and hope that it will increase traffic. Check out our blog post on how images enhance a website to see how you can make your images work for you.

Having an image-heavy site could mean that your website homepage becomes slow to load, or could confuse users if the photos aren’t related to your product. We’ve compiled a handy guide to help you manage images so that your visitors will have a great user experience, regardless of how many photos you choose. 

How do I make images load faster on my website?

Google web research says that the best loading time for your website is under three seconds. It’s crucial to make sure that your website loads in this time, as if it takes longer, even between 3-5 seconds, there is a 90% bounce rate. Their research also found that 79% of online shoppers that have trouble with website performance – like slow loading speed – say that they won’t return to that site again. 

Use a loading speed analyser like GTmetrix to see how long your site takes to load – if it’s longer than 3 seconds then read on to find out what you can do!

Image file size

Most often, when you find a picture that you think is perfect for your website, you don’t think about whether it is the right size, and you upload it straight away. It’s good to start with a high-quality image, whether that is your own photo, one from a free stock image website like Pixabay, Pexels and Unsplash, or Go Sitebuilder’s ready-to-use stock image directory. However, to streamline your site you might need to make the images smaller so they don’t take up so much space. 

Resolution

The resolution of your image refers to the quality of the image and is measured in dots per inch (DPI). The more dots per inch, the better quality your image will be. This is very important when processing images for print, but most computer monitors display a maximum of 72DPI. That means that any image with a higher resolution than 72DPI is overkill; your visitors won’t notice the difference and your image will be taking up unnecessary space. 

To see the resolution of an image on Windows, right click on your image file name and select Properties → Details. Click on the image tab within the window, and you’ll see the DPI labelled horizontal resolution and vertical resolution. On a Mac, open the image in preview and select Tools → Adjust Size and you’ll find the option under resolution. You can use Photoshop or Gimp Image editing software to change the resolution, or an online converter like convert.town.

Reduce file size even more

Reducing the resolution will also reduce the file size, but to make the file size even smaller, it’s a good idea to put the 72DPI image through an online compressor like Compressor, Tiny PNG or Optimizilla. This drastically reduces your file size but with an almost indiscernible difference in image quality. Don’t believe us? Have a look at the difference:

Choose the right file type

Most images in websites are found in three file types: PNG, JPG (or JPEG) and GIF. You shouldn’t be uploading any other image files to your website, so if you have a file type you’ve never seen before, open it and click File → Save as and change the file type, or click File → Export as + JPG/PNG/GIF. But which file type should you use for which image?

• Use JPG for photos and photorealistic images
• Use PNG for computer generated images and graphics where transparency is required
• Use GIF for small animations

Top tip – if you’re taking a screenshot it will likely save as PNG. If you’re going to upload it to your website, make sure you export it as a JPG first. Adhering to these simple file type rules will make your images work better for you. 

Optimise your file names and alt-tags

This might be boring, but it’s very important! To help with SEO, you want Google’s crawl bots to look at your site and check that it is all relevant to your topic, and these crawl bots can’t “see” images in the same way we can. So, when it comes across a file name called DSC43953, it is not going to know whether it is related to your business or not. You don’t need to put in a long description, but if you sell bespoke ceramics and your image is called “white-glazed-pot” then search engines will understand what it is. 

The same goes for alt-tags. You should be able to alter these within your website builder, and you want to describe it as if to a friend who is wearing a blindfold, using as few words as possible. Avoid using small words like “a” and “the” as you don’t need them. “White pot on table” is fine. Ideally you want to use your keywords for both file names, but don’t shove it in there if it doesn’t make sense to. 

So, now you know how to manage your images to have a fast-running website, you’re ready to make your own! Try Go Sitebuilder for a super simple website builder that gives you ready made templates to personalise, so you can have a beautiful website up and running in minutes! We offer a 14-day free trial so you can see for yourself – happy building!