<picture> ... élément permettant des images responsives, alternative à <img>.
Exemple de code:
<picture>
<source
media="(min-width: 650px)"
srcset="images/kitten-stretching.png">
<source
media="(min-width: 465px)"
srcset="images/kitten-sitting.png">
<img
src="images/kitten-curled.png"
alt="a cute kitten">
</picture>Et voici un autre exemple trouvé sur le site sketchapp.com. On notera qu'il utilise le format WebP, nouveau format compressé développé par Google.
<picture>
<source
srcset="/images/features/mirror.webp 1x,
/images/features/[email protected] 2x"
type="image/webp">
<img src="/images/features/mirror-png8.png"
srcset="/images/features/[email protected] 2x">
</picture>Enfin, une méthode trouvée sur un site de Google en novembre 2016:
<div class="_image js-responsive-image loaded"
data-knowndimensions="1600x1050"
data-preserveaspectratio="true"
data-src="form.jpg"
data-target="#fig-2"
style="background-image: url([email protected]);">
</div>On notera qu'il n'y a pas dans ce code de balise image (<img>), l'image est affichée comme image de fond en css (background-image). Son conteneur est un simple <div>.