Images responsives

Une image vaut mieux qu'un long discours, et les images font partie intégrante de chaque page. Mais elles représentent aussi souvent la majeure partie 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 les images aussi.

Pete LePage

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 (2x), les graphismes haute résolution garantissent la netteté. Une image d'une largeur de 50 % peut fonctionner correctement lorsque le navigateur fait 800 px de large, mais elle utilise trop d'espace sur un téléphone étroit et nécessite la même bande passante lorsqu'elle est réduite pour s'adapter à un écran plus petit.

Direction artistique

Dans d'autres cas, l'image peut nécessiter des modifications plus importantes : modification des proportions, recadrage, voire remplacement de l'image entière. Dans ce cas, la modification de l'image est généralement appelée "direction artistique". Pour plus d'exemples, consultez responsiveimages.org/demos/.

Images responsives

Saviez-vous que les images représentent en moyenne plus de 60 % des octets 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 acquerrez un éventail 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 des images qui s'adaptent et répondent à différentes tailles de fenêtre d'affichage et à différents scénarios d'utilisation.

Ce cours est proposé sans frais par 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 un large éventail de formats d'image. L'inclusion d'images qui fonctionnent sur tous les appareils n'est pas différente de celle sur ordinateur et ne nécessite que quelques ajustements mineurs pour créer une bonne expérience.

Résumé

