Images responsives

Une image vaut 1 000 mots, et les images font partie intégrante de chaque page. Mais ils représentent aussi souvent la plupart des octets téléchargés. Avec le Responsive Web Design, non seulement nos mises en page peuvent changer en fonction des caractéristiques de l'appareil, mais aussi les images.

Le responsive web design signifie que non seulement nos mises en page peuvent changer en fonction des caractéristiques de l'appareil, mais que le contenu peut également changer. Par exemple, sur les écrans haute résolution (x2), les graphiques haute résolution garantissent la netteté. Une image de 50% de largeur peut très bien fonctionner pour le navigateur de 800 pixels de large, mais elle occupe trop d'espace sur un téléphone étroit et nécessite la même quantité de bande passante lorsqu'elle est réduite pour s'adapter à un écran plus petit.

Direction artistique

Exemple de direction artistique

Dans d'autres cas, des modifications plus importantes peuvent être nécessaires: modification des proportions, recadrage, voire remplacement de l'image entière. Dans ce cas, le changement de l'image est généralement appelé direction artistique. Pour plus d'exemples, consultez la page responsiveimages.org/demos/.

Images responsives

Capture d'écran du cours Udacity

Saviez-vous que les images représentent plus de 60% des octets en moyenne nécessaires au chargement d'une page Web ?

Dans ce cours, vous allez apprendre à utiliser des images sur le Web moderne afin qu'elles s'affichent correctement et se chargent rapidement sur n'importe quel appareil.

En cours de route, vous allez acquérir toute une série de compétences et de techniques pour intégrer facilement des images responsives dans votre workflow de développement. À la fin du cours, vous développerez votre application avec des images qui s'adaptent et s'adaptent à différentes tailles de fenêtres d'affichage et scénarios d'utilisation.

Ce cours est proposé sans frais via Udacity.

Suivre le cours

Images dans le balisage

L'élément img est puissant (il télécharge, décode et affiche le contenu), et les navigateurs récents sont compatibles avec de nombreux formats d'image. L'inclusion d'images qui fonctionnent sur tous les appareils n'est pas différente de celle sur ordinateur. Seules quelques modifications mineures sont nécessaires pour créer une expérience de qualité.

Résumé

  • Utilisez des tailles relatives pour les images afin d'éviter qu'elles ne dépassent accidentellement le conteneur.
  • Utilisez l'élément picture lorsque vous souhaitez spécifier différentes images en fonction des caractéristiques de l'appareil (ou direction artistique).
  • Utilisez srcset et le descripteur x dans l'élément img pour indiquer au navigateur la meilleure image à utiliser pour choisir parmi différentes densités.
  • Si votre page ne contient qu'une ou deux images et que celles-ci ne sont pas utilisées ailleurs sur votre site, envisagez d'utiliser des images intégrées pour réduire le nombre de demandes de fichiers.

Utiliser des tailles relatives pour les images

N'oubliez pas d'utiliser des unités relatives lorsque vous spécifiez la largeur des images, afin d'éviter qu'elles ne dépassent accidentellement la fenêtre d'affichage. Par exemple, avec width: 50%;, la largeur de l'image correspond à 50% de l'élément conteneur (et non à 50% de la fenêtre d'affichage ni à 50% de la taille réelle en pixels).

Étant donné que le CSS permet au contenu de dépasser de son conteneur, vous devrez peut-être utiliser la valeur max-width: 100% pour éviter que les images et d'autres contenus débordent. Exemple :

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

Assurez-vous de fournir des descriptions pertinentes via l'attribut alt au niveau des éléments img. Ils contribuent à rendre votre site plus accessible en fournissant du contexte aux lecteurs d'écran et aux autres technologies d'assistance.

Améliorez les imgs avec srcset pour les appareils à PPP élevé

L'attribut srcset améliore le comportement de l'élément img, ce qui permet de fournir facilement plusieurs fichiers image pour différentes caractéristiques d'appareil. Comme la fonction CSS image-set native de CSS, srcset permet au navigateur de choisir la meilleure image en fonction des caractéristiques de l'appareil, par exemple en utilisant une image x2 sur un écran x2 et, à l'avenir, une image x1 sur un appareil x2 sur un réseau à bande passante limitée.

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

