Images

Comme dit l'adage : 'Une image vaut mieux qu'un long discours'. Et les images font justement partie intégrante de chaque page. Cependant, elles constituent également la majorité des octets téléchargés. La conception de sites Web adaptatifs permet non seulement d'adapter les dispositions aux caractéristiques de l'appareil, mais aussi les images.

Images adaptatives

Grâce à la conception de sites Web adaptatifs, il est possible d'adapter non seulement les dispositions aux caractéristiques de l'appareil, mais aussi les images. Par exemple, sur des écrans haute résolution (2x), des graphiques haute résolution sont nécessaires pour garantir la netteté des détails. Une image d'une largeur de 50 % donnera de bons résultats avec un navigateur de 800 pixels de large, mais occupera trop d'espace sur un téléphone à écran étroit. Cependant, elle utilisera toujours autant de bande passante lorsqu'elle sera adaptée à un écran plus petit.

Art direction

Exemple d'art direction

Dans d'autres cas, il se peut que l'image doive subir des modifications plus importantes : changement des proportions, recadrage, voire remplacement de toute l'image. On parle alors d''art direction'. Pour consulter d'autres exemples, rendez-vous sur responsiveimages.org/demos/.

Responsive Images

Did you know that images account for more than 60% of the bytes on average needed to load a web page?

In this course you will learn how to work with images on the modern web, so that your images look great and load quickly on any device.

Along the way, you will pick up a range of skills and techniques to smoothly integrate responsive images into your development workflow. By the end of the course, you will be developing with images that adapt and respond to different viewport sizes and usage scenarios.

This is a free course offered through Udacity

Take Course

Images dans le balisage

Particulièrement puissant, l'élément img télécharge, décode et affiche du contenu. De plus, les navigateurs modernes sont compatibles avec un large éventail de formats d'image. Inclure des images compatibles avec plusieurs appareils ne diffère pas de la méthode utilisée pour les ordinateurs de bureau. Il suffit de quelques réglages mineurs pour garantir une expérience utilisateur optimale.

TL;DR

  • Utilisez des tailles relatives pour les images afin d'éviter tout dépassement accidentel de la capacité du conteneur.
  • Utilisez l'élément picture pour spécifier des images différentes en fonction des caractéristiques de l'appareil (c'est ce que l'on désigne sous le nom d''art direction').
  • Utilisez l'attribut srcset et le descripteur x dans l'élément img pour fournir au navigateur des indications quant à la meilleure image à utiliser parmi différentes densités.

Appliquer des tailles relatives aux images

Pensez à utiliser des unités relatives lors de l'indication de largeurs pour les images afin d'éviter tout dépassement accidentel de la capacité de la fenêtre d'affichage. Si vous définissez, par exemple, la valeur width: 50%;, la largeur de l'image équivaudra à 50 % de l'élément conteneur (et non à la fenêtre d'affichage, ni à la taille de pixel réelle).

Dans la mesure où la technologie CSS autorise le contenu à dépasser la capacité de son conteneur, il peut s'avérer nécessaire d'utiliser la valeur max-width: 100% pour éviter le débordement d'images et d'autre contenu. Par exemple :

img, embed, object, video {
  max-width: 100%;
}

Veillez à fournir des descriptions explicites au moyen de l'attribut alt sur les éléments img. Elles contribuent à rendre votre site plus accessible en offrant du contexte aux lecteurs d'écran et à d'autres technologies assistives.

Améliorer les éléments img avec l'attribut srcset pour les écrans à haute densité de pixels

L'attribut srcset améliore le comportement de l'élément img, facilitant ainsi la diffusion de plusieurs fichiers image pour différentes caractéristiques d'appareil. À l'instar de la image-set fonction CSS native de CSS, l'attribut srcset permet au navigateur de choisir l'image idéale en fonction des caractéristiques de l'appareil ; par exemple, une image 2x sur un écran 2x et, à l'avenir, une image 1x sur un appareil 2x sur un réseau à faible débit.

<img src="photo.png" srcset="photo@2x.png 2x" ...>

