Balancing Visual Content and Load Speed
Why you need to optimize your food product images.
“53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, users expect them to be fast—no janky scrolling or slow-to-respond interfaces.”
How to Optimize Your Food Product Images
The past few years has seen a monumental shift in the way consumers engage with their food and one of the biggest changes is the emphasis on visual content. Marketers know that the most important form of content for their business is visual images and they have the statistics to back it up. Visual content across every major channel is increasing, with video leading the charge in gaining momentum, and as we have seen in packaging augmented reality labels.
But before upload another product image showcasing your new sustainable packaging to your website or online store, take a minute to read further.
High resolution images have huge file sizes.
Large file sizes can turn your consumers browsing experience into one that has them clicking the back button to get away from the dreaded slow loading page. Not only will you lose that potential customer but Google will notice too.
Page speed is closely linked to user experience and last year Google officially made page speed a ranking factor for mobile.
The Solution is to Optimize Your Images
Optimizing means decreasing their file size as much as possible and doing a bit of image SEO. The challenge is to not decrease the file size to the point where image quality is sacrificed. There are 3 basic steps to follow.
Step 1: Use the right size of image
Make sure your images are no larger than they need to be. This is about the dimension of the image. Resize the image to fit the space. If it is a header image, look at the dimensions needed, say 1400 x 600 pixels. Your original image size might be as large as 5000 x 3400 pixels. You can use a paid program like Photoshop to resize your images or search for an image editor online and sign up for a free account.
Step 2: Save the image using the correct format and name appropriately
Most photo editing software, like Photoshop will have a ‘Save For Web’ option. This option will reduce your file size more than just the simple Save feature. Aim to have a files size of under 150 KB for your product images. Larger header images or background images will be about double that or approximately 300 KB. Less is more so as long as you are not sacrificing image quality, keep them small.
When you save your new image, be sure and name them appropriately so when search engines crawl the text on your page, including the image file names, they can tell what the image is about.
For example, instead of naming the image below image37.jpg, which means nothing to Google, name it something meaningful such as award-winning-sauvignon-blanc-by-nobilo.jpg. That is assuming of course that it really is an award-winning wine.
If Google crawls your images and indexes them because it knows what they are, they are then added to the Google Image search. Bonus! Now you have another opportunity to showcase your brand.
Did you search on Google Images for your brand name? Did you like what you found?
Step 3: Compress the image file
Simply put, when you compress an image, you change the file size so it takes less space than the original version. There are a couple of ways to do this. Use a plugin if your site is on WordPress. Check out 10 Best WordPress Image Compression Plugins of 2019. Or one of our favourites, https://tinyjpg.com/ for free jpeg and png compression.
The bottom line is that optimizing your website images is one of the fastest ways to significantly increase your page load speed and the search engines will love you for it. Next time you can’t wait to load those product images showcasing your new packaging, take a moment to make sure they are optimized.