HTML Responsive Images and Media

One image file rarely suits every screen. The picture element lets the browser choose a source by a media query. The srcset and sizes attributes describe several widths of the same image, and the browser picks the smallest file that is sharp enough for the layout and screen. Always give images width and height so the page does not jump while they load, and use loading="lazy" for images below the fold. The video element needs controls, and text inside it is shown by browsers that cannot play it.

<picture>
  <source media="(min-width: 800px)" srcset="wide.jpg">
  <img src="narrow.jpg" alt="A mountain lake at sunrise" width="800" height="450" loading="lazy">
</picture>
<img srcset="small.jpg 480w, large.jpg 960w"
     sizes="(min-width: 600px) 50vw, 100vw"
     src="small.jpg" alt="Product photo" width="480" height="320">
<video controls width="320">
  <source src="clip.mp4" type="video/mp4">
  Your browser does not support video.
</video>