Sur les navigateurs qui ne sont pas compatibles avec srcset, il utilise simplement le fichier image par défaut spécifié par l'attribut src. C'est pourquoi il est important de toujours inclure une image x1 qui peut être affichée sur n'importe quel appareil, quelles que soient ses capacités. Lorsque srcset est pris en charge, la liste des images/conditions séparées par une virgule est analysée avant d'envoyer des requêtes, et seule l'image la plus appropriée est téléchargée et affichée.

Bien que les conditions puissent inclure toutes sortes de valeurs, de la densité en pixels à la largeur et à la hauteur, seule la densité de pixels est bien prise en charge aujourd'hui. Pour équilibrer le comportement actuel et les futures fonctionnalités, ne fournissez que l'image x2 dans l'attribut.

Direction artistique dans les images responsives avec picture

Exemple de direction artistique

Pour modifier les images en fonction des caractéristiques de l'appareil (également appelée "direction artistique"), utilisez l'élément picture. L'élément picture définit une solution déclarative pour fournir plusieurs versions d'une image en fonction de différentes caractéristiques, telles que la taille de l'appareil, sa résolution, son orientation, etc.

Utilisez l'élément picture lorsqu'une source d'image existe dans plusieurs densités ou lorsqu'une conception responsive impose une image quelque peu différente sur certains types d'écrans. Comme pour l'élément video, vous pouvez inclure plusieurs éléments source, 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>

Essayer

Dans l'exemple ci-dessus, si la largeur du navigateur est d'au moins 800 pixels, head.jpg ou head-2x.jpg est utilisé, selon la résolution de l'appareil. Si la taille du navigateur est comprise entre 450 et 800 pixels, head-small.jpg ou head-small- 2x.jpg est de nouveau utilisé, en fonction de la résolution de l'appareil. Pour les largeurs d'écran inférieures à 450 pixels et la rétrocompatibilité où l'élément picture n'est pas compatible, le navigateur affiche l'élément img à la place et doit toujours être inclus.

Images de taille relative

Lorsque la taille finale de l'image n'est pas connue, il peut être difficile de spécifier un descripteur de densité pour les sources des images. Cela est particulièrement vrai pour les images fluides qui occupent une largeur proportionnelle de la fenêtre du navigateur et dépendent de la taille de ce dernier.

Au lieu de fournir des tailles et des densités d'image fixes, vous pouvez spécifier la taille de chaque image fournie en ajoutant un descripteur de largeur avec la taille de l'élément image. Le navigateur peut ainsi calculer automatiquement la densité de pixels effective et 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">

Essayer

L'exemple ci-dessus affiche une image correspondant à la moitié de la largeur de la fenêtre d'affichage (sizes="50vw"). Selon la largeur du navigateur et son ratio de pixels de l'appareil, le navigateur peut choisir l'image appropriée, quelle que soit la taille de la fenêtre du navigateur. Par exemple, le tableau ci-dessous indique l'image que le navigateur choisirait:

Largeur du navigateur Rapport de pixels de l'appareil Image utilisée Résolution efficace
400px 1 200.jpg x1
400px 2 400.jpg 2 fois
320px 2 400.jpg 2,5 x
600px 2 800.jpg 2,67x
640px 3 1000.jpg 3,125x
1100px 1 800.png x 1,45

Prendre en compte les points d'arrêt dans les images responsives

Dans de nombreux cas, la taille de l'image peut changer en fonction des points d'arrêt de la mise en page du site. Par exemple, sur un petit écran, vous souhaiterez peut-être que l'image s'étende sur toute la largeur de la fenêtre d'affichage, tandis que sur les grands écrans, elle ne devrait prendre qu'une petite proportion.

<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">

Essayer

