HTML Tutorial

HTML Tag: <picture>

Usage of <picture>

The <picture> tag allows you to specify multiple image sources for a responsive web design. It ensures that the most appropriate image is loaded based on various factors such as device type, screen size, and pixel density.

Attributes of <picture>

  • source: Specifies an image source with a required srcset attribute.
  • srcset: Provides the path to the image and a descriptor for its size and quality.
  • type: Defines the MIME type of the image (e.g., "image/jpeg").
  • media: Determines the media condition under which the source is used (e.g., "min-width: 1024px").
  • sizes: Indicates the display size of the image relative to the container (e.g., "50vw").

Examples with <picture>

<picture>
  <source srcset="large.jpg 800w, medium.jpg 600w, small.jpg 400w" type="image/jpeg" media="(min-width: 1024px)">
  <source srcset="medium.jpg 600w, small.jpg 400w" type="image/jpeg" media="(min-width: 768px)">
  <img src="small.jpg" alt="Image">
</picture>

In this example:

  • Three image sources are provided with different resolutions.
  • The media attribute specifies the screen size where each source should be used.
  • If the screen size is 1024px or more, "large.jpg" will be used.
  • For screens between 768px and 1024px, "medium.jpg" will be loaded.
  • If the screen size is below 768px, "small.jpg" will be displayed.

Exploring the <picture> tag

To experiment with the <picture> tag, visit the following resources: