Theme image output and product media
Compare the alternative texts of the individual product media with the theme edition. A gallery slider from an app can render differently than the main image.
Check the theme-generated image URLs, sizes and alternative text for product media. The same original can be used in a small product card and a large gallery with different requirements.
Where to Check Settings in Shopify
Check the image output of the affected section and its use of image_url and image_tag. Compare requested width, responsive sources and alt text with the product medium. The largest original file does not have to be shipped to every screen size.
Example of this specific finding
Illustrative control case: An image explains the connection of a device but does not have an alt attribute. A purely decorative background wave, on the other hand, does not contain any additional information.
<img src="anschluss.webp" alt="Netzkabel am linken Anschluss einstecken">
<img src="dekorative-welle.svg" alt="">follow-up audit in Shopify
Control the actually loaded variant in the mobile network protocol. The first visible product image does not move blanket behind lazy loading.
Provide a concise suitable alternative for the informative image. Decorative img elements with empty old; take into account the link function for linked images.
Derogations and scope
An empty old is intended for decorative pictures and may not be corrected as missing content.
Related: Shopify Online Store with Liquid-Theme. Hydrogen or other headless storefronts have their own rendering and hosting responsibilities.
Classify the general error
Definition, system-independent causes and further correction examples: Treat informal and decorative images separately
Configuration and test signal documentation
Shopify: image_tag and image attributes