• Utilisez des tailles relatives pour les images afin d'éviter qu'elles ne dépassent accidentellement du conteneur.
• Utilisez l'élément picture lorsque vous souhaitez spécifier différentes images en fonction des caractéristiques de l'appareil (direction artistique).
• Utilisez srcset et le descripteur x dans l'élément img pour indiquer au navigateur la meilleure image à utiliser lorsque vous choisissez parmi différentes densités.
• Si votre page ne comporte 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 les requêtes 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 pour éviter qu'elles ne dépassent accidentellement de la fenêtre d'affichage. Par exemple, width: 50%; définit la largeur de l'image sur 50 % de l'élément conteneur (et non 50 % de la fenêtre d'affichage ou 50 % de la taille réelle en pixels).

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

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

Veillez à fournir des descriptions pertinentes via l'attribut alt sur les éléments img. Cela permet de rendre votre site plus accessible en fournissant du contexte aux lecteurs d'écran et à d'autres technologies d'assistance.

Améliorer les img 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 2x sur un écran 2x et, potentiellement, une image 1x sur un appareil 2x lorsque la bande passante du réseau est limitée.

<img src="photo.png" srcset="[e-mail] 2x" ...>

Sur les navigateurs qui ne sont pas compatibles avec srcset, le navigateur 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 1x pouvant être affichée sur n'importe quel appareil, quelles que soient ses capacités. Lorsque srcset est accepté, la liste d'images/conditions séparées par une virgule est analysée avant d'effectuer 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 tout, de la densité de pixels à la largeur et à la hauteur, seule la densité de pixels est bien prise en charge aujourd'hui. Pour équilibrer le comportement actuel avec les fonctionnalités futures, fournissez simplement l'image 2x dans l'attribut.

Direction artistique dans les images responsives avec picture

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

Remarque  : L'élément picture commence à être disponible dans les navigateurs. Bien qu'il ne soit pas encore disponible dans tous les navigateurs, nous vous recommandons de l'utiliser en raison de sa forte rétrocompatibilité et de l'utilisation potentielle du polyfill Picturefill. Pour en savoir plus, consultez le site ResponsiveImages.org.

Utilisez l'élément picture lorsqu'une source d'image existe dans plusieurs densités ou lorsqu'un responsive design impose une image légèrement différente sur certains types d'écrans. Comme 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>

Essayer

Dans l'exemple ci-dessus, si la largeur du navigateur est d'au moins 800 px, head.jpg ou head-2x.jpg est utilisé, en fonction de la résolution de l'appareil. Si la largeur du navigateur est comprise entre 450 px et 800 px, head-small.jpg ou head-small- 2x.jpg est utilisé, là encore en fonction de la résolution de l'appareil. Pour les largeurs d'écran inférieures à 450 px et pour assurer la rétrocompatibilité lorsque l'élément picture n'est pas pris en charge, le navigateur affiche l'élément img à la place, qui 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 d'image. C'est particulièrement vrai pour les images qui s'étendent sur une largeur proportionnelle du navigateur et qui sont fluides, en fonction de la taille du navigateur.

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

Essayer

L'exemple ci-dessus affiche une image qui correspond à la moitié de la largeur de la fenêtre d'affichage (sizes="50vw"). En fonction de la largeur du navigateur et du 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 effective
400 px	1	200.jpg	x 1
400 px	2	400.jpg	2x
320 px	2	400.jpg	2,5 x
600 px	2	800.jpg	x 2,67
640 px	3	1000.jpg	x 3,125
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 pouvez souhaiter que l'image s'étende sur toute la largeur de la fenêtre d'affichage, tandis que sur les écrans plus grands, elle ne doit occuper qu'une petite partie.

<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 px, l'image représente 25 % de la largeur de la fenêtre d'affichage. Lorsqu'elle est comprise entre 500 px et 600 px, l'image représente 50 % de la largeur de la fenêtre d'affichage. En dessous de 500 px, elle occupe toute la largeur.

Rendre les images de produits extensibles

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

Les clients veulent voir ce qu'ils achètent. Sur les sites de vente au détail, les utilisateurs s'attendent à pouvoir afficher des gros plans haute résolution des produits pour mieux voir les détails, et les participants à l'étude ont été frustrés de ne pas pouvoir le faire.

L'application J. Crew illustre parfaitement l'utilisation d'images extensibles sur lesquelles l'utilisateur peut appuyer. Site de l'équipe. Une superposition qui disparaît indique qu'une image est cliquable, ce qui permet d'obtenir une image zoomée avec des détails précis.

Autres techniques d'image

Images compressives

La technique d'image compressive diffuse une image 2x 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

Attention  : Soyez prudent lorsque vous utilisez la technique de compression, car elle nécessite davantage de mémoire et de ressources de décodage. Redimensionner des images volumineuses pour les adapter à des écrans plus petits est coûteux et peut être particulièrement difficile sur les appareils d'entrée de gamme, où la mémoire et le traitement sont limités.

Remplacement d'image JavaScript

Le remplacement d'image JavaScript vérifie les capacités de l'appareil et "fait ce qu'il faut". Vous pouvez déterminer le rapport de pixels de l'appareil via window.devicePixelRatio, obtenir la largeur et la hauteur de l'écran, et même potentiellement détecter une connexion réseau via navigator.connection ou en émettant 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 l'utilisation de JavaScript retarde le chargement de l'image jusqu'à ce que l'analyseur anticipé ait terminé. Cela signifie que le téléchargement des images ne commencera qu'après le déclenchement de l'événement pageload. De plus, le navigateur téléchargera très probablement les images 1x et 2x, ce qui augmentera la taille de la page.

Intégrer des images : matricielles et vectorielles

Il existe deux façons fondamentalement différentes de créer et de stocker des images, ce qui a une incidence sur la façon dont vous déployez des images de manière responsive.

Images matricielles : les photographies et autres images sont représentées sous la forme d'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 formats tels que PNG, JPEG et WebP sont utilisés pour stocker des images matricielles.

Les images vectorielles telles que 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 du code à l'aide d'un format vectoriel tel que SVG.

SVG

Le format SVG permet d'incluer des graphiques vectoriels responsifs 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 à 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. En revanche, les formats matriciels ne contiennent que des informations sur des points de couleur individuels. Le navigateur doit donc deviner comment remplir les espaces vides 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 s'affiche correctement, quelle que soit sa taille, tandis que le fichier PNG à côté commence à devenir flou lorsqu'il est affiché dans des tailles plus grandes.

Si vous souhaitez réduire le nombre de requêtes de fichiers effectuées par votre page, vous pouvez coder les images de manière intégrée au format SVG ou URI de données. Si vous affichez la source de cette page, vous verrez 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 très bien pris en charge sur mobile et ordinateur, et les outils d'optimisation peuvent réduire considérablement la taille des fichiers SVG. Les deux logos SVG intégrés suivants sont identiques, mais l'un fait environ 3 Ko et l'autre seulement 2 Ko :

URI de données

Les URI de données permettent d'inclure 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 fait plus de 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 de bureau.

Inlining en CSS

Les URI de données et les SVG peuvent également être intégrés au CSS, ce qui est compatible avec les mobiles et les ordinateurs. Voici deux images d'apparence identique implémentées en tant qu'images de fond en CSS : l'une est un URI de données, l'autre un SVG :

Avantages et inconvénients de l'intégration

Le code intégré pour les images peut être long, en particulier les URI de données. Alors, pourquoi l'utiliser ? Pour réduire les requêtes HTTP ! Les SVG et les URI de données peuvent permettre de récupérer une page Web entière, y compris les images, le CSS et le JavaScript, avec une seule requête.

Inconvénients :

• Sur mobile, l'affichage des URI de données peut être beaucoup plus lent que celui des 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 workflow.
• Le format d'URI de données est considérablement plus volumineux que le format binaire (jusqu'à 30 %) et ne réduit donc pas la taille totale du téléchargement.
• 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 compatibles avec IE 6 et 7, et ne sont que partiellement compatibles avec IE 8.
• Avec HTTP/2, réduire le nombre de requêtes d'éléments deviendra moins prioritaire.

