34. Responsive Images (srcset and <picture>)

Modern web pages must look good on tiny phones and massive desktop monitors. HTML5 provides solutions to serve the appropriate image size, saving bandwidth and improving load times.

34.1 The srcset Attribute (Resolution Switching)

Added to the standard <img> tag, srcset allows you to define a list of images and tell the browser the size (width) of each image. The browser then decides which image is best based on the device's screen size.

html

• 400w, 800w, 1200w tell the browser the actual width of the images.

34.2 The <picture> Element (Art Direction)

Used when you need to serve entirely different image files based on screen size or orientation (e.g., showing a cropped vertical image on mobile and a wide horizontal image on desktop).

html