Dans l'exemple ci-dessus, l'attribut sizes utilise plusieurs requêtes média pour spécifier la taille de l'image. Lorsque la largeur du navigateur est supérieure à 600 pixels, l'image représente 25% de la largeur de la fenêtre d'affichage. Lorsqu'elle est comprise entre 500 et 600 pixels, elle occupe 50% de la largeur de la fenêtre d'affichage. En dessous de 500 pixels, elle occupe toute la largeur.

Rendre les images des produits extensibles

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

Les clients veulent savoir ce qu'ils achètent. Sur les sites de vente au détail, les utilisateurs s'attendent à pouvoir afficher des gros plans en haute résolution des produits pour obtenir un meilleur aperçu des détails, et les participants aux études étaient frustrés de ne pas pouvoir le faire.

Un bon exemple d'images extensibles et tactiles est fourni par le J. Site de l'équipage. Une superposition qui disparaît indique qu'il est possible d'appuyer sur une image, ce qui fournit une image avec un zoom avant et des détails précis visibles.

Autres techniques d'imagerie

Images compressées

La technique de compression d'image permet de diffuser une image x2 hautement compressée sur tous les appareils, quelles que soient leurs capacités réelles. Selon le type d'image et le niveau de compression, la qualité de l'image peut ne pas sembler changer, mais la taille du fichier diminue considérablement.

Essayer

Remplacement d'image JavaScript

Le remplacement d'image JavaScript vérifie les fonctionnalités de l'appareil et "fait le bon choix". Vous pouvez déterminer le ratio de pixels de l'appareil via window.devicePixelRatio, obtenir la largeur et la hauteur de l'écran, et même éventuellement renifler les connexions réseau via navigator.connection ou émettre une fausse requête. Une fois que vous avez collecté toutes ces informations, vous pouvez décider de l'image à charger.

L'un des principaux inconvénients de cette approche est que, si vous utilisez JavaScript, le chargement de l'image est retardé jusqu'à la fin, au moins, de la fin de l'analyseur d'anticipation. Cela signifie que le téléchargement des images ne commencera même qu'après le déclenchement de l'événement pageload. En outre, le navigateur téléchargera très probablement les images 1x et 2x, ce qui augmentera la taille de la page.

Images intégrées: matricielles et vectorielles

Il existe deux méthodes fondamentalement différentes pour créer et stocker des images. Cela affecte la façon dont vous les déployez de manière responsive.

Les images matricielles, telles que les photographies et d'autres images, sont représentées par une grille de points de couleur individuels. Les images matricielles peuvent provenir d'un appareil photo ou d'un scanner, ou être créées avec l'élément canevas HTML. Les images matricielles sont stockées dans des formats tels que PNG, JPEG et WebP.

Les images vectorielles, comme les logos et les dessins au trait, sont définies comme un ensemble de courbes, de lignes, de formes, de couleurs de remplissage et de dégradés. Les images vectorielles peuvent être créées avec des programmes comme Adobe Illustrator ou Inkscape, ou écrites manuellement dans un format vectoriel comme SVG.

SVG

Le format SVG permet d'inclure des graphiques vectoriels réactifs dans une page Web. L'avantage des formats de fichiers vectoriels par rapport aux formats de fichiers matriciels est que le navigateur peut afficher une image vectorielle de n'importe quelle taille. Les formats vectoriels décrivent la géométrie de l'image, c'est-à-dire la façon dont elle est construite à partir de lignes, de courbes, de couleurs, etc. Les formats matriciels, en revanche, n'ont que des informations sur chaque point de couleur. Le navigateur doit donc deviner comment remplir les blancs lors de la mise à l'échelle.

Vous trouverez ci-dessous deux versions de la même image: une image PNG à gauche et une image SVG à droite. Le fichier SVG est impeccable quel que soit le format, tandis que l'image PNG située à côté commence à paraître floue sur les écrans plus grands.

Logo HTML5, format PNG
Logo HTML5, format SVG

