While developing a web page, we come across situations where depending on the screen size or device, we need to display different images at a particular place on the page.
The HTML <picture> element is the solution to such problems. It allows us to specify a set of images using the <source> tags.
Depending on the device or screen size, while rendering the page, the browser selects the first appropriate image from the <picture> element and displays it on the screen.
This feature is helpful in responsive web design, where the layout of a page adjusts according to the device screen size.
Let's take an example and understand the implementation of <picture> element.
Inside the opening <picture> and closing </picture> tags, we can specify multiple images using the <source> tags.
The <source> tag has two attributes and .
The attribute specifies the URL of the image, and the attribute specifies the condition.
The condition helps the browser in deciding the image to be used.
As in the example above, the browser will use the image on devices with a screen width of 500px or less.
Similarly, the browser will use on devices with a screen width of 700px or less.
The browser checks the <source> tags from top to bottom and ignores further <source> tags if a condition mentioned in the attribute is matched.
The <source> element is an empty HTML element, which means it does not have a closing tag.
When all <source> tags are defined, we define an alternate image using the <img> tag.
The browser uses this image when no other image is used from the <source> tags.
Also, the <img> element is used as a fallback for browsers that don't support the <picture> element.
Hence we should always place the <img> tag in the last. Otherwise, an unexpected view can occur.
Let's see a complete example. Click on 'Result on Editor' and view the result of the code.
The large-size images consume more bandwidth and take time to download. It can increase the loading time of a website.
The users of mobile phones and other handheld devices may not require large images.
And hence by using <picture> element, we can provide an option to the browser to load an alternate smaller image for such devices.
Images can be of different formats. Some devices or browsers may not support all image formats.
Hence, in that case, using <picture> element, we can provide multiple images in different formats. The browser will use the first recognised format and ignores the rest.
The HTML <picture> element can help us display different images based on the user's operating system, location, language and browser.
| 1. HTML Tutorial |
| 2. Introduction to HTML |
| 3. Basic HTML Page |
| 4. HTML Editors |
| 5. Web Browser |
| 6. HTML History |
| 7. Basic HTML Tags |
| 8. HTML Elements |
| 9. HTML Attributes |
| 10. HTML Headings |
| 11. HTML Paragraphs |
| 12. HTML Text Formatting |
| 13. HTML Styles |
| 14. HTML Comment |
| 15. HTML Quotation |
| 16. HTML Colors |
| 17. HTML RGB Colors |
| 18. HTML HEX Colors |
| 19. HTML HSL Color |
| 20. HTML CSS |
| 21. HTML Links |
| 22. HTML Link Colors |
| 23. Link within Page |
| 24. HTML Images |
| 25. HTML Background Image |
| 26. HTML Image Map |
| 27. HTML Picture Element |
| 28. HTML Favicon |
| 29. HTML Table |
| 30. HTML Table Border |
| 31. HTML Table Size |