Design for the display slot
Measure the largest CSS size at which an image appears and account deliberately for high-density displays. Do not use a camera original merely because the browser can shrink it visually: users still download the source bytes unless responsive alternatives are provided.
Provide intrinsic width and height so layout space can be reserved. Use responsive image sources when the same asset appears at materially different viewport sizes.
Choose content-appropriate formats
Photographs usually tolerate lossy JPEG or WebP. Screenshots and sharp text often suit lossless PNG or WebP. SVG is useful for trusted vector icons and diagrams. Newer formats can reduce transfer size, but a fallback may still be appropriate for the audience and publishing stack.
- Photograph: compare JPEG and WebP
- Transparent artwork: PNG or WebP
- Vector diagram: SVG from a trusted source
- Screenshot with text: prefer lossless output
Quality includes accessibility
Meaningful images need concise alternative text describing their purpose. Decorative images should be marked accordingly rather than described redundantly. Avoid replacing headings and essential instructions with image text; real text adapts better to zoom, contrast settings, translation, and assistive technology.
References and further reading
These primary or authoritative references support standards-dependent details. LipiCode’s explanations and examples are independently written for this workflow.