Theme image output and product media
Check the image widths requested by the theme. A small map layout should not load the same large resource as a detail view.
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: A product tile with 360 CSS pixels wide loads the 4,000 pixels wide original. What matters is the variant loaded in the network protocol, not the file name in the CMS.
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.
For multiple screen widths, check the selected image URL, file size and sharpness. On high-resolution displays, higher natural resolution may make sense.
Derogations and scope
A detailed view with Zoom may require larger files than a preview list. Balancing quality and transmission effort against actual use.
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: Check image weight, output size and subject together
Configuration and test signal documentation
Shopify: image_tag and image attributes