Si vous souhaitez réduire le nombre de requêtes de fichiers envoyées par votre page, vous pouvez coder des images intégrées au format SVG ou Data URI. Si vous affichez la source de cette page, vous constaterez que les deux logos ci-dessous sont déclarés de manière intégrée: un URI de données et un SVG.

Le format SVG est excellent sur mobile et ordinateur, et les outils d'optimisation peuvent considérablement réduire la taille du format SVG. Les deux logos SVG intégrés suivants semblent identiques, mais l'un fait environ 3 Ko et l'autre n'en fait que 2 Ko:

URI de données

Les URI de données permettent d'intégrer un fichier, tel qu'une image, en définissant l'attribut src d'un élément img en tant que chaîne encodée en base64 au format suivant:

<img src="data:image/svg+xml;base64,[data]">

Le début du code du logo HTML5 ci-dessus se présente comme suit:

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">

(La version complète dépasse les 5 000 caractères).

Des outils de glisser-déposer, tels que jpillora.com/base64-encoder, sont disponibles pour convertir des fichiers binaires, tels que des images, en URI de données. Tout comme les SVG, les URI de données sont bien compatibles avec les navigateurs mobiles et pour ordinateur.

Intégration dans le CSS

Les URI de données et les SVG peuvent également être intégrés au CSS, et cette opération est prise en charge sur mobile et sur ordinateur. Voici deux images identiques implémentées en tant qu'images de fond en CSS : un URI de données et un SVG :

Avantages et inconvénients de l'intégration

Le code intégré des images peut être détaillé, en particulier pour les URI de données. Alors, pourquoi l'utiliseriez-vous ? Pour réduire le nombre de requêtes HTTP ! Les SVG et les URI de données peuvent permettre de récupérer l'intégralité d'une page Web, y compris les images, CSS et JavaScript, en une seule requête.

L'inconvénient:

  • Sur mobile, l'affichage des URI de données peut être beaucoup plus lent que les images provenant d'un src externe.
  • Les URI de données peuvent augmenter considérablement la taille d'une requête HTML.
  • Ils ajoutent de la complexité à votre balisage et à votre flux de travail.
  • Le format de l'URI de données est considérablement plus volumineux que le binaire (jusqu'à 30%) et ne réduit donc pas la taille de téléchargement totale.
  • Les URI de données ne peuvent pas être mis en cache. Ils doivent donc être téléchargés pour chaque page sur laquelle ils sont utilisés.
  • Ils ne sont pas pris en charge dans IE 6 et 7, ni dans IE8.
  • Avec le protocole HTTP/2, la priorité de la réduction du nombre de demandes d'éléments sera moins importante.

Comme pour tout ce qui concerne la réactivité, vous devez tester ce qui fonctionne le mieux. Utilisez les outils de développement pour mesurer la taille du fichier de téléchargement, le nombre de requêtes et la latence totale. Les URI de données peuvent parfois être utiles pour les images matricielles, par exemple sur une page d'accueil qui ne contient qu'une ou deux photos qui ne sont pas utilisées ailleurs. Si vous devez intégrer des images vectorielles, le format SVG est une bien meilleure option.

Images en CSS

La propriété CSS background est un outil puissant qui permet d'ajouter des images complexes à des éléments, de faciliter l'ajout de plusieurs images, de les répéter, etc. Lorsqu'elle est combinée à des requêtes média, la propriété d'arrière-plan devient encore plus puissante, en permettant le chargement d'images conditionnel en fonction de la résolution de l'écran, de la taille de la fenêtre d'affichage, etc.

Résumé

  • Utilisez l'image la plus 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.
  • Modifiez la propriété background-image dans CSS pour les écrans haute résolution à l'aide de requêtes média avec min-resolution et -webkit-min-device-pixel-ratio.
  • Utilisez srcset pour fournir des images haute résolution en plus de l'image 1x pour le balisage.
  • Tenez compte des coûts de performances lorsque vous utilisez des techniques de remplacement d'image JavaScript ou lorsque vous diffusez des images haute résolution hautement compressées sur des appareils de résolution inférieure.

Utiliser des requêtes média pour le chargement d'images conditionnel ou la direction artistique

