Utilisez les règles d'optimisation des images pour vous assurer que votre site utilise les images les plus performantes.
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. L'optimisation des images peut 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. Cela laisse 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
Le règlement sur les autorisations introduit un nouvel ensemble de restrictions sur les images, qui peut être appliquée lors 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 rapport uniquement, où les images s'affichent normalement sans application lorsque des cas de non-respect sont observés via des rapports. Pour en savoir plus, consultez la section Mode Rapport uniquement 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 ?
Diffuser des images plus grandes que ce que peut afficher l'appareil d'affichage (par exemple, diffuser des images de bureau dans des contextes mobiles ou des images de haute densité de pixels sur un appareil à faible densité de pixels) gaspille du trafic réseau et de 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é.
Si j'applique la stratégie d'autorisations suivante, je reçois une image d'espace réservé à la place.
Permissions-Policy: oversized-images *(2);
J'obtiens des résultats similaires si je ne diminue que la largeur ou 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 de définir un taux de réduction de niveau inférieur ou égal à 2. 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>
contenant 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 facteur 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
Vous trouverez ci-dessous 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.
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);
Fonctionnement
Si vous ne connaissez pas les règles d'autorisation, consultez la page Introduction to Permissions Policy 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 avec perte WebP. 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 octet par pixel qui dépasse 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 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. Partout ailleurs, les éléments <img>
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 déjà beaucoup parlé de l'optimisation des images, mais je n'ai pas compris 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 de vous donner 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 pour les frais généraux à la place. Nous vous enverrons une enquête vers la fin de l'essai. Tenez-vous informé !