Comme pour tout ce qui est responsive, vous devez tester ce qui fonctionne le mieux. Utilisez les outils pour les développeurs pour mesurer la taille du fichier téléchargé, 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 comporte 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, d'ajouter facilement plusieurs images, de les répéter, etc. Lorsqu'elle est combinée à des requêtes média, la propriété background devient encore plus puissante, car elle permet de charger des images de manière conditionnelle 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 en CSS pour les écrans à haute résolution en utilisant des 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 dans le balisage.
• Tenez compte des coûts de performances lorsque vous utilisez des techniques de remplacement d'images JavaScript ou lorsque vous diffusez des images haute résolution très compressées sur des appareils à résolution inférieure.

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

Les requêtes média n'affectent pas seulement la mise en page. 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 écrans plus petits, seul small.png est téléchargé et appliqué au contenu div, tandis que sur les écrans plus grands, background-image: url(body.png) est appliqué au corps et background-image: url(large.png) est appliqué 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 le comportement de la propriété 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 2x sur un écran 2x ou une image 1x sur un appareil 2x lorsque la bande passante du réseau est limitée.

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

En plus de charger l'image appropriée, le navigateur la met également à l'échelle en conséquence. En d'autres termes, le navigateur suppose que les images 2x sont deux fois plus grandes que les images 1x. Il réduit donc l'image 2x d'un facteur 2, de sorte que l'image semble avoir la même taille sur la page.

La compatibilité avec image-set() est encore récente et n'est disponible que dans Chrome et Safari avec le préfixe de fournisseur -webkit. Veillez à inclure une image de remplacement lorsque image-set() n'est pas compatible. 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

Le code ci-dessus charge l'asset approprié dans les navigateurs compatibles avec image-set. Sinon, il utilise l'asset 1x. L'inconvénient évident est que, bien que la compatibilité du navigateur image-set() soit faible, la plupart des navigateurs obtiennent l'élément 1x.

Utilisez 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 2x et 1x.

@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 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, et que vous devez spécifier des styles pour le cas de base. Cela permet également de s'assurer qu'un élément est affiché si le navigateur n'est pas compatible avec 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);
  }
}

Essayer

Vous pouvez également utiliser la syntaxe min-width 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 de 500 px ou plus :

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

Utiliser le format SVG pour les icônes

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

Résumé

• Utilisez des icônes au format SVG ou Unicode plutôt que des images matricielles.

Remplacer les icônes simples par des caractères Unicode

De nombreuses polices sont compatibles avec la 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, quelle que soit leur taille à l'écran.

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

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

You're a super ★

Vous êtes un super ★

Remplacer les icônes complexes par des icônes 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. Les images SVG présentent plusieurs avantages par rapport aux images matricielles :

• Il s'agit de graphiques vectoriels qui peuvent être mis à l'échelle à l'infini.
• Les effets CSS tels que la couleur, l'ombrage, la transparence et les animations sont simples.
• Les images SVG peuvent être intégrées directement dans le document.
• Elles 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

Utiliser les polices d'icône avec prudence

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 certains 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 lissés, ce qui donne des icônes moins nettes que prévu.
• Style limité avec CSS.
• Le positionnement au pixel près peut être difficile, en fonction de la hauteur de ligne, de l'espacement des 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 s'ils sont correctement dimensionnés, ils peuvent entraîner une taille de fichier importante, même 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ône sans frais et payantes, y compris Font Awesome, Pictos et Glyphicons.

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

Optimiser les images pour améliorer les performances