Sur les navigateurs non compatibles avec l'attribut srcset, le fichier image par défaut spécifié par l'attribut src est utilisé. C'est pourquoi il est important de toujours inclure une image 1x pouvant être affichée sur tout appareil, quelles qu'en soient les capacités. Lorsque l'attribut srcset est accepté, une liste d'images/de conditions séparées par des virgules est analysée avant de formuler des requêtes, et seule l'image appropriée est téléchargée et affichée.

Les conditions peuvent inclure des éléments tels que la densité de pixels ou encore la largeur et la hauteur. Cependant, seule la densité de pixels bénéficie, à ce jour, d'une vaste prise en charge. Pour trouver le bon équilibre entre le comportement actuel et les fonctionnalités à venir, contentez-vous d'intégrer l'image 2x dans l'attribut.

Art direction dans des images adaptatives avec l'élément picture

La modification d'images sur la base des caractéristiques de l'appareil (opération connue sous le nom d''art direction') 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.

Exemple d'art direction

L'élément 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.

<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" alt="a head carved out of wood">
</picture>

Dans l'exemple ci-dessus, si la largeur du navigateur est d'au moins 800 pixels, le fichier head.jpg ou head-2x.jpg est utilisé suivant la résolution de l'appareil. Si la largeur du navigateur est comprise entre 450 pixels et 800 pixels, le fichier head-small.jpg ou head-small-2x.jp est utilisé, une fois encore en fonction de la résolution de l'appareil. Pour les largeurs d'écran inférieures à 450 pixels et pour offrir une rétrocompatibilité lorsque l'élément picture n'est pas accepté, le navigateur affiche plutôt l'élément img, lequel doit toujours être inclus.

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" alt="a lighthouse">

L'exemple ci-dessus 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. Le tableau ci-dessous illustre l'image qui sera choisie par le navigateur :

Largeur du navigateur Rapport de pixel de l'appareil Image utilisée Résolution effective
400 pixels 1 200.png 1x
400 pixels 2 400.png 2x
320 pixels 2 400.png 2,5x
600 pixels 2 800.png 2,67x
640 pixels 3 1000.png 3,125x
1100 pixels 1 1400.png 1,27x

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" alt="an example image">

L'attribut sizes dans l'exemple ci-dessus 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. Si elle est comprise entre 500 pixels 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.

Rendre extensibles les images de produit

Les clients veulent voir ce qu'ils achètent. Les personnes qui visitent les sites de vente au détail veulent être en mesure d'afficher des gros-plans en haute résolution des produits qu'ils consultent afin d'en visualiser les moindres détails, comme l'a démontré cette étude menée par Google et AnswerLab.

Site Web J. Crew avec une image de produit extensible
Site Web J. Crew avec une image de produit extensible

Le site J. Crew constitue un excellent exemple de source d'images extensibles sur lesquelles l'utilisateur peut appuyer. Une superposition 'escamotable' indique une image sur laquelle il est possible d'appuyer pour afficher une image agrandie présentant les détails les plus infimes du produit.

Autres techniques relatives aux images

Images compressibles

La technique d'image compressible diffuse des images 2x fortement compressées vers tous les appareils, quelles qu'en soient les capacités réelles. En fonction du type d'image et du niveau de compression, la qualité d'image peut paraître inchangée, mais la taille du fichier diminue de manière significative.

Voir l'exemple

Remplacement d'images JavaScript

La procédure de remplacement d'images JavaScript vérifie les capacités de l'appareil et 'agit en conséquence'. Vous pouvez déterminer le rapport de pixel de l'appareil à l'aide de window.devicePixelRatio, connaître la largeur et la hauteur de l'écran, et même procéder au reniflage de connexion réseau via navigator.connection ou émettre une fausse requête. Dès que vous avez collecté toutes ces informations, vous pouvez déterminer l'image à charger.

Le principal inconvénient de cette méthode est que l'utilisation du langage JavaScript diffère le chargement de l'image jusqu'à la fin de l'exécution de l'analyseur Look-Ahead, voire plus tard encore. En d'autres termes, le téléchargement des images ne commencera même pas avant le déclenchement de l'événement pageload. De plus, il est probable que le navigateur télécharge les images 1x et 2x entraînant, de ce fait, une augmentation du poids de la page.

Images dans la propriété CSS

La propriété CSS 'background' constitue un puissant outil pour ajouter des images complexes à des éléments, facilitant ainsi l'ajout de plusieurs images, leur répétition, etc. Associée à des requêtes média, la propriété 'background' s'avère encore plus puissante et permet notamment le chargement conditionnel d'images sur la base de la résolution d'écran, de la taille de la fenêtre d'affichage, etc.

TL;DR

  • Utilisez l'image la mieux adaptée aux caractéristiques de l'écran en tenant compte de la taille de lécran, de la résolution de l''appareil et de la mise en page.
  • Dans le cas des écrans à haute densité de pixels, modifiez la propriété background-image dans la feuille de style à l'aide de requêtes média avec min-resolution et -webkit-min-device-pixel-ratio.
  • Utilisez l'attribut 'srcset' pour fournir des images en haute résolution en plus de l'image 1x dans le balisage.
  • Tenez compte des critères de performances lors de l'utilisation de techniques de remplacement d'images JavaScript ou lors de la diffusion d'images haute résolution utilisant un taux de compression élevé sur des appareils de plus faible résolution.

Utiliser des requêtes média pour le chargement conditionnel d'images ou le changement des images en fonction des caractéristiques de l'appareil ('art direction')

Les requêtes média n'affectent pas seulement la mise en page. Vous pouvez également les utiliser pour le chargement conditionnel d'images ou le changement d'images en fonction de la largeur de la fenêtre d'affichage.

Dans l'exemple ci-dessous, seul le fichier small.png est téléchargé et appliqué à l'élément div de contenu sur les écrans de plus petite taille, tandis que, sur les écrans plus grands, background-image: url(body.png) est appliqué à body et background-image: url(large.png), à l'élément div de contenu.

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

Utiliser la fonction image-set pour fournir des images haute résolution

La fonction image-set() de CSS améliore le comportement de la propriété background, facilitant ainsi la diffusion de plusieurs fichiers image pour différentes caractéristiques d'appareil. Cela permet au navigateur de choisir l'image idéale en fonction des caractéristiques de l'appareil ; par exemple, une image 2x sur un écran 2x, ou bien une image 1x sur un appareil 2x sur un réseau à faible débit.

background-image: image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

Outre le chargement de l'image appropriée, le navigateur la dimensionne comme il se doit. En d'autres termes, le navigateur suppose que les images 2x sont deux fois plus grandes que les images 1x et les réduit donc selon un facteur 2, de sorte qu'elles semblent avoir la même taille sur la page.

La fonction image-set() est relativement récente et seuls les navigateurs Chrome et Safari l'acceptent actuellement avec le préfixe fournisseur -webkit. Il convient également de veiller à inclure une image de substitution lorsque la fonction image-set() n'est pas acceptée. Par exemple :

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x  
  );  
  background-image: image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x  
  );
}

