Utilisez des règles optimisées pour les images afin de vous assurer que votre site utilise les images les plus performantes.
Les images occupent souvent une quantité importante d'espace visuel et constituent la majorité des octets téléchargés sur un site Web. Optimiser les images peut améliorer les performances de chargement et réduire le trafic réseau.
Étonnamment, plus de la moitié des sites Web diffusent des images mal compressées ou inutilement volumineuses. Cela laisse beaucoup de place pour améliorer les performances simplement en optimisant les images.
Vous vous demandez peut-être comment savoir si mes images sont optimisées et comment dois-je les optimiser ? Nous testons un nouvel ensemble de règles pour l'optimisation des images: oversized-images, unoptimized-lossy-images, unoptimized-lossless-images et unoptimized-lossless-images-strict.
Tous sont désormais disponibles pour les phases d'évaluation.
Règles relatives aux images optimisées
La règle d'autorisation introduit de nouvelles restrictions sur les images, qui peuvent être appliquées lors de l'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 seront faciles à identifier et à corriger. Ces règles peuvent être spécifiées en mode Rapport uniquement, où les images s'afficheront normalement sans application forcée tandis que les cas de non-respect sont observés via des rapports. Pour en savoir plus, reportez-vous à la section Mode Rapport uniquement dans l'état actuel ci-dessous.
images-grandes-tailles
La stratégie d'autorisation oversized-images limite les dimensions intrinsèques d'une image par rapport à la taille de son conteneur.
Lorsqu'un document utilise la règle 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 des dimensions est remplacé par une image d'espace réservé.
Pourquoi ?
Diffuser des images plus grandes que ce que l'appareil d'affichage peut afficher (par exemple, diffuser des images d'ordinateur de bureau dans des contextes mobiles ou des images à haute densité de pixels sur un appareil de faible densité) gaspille le trafic réseau et la mémoire de l'appareil. Pour en savoir plus sur l'optimisation de vos images, consultez Diffuser des images aux dimensions correctes et Diffuser des images responsives.
Exemples
Quelques exemples l'illustrent. Voici le comportement par défaut lorsque vous coupez de moitié la taille d'affichage d'une image.
Si j'applique la stratégie d'autorisation suivante, j'obtiens une image d'espace réservé à la place.
Permissions-Policy: oversized-images *(2);
J'obtiens des résultats similaires si je ne baisse que la largeur ou la hauteur.
How to use
En résumé, la règle oversized-images peut être spécifiée via:
- En-tête HTTP
Permissions-Policy - Attribut
<iframe>allow
Pour déclarer la règle oversized-images, vous devez fournir:
- Le nom de l'élément géographique,
oversized-images(obligatoire) - Liste des origines (facultatif)
- Valeurs de seuil (c'est-à-dire le ratio de scaling à la baisse X) pour les origines, spécifiées entre parenthèses (facultatif)
Nous vous recommandons un ratio de réduction de 2,0 ou inférieur. Envisagez d'utiliser des images responsives de résolutions différentes afin de les diffuser de manière optimale 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 ratio de réduction de la taille est supérieur à 2,0 n'est pas autorisé.Il 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 seuil de 1,5.
Les éléments <img> dans les contextes de navigation de premier niveau et les contextes de navigation imbriqués à la même origine ne s'affichent normalement que si le ratio de réduction de la taille est inférieur ou égal à 1,5. Les éléments <img> partout ailleurs s'afficheront normalement.
images-{lossy,lossless}-non optimisées
Les règles de fonctionnalité unoptimized-lossy-images, unoptimized-lossless-images et unoptimized-lossless-images-strict limitent la taille du fichier d'une image par rapport à sa résolution intrinsèque:
unoptimized-lossy-images- Les formats perdus ne doivent pas dépasser un ratio octet par pixel de X, avec une marge de surcharge fixe de 1 Ko. Pour une image de L x H, le seuil de taille du fichier est calculé comme suit : L x H x X + 1 024.
unoptimized-lossless-images- Les formats sans perte ne doivent pas dépasser un ratio octet par pixel de X, avec une surcharge système fixe de 10 Ko. Pour une image de L x H, le seuil de taille du fichier est calculé comme suit : L x H x X + 10 240.
unoptimized-lossless-images-strict- Les formats sans perte ne doivent pas dépasser un ratio octet par pixel de X, avec une surcharge système fixe de 1 Ko. Pour une image de L x H, le seuil de taille du fichier est calculé comme suit : L x H x X + 1 024.
Lorsqu'un document utilise l'une de ces règles, tout élément <img> ne respectant pas la contrainte est remplacé par une image d'espace réservé.
Pourquoi ?
Plus la taille de téléchargement est grande, plus le chargement de l'image est long. La taille du fichier doit être réduite au maximum lors de l'optimisation d'une image : suppression des métadonnées, choix d'un bon format d'image, compression d'image, etc. Pour en savoir plus sur l'optimisation de vos images, consultez 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 avec pertes non optimisée peut être affichée de la même manière qu'une image optimisée.
Si j'applique la stratégie d'autorisation suivante, j'obtiens une image d'espace réservé à la place.
Permissions-Policy: unoptimized-lossy-images *(0.5);
How to use
Si vous ne connaissez pas les règles relatives aux autorisations, consultez Présentation des règles relatives aux autorisations pour en savoir plus.
En résumé, les règles unoptimized-{lossy,lossless}-images peuvent être spécifiées de l'une des façons suivantes:
- En-tête HTTP
Permissions-Policy - Attribut
<iframe>allow
Pour déclarer une règle 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 (ex. : ratio octet par pixel X) pour les origines, spécifiées entre parenthèses (facultatif)
Nous recommandons un ratio octet par pixel de 0,5 ou moins pour unoptimized-lossy-images, et un ratio octet par pixel de 1 ou moins pour unoptimized-lossless-images et unoptimized-lossless-images-strict.
Les formats WebP ont de meilleurs taux de compression que les autres formats. Diffusez toutes vos images au format avec pertes WebP, si possible. Si ce n'est pas suffisant, essayez le format WebP sans perte. Utilisez JPEG dans les navigateurs qui ne sont pas compatibles avec les formats WebP. Utilisez le format PNG si aucun de ces formats ne fonctionne.
Si vous utilisez des formats WebP, essayez avec 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 présente un ratio octet 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 premier niveau et les contextes de navigation imbriqués à la même origine ne s'affichent normalement que si le ratio octet par pixel répond à ces contraintes. Les éléments <img> partout ailleurs s'afficheront normalement.
Mode Rapport uniquement dans le monde réel
Publier un site avec des images d'espace réservé n'est peut-être pas ce que vous souhaitez. Vous pouvez utiliser les règles en mode application forcée (avec des images non optimisées affichées sous la forme d'images d'espace réservé) pendant le développement et la préproduction, et le mode rapport uniquement en production. (Consultez la section Rapports sur les règles d'autorisation pour plus de détails.) Semblable à l'en-tête HTTP Permissions-Policy, l'en-tête Permissions-Policy-Report-Only vous permet d'observer les rapports de non-respect des règles sans aucune mesure d'application.
Limites
Les règles d'image 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 nos règles soient acceptées pour des contenus plus larges, veuillez nous en informer.
Optimiser vos images
J'ai beaucoup parlé de l'optimisation des images, mais je n'ai pas expliqué comment procéder. Ce sujet n'est pas abordé dans cet article, mais vous pouvez en apprendre davantage grâce aux liens ci-dessous et aux ateliers de programmation indiqués à la fin de l'article.
Donnez-nous votre avis
Nous espérons que cet article vous a permis de mieux comprendre les règles relatives aux images et de vous enthousiasmer. Nous aimerions vraiment que vous testiez ces règles et que vous nous fassiez part de vos commentaires.
Vous pouvez nous faire part de vos commentaires sur chacune des fonctionnalités mentionnées dans cet article à notre liste de diffusion: feature-control@chromium.org.
Nous aimerions savoir quelles valeurs de seuil vous avez utilisées et que vous avez trouvées utiles. Nous aimerions savoir si unoptimized-lossless-images ou unoptimized-lossless-images-strict est plus intuitif et facile à utiliser, ou si nous devons utiliser une marge de progression différente. Nous vous enverrons une enquête vers la fin de l'essai. mais revenez plus tard !