Les images représentent souvent la majeure partie des octets téléchargés et occupent également une grande partie de l'espace visuel de la page. Par conséquent, l'optimisation des images peut souvent générer des économies d'octets et des améliorations de performances parmi les plus importantes pour votre site Web : moins le navigateur doit télécharger d'octets, moins la bande passante du client est sollicitée, et plus le navigateur peut télécharger et afficher rapidement tous les éléments.

Résumé

• Ne choisissez pas un format d'image au hasard. Familiarisez-vous avec 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 d'images.
• Pour améliorer le temps de chargement initial de la page et réduire sa taille initiale, envisagez de ne charger les images qu'une fois qu'elles sont visibles à l'écran.

Choisissez le bon format

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

Les images matricielles, comme les photos 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. Lorsqu'elles sont agrandies au-delà de leur taille d'origine, les images matricielles deviennent floues, car le navigateur doit deviner comment remplir les pixels manquants.

Les images vectorielles, telles que 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 avec des programmes tels qu'Adobe Illustrator ou Inkscape, et enregistrées dans un format vectoriel tel que SVG. Comme les images vectorielles sont basées sur des primitives simples, elles peuvent être mises à l'échelle sans perte de qualité ni modification de la taille du fichier.

Lorsque vous choisissez le format approprié, il est important de prendre en compte l'origine de l'image (trame ou vecteur) et le contenu (couleurs, animation, texte, etc.). Aucun format ne convient à tous les types d'images, et chacun présente ses propres avantages et inconvénients.

Pour choisir le format approprié, commencez par suivre ces consignes :

• Utilisez JPG pour les images photographiques.
• Utilisez SVG pour l'art vectoriel et les graphiques de couleur unie, comme les logos et les dessins au trait. Si l'art vectoriel n'est pas disponible, essayez WebP ou PNG.
• Utilisez PNG plutôt que GIF, car il permet d'obtenir plus de couleurs et offre de meilleurs taux de compression.
• Pour les animations plus longues, envisagez d'utiliser <video>, qui offre 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 effectuant un "post-traitement" des images après leur enregistrement. Il existe de nombreux outils de compression d'images (avec et sans perte, en ligne, IUG, ligne de commande). Dans la mesure du possible, il est préférable d'essayer d'automatiser l'optimisation des images afin qu'elle soit intégrée à votre workflow.

Plusieurs outils permettent d'effectuer une compression sans perte supplémentaire 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 avec l'option --strip-all). Pour PNG, essayez OptiPNG ou PNGOUT.

Utiliser des sprites d'images

Le spriting CSS est une technique qui consiste à combiner plusieurs images en une seule image "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) ainsi qu'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

Le spriting présente l'avantage de réduire le nombre de téléchargements requis pour obtenir plusieurs images, tout en permettant la mise en cache.

Envisager le chargement différé

Le chargement différé peut accélérer considérablement le chargement des pages longues qui incluent de nombreuses images au-dessous de la ligne de flottaison en les chargeant selon les besoins ou lorsque le contenu principal a fini de se charger et de s'afficher. En plus d'améliorer les performances, le chargement différé peut créer des expériences de défilement infini.

Soyez prudent lorsque vous créez des pages à défilement infini : comme le contenu est chargé à mesure qu'il devient visible, il est possible que les moteurs de recherche ne le voient jamais. De plus, les utilisateurs qui recherchent des informations qu'ils s'attendent à voir dans le pied de page ne le voient jamais, car de nouveaux contenus sont toujours chargés.

Évitez complètement les images

Parfois, la meilleure image n'est pas 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 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 mal redimensionnées. Vous pouvez utiliser des polices d'icônes Unicode ou spéciales pour afficher les icônes.

Placer le texte dans le balisage plutôt que de l'intégrer dans les images

Dans la mesure du possible, le texte doit être du texte et ne pas être intégré à des images. Par exemple, l'utilisation d'images pour les titres ou l'insertion d'informations de contact (comme des numéros de téléphone ou des adresses) directement dans les images empêche les utilisateurs de copier et coller les informations. Cela rend les informations inaccessibles pour les lecteurs d'écran et n'est pas responsive. 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 code CSS pour remplacer des 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 angles 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>

N'oubliez pas que l'utilisation de ces techniques nécessite des cycles d'affichage, qui peuvent être importants sur mobile. Si vous en abusez, vous perdrez tous les avantages que vous auriez pu en tirer, et cela pourrait nuire aux performances.