Yogesh Chauhan's Blog

How to use HTML picture Tag?

in HTML on December 11, 2020

The picture tag gives more flexibility in specifying image resources.

The most common use of the picture element will be in responsive designs.

Instead of having one image we can add multiple images to fill the browser viewport.

The picture element holds two different tags:

1. one or more source tags and

2. one img tag to offer alternative versions of an image for different devices/screens. 

To decide which URL to load, the user agent examines each source‘s srcset, media, sizes and type attributes to select a compatible image that best matches the current layout and capabilities of the display device.

The source element has the following attributes:

1. srcset (required) – defines the URL of the image to show

2. media – accepts any valid media query that would normally be defined in a CSS

3. sizes – defines a single width descriptor, a single media query with width descriptor, or a comma-delimited list of media queries with a width descriptor

4. type – defines the MIME type

The browser will use the attribute values to load the most appropriate image.

The browser will use the first source element with a matching hint and ignore any following source tags.

If no matches are found—or the browser doesn’t support the picture element—the URL of the img element’s src attribute is selected.

The img element is required as the last child tag of the picture declaration block.

The img element is used to provide backward compatibility for browsers that do not support the picture element, or if none of the source tags matched.

The picture element works similar to the video and audio elements.

You set up different sources, and the first source that fits the preferences is the one being used.

You can use the object-position property to adjust the positioning of the image within the element’s frame, and the object-fit property to control how the image is resized to fit within the frame.

Examples

The media attribute


<picture>
  <source srcset="logo-wide.png" media="(min-width: 600px)">
  <img src="logo-narrow.png" alt="logo">
</picture>

The srcset attribute


<picture>
  <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x">
  <source srcset="logo-480.png, logo-480-2x.png 2x">
  <img src="logo-320.png" alt="logo">
</picture>

The type attribute


<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="logo">
</picture>

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
SQL Right JoinSQL/MySQLWhat is a “promise” in JavaScript?JavaScriptWhat are Stored Procedures for SQL Server?SQL/MySQLSequence generator (range) using JavaScript Array.from()JavaScriptWhat are partials in SCSS (Sass)?SCSSHow to check if the page is the home page in WordPress?WordPress