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 add Read More Read Less Button using JavaScript? #2 How to check if radio button is checked or not using JavaScript? #3 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to create a Horizontal Scroll on button click using JavaScript?JavaScriptHow to add a Bar Chart in Angular App?AngularWhat are Web services?MiscellaneousThe 7 Security Objectives of Any Organization for IT and Network SecurityMiscellaneousCONCAT and CONCAT_WS Functions in PostgresPostgresHow to create a for loop in SCSS (Sass)?SCSS