Les requêtes média affectent non seulement la mise en page, mais vous pouvez également les utiliser pour charger des images de manière conditionnelle ou pour fournir une direction artistique en fonction de la largeur de la fenêtre d'affichage.

Par exemple, dans l'exemple ci-dessous, sur les petits écrans, seul small.png est téléchargé et appliqué au contenu div, tandis que sur les grands écrans, background-image: url(body.png) est appliqué au corps et background-image: url(large.png) au contenu div.

.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);
  }
}

Essayer

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

La fonction image-set() en CSS améliore la propriété de comportement background, ce qui permet de fournir facilement plusieurs fichiers image pour différentes caractéristiques d'appareil. Cela permet au navigateur de choisir la meilleure image en fonction des caractéristiques de l'appareil, par exemple en utilisant une image x2 sur un écran x2 ou une image x1 sur un appareil x2 sur un réseau à bande passante limitée.

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

En plus de charger la bonne image, le navigateur l'adapte en conséquence. En d'autres termes, le navigateur suppose que les images x2 sont deux fois plus grandes que les images x1 et les réduit d'un facteur de 2, de sorte que l'image semble avoir la même taille sur la page.

La compatibilité avec image-set() est encore nouvelle et n'est prise en charge qu'avec Chrome et Safari avec le préfixe de fournisseur -webkit. Veillez à inclure une image de remplacement lorsque image-set() n'est pas compatible. 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
  );
}

Essayer

La commande ci-dessus charge l'asset approprié dans les navigateurs compatibles avec l'ensemble d'images. Sinon, elle revient à l'asset 1x. La mise en garde évidente est que même si image-set() est peu compatible avec les navigateurs, la plupart des navigateurs obtiennent l'asset 1x.

Utiliser des requêtes média pour fournir des images haute résolution ou une direction artistique

Les requêtes média peuvent créer des règles basées sur le ratio de pixels de l'appareil, ce qui permet de spécifier des images différentes pour les écrans x2 et x1.

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

Chrome, Firefox et Opera sont tous compatibles avec la norme (min-resolution: 2dppx), tandis que les navigateurs Safari et Android nécessitent tous deux l'ancienne syntaxe avec préfixe du fournisseur, sans l'unité dppx. N'oubliez pas que ces styles ne sont chargés que si l'appareil correspond à la requête média. Vous devez donc spécifier des styles pour le cas de base. Cela permet également de garantir le rendu d'un élément si le navigateur n'est pas compatible avec les requêtes multimédias 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);
  }
}

Essayer

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

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

Utiliser SVG pour les icônes

Lorsque vous ajoutez des icônes à votre page, utilisez si possible des icônes SVG ou, dans certains cas, des caractères Unicode.

Résumé

  • Utilisez le format SVG ou Unicode pour les icônes au lieu d'images matricielles.

Remplacer les icônes simples par le format Unicode

De nombreuses polices sont compatibles avec une multitude de glyphes Unicode, qui peuvent être utilisés à la place des images. Contrairement aux images, les polices Unicode s'adaptent bien et s'affichent correctement à l'écran, quelle que soit leur taille.

Au-delà du jeu de caractères normal, unicode peut inclure des symboles pour les flèches (←), des opérateurs mathématiques (√), des formes géométriques (★), des images de contrôle (▶), une notation musicale (♬), des lettres grecques (Ω), et même des pièces d'échecs (♞).

L'inclusion d'un caractère Unicode s'effectue de la même manière que les entités nommées : &#XXXX, où XXXX représente le nombre de caractères Unicode. Exemple :

You're a super &#9733;

Vous êtes un super ★

Remplacer des icônes complexes par des SVG

Pour les exigences plus complexes, les icônes SVG sont généralement légères, faciles à utiliser et peuvent être stylisées avec CSS. Le format SVG présente plusieurs avantages par rapport aux images matricielles:

  • Ce sont des graphiques vectoriels qui peuvent être mis à l'échelle à l'infini.
  • Les effets CSS tels que la couleur, les ombres, la transparence et les animations sont simples.
  • Les images SVG peuvent être intégrées directement dans le document.
  • Ils sont sémantiques.
  • Ils offrent une meilleure accessibilité grâce aux 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">.

