🎨3 Common Issues with Images on Luxury eCommerce and How to Fix

Reading time: 15 Minutes

Luxury brands have always faced a huge trade-off: user experience (UX) or site speed?

Typically the dilemma resolves with eCommerce prioritizing user experience over site speed to create immersive shopping experiences. However, taking the UX to the next level can push back the speed quality threshold and lead to crawl bottlenecks and indexation delays.

In June 2021, Google’s Core Web Vitals became a ranking factor, prompting luxury brands to review their approach to site speed. However, according to the Chrome user experience report (CrUx), many Luxury brands, including Bulgari, Dior, Dolce & Gabbana, Gucci, still experienced delays in page loading despite their immersive shopping experiences.

The luxury market is highly competitive, with brands selling similar products. In this context, it’s important to differentiate through marketing strategies such as improving organic search and site speed performance. This can provide a significant growth opportunity for luxury brands.

Non-branded keywords are being ghosted by luxury brands.

They leave on the table open-wide room for chipping away organic market share from competitors

1) Yes, they can optimize for SD
2) Yes, they can prioritize UX improvements
3) No/Yes, should they write content?
🧵 pic.twitter.com/GoSbMvH2q8

— Simone De Palma (@SimoneDePalma2) November 26, 2022

Luxury brands often rely on animation frameworks to create immersive shopping experiences and showcase products via images formatted as JPEG and PNG. This common practice not only helps brands thrive in their organic vertical but also undermines page loading times.

In this post, I am going to discuss common issues with images on eCommerce sites and share some best practices for optimizing images for SEO.

It’s not always JavaScript

Let me make a few premises before jumping on the most common pitfalls.

JavaScript is the most popular programming language to design comprehensive commerce experiences. As a correlative assumption, the fresher an eCommerce the higher the chance of stumbling across complex JavaScript frameworks.

This is likely motivated by the rife aspiration of brands to align with the latest marketing trends. The Virtual Try On feature or the rise of Live Streaming commerce is only the tip of the iceberg enticing marketers to ask for highly customized tech stack solutions to embed into their portals.

However, ruling out JavaScript as one of the major causes of page loading restraints is often a challenge in Luxury eCommerce sites, given their considerable reliance on frameworks powered by this programming language.

As this is a common belief in the SEO industry, it’s unlikely SEOs would stop measuring the impact on site speed, crawling and indexing without bringing up JavaScript over-reliance.

In the last 5 years, Google has become more capable of crawling and indexing JavaScript websites with higher crawl efficacy and responsiveness. This is arguably a win-to-win deal for both site owners and their customers as the degree of web animations powered with such a programming language is by far the best in terms of UX outcomes.

That said, JavaScript doesn’t have to always take the blame.

Excessive CSS throughout the website, oversized images breaking screen lines and autoplay video backgrounds are typical causes likely to slow down resource download times. In turn, this can hamper crawling and undermine indexation.

The Impact of Images on eCommerce

Whether images act as a powerful lead magnet for Luxury eCommerce, they represent the most popular resource type on the web. 

According to the 2021 eCommerce overview from HTTP Archive, images are the second most requested resource on eCommerce sites right after JavaScript.

To provide more context, the number of image requests by page has been thriving over the years, despite at a slow pace.

However, it’s important to note this doesn’t account for lazy-loading images , which in turn saw a considerable upturn in the past 2 years.

This is an invaluable insight as nearly 20% of JavaScript-powered eCommerce tested the lazy-loading attribute to improve site speed.

Albeit these insights need further refinement, the main takeaway is images represent the battle horse for eCommerce to thrive in the wild whilst there is a widespread and growing awareness towards tech-savvy areas involving UX and web development.

Yet, room for improvement is more than open-wide.

Luxury eCommerce Brands: 3 Common Issues

Here I list a trilogy of image pitfalls compiled from recent speed audits I run on Luxury eCommerce.

1. Defer Offscreen Images
2. Serve images in next-gen format
3. Properly Size Images

The common thread is the lack of appropriate dimension attributes and poor format compression.

Let’s explore these in more depth.

Defer offscreen images

One common issue revolves around images breaking the screen lines or being hidden by mastodontic sliders above the fold.

This is the case where eCommerce uses autoplay video backgrounds that are commonly hidden by either hero images or JavaScript-powered main sliders.

Noticeably, this is very common on eCommerce Product Listing Pages (PLP) and Category Listing Pages (CLP) where images sometimes are literally dumped on the website regardless of pre-existing hero sliders with any sort of dimension attribute.

It comes as no surprise the entire web hasn’t seen any improvement in offscreen image savings through the years.

Funny enough, the fix comes back to consider implementing the bespokeloading="lazy"attribute on affected images once critical resources have finished loading.

With roughly 1/4 of eCommerce applying this attribute, there are still instances where deferring offscreen images remains a concern.