Dans l'exemple ci-dessus, l'élément approprié est chargé dans les navigateurs compatibles avec la fonction image-set, tandis que l'élément 1x est utilisé dans les autres cas. Notons toutefois une restriction, et elle est de taille : dans la mesure où peu de navigateurs sont compatibles avec la fonction image-set(), la plupart d'entre eux recevront l'élément 1x.

Utiliser des requêtes média pour fournir des images haute résolution ou changer les images en fonction des caractéristiques de l'appareil ('art direction')

Les requêtes média peuvent créer des règles sur la base du rapport de pixel de l'appareil, ce qui permet de spécifier des images différentes pour les écrans 2x et 1x.

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
  /* High dpi styles & resources here */
}

Les navigateurs Chrome, Firefox et Opera acceptent tous la syntaxe (min-resolution: 2dppx) standard. Pour Safari et Android, en revanche, l'ancienne syntaxe sans dppx est requise. Pour rappel, ces styles ne sont chargés que si l'appareil correspond à la requête média. En outre, vous devez spécifier des styles pour le scénario de base. Cette méthode offre également l'avantage d'afficher quelque chose si le navigateur n'accepte pas les requêtes média spécifiques à la résolution.

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
}

@media (min-resolution: 2dppx), /* Standard syntax */ 
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */ 
{
  .sample {
    background-size: contain;
    background-image: url(icon2x.png);
  }
}

