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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #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 Display Related Posts in WordPress?WordPressColleague UI Basics: Accessing the user interfaceColleagueUse eq() method in jQueryjQueryDid you get an error while displaying Special Characters in JavaScript?JavaScriptUNION and UNION ALL in PostgresPostgresHow to compile and watch Sass using Gulp in WordPress?SCSS