HTML - <picture> Tag

Quiz

Introduction to <picture> Tag

The HTML <picture> tag defines different images for various sizes or resolution. It serves as an alternative to the <img> tag and includes both <source> and <img> elements. The <picture> tag is useful for displaying different images based on the device.

The <picture> element contains one or more <source> elements and one <img> describes the size and other attributes of the images. The browser evaluates each <source> element and loads the most appropriate image. If no matches are found, the browser displays the image specifies by the <img> tag.

Use of <picture> Tag

Instead of scaling image according to the view port width, the <picture> element allows for the specification of multiple images that better fit the browser view port. It can be used for the following purposes −

To adjust and crop images for different media situations.
To provide alternative image formats when a certain format isn't supported.

How to Use <picture> Tag?

You can use the <picture> tag to define different images based on various media rules. This requires multiple <source> elements and one <img> element.

Syntax

The following is the syntax of <picture> tag:

<picture>
   <source media="..." srcset="..">
   <source media="..." srcset="..">
   <img src="..." alt="..">
</picture>

Attributes

The HTML <picture> tag also supports the following additional attributes −

S.No.	Attribute & Description
1	media Accepts any valid media query that would typically be defined in CSS.
2	sizes Defines a single width descriptor, a single media query with a width descriptor, or a comma-delimited list of media queries with a width descriptor.
3	src Specifies the image URL.
4	srcset (Required) Specifies the URL of the image to use in various situations.
5	type Defines the MIME type.

Example: Basic Usage

The following example demonstrates how to specify different images based on screen width using the media attribute:

<!DOCTYPE html>
<html>
   <style>
      body {
         text-align: center;
      }
   </style>
<body style="background-color:#EAFAF1">
   <picture>
      <source media="(min-width: 600px)" srcset="/artificial_intelligence/images/artificial-intelligence-mini-logo.jpg">
      <source media="(min-width: 450px)" srcset="/cg/images/logo.png">
      <img src="/html/images/html-mini-logo.jpg" alt="LOGO" style="width:auto;">
   </picture>
</body>
</html>

Example: Responsive Image for Retina

In the below example, demonstrates how to set the different images for retina displays. When the code is executed, "html-mini-logo.jpg" will be loaded on retina displays, while "logo.png" will be loaded on regular displays."

<!DOCTYPE html>
<html>
   <style>
      body {
         text-align: center;
      }
   </style>
<body style="background-color:#EAFAF1">
<picture>
  <source srcset="/html/images/html-mini-logo.jpg 2x, /cg/images/logo.png 1x">
  <img src="/html/images/html_images.jpg" alt="High-resolution image">
</picture>
</body>
</html>

Example: Image Formats

Here, we demonstrate how to specify different formats. When executed, if the browser supports WebP, it will load 1.webp a more optimized format. Otherwise, html_images.jpg will be loaded.

<!DOCTYPE html>
<html>
   <style>
      body {
         text-align: center;
      }
   </style>
<body style="background-color:#EAFAF1">
<picture>
  <source type="image/webp" srcset="https://www.gstatic.com/webp/gallery/1.webp"/>
  <source type="image/jpeg" srcset="/html/images/html_images.jpg"/>
  <img src="/html/images/html-mini-logo.jpg" alt="Different formats images"/>
</picture>
</body>
</html>

html_tags_reference.htm

Print Page