Vous pouvez également utiliser la syntaxe min-width pour afficher d'autres images en fonction de la taille de la fenêtre d'affichage. L'avantage de cette technique est de ne pas télécharger l'image si la requête média ne correspond pas. Par exemple, le fichier bg.png n'est téléchargé et appliqué à l'élément body que si la largeur du navigateur est supérieure ou égale à 500 pixels :

@media (min-width: 500px) {
  body {
    background-image: url(bg.png);
  }
}

Utiliser des images SVG pour les icônes

Lorsque vous ajoutez des icônes à une page, utilisez des icônes SVG dans la mesure du possible ou, dans certains cas, des caractères Unicode.

TL;DR

  • Pour les icônes, utilisez des images SVG ou des symboles Unicode à la place des images matricielles.

Remplacer les icônes simples par des symboles Unicode

De nombreuses polices sont compatibles avec les innombrables symboles Unicode disponibles, qui peuvent remplacer des images. À la différence de ces dernières, les polices Unicode sont bien adaptées au changements de taille et leur apparence est parfaite, quelle que soit la taille d'affichage sur l'écran.

Outre le jeu de caractères normal, Unicode peut contenir des symboles pour certains formats de nombres (⅐), des flèches (←), des signes mathématiques (√), des formes géométriques (★), des images de commandes (▶), des motifs en braille (⠏), des notes de musique (♬), des lettres de l'alphabet grec (Ω) et même des pièces de jeu d'échecs (♞).

Pour inclure un caractère unicode, vous devez utiliser le même format que pour les entités nommées : &#XXXX, XXXX représentant le numéro de caractère Unicode. Par exemple :

Vous êtes une super &#9733;

Vous êtes une super ★

Remplacer les icônes complexes par des icônes SVG

Pour les icônes dont les besoins sont plus complexes, les icônes SVG sont généralement d'un poids modéré, faciles à utiliser et peuvent être formatées avec CSS. Les icônes SVG présentent de nombreux avantages par rapports aux images matricielles :

  • Ce sont des graphiques vectoriels dont on peut modifier la taille à l'infini.
  • Les effets CSS, tels que la couleur, l'ombrage, la transparence et les animations s'appliquent directement.
  • Les images SVG peuvent être intégrées dans le document lui-même.
  • Elles sont sémantiques.
  • Elles permettent une meilleure accessibilité avec les attributs appropriés.

 

With SVG icons, you can either add icons using inline SVG, like 
this checkmark:
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink" 
       width="32" height="32" viewBox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
  </svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.

Utiliser les polices d'icônes avec précaution

Les polices d'icône sont populaires et peuvent être faciles à utiliser. En revanche, elles ont certains inconvénients par rapport aux icônes SVG.

  • Ce sont des graphiques vectoriels dont on peut modifier la taille à l'infini. Mais elles font parfois l'objet d'un anti-crénelage, ce qui génère des icônes moins fines que prévu.
  • Styles limités avec CSS.
  • Il est parfois difficile de les positionner parfaitement au pixel près, selon la hauteur de ligne, l'espacement des lettres, etc.
  • Elles ne sont pas sémantiques et peuvent être difficiles à utiliser avec des lecteurs d'écran ou d'autres technologies d'assistance.
  • Si elles ne sont pas conçues correctement, elles peuvent générer un fichier de taille importante pour une utilisation limitée à un petit sous-groupe d'icônes, parmi celles qui sont disponibles.

Exemple de page dans laquelle FontAwesome a été utilisé pour les icônes de type police.

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