Essayer

Utilisez les polices d'icône avec prudence

Exemple de page utilisant FontAwesome pour ses icônes de police
Exemple de page utilisant FontAwesome pour ses icônes de police.

Les polices d'icônes sont populaires et peuvent être faciles à utiliser, mais elles présentent quelques inconvénients par rapport aux icônes SVG:

  • Il s'agit de graphiques vectoriels qui peuvent être mis à l'échelle à l'infini, mais qui peuvent être anticrénelés, ce qui entraîne des icônes moins nettes que prévu.
  • Style limité avec CSS
  • Un positionnement parfait des pixels peut s'avérer difficile, en fonction de la hauteur des lignes, de l'espacement entre les lettres, etc.
  • Ils ne sont pas sémantiques et peuvent être difficiles à utiliser avec des lecteurs d'écran ou d'autres technologies d'assistance.
  • Sauf si leur champ d'application est correct, elles peuvent entraîner une taille de fichier importante si vous n'utilisez qu'un petit sous-ensemble des icônes disponibles.
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>).

Essayer

Il existe des centaines de polices d'icônes sans frais et payantes disponibles, y compris Font Awesome, Pictos et Glyphicons.

Veillez à équilibrer le poids de la requête HTTP supplémentaire et la taille du fichier par rapport au besoin d'icônes. Par exemple, si vous n'avez besoin que d'une poignée d'icônes, il peut être préférable d'utiliser une image ou un lutin d'image.

Optimiser les performances des images

Les images représentent souvent la plupart des octets téléchargés et occupent souvent une grande partie de l'espace visuel sur la page. Par conséquent, l'optimisation des images permet souvent de réaliser les économies en octets et les améliorations de performances les plus importantes pour votre site Web: moins le navigateur doit télécharger d'octets, moins il y aura de concurrence pour la bande passante du client et plus le navigateur pourra télécharger et afficher rapidement tous les éléments.

Résumé

  • Ne vous contentez pas de choisir un format d'image au hasard : identifiez les différents formats disponibles et utilisez celui qui convient le mieux.
  • Incluez des outils d'optimisation et de compression d'images dans votre workflow pour réduire la taille des fichiers.
  • Réduisez le nombre de requêtes HTTP en plaçant les images fréquemment utilisées dans des sprites.
  • Pour améliorer le temps de chargement initial de la page et réduire son poids initial, envisagez de ne charger les images qu'après qu'elles sont visibles à l'écran.

Choisir le bon format

Deux types d'images sont à prendre en compte : les images vectorielles et les images matricielles. Pour les images matricielles, vous devez également choisir le format de compression approprié, par exemple: GIF, PNG, JPG.

Les images matricielles, comme les photographies et d'autres images, sont représentées sous la forme d'une grille de points ou de pixels individuels. Les images matricielles proviennent généralement d'un appareil photo ou d'un scanner, ou peuvent être créées dans le navigateur avec l'élément canvas. Plus la taille de l'image augmente, plus la taille du fichier augmente. Lorsque leur taille est supérieure à leur taille d'origine, les images matricielles deviennent floues, car le navigateur doit deviner comment combler les pixels manquants.

Les images vectorielles, comme les logos et les dessins au trait, sont définies par un ensemble de courbes, de lignes, de formes et de couleurs de remplissage. Les images vectorielles sont créées à l'aide de programmes tels qu'Adobe Illustrator ou Inkscape et enregistrées dans un format vectoriel tel que SVG. Les images vectorielles étant basées sur des primitives simples, elles peuvent être mises à l'échelle sans perte de qualité ni modification de la taille des fichiers.

Lorsque vous choisissez le format approprié, il est important de tenir compte à la fois de l'origine de l'image (matricielle ou vectorielle) et de son contenu (couleurs, animation, texte, etc.). Les formats ne conviennent pas à tous les types d'images, et chacun a ses propres forces et faiblesses.

