Identify what the image communicates
Decide whether the image explains something, provides evidence, supports a product choice or is purely decorative. A screenshot with a labeled error is different from a background gradient. Describe the information the reader needs when the image is unavailable. Do not force a promotional phrase into every image regardless of its purpose.
Keep the source composition useful
Cropping a photograph can improve a card layout while removing the very subject the article discusses. Inspect the source and the final display at narrow and wide sizes. A diagram or interface screenshot may need contain or a full-size link. File optimization should preserve the information that justified including the image in the first place.
Choose dimensions before compression
Prepare a source that suits the real display size and device-density needs. Use proportional dimensions when resizing and reserve the frame in the layout. Then compare output formats and quality settings on the actual image. A visually acceptable file can still be unnecessarily large, while a very small file can be useless if text becomes unreadable.
Write context in ordinary page content
Explain the screenshot or example near the image with a caption or relevant paragraph. Use a descriptive filename and an appropriate text alternative. Alt text is part of the reader’s experience, not a place to list every target phrase. If an important explanation exists only inside pixels, consider adding a text version as well.
Check delivery and permissions
Open the final image request and confirm that the correct file is served. Inspect responsive source selection where applicable. Use images you have permission to publish and avoid exposing personal information in screenshots. A private dashboard should not become public portfolio evidence merely because a smaller export was generated successfully.
Verify the final page as a whole
Review the article with images unavailable, then inspect the actual rendered crop and loading behavior. Watch for movement as the file arrives and test whether the surrounding explanation still makes sense. Keep original files so a later design change does not force another lossy edit from an already compressed copy.
Image preparation decisions
| Task | Practical check |
|---|---|
| Resize | Preserve the required content and proportions |
| Compress | Compare actual pixels and file size |
| Describe | Explain the image’s meaningful information |
| Publish | Check permissions, personal data and final delivery |
Frequently asked questions
Should decorative images have long alt text?
No. A genuinely decorative image should not add redundant spoken content. Decide according to its role in the actual page.
Does CSS cropping reduce the downloaded file?
No. Prepare appropriate source files and responsive delivery separately from the display crop.
Further reading
Put the idea to work.
Explore free browser tools for images, text and developer workflows.