art direction et l’élément picture

‘art direction’ = changement des proportions, recadrage, voire remplacement de toute l’image.
Vers la démo http://responsiveimages.org/demos/

Source : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Img#Attributs

La modification d’images sur la base des caractéristiques de l’appareil peut être réalisée à l’aide de l’élément picture.
L’élément picture définit une solution déclarative pour fournir plusieurs versions d’une image sur la base de différentes caractéristiques, telles que la taille de l’appareil, la résolution, l’orientation, etc.

l'élément picture

picture commence à faire son apparition dans les navigateurs.
Cet élément n'est pas encore disponible dans tous les navigateurs, mais il est conseillé de l'utiliser en raison de sa puissante rétrocompatibilité et de l'utilisation potentielle du polyfill Picturefill (cf ResponsiveImages.org).

picture doit être utilisé lorsqu'une source d'image est présente dans plusieurs densités ou lorsque la conception de sites Web adaptatifs impose une image quelque peu différente sur certains types d'écrans. Comme c'est le cas pour l'élément video, plusieurs éléments source peuvent être inclus, ce qui permet de spécifier différents fichiers image en fonction des requêtes média ou du format d'image.

Par ex:
<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" >
</picture>

Si la largeur du navigateur est

  • d'au moins 800 pixel, alors head.jpg ou head-2x.jpg est utilisé suivant la résolution de l’appareil ;
  • entre 450 et 800 pixels, head-small.jpg ou head-small-2x.jpg  " ;
  • inférieures à 450 pixels + pour compatibilité rétroactive img doit toujours etre inclus.

Module picture de drupal 7

Le module picture de drupal 7 est assez limité. Voir (en fr) http://www.stephanemartinw.com/articles/20-images-responsives-srcset-sizes-drupal

l'élément sizes (images à dimensionnement relatif)

Si la taille définitive de l’image est inconnue, il peut s’avérer difficile de spécifier un descripteur de densité pour les sources d’images. Cela vaut tout particulièrement pour les images qui couvrent une largeur proportionnelle du navigateur et qui sont fluides, en fonction de la taille du navigateur.

Au lieu de fournir des densités et des tailles d’image fixes, vous pouvez spécifier la taille de chaque image diffusée en ajoutant un descripteur de largeur avec la taille de l’élément d’image. Cela permet au navigateur de calculer automatiquement la densité de pixels effective et de choisir la meilleure image à télécharger.

    <img src="lighthouse-200.jpg" sizes="50vw"
         srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
                 lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
                 lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
                 lighthouse-1800.jpg 1800w">   

affiche une image dont la largeur équivaut à la moitié de celle de la fenêtre d’affichage (sizes=’50vw’) et, en fonction de la largeur du navigateur et du rapport de pixel de l’appareil, permet au navigateur de choisir l’image appropriée, quelle que soit la taille de la fenêtre du navigateur.

breakpoints : Tenir compte des points de rupture dans les images adaptatives

Dans la plupart des cas, il se peut que la taille ou l’image change en fonction des points de rupture de la mise en page du site. Sur un petit écran, par exemple, vous souhaitez que l’image occupe toute la largeur de la fenêtre d’affichage, alors qu’elle n’occupera qu’une petite partie sur un écran de plus grande dimension.

    <img src="400.png"
         sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
         srcset="100.png 100w, 200.png 200w, 400.png 400w,
                 800.png 800w, 1600.png 1600w, 2000.png 2000w">

Ici, sizes utilise plusieurs requêtes média pour spécifier la taille de l’image. Si la largeur du navigateur est :

  • supérieure à 600 pixels, l’image équivaut à 25 % de la largeur de la fenêtre d’affichage.
  • entre 500 et 600 pixels, l’image équivaut à 25 % de la largeur de la fenêtre d’affichage.
  • En-dessous de 500 pixels, elle occupe toute la largeur.

 

logo drush