Introduction aux images responsives, 2 : img requise

Suite de notre série de l'été consacrée aux images responsives. L'élément img est insuffisant, mais il est indispensable. Améliorons-le progessivement avec les nouveaux standards des images responsives. Par Jason Grigsby.

Par

Une des principales raisons pour lesquelles nous avons besoin de solutions responsives pour nos images est que l’élément <img> est insuffisant. Il n’a qu’une seule src alors qu’il nous en faut plusieurs.

Il vous paraîtra donc peut-être étonnant que nous commencions ici par l’élément <img> plutôt que par les nouveaux joujoux <picture> et srcset. Mais en fait, quelle que soit la solution que vous choisirez, l’élément <img> est requis.

L’élément <img> est indispensable pour toutes les solutions en ligne d’images responsives. J’aime à me représenter <img> comme une boîte dans laquelle toutes les règles relatives aux images responsives sont ajoutées et appliquées.

image
Box icon réalisée par Daniel Bruce avec www.flaticon.com, sous licence CC BY 3.0

Vous pouvez utiliser JavaScript pour observer les changement du currentSrc de l’élément img. Voici un petit script tout simple qui observe les changements et les écrit dans la page (avec mes remerciements à Lyza et Erik) :

(function() {
  var currentSrc, oldSrc, imgEl;
  var showPicSrc = function() {
    oldSrc     = currentSrc;
    imgEl      = document.getElementById(’picimg’);
    currentSrc = imgEl.currentSrc || imgEl.src;

    if (typeof oldSrc === ’undefined’ || oldSrc !== currentSrc) {
      document.getElementById(’logger’).innerHTML = currentSrc;
    }
  };

  // You may wish to debounce resize if you have performance concerns
  window.addEventListener(’resize’, showPicSrc);
  window.addEventListener(’load’, showPicSrc);
})(window);

Vous pouvez le voir en action sur cette page de démo. Faites varier la largeur de la fenêtre navigateur pour voir le currentSrc changer.

Pourquoi est-ce important ?

Du fait que <img> montrera toujours la source en cours, tout JavaScript qui interagit avec l’élément <img> fonctionnera comme prévu (et je ne parle pas ici des années passées par les fabricants de navigateurs à écrire un code qui traite les images correctement).

Comme l’écrit Eric Portis, “nous améliorons progressivement img” lorsque nous utilisons les nouveaux standards des images responsives.

Avons-nous besoin d’autre chose que img ?

Dans certains cas, l’élément <img> tout seul suffira :

  • Une page web de largeur fixe : si votre site n’est pas adaptif et si vous ne souciez pas des affichages “retina”, alors l’élément <img> est amplement suffisant.
  • Différences minimes de taille fichier : pour certaines images, il n’y a pas de grande différence entre la taille maximum et ses variantes plus réduites.On le voit bien avec les badges, icônes et autres petites images dont la taille ne varie pas beaucoup lorsque le viewport est redimensionné. S’il n’y a pas de grande différence de taille fichier, une seule source <img> peut suffire.
  • Utilisation d’images vectorielles comme SVG : si vous utilisez des formats d’images vectorielles comme SVG, l’image est redimensionnée sans qu’on n’ait à fournir une autre source. Dans ce cas également, une seule source suffit.

Tout dépend évidemment de la question de savoir si le navigateur supporte SVG ( NdT : voir la compatibilité de SVG à jour ici). Si une large compatibilité est essentielle pour votre site, il vaut mieux utiliser l’élément picture pour offrir une image alternative comme solution de repli — j’y reviendrai plus tard dans cette série.

Et si je veux supporter l’affichage HD ?

Si vous voulez supporter l’affichage en haute définition, alors nous devons donner des vitamines à notre élément <img>, et c’est ce que nous allons voir dans la 3e partie de cette série : Densité d’affichage srcset.

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.