Image on the web

Responsive Images

When displaying an image on a web page, there are some factors to take into account. For example:

  • The size of the device on which the image will be displayed
  • The connectivity available
  • The density of the device

There are some techniques that are used to deliver the best experience to the users:

  • The use of srcset attribute of <img> which provide a list of images, with src used as a fallback
  • The use of sizes attribute of <img> which is used to select and give the appropriate width to the image depending on the size of the viewport
  • The use of <picture> element