This specification is no longer being maintained. See the status of this document for details.
picture element was intended to give authors a way to
control which image resource a user agent presents to a user based on a
media query and/or support for a particular image format.
The primary purpose of the
picture element is to address
use cases [[!respimg-usecases]] that are left unaddressed by the
srcset attribute [[html-srcset]]; the most important being
direction. Other use cases, such as
matching media features and media types and matching on
formats, are also addressed by this specification.
Work on this specification has stopped as it was superceded by the
proposal. The mailing list gives the justification
as to why we stopped persuing the standardization of the
This document was published by the HTML Working Group as a Working Draft, but was developed in collaboration with the Responsive Images Community Group (see licensing commitments).
This specification provides developers with a means to declare multiple
sources for an image, and, through [[!CSS3-MEDIAQUERIES]] (CSS
Media Queries), it gives developers control as to when those
images are to be presented to a user. This is achieved by introducing
picture element to [[!HTML]], and by enhancing the
source element to support [[!html-srcset]].
By relying on [[!CSS3-MEDIAQUERIES]], a user agent can respond to changes in the browsing environment by selecting the image source that most closely matches the browsing environment - thus embodying a technique known as responsive web design directly in the HTML markup. Media features that a user agent can potentially respond to include, but are not limited to, pixel widths and heights, and pixel densities, as well as environmental lighting conditions, changes in orientation, and changes in media type such as going from screen to print.
picture element remains backwards compatible with
legacy user agents by degrading gracefully through fallback
content (i.e., through the
img element) while also
potentially providing better accessibility than the existing
This specification also defines the
interface, through which developers can interact with
picture element is intended primarily for
directing graphical content. For cases where a single image
source is available, and where no responsive adoption is needed,
authors are encouraged to use the
img element instead.
This example shows how to combine the
source element, while also providing fallback
content for legacy user agents through the
<picture width="500" height="500"> <source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="med.jpg"> <source src="small.jpg"> <img src="small.jpg" alt=""> <p>Accessible text</p> </picture>
This example shows how the
picture element can be used
srcset attribute [[!html-srcset]] to provide a
range of sources suitable for a given media query:
<picture width="500" height="500"> <source media="(min-width: 45em)" srcset="large-1.jpg, large-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg, med-2.jpg 2x"> <source srcset="small-1.jpg, small-2.jpg 2x"> <img src="small-1.jpg" alt=""> <p>Accessible text</p> </picture>
This example shows how picture and other HTML elements can be used together.
<figure> <picture width="200" height="200"> <source media="(min-width: 45em)" srcset="large-1.jpg, large-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg, med-2.jpg 2x"> <source srcset="small-1.jpg, small-2.jpg 2x"> <img src="small-1.jpg" alt=""> </picture> <figcapture>A figure of a fox jumping over a lazy box.</figcaption> </figure>
srcset attribute allows authors to define various
image resources and “hints” that assist a user agent in determining
the most appropriate image source to display. Given a set of image
resources, the user agent has the option of either following or
overriding the author’s declarations to optimize the user experience
based on criteria such as
display density, network connection type, user preferences, and
picture element defines conditions under which the
use agent needs to follow the author's explicit instructions when
selecting which resource to display. This includes image sources with
inherent sizes designed to align with layout variations specified in
CSS media queries (see: design
breakpoints, and relative
units) or content variations for increased clarity and focus
direction) based on the client’s viewport.
The proposed solutions are not mutually exclusive. They work together to address the complete set of use cases and requirements for responsive images (see [[!respimg-usecases]]).
As well as sections marked as non-normative, all authoring guidelines, diagrams, examples, and notes in this specification are non-normative. Everything else in this specification is normative.
The key words must, must not, required, should, should not, recommended, may, and optional in this specification are to be interpreted as described in [[!RFC2119]].
This specification has the same conformance requirements and applies to the same conformance classes as [[!HTML]].
Implementations that use ECMAScript to expose the APIs defined in this specification must implement them in a manner consistent with the ECMAScript Bindings defined in the [[!WEBIDL]] specification.
The following terms are used throughout this specification so they are gathered here for the readers convenience. The following list of terms is not exhaustive; other terms are defined throughout this specification.
The follow terms are defined by the [[!HTML]] specification:
fallback content, and
valid media query.
This specification allows HTML's
source element to use the
srcset attribute when a
source is used in the context of a
img element, the
picture element presents image data.
However, unlike the img element, which the resource is presented
depends on the user agent's support for a particular image format
and/or matching some environmental condition. The chosen
image is the embedded content.
For user agents that don't support the
an author can provide an
img element as fallback
A complete list of participants of the Responsive Images Community Group is available at the W3C Community Group Website.
Participants of the Responsive Images Community Group at the time of publication were: Barry Atimer, Daniel Abril, George Adamson, Heide Alexander, Marie Alhomme, John Allan, Joshua Allen, Angely Alvarez, Agustin Amenabar, Aaryn Anderson, Philip Andrews, Ritchie Anesco, Phil Archer, Tony Atayi, Tom Atkins, Justin Avery, Mohsen Azimi, Phillip Baker, Raymond Baker, Michael Balensiefer, Toni Barrett, Bruno Barros, Paul Barton, Adrian Bateman, Jesse Renée Beach, Robin Berjon, Seth Bertalotto, Anirban Bhattacharya, Nicolaas Bijvoet, Barna Bitai, Nathan Bleigh, Andreas Bovens, J. Albert Bowden, Adam Bradley, Rodrigo Brancher, Gordon Brander, Paul Bridgestock, Aaron Brosey, Brandon Brown, Cory Brown, mairead buchan, Kris Bulman, Ariel Burone, Mathias Bynens, Marcos Caceres, Rusty Calder, Ben Callahan, Loïc Calvy, Welch Canavan, Chuck Carpenter, Brandon Carroll, Frederico Cerdeira, Daniel Chamberlin, Adi Chikara, David Clements, Geri Coady, Anne-Gaelle Colom, Cyril Concolato, Jessica Constantine, Greg Cota, Geoff Cowan, Andy Crum, David D'Amico, Jason Daihl, Francois Daoust, Kevin Davies, Robert Dawson, Jacques de Klerk, Timothy de Paris, Ryan DeBeasi, Anna Debenham, Darryl deHaan, David Demaree, George DeMet, Ian Devlin, Alex DiLiberto, peter droogmans, Ronni Dyrholm Chidekel, simpson eddie, Sylvia Egger, Dominic Fee, Ève Février, Maximiliano Firtman, Ben Fonarov, Harry Fozzard, Marlene Frykman, Dennis Gaebel, Igor Gajosinskas, Nicolas Gallagher, Miguel Garcia, Rafael Garcia Lepper, Larry Garfield, Peter Gasston, George GeorgeHaeger, David Goss, Chris Grant, Petra Gregorova, Ilya Grigorik, Jason Grigsby, Aaron Grogg, Antoine Guergnon, Jeff Guntle, Aaron Gustafson, Jason Haag, Jordan Haines, Cristina Hanes, Patrick Haney, Anselm Hannemann, chris hardy, Vincent Hardy, Bridget Harrison, Duncan Hawthorne, Dominique Hazaël-Massieux, Chris Hilditch, Jon Hill, Nathan Hinshaw, Sean Hintz, John Holt Ripley, Enrico Hösel, Peter Hrynkow, Kym Huang, Shane Hudson, Vinicius Ianni, Tomomi Imura, Philip Ingrey, Bryn Jackson, Rihnna Jakosalem, Brett Jankord, Scott Jehl, Dave Johnson, Nathanael Jones, Danny Jongerius, Michael Jovel, Chao Ju, Tim Kadlec, Raj Kaimal, Kevin Joe Kanger, Frédéric Kayser, Serge K. Keller, Arthur Khachatryan, Jin Kim, Andreas Klein, Peter Klein, John Kleinschmidt, Daniel Konopacki, Darius Kruythoff, Zoran Kurtin, Vitaliy Kuzmin, Gerardo Lagger, Adam Lake, Chris Lamothe, Tom Lane, Matthieu Larcher, Christopher Latham, Bruce Lawson, Zach Leatherman, Silas Lepcha, Kornel Lesinski, Chris Lilley, grappler login, william lombardo, Tania Lopes, Amie Lucas, André Luís, Jacine Luisi, David Maciejewski, Kevin Mack, Ethan Malasky, Josh Marinacci, Eduardo Marques, Mathew Marquis, Daniel Martínez, Tom Maslen, Jacob Mather, Chris McAndrew, Mark McDonnell, Andre Jay Meissner, Benjamin Melançon, Julian Mendl, Rick Messer, Zane Milakovic, Denys Mishunov, Sabine Moebs, Ian Moffitt, Orestis Molopodis, jason morita, David Moulton, Bobby Mozumder, Brian Muenzenmeyer, Emi Myoudou, Irakli Nadareishvili, Giorgio Natili, Jonathan Neal, Christian Neuberger Jr, David Newton, Todd Nienkerk, Ashley Nolan, Johnna Nonboe, Kenneth Nordahl, Mark Nottingham, Lewis Nyman, Darrel O'Pry, Alejandro Oviedo, David Owens, Paddy O’Hanlon, Isabel Palomar, suzanne peter, Hassadee Pimsuwan, Guy Podjarny, Andreas Pollak, gentian polovina, Dave Poole, Florent Preynat, Manik Rathee, François REMY, Venkatesh Rengasamy, Jen Reynolds, Ricardo Andrade Belo Ricardo Belo, Michael Riethmuller, Carlo Rizzante, John Rodler, César Rodríguez, Nestor Rojas, Adrian Roselli, David Rupert, Chris Ruppel, Oguzcan Sahin, Viljami Salminen, Luca Salvini, Ana Sampaio, Luke Sands, crazyrohila sanjay, aron santa, Osny Santos, Jad Sarout, Brandon Satrom, Jeroen Savat, Stéphane Savona, Christoph Saxe, Doug Schepers, Jason Schmidt, Christopher Schmitt, Joe Schmitt, Greg Schumacher, Boaz Sender, SHAHINA SHEIK, Tomoyuki Shimizu, Ariel Shkedi, Abdul Wahid Sial, Pandapotan Silaban, Mauricio Silva Teixeira de Nobrega, Jen Simmons, Michael Singleterry, Katerina Skotalova, David Sleight, Michael[tm] Smith, Nick Snyder, Ignacio Soriano Cano, Steve Souders, Brenden Sparks, Aaron Staker, Aaron Stanush, Walter Stevenson, Bridget Stewart, Jared Stilwell, Matt Stow, Shari Sullivan, Kevin Suttle, Patrick Szalapski, Satoru Takagi, Rob Tarr, Philipp Tautz, Nguyen Thao Thao, Edward Thurgood, Anthony Ticknor, Erek Tinker, Sebastián Tromer, Tsvetan Tsvetkov, Yusuke Uchida, Mads Ulsø Østergaard, Katarina Ur, Adam van den Hoven, Jacob van Zijp, Lucas Vilaboim, Jitendra Vyas, Amy W, Tady Walsh, Yoav Weiss, George White, Michael Whittet, Matt Wilcox, Richard Wild, John Albin Wilkins, Chris Williams, Rory Wilson, Owen Winkler, Robin Winslow, Cyril Wolfangel, Mike Woodard, Jeremy Worboys, Mike Wu, Bruce Zawalsky, Carlos Zepeda, and jintian zheng.
Contributions also from: David Newton, Ilya Grigorik and Leon de Rijke. Special thanks to Adrian Bateman for providing the group with guidance.