tohya.net saturnexplorers

HTML Images

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" />