3 Tips to optimise images for web and mobile performance

Did you know the loading time of your website has an actual impact on your bottom line? We see many, many times businesses that compromise site speed for unnecessary images. The thing is, your website visitors tend to care more about speed than the aesthetics. With 64% of smartphone users expecting pages to load in less than 4 seconds and 47% of customers expecting a webpage to load in two seconds or less, then user experience should be at the forefront of your mind every time you add more images/content to your website.

Why? Because the main culprit for slowing down your website speed are images!

 

You want to make sure that all images on your site are light, device responsive and use the best format to combine speed and quality.

 

According to the latest stats out of Google Marketing Live Keynote, more than 50% of mobile users would not make a purchase if the site takes too long to load. And considering 91% of smartphone owners bought something they thought was relevant by searching through Google, then you want to make sure that your website is loading lightning fast!

 

” 64% of smartphone users expect pages to load in less than 4 seconds and 47% of customers expect a webpage to load in two seconds or less”

 

But what exactly is image optimisation?

If you think of images in terms of weight, then good quality images usually weigh a tonne, meaning your website becomes heavier and slower. Optimising images is the practice of reducing the size of your image whilst not compromising on image quality.

 

Since images account for the most ‘weight’ of your website [hence slowing it down] then optimising these images can make the biggest difference to the speed and functionality of your website.

 

Your website still needs images, after all they are an important part of the user experience. That’s why it’s important to find the balance between the purpose of those images and their optimisation.

 

left is the original and the right has been optimised for web

 

What is the difference between image compression and image resizing?

Resizing an image is taking a large image and making the dimensions physically smaller to fit a certain space on your website. Compressing an image is taking the physical weight of an image and making it “lighter” so to speak. For instance, from 2.5MB to 95KB.

 

The core areas to image optimisation for websites are:

• Resizing images
• Image Compression
• Scaling image dimensions. I.e, don’t load a 1000×1000 image in a 100×100 space.

 

So now you know the importance of image optimisation, and most importantly the value to your bottom line, here are some of our top tips on how to get started.

 

1. What’s the purpose of your images?

Take a look at your website and really think about the intent behind the placement of those images. When uploading more media ask yourself if you really need those images, what purpose do they serve? Will they add to the user experience? If an image doesn’t actually help you achieve anything, then remove it.

 

Remember, too many images may be impacting your website loading time, which could mean less traffic and less sales made.

 

Are there alternative icons or vectors that you could use instead? Sometimes, just adding some colour might do just the same job.

 

If you find that the image is the best option, then ensure that you optimise it appropriately.

 

optimised image of puppy, strategically placed

 

2. Know your image types

Generally, you want to use one of three formats: JPEG, GIF or PNG. You’ve probably noticed these formats, but let us look into the use of each format.

 

• PNG are uncompressed, meaning it can have a very big file size. This format also has much higher image quality. This format should be used for simpler images that don’t have a lot of colour or detail including transparent backgrounds.
• JPEGs are good for more complex images and photographs. This should be your go-to format for the most part. JPG’s are compressed which means it’s not as detailed or high quality, but to the naked eye it would rarely make a difference. This format is ideal for images with lots of colour as it won’t be as heavy weighing down loading time.
• GIFs are better for small icons, simple images and animations.

3. Resize and compress before uploading

Getting into the habit of resizing and compressing (optimising) before you upload to your website is extremely important.

 

TIPS:

• There are various tools out there that can help to resize and compress. We like to use GIMP and then run the resized image through Tinypng for further compressing.
• A good rule of thumb to guide file size, try to keep all images below 100KB

 

Conclusion

Literally, every second counts. A 1 second delay in page response can result in a 7% reduction in conversions. Let’s put that in dollar value:

 

If an ecommerce site is making $100,000 per day, a 1 second delay could potentially cost them $2.5 million in lost sales every year!

 

Image optimisation is critical to site speed, and a better user experience. So don’t just upload images blindly, and definitely, don’t prioritise aesthetics over speed. Only use images where needed, and always optimise them prior to uploading.