|<- [[The Picture Element]]|[[Accessibility]] ->|

Art direction,

choisir un visuel différent selon les média-queries

media queries dans les éléments source avec l'attribut media

====== The Full Monty ======

Examples:

  * [[http://udacity.github.io/responsive-images/examples/3-08/pictureArtDirection|Picture element: art direction]]
  * [[http://udacity.github.io/responsive-images/examples/3-08/pictureFullMonty|Picture element: with srcset and media queries]]
  * [[http://udacity.github.io/responsive-images/examples/3-08/picturefill|Picturefill polyfill]]


----

Images are by [[https://twitter.com/itsjonq|Jon Q]] from Pearl Chen’s HTML5 Rocks article [[http://www.html5rocks.com/tutorials/responsive/picture-element/|Built-in Browser Support for Responsive Images]].

You can download Picturefill [[http://scottjehl.github.io/picturefill/|here]].

[[https://responsiveimagescg.github.io/cq-usecases/|Element Queries]] will work like Media Queries, but with reference to the size of an element’s parent container rather than viewport size. Browser implementation is in progress and in the meantime there’s a polyfill [[https://github.com/marcj/css-element-queries|here]].

Lots of other ''%%<picture>%%'' use cases, examples and code snippets are available [[https://dev.opera.com/articles/responsive-images/|here]].

Find out more about responsive images from the [[http://responsiveimages.org|Responsive Images Community Group]].