Commencez par suivre ces consignes pour choisir le format approprié:

  • Utilisez JPG pour les photos.
  • Utilisez SVG pour les illustrations vectorielles et les graphiques à couleur unie, comme les logos et les dessins au trait. Si l'illustration vectorielle n'est pas disponible, essayez WebP ou PNG.
  • Utilisez PNG plutôt que GIF, car il permet d'utiliser plus de couleurs et offre de meilleurs taux de compression.
  • Pour les animations plus longues, envisagez d'utiliser <video>, qui fournit une meilleure qualité d'image et permet à l'utilisateur de contrôler la lecture.

Réduire la taille du fichier

Vous pouvez réduire considérablement la taille des fichiers image en "post-traitant" les images après leur enregistrement. Il existe de nombreux outils pour la compression d'images : avec ou sans perte, en ligne, IUG et ligne de commande. Dans la mesure du possible, il est préférable d'essayer d'automatiser l'optimisation des images afin que cela soit intégré à votre workflow.

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

Utiliser des sprites

Feuille de sprites pour images utilisée dans l&#39;exemple

La création de sprites CSS est une technique qui permet de combiner plusieurs images dans une seule "feuille de sprites". Vous pouvez ensuite utiliser des images individuelles en spécifiant l'image de fond d'un élément (la feuille de sprites) et un décalage pour afficher la bonne partie.

.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;
}

Essayer

La méthode Spriting permet de réduire le nombre de téléchargements requis pour obtenir plusieurs images, tout en permettant la mise en cache.

Envisagez d'utiliser le chargement différé

Le chargement différé peut considérablement accélérer le chargement sur les pages longues qui incluent de nombreuses images en dessous de la ligne de flottaison, en les chargeant au besoin ou lorsque le chargement et l'affichage du contenu principal sont terminés. En plus d'améliorer les performances, l'utilisation du chargement différé peut créer des expériences de défilement infinie.

Soyez prudent lorsque vous créez des pages à défilement infini, car le contenu est chargé dès qu'il devient visible, et les moteurs de recherche risquent de ne jamais le voir. De plus, les utilisateurs qui recherchent des informations qu'ils s'attendent à voir dans le pied de page ne le voient jamais, car le nouveau contenu est toujours chargé.

Éviter complètement les images

Parfois, la meilleure image n'est pas du tout une image. Dans la mesure du possible, utilisez les fonctionnalités natives du navigateur pour fournir des fonctionnalités identiques ou similaires. Les navigateurs génèrent des éléments visuels qui auraient auparavant nécessité des images. Cela signifie que les navigateurs n'ont plus besoin de télécharger des fichiers image distincts, ce qui évite les images maladroites. Vous pouvez utiliser des polices d’icône Unicode ou spéciales pour afficher les icônes.

Placer le texte dans le balisage au lieu de l'intégrer dans les images

Dans la mesure du possible, le texte doit être constitué de texte et ne doit pas être intégré dans des images. Par exemple, l'utilisation d'images pour les titres ou le fait de placer des coordonnées (comme des numéros de téléphone ou des adresses) directement dans des images empêche les utilisateurs de copier et de coller les informations. Cela les rend inaccessibles aux lecteurs d'écran et ne répond pas. Placez plutôt le texte dans votre balisage et, si nécessaire, utilisez des polices Web pour obtenir le style dont vous avez besoin.

Utiliser du CSS pour remplacer les images

Les navigateurs récents peuvent utiliser les fonctionnalités CSS pour créer des styles qui auraient auparavant nécessité des images. Par exemple, vous pouvez créer des dégradés complexes à l'aide de la propriété background, des ombres à l'aide de box-shadow et des coins arrondis avec 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>

Gardez à l'esprit que l'utilisation de ces techniques nécessite des cycles d'affichage, qui peuvent être importants sur mobile. Si vous en utilisez trop, vous perdrez tous les avantages que vous avez pu obtenir et cela peut nuire aux performances.