Image field binding and responsive output
Distinguish regular images, background images and own embeds. Not every integration uses the same responsive image variants.
Compare the image and alt text binding in the collection template with the specific item. An empty alternative text may be due to missing content data, while an overly large file is created by the selected output.
Where to check the setting in Webflow
Control the image source and the alt text of the concrete element, in the case of CMS content also its field binding. After that, check the actually loaded responsive image variant. An empty collection value can affect several otherwise correctly constructed image instances.
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 Webflow
Check a completely and an incompletely maintained item on a narrow screen. Check loaded variant, reserved area and text alternative separately.
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.
Reference: Websites published on Webflow and CMS Collections. Exported HTML or an upstream own proxy layer may have other responsibilities.
Classify the general error
Definition, system-independent causes and further correction examples: Check image weight, output size and subject together