💡You can refer to the Google’s official documentation for more on deferring offscreen images

Serve images in next-gen format

Large and lossy images on product pages are rife on Luxury eCommerce sites.

Uncompressed and low-quality images slow down page load time and could dampen the average time per session.

Imagine a user-prospect navigating a product page and scrolling through the item visuals. What if he zoomed in on a specific feature? if the visual is uncompressed and encoded with a lossy format such as JPEG, chances are he will only see blur.

JPEG and PNG have long been the main image file formats in the Luxury market.

Since Chrome’s introduction of WebP in 2014, eCommerce followed suit and engaged with a shift towards more efficient image formats delivering better compression and improved performance.

If the shift didn’t shake up the Luxury sector, the World Wide Web has been progressing at a very low pace to certify the change. According to the Web Almanac 2022, a proper shift for better image encoding is still out of sight.

AVIF and WebP are image formats that have superior compression and quality features compared to their older JPEG and PNG counterparts.

Format	Feature
AVIF	– Supported in Chrome, Firefox, and Opera – Offers smaller file sizes compared to other formats
WebP	– Supported in the latest versions of Chrome, Firefox, Safari, Edge, and Opera -Provides better lossy and lossless compression for images on the web.

WebP images may reduce bandwidth needs, but they could also increase the disk space needs on the server side. This is because WebP images won’t replace PNG/JPG images but will be added on as additional images.

Disk space is usually much cheaper than bandwidth, so for most the benefits of reduced bandwidth likely outweigh the drawbacks. Anyway, it’s still something to be aware of.

Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data, as stated on Google documentation about serving images in next gen format

🔦Pro Tip

Beware injecting WebP images on your eCommerce without an understanding of the most popular OS and browsers used by your target audience.

Users running and old OS will face restraints in correctly visualizing your images as their browser won’t be updated until a certain release version.

This is something to be very aware of especially when looking at mobile users due to the variety of OS and browsers available.

Properly size images

This is likely the most underrated issue of the trilogy, as webmasters usually don’t look at the ratio between the size of the original image and the size of the rendered image.

Unsized images are often far too large for a page, which can significantly slow down page load time.

This is something that goes unnoticed very often.

For each image on the page, the Chrome DevTool compares the rendered image size against the original image size (Intrinsic), taking into account the device pixel ratio.

Let’s break down the difference

Intrinsic Image Size	The original size of an image before uploading in the CMS
Rendered Image Size	The current size of an image post-rendering

This check can be run on Lighthouse as well. According to the measures of this feature, if the rendered size is at least 4KiB smaller than the actual size, then the image fails the audit.

During the rendering wave of indexation, you should know Googlebot is busy fetching the structure and colors of a web page by merging the parsed HTML (DOM) and CSS (CSSOM), other than running any JavaScript.

The blending process between the DOM and the CSSOM is pivotal in shaping image dimensions as this will impact search results. To avoid disruption on your images due to rendering, it’s important to consider sizing images properly before uploading them in the CMS.

There are several ways to serve scalable images, including:

• Generating multiple versions of each image and specifying which one to use in HTML or CSS using the srcset and size attributes to ensure that different images are served to different display densities.
• Serve images with a CDN or web service APIs designed for transforming images. d for transforming images
• Using vector-based image formats like SVG. With a finite amount of code, an SVG image can scale to any size.

When serving images in HTML, using width and height attributes help increase the chances of earning featured snippets.

This is possible as these attributes tell the browser how much space to allocate in the layout for the image:

<img src="flower.jpg" width="640" height="480" alt="A portrait by Sofonisba Anguissola.">

Without these attributes or the equivalent CSS sizing, the browser has no idea how much space the image will take up until it has loaded.

This can result in users losing their place when reading, or “miss” their intended hit target and ending up clicking on something else they didn’t intend to during page load.

💡You can refer to the Google’s official documentation for more on properly resizing images

How to Debug Issues with eCommerce Images

To diagnose the state of your e-commerce images, you need to be careful in selecting the appropriate tools stack.

In general, third-party tools should be avoided due to the different data parsing they embrace. This is why the Chrome DevTool is likely the best tech stack to spot any of the aforementioned issues.

However, you should take this with a grain of salt as tools may still come in handy on several occasions.

Here are a couple of examples of what I retain as useful tools for debugging image pitfalls on eCommerce sites.

Lighthouse

Despite sitting on the Chrome DevTool, Lighthouse is an in-built feature that draws up page speed reports based on 3G connection by default. As a result, you could easily end up with a number of recommendations that you could agree with but are extremely skewed. 

An example of that is provided by the Lighthouse recommendation for eliminating render-blocking resources compared to what’s currently fetched in the Coverage tab on the main section of the DevTool

