Example: An image import simultaneously generates loading time and accessibility problems
An imported product photo can be shipped as a large original, not receive any meaningful alternative text and move the content when loaded. These three findings have different effects, but may be due to the same incomplete media process.
Finding the triggering point
Track a concrete image from the source data set to the media library to the delivered img element. Check whether dimensions and alternative text are available and which size variant the template selects. Compare a manually maintained image to an imported image to narrow the error down to import or output.
Checking a limited fix
Add missing metadata in the responsible process and create suitable image sizes. Alternative texts must take into account the intended use: a decorative image needs a different treatment than an explanatory diagram or a linked product photo. Avoid file names as a blanket replacement text.
After importing again, check not only the previously corrected file, but also a new image. This is the only way to recognize whether the process has been improved or only the old stock has been repaired manually. Control output size, reserved space and accessible description separately.
Symptoms in the audit
- many images without alt text or fixed dimensions
- Image files are too large for mobile use
- Lazy loading prevents visible content
Then they test the cause.
- 1. Group image inventory by template and page type
- 2. Check file sizes, dimensions and alt texts
- 3. Test above-the-fold images separately
Fixed route
- Standardize image components
- Recording old fields in editorial processes
- Clean responsive image sizes and loading priority