Introduction aux images responsives, 1 : définitions

Notre série de l'été 2015 est consacrée aux images responsives, présentées par le grand Jason Grigsby. Pour ne plus rien ignorer sur le pourquoi et le comment, suivez le guide!

Par

Ces dernières années, j’ai écrit pas mal d’articles sur les images responsives. Maintenant qu’elles sont arrivées dans nos navigateurs, je me suis dit que c’était le moment de prendre un peu de recul et de revenir aux bases pour ceux qui commencent tout juste à s’y intéresser.

Donc, voici une nouvelle série intitulée Responsive Images 101 ( NdT : le titre original) qui couvrira tout ce qu’il faut savoir, depuis les raisons pour lesquelles nous avons besoin des images responsives jusqu’à la façon de choisir la bonne solution pour notre site web adaptif.

NdT : La Cascade a déjà publié d’autres articles (Images responsives, picture et srcset et Images responsives : cas d’utilisation et snippets), mais là nous partons pour notre grande série de l’été, un guide complet sur les images responsives !

Allez, on se lance !

Qu’est-ce que les images responsives ?

L’idée d’un redimensionnement des images par le navigateur est une composante essentielle du design responsive depuis l’origine.

Cependant, si on se contente de redimensionner, les utilisateurs risquent de télécharger des images bien trop grandes pour leur usage. Prenez cette image d’une Apple Watch :

image

Dans sa version la plus large, pour les affichages HD comme le iMac, elle fait 5.144 × 1.698px et elle pèse 398K. Fournir une image de cette taille à un terminal du genre Blackberry Curve 9310 — avec sa résolution d’écran de 320 × 240px — n’a aucun sens. Nous avons besoin d’une image plus réduite.

C’est pourquoi, lorsque je parle d’images responsives, je donne toujours cette définition :

Une méthode permettant de fournir au navigateur des sources multiples pour les images en fonction de sa densité d’affichage, de la dimension de l’élément image dans la page, ou de tout autre facteur.

Bien souvent, lorsque les gens parlent d’images responsives, ils se réfèrent à des solutions aux problèmes des images en ligne. Pourquoi ? Regardons notre vieil ami l’élément <img> :

<img src="girafe.jpg" alt="Girafe">

L’élément <img> ne nous fournit qu’une seule source, et cela a toujours été le plus grand défi à relever. Mais les images responsives ne se limitent pas à HTML. Nous verrons quelques techniques CSS plus tard dans cette série.

Comprendre votre cas d’usage

Quand on commence à regarder les solutions existant aujourd’hui pour nos images responsives, on a parfois du mal à choisir. Pour savoir quelle solution est la mieux adaptée, il est essentiel de bien définir le cas d’usage auquel vous souhaitez répondre.

Le Responsive Image Community Group (RICG) a défini plusieurs cas d’usage. Je vous encourage à en lire la liste complète — il y a plein de choses intéressantes — mais pour notre propos je simplifierai les choses en me limitant à deux cas : le changement de résolution et la direction artistique.

Le changement de résolution

C’est le cas d’usage le plus fréquent. Cela renvoie à tout scénario dans lequel vous voulez simplement fournir une image dans différentes tailles, sans opérer la moindre modification du contenu ou du ratio d’aspect.

image
Le changement de résolution inclut des images HD (retina)

Le changement de résolution comprend non seulement les images flexibles (dont la dimension varie en fonction de celle du viewport), mais également les scénarios où vous voulez fournir différentes sources d’images selon la densité de l’affichage (p.ex. pour les écrans retina).

La direction artistique

Lorsque vous modifiez le contenu de l’image ou son ratio d’aspect, vous faites ce que le RICG appelle de la direction artistique.

Prenons cet exemple du Président Obama tenant un discours dans une usine Chrysler.

image

Quand cette image est affichée sur un écran large, montrer la chaîne montage en arrière-plan a tout son sens. Cela permet de comprendre où l’événement a eu lieu, et cela ajoute quelque chose à l’image. Mais voyez ce que ça donne lorsque l’image est redimensionnée pour un petit écran.

image

On reconnaît à peine Obama, on ne voit pas son visage. Au lieu de simplement réduire la taille de l’image, il serait préférable de la recadrer en se débarrassant de l’arrière-plan pour se focaliser sur lui. Le résultat final fonctionne beaucoup mieux sur un écran de petite taille :

image

La direction artistique ne se limite pas au recadrage. Par exemple, sur le site de Nokia montrant la nouvelle version de son navigateur, vous pouvez voir comment l’image passe du format paysage au format portrait selon la taille de l’écran :

Comme l’a bien expliqué Stephanie Rieger à la Breaking Development conference, la décision de modifier l’image a été prise pour que le navigateur reste visible et lisible.

Le cas le plus fréquent de direction artistique concerne les images qui contiennent du texte. Regardons cet exemple du site de CB2 :

image

Cette image contient trois photos, deux logos avec typographie, ainsi qu’un tampon avec texte en trait fin. Si nous redimensionnons cette image à 320px de large, le texte est trop petit pour être lisible.

image

CB2 n’a pas de site responsive actuellement, mais il a un site mobile, où nous pouvons voir comment le problème est résolu pour les écrans réduits :

image

Pour que l’image fonctionne sur un écran de taille réduite, CB2 effectue les changements suivants :

  • Passer de trois photos à deux
  • Supprimer le texte
  • Modifier le ratio d’aspect des images plus grandes
  • Redesign de la mise en page de l’image

Comme vous pouvez le voir, les changements nécessaires pour faire fonctionner une image sur un petit écran peuvent être substantiels !

Commençons à jouer

Maintenant que nous avons défini les choses, nous pouvons commencer à examiner les solutions et leur fonctionnement. La suite dans la 2e partie : Img requise.

La liste des articles de cette série (en cours) :

  1. Définitions
  2. Img requise
  3. Densité d’affichage srcset
  4. Descripteurs de largeur srcset
  5. Dimensions
  6. Élément picture
  7. Type
  8. Images responsives CSS
  9. Points de rupture image

Intéressé par le Responsive Web Design ? Retrouvez une liste des meilleurs articles et ressources du web.

Articles sur les mêmes thèmes dans la Cascade :

Images responsives, picture et srcset
Images responsives : cas d’utilisation et snippets


original paru le dans Cloud Four Blog.

Sur l’auteur : passe bien trop de temps à réfléchir sur l’univers mobile. Il a fondé Mobile Portland, une organisation à but non lucratif qui se consacre à éduquer, promouvoir et soutenir la communauté mobile de Portland. Co-fondateur de Cloud Four, il est aussi co-auteur de Head First Mobile Web et il donne de nombreuses conférences sur la technologie et la stratégie mobiles. On peut le suivre sur Twitter, Facebook, Google+.

Traduit avec l’aimable autorisation de Cloud Four Blog et de l’auteur.
Copyright Cloud Four Blog © 2015.