Règles relatives aux images pour des temps de chargement rapides et plus encore

Utilisez les règles d'optimisation des images pour vous assurer que votre site utilise les images les plus performantes.

Luna Lu
Luna Lu

Les images occupent souvent une quantité importante d'espace visuel et représentent la majorité des octets téléchargés sur un site Web. En optimisant les images, vous pouvez améliorer les performances de chargement et réduire le trafic réseau.

Étonnamment, plus de la moitié des sites sur le Web diffusent des images mal compressées ou trop grandes. Il reste donc beaucoup de place pour améliorer les performances simplement en optimisant les images.

Vous vous demandez peut-être comment savoir si vos images sont optimisées et comment les optimiser. Nous testons un nouvel ensemble de règles de fonctionnalités pour l'optimisation des images: oversized-images, unoptimized-lossy-images, unoptimized-lossless-images et unoptimized-lossless-images-strict. Ils sont tous désormais disponibles pour les tests d'origine.

Règlements relatifs aux images optimisés

La stratégie d'autorisations introduit un nouvel ensemble de restrictions sur les images qui peuvent être appliquées avec une application au moment du développement. Les images qui ne respectent pas l'une des restrictions seront affichées sous forme d'images d'espace réservé, qui sont faciles à identifier et à corriger. Ces règles peuvent être spécifiées en mode "Rapports uniquement", où les images s'affichent normalement sans application des règles, tandis que les cas de non-respect sont observés via des rapports. (Pour en savoir plus, consultez la section Mode "Rapports uniquement" dans le monde réel ci-dessous.)

oversized-images

La stratégie d'autorisations oversized-images limite les dimensions intrinsèques d'une image par rapport à la taille de son conteneur.

Lorsqu'un document utilise la stratégie oversized-images, tout élément <img> dont la résolution intrinsèque est plus de X fois supérieure à la taille du conteneur dans l'une ou l'autre dimension est remplacé par une image d'espace réservé.

Pourquoi ?

L'affichage d'images plus grandes que ce que l'appareil de visionnage peut afficher (par exemple, l'affichage d'images pour ordinateur de bureau dans des contextes mobiles ou d'images à haute densité de pixels sur un appareil à faible densité de pixels) gaspille le trafic réseau et la mémoire de l'appareil. Pour en savoir plus sur l'optimisation de vos images, consultez les articles Diffuser des images aux dimensions appropriées et Diffuser des images responsives.

Exemples

Voici quelques exemples pour illustrer ce point. Le comportement par défaut est illustré ci-dessous lorsque la taille d'affichage d'une image est réduite de moitié.

Comportement de redimensionnement par défaut.
Comportement de redimensionnement par défaut.

Si j'applique la stratégie d'autorisations suivante, une image d'espace réservé s'affiche à la place.

Permissions-Policy: oversized-images *(2);

Lorsque l&#39;image est trop grande pour le conteneur.
Lorsque l'image est trop volumineuse pour le conteneur.

J'obtiens des résultats similaires si je ne diminue que la largeur ou la hauteur.

Largeur redimensionnée Hauteur redimensionnée
Redimensionnez la largeur et la hauteur.

Fonctionnement

Pour résumer, la stratégie oversized-images peut être spécifiée de deux manières:

  • En-tête HTTP Permissions-Policy
  • Attribut allow <iframe>

