A good e-commerce site is the one that has creative high definition product images which showcase what the product looks like in real life. This builds trust in customers beacuse if the images are good, then upon purchasing they get what they see.
With AI-First web, AI agents are parsing websites in a few seconds to get product details in real time and synthesize a recommendation for the user. A good website should be structured in a way that enables an agent to quickly retrieve the data they need along with an an image.
Lets take an example. An AI agent is asked to find a red dress under INR 2000. In order to find the same, the AI agent will prioritise websites where it can parse the product list and data in a specified time frame to generate the results for the user. If your site has heavy images, java script codes, pop ups and forms, the chances are very high that your website will be skipped by the AI agent. Simply because it took too much time!
To maintain visibility in AI recommendation results, It is important to have your data structured for the agents and images compressed for faster load times maintaining their quality. Here are the strategies that will help you achieve AI visibility:
1. The “Dual-Layer” Content Strategy
AI agents do not see the images in the same way as humans do. They read the metadata and structured data associated with the image first.
The strategy here is to have server side rendering of the product data i.e, the name, pricing, availability, SKUs while lazy loading the high resolution images. Once AI agent reads this data, it will know if the product matches the user query or not.
The parameter to keep in check here is the Largest Contentful Paint (LCP). It should be focused strictly on the basic product meta data like title and price instead of the HD image.
2. The Next-Gen Image Formats
We have been using JPEG and PNG as the standard go to image formats for a while now. We need to shift towards AVIF and WebP for faster web performance without compromising on the quality of the image.
WebP and AVIF use advanced compression to store more data in less space efficiently. WebP is 25% to 35% smaller than JPEG equivalent. AVIF can be upto 50% smaller than JPEG and can out do WebP in images with high detailing.
Next Gen formats also handle everything on their own. JPEGs don’t support transparent backgrounds, so we use PNG files instead. However, now both WebP and AVIF support alpha transperancy, making heavy PNG formats unnecessary.
There is another format called WebP 2 currently being developed by google and is in experimental stage. Should it be successful and launched, WebP 2 will provide further better compression than current Web P format.
Ideally, we should aim to keep the category page images to be under 50KB each.
3. Adaptive Loading Images
Adaptive loading is a critical component in discoverability. This technique delivers different versions of the image based on user’s constraints like their device hardware, network speed and browser capabilities.
For adapting loading, we can use <picture> and <srcset> elements. These help serve different images based on user’s browser compatitbility and devices. If an AI agent is browsing from a server, it does not need a 2000 px retina image. It is a good strategy to just serve it a 200 px thumbnail.
4. Prioritizing the ‘Critical Path’ which AI agents navigate
When an AI agents visits your category page, it is looking for a list of products. Now this agent has a limited execution quota (time and tokens). If your page has 10 different javascripts to execute before it renders that list, agent might see a blank page and may time out even before it reads your inventory. Also, normally we define a css stylesheet in our code which is first called before rendering of the pixels starts.
It is best to have inline css in your page HTML itself. This makes the page start rendering instantly and the agent is able to get the basic information to begin. Also, basic product meta data should be the part of first LCP or should be rendered server side.
We should also focus on pre-fetching resources needed for the next page. When the agent triggers the next page, data is already sitting in the browser’s local cache, reducing the network latency to zero for that subsequent interaction.
5. Distributed Edge Computing
E-commerce sites often slow down beacuse of real time checks in stock levels, personalised discounts and currency conversions. It is best to use edge functions that run the “logic” of your site at a data centre closest to the user or AI agent’s server. This reduces the “round trip” time for data. This loads the final data accurately and instantly, which increases the trust score the AI assigns to your technical infrastructure.
Time to first Byte (TTFB) is how long it takes for a browser to recieve the very first byte of the data from the server after making a request. In e-commerce your server response should be under 100ms to ensure that AI does not think your site is down or slow.
6. Visual “Placeholders” for Images
Visual placeholders are temporary graphic elements which are displayed while a high resolution image is being loaded. One of the technique is blur up, where 20px low quality images served with the blur function fills up the image container. The blur up image transforms into the actual image once the loading is complete.
Another technique could be dominant colour of the image as a placeholder. Example a green colour will fill the image container while you are loading the image of a forest.
Visual placeholders play a massive role in machine readability. Placeholders prevent a cumulative layout shift (CLS). If the browser does not know the image’s size, it renders the text first and then pushes it down when the image is available. Placeholders reserve this space and prevent CLS.
When it comes to e-commerce website, focusing on speed-to-data is important than speed-to-image. This allows us room to keep high resolution images for human customers while remaining data to be instantly readable for AI agents.