Des centaines de polices d'icônes gratuites et payantes existent, notamment Font Awesome, Pictos et Glyphicons.

Veillez à comparer le poids de la demande HTTP et de la taille de fichier supplémentaires avec le besoin en icônes. Par exemple, si vous n'avez besoin que de quelques icônes, il peut s'avérer plus judicieux d'utiliser une image ou un sprite d'images.

Optimiser les images dans une optique de performances

Les images comptent souvent pour la majorité des octets téléchargés. De plus, elles occupent généralement une grande partie de l'espace visuel sur la page. Par conséquent, leur optimisation peut vous permettre de réaliser des économies d'octets considérables et d'améliorer sensiblement les performances de votre site Web : moins le navigateur devra télécharger d'octets, moins il y aura de concurrence pour la bande passante du client, et plus vite le navigateur pourra télécharger et afficher tous les éléments.

TL;DR

  • Ne choisissez pas un format d''image au hasard, mais tâchez d''utiliser le format le mieux adapté en parfaite connaissance de cause.
  • Intégrez des outils de compression et d'optimisation d'images dans votre flux de travail afin de réduire la taille des fichiers.
  • Placez les images fréquemment utilisées dans des sprites d'image en vue de réduire le nombre de requêtes HTTP.
  • Il est judicieux de ne charger les images qu'après leur défilement afin d'accélérer le chargement initial de la page et de réduire son poids initial.

Choisir le bon format

Vous devez prendre en compte deux types d'images : les images vectorielles et les images matricielles. Dans le cas des images matricielles, vous devez également choisir le format de compression adéquat ; "GIF", "PNG" ou "JPG", par exemple.

Les images matricielles, telles que les photos et d'autres images, sont représentées sous la forme d'une grille de points individuels ou pixels. Elles proviennent généralement d'un appareil photo ou d'un scanner, ou elles peuvent être créées dans le navigateur à l'aide de l'élément canvas. Plus ces images sont grandes, plus la taille du fichier est importante. Lorsque ces images sont redimensionnées au-delà de leur taille initiale, elles deviennent floues, car le navigateur doit 'deviner' comment remplir les pixels manquants.

Les images vectorielles, telles que les logos et les illustrations au trait, sont définies par un ensemble de courbes, de lignes, de formes et de couleurs de remplissage. Elles sont créées à l'aide de programmes comme Adobe Illustrator et Inkscape, et enregistrées dans un format vectoriel tel que 'SVG'. Les images vectorielles étant basées sur des primitives simples, leur dimensionnement n'entraîne aucune perte de qualité, ni modification de la taille du fichier.

Pour déterminer le format adéquat, il importe de tenir compte de l'origine de l'image (matricielle ou vectorielle), ainsi que du contenu (couleurs, animation, texte, etc.). Il n'existe pas de format idéal pour tous les types d'image, et chaque format présente des avantages et des inconvénients.

Pour prendre la bonne décision, commencez par appliquer ces quelques directives :

  • Utilisez le format JPG pour les images photographiques.
  • Utilisez le format SVG pour les illustrations vectorielles et les graphiques unis tels que les logos et les illustrations au trait. Si les illustrations vectorielles ne sont pas disponibles, essayez donc le format WebP ou PNG.
  • Utilisez le format PNG plutôt que GIF, car il autorise davantage de couleurs et offre de meilleurs taux de compression.
  • Pour les animations plus longues, il est conseillé d'utiliser l'élément <video> qui offre une meilleure qualité d'image et permet à l'utilisateur de contrôler la lecture.

Réduire la taille de fichier

Il est possible de réduire sensiblement la taille du fichier image en le soumettant à un post-traitement après l'avoir enregistré. Il existe tout un éventail d'outils destinés à la compression d'images : avec et sans perte, en ligne, avec interface graphique, par ligne de commande, etc. Lorsque cela s'avère possible, il est conseillé d'automatiser l'optimisation des images, de sorte qu'elle soit considérée comme un objet de première classe dans votre flux de travail.

