Middle

Which HTML tag helps load different images for various screen resolutions?

sobes.tech AI

Answer from AI

The <picture> tag in HTML is used to load different images depending on the screen resolution. Inside it, you can specify multiple <source> elements with the media attribute that sets the conditions for selecting an image, and an <img> tag with a fallback image.

Example:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Example image">
</picture>

In this example, the browser will choose large.jpg if the screen width is 800px or more, medium.jpg for widths from 400px to 799px, and small.jpg for smaller screens.

For simple cases, you can also use the srcset attribute on the <img> tag, specifying different images with their sizes.

Previous Next