Introduction aux images responsives 7 : type

Si vous déplorez la limitation des formats d'images, si vous voulez expérimenter sans abandonner vos utilisateurs, vous allez adorer l’attribut type. Un grand moment de détente avec Jason Grigsby!

Par

Jusqu’à présent, nous nous sommes concentrés sur l’amélioration de la performance de nos images responsives. C’est essentiel, mais au bout du compte nous avons toujours les mêmes images sur notre page. Le moment est venu de nous amuser maintenant !

L’attribut type

Avez-vous parfois déploré la limitation des formats d’images à jpg, png et gif ? Vous êtes-vous déjà demandé s’il existait une bonne compatibilité navigateurs pour les nouveaux formats tels que SVG ou webp ?

Si c’est le cas, vous allez adorer l’attribut type.

image
Déclarez différents types d’images. Sauf en cas de direction artistique, vous n’avez pas besoin des attributs media.

L’attribut type peut être ajouté aux éléments <source> à l’intérieur d’un élément <picture> et vous permet de déclarer différents types d’images parmi lesquelles le navigateur peut faire son choix :

<picture>
  <source type="image/svg+xml" srcset="logo.xml">
  <source type="image/webp" srcset="logo.webp"> 
  <img src="logo.png" alt="ACME Corp">
</picture>

Ce nouvel attribut type est construit sur le même modèle que l’attribut type de l’élément <video> et il fonctionne de la même manière.

Le navigateur choisit la première source dont le type est supporté. S’il ne reconnaît aucun des types, il utilise la src de l’élément <img> ou les déclarations srcset.

La valeur de l’attribut est un type MIME correspondant au format de l’image référencée dans l’attribut srcset. Si vous avez plusieurs URI d’images listées dans l’attribut srcset, elles doivent correspondre au type MIME déclaré.

Bien entendu, vous pouvez également combiner type avec les attributs sizes et/ou media. Chacun de ces trois attributs est optionnel et on peut les combiner pour réaliser ce qu’on veut.

L’attribut srcet est requis pour tous les éléments <source>. Les descripteurs de densité d’affichage et les descripteurs de largeur peuvent être utilisés avec l’attribut type.

A-t-on besoin de l’attribut media ?

J’ai pris l’habitude de dire à tout venant qu’on ne devrait pas utiliser l’élément picture pour la plupart des images responsives. C’est vrai mais cela peut créer une certaine confusion.

Alors maintenant que vous avez bien compris les techniques relatives aux images responsives en ligne, regardons les choses en détail :

  • La plupart des images du web peuvent s’adapter au cas d’usage du changement de résolution.
  • Lorsque vous avez un cas d’usage de changement de résolution, vous voulez permettre au navigateur de faire le meilleur choix possible. C’est à cela que sert srcset.
  • Lorsque vous utilisez l’élément <picture> avec des attributs media, vous imposez au navigateur le choix des images.

C’est pourquoi vous pouvez et vous devriez utiliser <picture> quand vous voulez à la fois un changement de résolution et la compatibilité avec des formats d’images multiples. Mais laissez tomber l’attribut media et laissez faire le navigateur.

Amélioration progressive pour les formats d’images

Jusqu’à présent dans cette série, j’ai essayé d’être professionnel tout en restant léger. Mais ici, fini la plaisanterie parce que...

Pendant des années, nous avons souhaité pouvoir utiliser différents formats d’images mais il nous fallait attendre une large adoption du format. Quand nous avons eu l’impression de pouvoir enfin faire le saut, nous avons dû affronter un cruel dilemme lié aux anciens navigateurs. Soit nous avons pris le parti du progrès, en espérant ne pas affecter trop de nos utilisateurs, soit nous n’avons pas opéré de changement par peur de laisser de côté trop d’entre eux.

Mais l’élément <picture> combiné à l’attribut type nous permet de sortir de ce dilemme. Nous pouvons utiliser l’amélioration progressive pour les formats d’images dès maintenant.

Sara Soueidan a décrit la façon dont elle crée des solutions de repli PNG pour ses SVG à la place de tous les hacks que nous utilisons jusqu’ici.

Mais cela ne concerne pas que SVG et Webp. Quid de JPEG-2000 ? JPEG-XR ? APNG ?

Si vous pouvez trouver un navigateur qui supporte le format d’image que vous souhaitez et si vous pensez que ce format offre quelque chose à vos utilisateurs, il n’y a pas de raison de ne pas l’utiliser du moment que vous proposez des solutions alternatives.

JPEG-2000 ? Oui, s’il vous plaît !

Un superbe article en profondeur de Zolton Hawryluk m’a ouvert les yeux sur les avantages qu’il y a à avoir différents formats d’images, en particulier JPEG-2000 pour les images avec transparence alpha.

Dans un des exemples donnés par Zoltan dans son article, il montre un dé placé au-dessus d’un background multicolore ( NdT : impressionnant ! déplacez les dés sur l'image pour voir l'effet de transparence). Pour y parvenir, il faut une transparence alpha.

image

La taille des fichiers de l’image ci-dessus pour différentes dimensions :

JPEG-2000JPEG-XRPNGWEBP
320×2402K22.6K55.2K11.2K
600×45013.5K48.5K14.3K26.6K
1024×76819.2K95.7K325.7K56K

C’est incroyable ce qu’on peut économiser ! Le dé en PNG à 1024×768 pèse 325.7K alors que la même image en JPEG-2000 ne fait que 19.2K. C’est complètement fou.

Je sais ce que vous pensez. Vous vous dites “ok, c’est génial, mais aucun navigateur ne supporte JPEG-2000”.

C’est ce que je pensais moi aussi, mais j’avais tort. Les versions pour desktop et mobile de Safari sont déjà compatibles avec JPEG-2000. Cela dit, avant de convertir toutes vos images en JPEG-2000, tenez tout de même compte de l’avertissement de Zoltan :

Comme vous pouvez le voir, les chiffres parlent pour JPEG-2000. Cependant, les tailles de fichiers des autres images peuvent varier en fonction des caractéristiques de l’image originale. Même si les nouveaux formats d’images donnent de meilleurs résultats, parfois l’écart n’est pas énorme.

Bref, tout dépendra de l’image et de votre design. Mais en tout cas, vous pouvez voir que ces formats peuvent apporter des avantages significatifs à vos utilisateurs selon le type d’images et de formats supportés par leur navigateur.

Le meilleur des mondes des formats d’images

Il reste encore beaucoup de travail à faire au niveau des divers formats pour nous permettre de savoir quels formats ont le plus de sens et lesquels utiliser pour quel usage. Mais rien que de mettre en place des outils pour créer des images dans divers formats peut s’avérer compliqué. Zoltan donne quelques informations à la fin de son article sur les outils qu’il a utilisés pour créer les différents formats.

Mis à part la ligne de commande, je trouve que ces outils sont mal pratiques et quelque peu grossiers. Aucune incitation n’est venue de compagnies comme Adobe pour ajouter une bonne compatibilité à des formats comme JPEG-2000 car personne ne les utilise pour l’instant.

Il nous reste beaucoup à expérimenter, j’ai hâte !

Et CSS là-dedans ?

Tout ce dont nous avons parlé jusqu’ici concerne les images en ligne. Mais il y a de nouveaux standards CSS pour les images responsives et quelques bonnes astuces à connaître. La suite dans la 8e partie de notre série : Images responsives CSS.

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.