3 tips to optimize images on your website

Sight is our primary sense and as a result, it’s difficult to deny how much focus and attention we place on images. Pictures are an important part of our lives, as they work to convey meaning and tell stories in spots where words might not suffice. When it comes to the web, images are used to establish a mood and make an impression on visitors. When thinking about your website, how can you make the most of images to reduce bounce rate, improve SEO and keep visitors interested?

Heavy images can have a significant impact on your Google ranking as well as affecting other aspects of loading time, display and the performance of your website. Luckily, we’ll cover the best ways to optimize images in order for your website to maintain tip-top shape. 

The benefits of image optimization for your website

There are plenty of benefits when it comes to optimizing images for your website. Although many of our optimization tactics could be considered straightforward, they’re often overlooked. When you do take action, you’ll notice a significant difference. Here are some of the main benefits you can look forward to.

• A lighter website: When an image is heavy, it occupies a significant amount of disk space as well as requiring more bandwidth to display. Optimizing your images will save space on the server as well as bandwidth which will ultimately improve site speed. For sites hosted on servers with large disk space, this might not be a problem. 
• A better user-experience: When things load quickly and everything appears in proper working order, a website visitor will be happy. Fast loading speeds will create a positive user experience and that’s what you’re looking for when you're running a website.
• Excelled performance: As mentioned, a lighter website loads faster. When it comes to users checking out your website from a mobile or tablet, optimized images are crucial to enhancing your performance on these devices. 
• Better SEO: Google adores a website that loads quickly. Since page speed is a ranking factor, the search engine gives preference to those which are operating at their fastest.  Obviously, you wouldn't want to be penalized for a slow site, so optimizing images is essential.

Here are 3 tips to optimize website images

1- Choose the correct format

You’ve taken an image you adore or found one online that you’re allowed to publish on your website. Now, when you go to hit save, pay attention to the file format. There are various types of file formats when it comes to images on the web and choosing the right one is vital to the load time and performance overall. The main formats you should choose are as follows:

• PNG: PNG stands for Portable Network Graphic and these are perfect for the web as well as one of the most popular choices. The image quality and file size will remain high, as this format uses lossless compression. However, avoid using an abundance of PNGs, as they can add to take up a lot of space. 
• JPEG: JPEGs have an arguably lower image quality than PNGs but a smaller file size. This is another format that is widely popular on the web and used often. 
• GIF: It’s likely that if you’ve used the internet, you’ve experienced a GIF before. These are ideal for animated images, as they use lossless compression. 

Looking for experts to optimize your website?

Contact us so we can refer you to specialists in our network

We’d argue that most web designers and programmers use JPEG, as this format offers a small file size and thus, plenty of choices. PNG is also popular but as we mentioned should be used less and only for images with a smaller file size. GIFs have definitely continued to grow in use and popularity but should be reserved for places that require a little bit of humour and creativity. 

2- Resizing and compression

Image compression is crucial when it comes to website optimization. Do bear in mind that compression can sometimes lower the quality of your images, so there are some specific ways to approach this in order to make sure it doesn't happen. Properly resizing an image will come down to actually resizing it in place of shrinking it. What do we mean by this? Well, be sure to resize your chosen images before sending it to the browser instead of choosing height and width attributes in the HTML code.

This will help you to save disk space as well as host bandwidth. Another note is to make sure that if you change your website's layout and its dimensions, do follow through and also change the size of your images. Lastly, many developers and designers believe that images with large pixel size mean the highest quality; however, this is not the case. The best rule to follow is to find the right quality-to-size ratio.

As mentioned, image files can be compressed as either Lossy or Lossless, but it’s important to understand what these mean.

• Lossy: When an image undergoes lossy compression, it loses its information with only parts of this information retrievable. What this means is that the file size is significantly reduced but the quality is not affected. Lossy compression is common among JPEGs.
• Lossless: As the antithesis to lossy, lossless means that when compressed all of the image information is intact. An image which has undergone lossless compression will need to be uncompressed before rendering.

3- Quality and relevance

On the side of user experience, when choosing images for your website they need to be relevant to the content you’re publishing. There’s no point in publishing images just for the sake of publishing them, so make sure they punctuate your written content. Of course, it’s also good to make sure that images are of equal size, cropped correctly and clearly.