Pour déclarer la stratégie oversized-images, vous devez fournir les éléments suivants:

  • Nom de l'élément géographique, oversized-images (obligatoire)
  • Liste des origines (facultatif)
  • Valeurs de seuil (c'est-à-dire le ratio de réduction X) pour les origines, spécifiées entre parenthèses (facultatif)

Nous vous recommandons d'utiliser un facteur de réduction de 2,0 ou moins. Envisagez d'utiliser des images responsives avec différentes résolutions pour diffuser au mieux les images sur différentes tailles d'écran, résolutions, etc.

Autres exemples

Permissions-Policy: oversized-images *(2.0)

La règle est appliquée à toutes les origines avec une valeur de seuil de 2,0. Tout élément <img> avec une image dont le format réduit est supérieur à 2,0 est interdit et sera remplacé par une image d'espace réservé.

Permissions-Policy: oversized-images *(inf) 'self'(1.5)

La règle est appliquée à l'origine du site avec une valeur de seuil de 1,5. Les éléments <img> dans les contextes de navigation de niveau supérieur et les contextes de navigation imbriqués de même origine ne s'affichent normalement que si le rapport de réduction est inférieur ou égal à 1,5. Les éléments <img> partout ailleurs s'afficheront normalement.

images non optimisées-{lossy,lossless}

Les règles de fonctionnalités unoptimized-lossy-images, unoptimized-lossless-images et unoptimized-lossless-images-strict limitent la taille de fichier d'une image par rapport à sa résolution intrinsèque:

unoptimized-lossy-images
Les formats avec perte ne doivent pas dépasser un ratio d'octets par pixel de X, avec une marge de 1 ko fixe. Pour une image de largeur x hauteur, le seuil de taille de fichier est calculé comme suit : largeur x hauteur x X + 1 024.
unoptimized-lossless-images
Les formats sans perte ne doivent pas dépasser un ratio d'octets par pixel de X, avec une marge de 10 Ko fixe. Pour une image de largeur x hauteur, le seuil de taille de fichier est calculé comme suit : largeur x hauteur x X + 1 0240.
unoptimized-lossless-images-strict
Les formats sans perte ne doivent pas dépasser un ratio d'octets par pixel de X, avec une marge de 1 ko fixe. Pour une image de largeur x hauteur, le seuil de taille de fichier est calculé comme suit : largeur x hauteur x X + 1 024.

Lorsqu'un document utilise l'une de ces règles, tout élément <img> qui ne respecte pas la contrainte est remplacé par une image d'espace réservé.

Pourquoi ?

Plus la taille de téléchargement est importante, plus le chargement d'une image prend du temps. La taille de fichier doit être aussi petite que possible lors de l'optimisation d'une image : suppression des métadonnées, choix d'un bon format d'image, utilisation de la compression d'image, etc. Pour en savoir plus sur l'optimisation de vos images, consultez les articles Utiliser Imagemin pour compresser des images et Utiliser des images WebP.

Exemple

Voici le comportement par défaut du navigateur. Sans la règle d'autorisation, une image non optimisée avec perte peut être affichée de la même manière qu'une image optimisée.

Comparaison d&#39;une image optimisée avec une image non optimisée.
Comparaison d'une image optimisée avec une image non optimisée.

Si j'applique la stratégie d'autorisations suivante, une image d'espace réservé s'affiche à la place.

Permissions-Policy: unoptimized-lossy-images *(0.5);

Lorsque l&#39;image n&#39;est pas optimisée.
Lorsque l'image n'est pas optimisée.

Fonctionnement

Si vous ne connaissez pas les règles d'autorisation, consultez Présentation des règles d'autorisation pour en savoir plus.

Pour résumer, les règles unoptimized-{lossy,lossless}-images peuvent être spécifiées via:

  • En-tête HTTP Permissions-Policy
  • Attribut allow <iframe>

Pour déclarer une stratégie unoptimized-{lossy,lossless}-images, vous devez fournir les éléments suivants:

  • Nom de la fonctionnalité, par exemple unoptimized-lossy-images (obligatoire)
  • Liste des origines (facultatif)
  • Valeurs de seuil (par exemple, le ratio octets par pixel X) pour les origines, spécifiées entre parenthèses (facultatif)

Nous vous recommandons un ratio d'octets par pixel de 0,5 ou moins pour unoptimized-lossy-images et un ratio d'octets par pixel de 1 ou moins pour unoptimized-lossless-images et unoptimized-lossless-images-strict.

Les formats WebP offrent de meilleurs ratios de compression que les autres formats. Si possible, diffusez toutes vos images au format WebP avec perte. Si cela ne suffit pas, essayez le format WebP sans perte. Utilisez le format JPEG sur les navigateurs qui ne sont pas compatibles avec les formats WebP. Utilisez PNG si aucun de ces formats ne fonctionne.

Si vous utilisez des formats WebP, essayez d'utiliser des seuils plus stricts:

  • 0,2 pour WEBPV8
  • 0,5 pour WEBPL

Autres exemples

Feature-Policy:  unoptimized-lossy-images *(0.5);
                 unoptimized-lossless-images *(1.0);
                 unoptimized-lossless-images-strict *(1.0);

Cette règle est appliquée à toutes les origines avec une valeur de seuil de 0,5 (pour les formats avec perte) et de 1 (pour les formats sans perte). Tout élément <img> dont l'image a un ratio d'octets par pixel supérieur à la contrainte n'est pas autorisé et sera remplacé par une image d'espace réservé.

Feature-Policy: unoptimized-lossy-images *(inf) 'self'(0.3);
                unoptimized-lossless-images *(inf) 'self'(0.8);
                unoptimized-lossless-images-strict *(inf) 'self'(0.8);

Cette règle est appliquée à l'origine du site avec une valeur de seuil de 0,3 (pour les formats avec perte) et de 0,8 (pour les formats sans perte). Les éléments <img> dans les contextes de navigation de niveau supérieur et les contextes de navigation imbriqués de même origine ne s'affichent normalement que si le ratio octets par pixel répond à ces contraintes. Les éléments <img> partout ailleurs s'afficheront normalement.

Mode "Rapport uniquement" dans la pratique

Vous ne souhaitez peut-être pas publier un site avec des images d'espace réservé. Vous pouvez utiliser les règles en mode d'application (avec des images non optimisées affichées en tant qu'images d'espace réservé) pendant le développement et la mise en scène, et utiliser le mode "Rapport uniquement" en production. (Pour en savoir plus, consultez la section Signaler un non-respect des règles sur les autorisations.) Comme l'en-tête HTTP Permissions-Policy, l'en-tête Permissions-Policy-Report-Only vous permet d'observer les rapports de non-respect dans la nature sans aucune application.

Limites

Les règles relatives aux images ne fonctionnent que sur les éléments d'image HTML (<img>, <source>, etc.) et ne sont pas encore compatibles avec les images de fond ni le contenu généré. Si vous souhaitez que les règles s'appliquent à des contenus plus larges, n'hésitez pas à nous en faire part.

Optimiser vos images

J'ai beaucoup parlé de l'optimisation de vos images, mais je n'ai pas expliqué comment procéder. Ce sujet n'entre pas dans le champ d'application de cet article, mais vous pouvez en savoir plus en consultant les liens ci-dessous et les ateliers de programmation listés à la fin de l'article.

Envoyez-nous vos commentaires

Nous espérons que cet article vous a permis de bien comprendre les règles relatives aux images et vous a donné envie de les utiliser. Nous serions ravis que vous testiez les règles et que vous nous donniez votre avis.

Vous pouvez nous envoyer vos commentaires sur chacune des fonctionnalités mentionnées dans cet article à notre liste de diffusion: feature-control@chromium.org.

Nous aimerions connaître les valeurs de seuil que vous avez utilisées et qui vous ont semblé utiles. Nous aimerions savoir si unoptimized-lossless-images ou unoptimized-lossless-images-strict est plus intuitif et facile à utiliser, ou si nous devrions utiliser une marge de différence de frais généraux à la place. Nous vous enverrons une enquête vers la fin de l'essai. Tenez-vous informé !