As you can see, recommendations from Lighthouse may drift from what the Coverage tab hints at. This is due to differences in parsing resource loading embraced by both engines.

WebPageTest

You didn’t have to trust third-party tools? Rules are meant to be broken.

In my experience, I can confirm WebPageTest is the most reliable and based tool for measuring both site speed performance. Notably, WebPageTest doesn’t store images as they are loaded from the original server whereas other tools remove those images from the origin server causing ruptures in the tests. 

This is just one of the reasons WebPageTest has been used as an official reference by the web development industry since the dawn of time.

Once you click on this link you’ll be presented with a full page of images that were loaded in the test by the browser. 

Images will then be presented in the order in which they were loaded. This is really useful for spot-check image sizes and the load order. 

Naturally, you can also double down the analysis for optimal images compression and render size on WebPageTest

The tool provides a score for each image listed in the test and shows the size in different formats (JPEG, WebP, JPEG-XR, and PNG).

💡Tip

The tool only analyzes images listed in the WebPageTest results. This means that only images with native lazy-loading attributes that Chrome ultimately decides to lazy load will be analysed.

Images Best Practices and Automation

Regardless of the aforementioned scenarios, you can optimize images on Luxury eCommerce sites using pre-compression and caching techniques.

This involves:

• Compressing images before uploading them to the CMS library.
• Uploading images from the CMS library instead of dragging them from a file folder on your machine. This can prevent them from breaking over screen lines.
• Using the WebP format to achieve lossless compression while keeping high the quality bar.
• Don’t forget alt tags and meta tags optimization.

💡BONUS

There is so much work you can do to make sure your visual eCommerce pages stand out from the SERP. This involves working on optimizing meta tags.

For example, you could find how meta descriptions influence rankings or just find out if Google has decided to rewrite title links on key pages in a bid to better match search intent

An easy win that allows you to cut off time is to leverage a few lines of code to convert and resize images using Python.

Convert Images in Next-Gen Format with Python in less than 60 seconds

I’ll possibly stop masking my IP address through a VPN from now on 😅😆 pic.twitter.com/KPWGxPhNns

— Simone De Palma (@SimoneDePalma2) December 16, 2022

Let’s have a quick peek at how you can do it using a notebook such as Google Colab.

First, we install the Pillow library and import the Image module and the os module, which provide functions for interacting with the operating system.

!pip install pillow
from PIL import Image
import PIL
import os

Next, we define a function called convert_image that takes three arguments:

image_path	the path to the image file that we want to convert
image_type	specifies whether the image is a JPEG or PNG file
custom_size	(optional) specifies the desired dimensions for the converted image. By default, this value is set to 300

Inside the function, we first open the image file using the Image.open() function and convert it to the RGB color format. We then split the image path to remove the file extension from the image name.

After that, we use an if statement to check the image type. If the image is a JPEG or PNG file, we use the thumbnail() method to resize the image in case the original size is greater than 2000 pixels, and then save the converted image. If the image is not a JPEG or PNG file, the function raises an error.

def convert_image(image_path, image_type, custom_size=300):
    # 1. Open the image
    im = Image.open(image_path)
    # 2. Convert the image to RGB colour
    im = im.convert('RGB')
    # 3. Split the image path to remove .jpg or .png from the image name
    image_name = image_path.split('.')[0]
    print(f"This is the image name: {image_name}")

    # Save images based on the type:
    if image_type == 'jpg' or image_type == 'png':
        if im.size[0] > 2000:
            im.thumbnail(size=((custom_size, custom_size)))
            im.save(f"Converted-to-next-gen-format-{image_name}.webp", 'webp')
        else:
            im.save(f"Converted-to-next-gen-format-{image_name}.webp", 'webp')
    else:
        # Raise an error if no jpeg or png file was generated
        raise Error

Finally, we use a list comprehension to loop through all the image files in the current directory and call the convert_image function on each file.

The list comprehension checks whether each file is a JPEG or PNG file and passes the appropriate image_type argument to the convert_image function.

images = [file for file in os.listdir() if file.endswith(('jpg', 'png'))]

[convert_image(image, image_type='jpg', custom_size=1800) if image.endswith('jpg') else
convert_image(image, image_type='png', custom_size=1800) for image in images]

Conclusions

Google has had a long run in the search sphere and brought eCommerce to the pinnacle of the search experience.

Yet Luxury brands are missing out on opportunities to boost organic rankings by improving page speed.

With Google Multisearch allowing search prompts in both textual and visual formats, luxury brands have unlimited room for growth in their visual authority.

This can be achieved by carefully optimizing their CMS library and dedicating part of their SEO budget to entity image optimization.

Further Readings

This post was inspired by recent findings on Luxury brands from iPullRank‘s blog post:
How Enterprise Luxury Brands Can Leverage SEO to Tap Into New Markets

FAQ