Plusieurs outils permettent d'effectuer une compression sans perte plus poussée sur les fichiers JPG et PNG, sans nuire à la qualité d'image. Pour le format JPG, essayez jpegtran ou jpegoptim (disponible seulement sur Linux ; à exécuter avec l'option --strip-all). Pour le format PNG, essayez OptiPNG ou PNGOUT.

Utiliser des sprites d'image

La création de sprites CSS est une technique par laquelle plusieurs images sont regroupées dans un seul fichier appelé sprite sheet. Les images individuelles peuvent ensuite être utilisées en indiquant l'image d'arrière-plan d'un élément (la sprite sheet), plus un décalage pour afficher la partie appropriée.

.sprite-sheet {
  background-image: url(sprite-sheet.png);
  width: 40px;
  height: 25px;
}

.google-logo {
  width: 125px;
  height: 45px;
  background-position: -190px -170px;
}

.gmail {
  background-position: -150px -210px; 
}

.maps {
  height: 40px;
  background-position: -120px -165px;
}

L'avantage de cette technique est de réduire le nombre de téléchargements requis pour obtenir plusieurs images, tout en permettant la mise en cache.

Lazy Loading

La technique de Lazy Loading permet d'accélérer sensiblement le chargement des longues pages qui comportent de nombreuses images sous la ligne de flottaison. Pour ce faire, les images sont chargées suivant les besoins ou une fois le chargement et le rendu du contenu principal terminés. Outre les améliorations qu'elle apporte sur le plan des performances, cette technique permet de créer des interfaces en défilement infini.

Soyez prudent lorsque vous créez des pages en défilement infini. En effet, puisque le contenu est chargé à mesure qu'il devient visible, il se peut que les moteurs de recherche ne le détectent jamais. De plus, les utilisateurs qui s'attendent à trouver des informations dans le pied de page ne les verront jamais, car du nouveau contenu est chargé en permanence.

Éviter complètement les images

Dans certains cas, l'image idéale n'est, en réalité, pas du tout une image. Dans la mesure du possible, utilisez les capacités natives du navigateur pour proposer des fonctions identiques ou similaires. Les navigateurs génèrent des éléments visuels qui, auparavant, auraient nécessité des images. Outre le fait que les navigateurs ne doivent plus télécharger de fichiers image distincts, cela permet d'éviter que les images ne soient dimensionnées de façon maladroite. Les icônes peuvent être affichées à l'aide de polices Unicode ou de polices d'icônes spéciales.

TL;DR

  • Évitez d''utiliser des images lorsque cela s''avère possible. Utilisez plutôt les fonctionnalités offertes par le navigateur pour les ombres, les dégradés, les coins arrondis, etc.

Placer du texte dans des balises plutôt que l'intégrer dans des images

Dans la mesure du possible, évitez d'intégrer le texte dans des images. Évitez, par exemple, d'utiliser des images comme titres ou encore de placer directement des informations telles que des numéros de téléphone ou des adresses dans des images. Outre le fait que ces informations ne peuvent pas être copiées et collées par les utilisateurs, elles sont inexploitables par les lecteurs d'écran et n'offrent aucune souplesse d'adaptation. Placez plutôt le texte dans le balisage et, au besoin, utilisez des polices Web pour obtenir le style souhaité.

Utiliser CSS pour remplacer des images

Les navigateurs modernes peuvent utiliser des fonctionnalités CSS pour créer des styles qui, auparavant, auraient nécessité des images. Quelques exemples : des dégradés complexes peuvent être créés à l'aide de la propriété background, des ombres peuvent être créées à l'aide de box-shadow et des coins arrondis peuvent être ajoutés à l'aide de la propriété border-radius.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.

<style>
  div#noImage {
    color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
  }
</style>

Veuillez noter que l'utilisation de ces techniques exige des cycles de rendu, qui peuvent être relativement importants sur des appareils mobiles. En cas d'utilisation excessive, vous risquez de perdre les éventuels avantages obtenus et une baisse des performances est possible.