Basic image usage
001 <img src="url" width="npx" height="npx" alt="text for screenreader" />
- Leave
alt=""
if image is only for decoration - Also leave alt if the surrounding text already describes the picture
-
title=""
is only useful when we expect users to hover over an image
Captions
001 <figure>
002 <img src="" alt="" />
003 <figcaption>additional information</figcaption>
004 </figure>
Responsive Images
Can be realized in HTML with the srcset
and sizes
attributes of <img />
.
srcset
The set of images we will allow the browser to choose from and their sizes
- filename
- whitespace
- pixel width of the file
sizes
List of media conditions
- condition
- size if condition is met (links to a file in srcset)
- just the size in case no condition is met
Example
001 <img srcset="my-pic.jpg 480w, my-pic-full.jpg 800w"
002 sizes="(max-width:600px) 480px, 800px" />