A digital image gives a web page a visual break from text. It lives as a separate file, while an HTML img element tells the browser where to find and display it. section 6.0 section 6.1
The img element connects an image file to the page:
- src identifies the image location, using a URL, filename, or path such as /images/logo.png. section 6.1
- alt supplies a short replacement description for failed images and supports screen readers and Braille applications; decorative images use an empty value. section 6.1
- title optionally supplies tooltip text. section 6.1
A labeled logo
<img src="/images/atomic-logo.png" alt="Atomic Web Design logo" title="Logo for Atomic Web Design">
For responsive pages, make images fluid with max-width: 100% and height: auto, then use sizes and srcset when images need to scale and download appropriately across screen sizes. section 14.12
Photo galleries benefit from JPEGs, consistent thumbnail dimensions, and reasonably sized full-size files rather than enormous downloads. section 15.2
