A photograph placed in a compact card does not always need the same amount of detail as a wide cover image. Sending the largest file everywhere can make the page do more work than the reader benefits from.
Responsive image markup can offer several suitable files and describe their intended sizes. The browser then chooses an appropriate candidate for the display conditions. Accurate dimensions also help the page reserve space before the picture arrives.
Inspect an image in a real layout rather than choosing sizes from the source photograph alone. Consider its crop, its visible detail, and its role. The right delivery keeps the visual idea clear while making the page lighter to receive.
Bring the idea into a day.
Imagine a two-column story collection becoming one column on a phone. The image choice should reflect its displayed width, rather than the old column count.
Another angle on the story.
Try changing the conditions of the visit. Less space, a longer sentence, or a different input method can reveal whether the experience depends on an ideal reader.
- Check the image’s actual display size.
- Provide suitable size variants.
- Reserve space with accurate dimensions.
Follow a related question
Inspect the information attached to a sample file.
The details a file carriesAsk which situations the examples cover.
Examples shape the model’s taskKeep learning
Related background to continue exploring this subject.
MDN: learn web development MDN: how the web works
