DEV Community

Parthipan M
Parthipan M

Posted on

PICTURE IN HTML

#webdev #html #payilagam #vscode

picture tag in html

The HTML <picture> tag is a media wrapper element that allows developers to provide multiple image sources for different display scenarios, such as varying screen sizes, pixel densities, or image formats.

The browser will parse the child <source> elements and select the closest matching resource based on media queries or type attributes, falling back to the standard <img>tag if no matches are found or if the browser doesn't support the element.
Example:

<picture>
  <source media="(min-width: 1024px)" srcset="large-hero.webp" type="image/webp">
  <source media="(min-width: 768px)" srcset="medium-hero.jpg">
  <img src="small-fallback.jpg" alt="A descriptive fallback image" loading="lazy">
</picture>
Enter fullscreen mode Exit fullscreen mode

Core Components

  • Core Components: The outer wrapper that acts as a decision engine for the browser.

  • : Contains the alternative image assets. You can use multiple source tags, and the browser will read them from top to bottom, picking the first one that evaluates to true.

  • media: Accepts media queries (e.g., max-width, orientation) to swap images based on device screen size.

  • srcset: Defines the path to the image file (or files, if using pixel density descriptors like 2x).

  • type: Defines the MIME type (e.g., image/webp, image/avif), allowing you to serve modern, highly compressed formats while providing fallback formats for older browsers.

  • <img>: Strictly required as the final child element. The <picture> tag itself does not display anything; it merely feeds a source URL to this inner <img>tag. It also ensures backwards compatibility for older browsers and holds vital attributes like alt and loading.

Top comments (0)