When it comes to any online business, rich imagery gets more clicks, leads to longer engagement and results in more sales. In short, pictures sell.
But despite the importance online businesses put producing beautiful images higher on the priority list and significantly less thought is given to how those images will affect overall web performance. As digital marketers and technologists, we at Libpixel believe that page load speed has a huge influence on an array of other interactions, and image performance is one of the biggest contributors to reduced load speeds.
So to avoid any issues with web performance, we’ve put together 3 top image mistakes we see webstores & publishers making.
1. Not having Images fixed in containers
Many online web stores and publishers simply upload the highest-definition photo available for each product, which they believe reduce grainy imagery. However, it has the opposite impact as the larger the image, the longer it takes to load. Any extra megapixels add to the image's file size. Normally the case is that the browser will shrink the photo to fit the container, and all those extra pixels will be wasted.
An example of this is full-width photos that are often located at the tops of pages. They require larger files, but it is not uncommon for e-commerce sites to not distinguish between full-width for desktop and for mobile. A hero image might need to be 1920 pixels wide to display on desktop with no pixelation, but only 812 pixels wide display on the latest iPhone. So if you use the same image for both, it will be the customer coming from mobile who will see a speed reduction.
To resolve this, you should have different image files for use on different devices and responsive breakpoints, instead of serving the same file to all. This might sound like a little more work but with a real-time image processing service like Libpixel, this can be very easy to do. You would upload the full-size image and specify the correct size for each screen in the image request.
2. Not Switching to Progressive JPEG
E-commerce sites need to grab attention as soon as the user taps the next link or time on site and conversions will be impacted. Photos are the first thing that customers will look at so if you are still using traditional JPEG images, the customer might see the images loading from the top to the bottom. The larger the file the more noticeable this is. It can be especially visible on mobile, depending on the connection speed.
Progressive JPEG is a newer style of encoding that solves this problem. Rather than reveal the image from top to bottom, progressive JPEG immediately displays a pixelated version of the entire image and then refines the quality as the page loads. This interactive demonstration is a great way to understand how it works.
As the full image displays immediately, although being slightly pixelated, progressive JPEGs feel quicker to visitors than traditional JPEGs.They’re comparably smaller than traditional JPEGs. Facebook, Twitter and many other large sites now defacto us this format. When it comes to SEO, progressive JPEG is one of Google’s PageSpeed recommendations.
3. Not Optimizing for SEO or Social
While we’re on the subject of SEO, images are becoming a more important aspect of ranking on Google and other search platforms. Since visual media isn't as easily indexable as text is, search engines and social media networks rely on meta tags to determine how images should be displayed. It's therefore crucial that e-commerce sites don’t forget to include this data.
Every image displayed on a web store or publisher site should have a descriptive file name, and keyword-rich alt text description so that search engines can index it. Thumbnails and full-size images should have different alt text, to avoid being seen by Google as duplicate content. If possible, you can add images to your sitemap to make it even easier for Google to crawl.
For social media sites it’s slightly different as they use special metadata tags to determine which image should be displayed with each page when it appears in their feed. Facebook, Linkedin and Twitter will look at your OpenGraph markup to see which image should be used. Due to how each platform has different share functionality, it can be useful to generate different images at the recommended dimensions for each site.
So what are you waiting for, start your 14 day trial with Libpixel - Sign up now!
