Eddie Osmani, dans l'article «Le prix de JavaScript en 2018 », a exprimé une idée valable: le temps nécessaire pour traiter un script de 200 Ko et pour traiter une image ayant la même taille varie considérablement. Le fait est que lors du traitement du code, le navigateur doit effectuer un travail plus poussé que pour préparer l'utilisation des images. Voici ce que l'article en dit:Une image JPEG doit être décodée, tramée et affichée. Et le bundle JS est nécessaire, si nous le considérons de manière simplifiée, chargez, analysez, compilez, exécutez. En fait, le moteur doit résoudre d'autres problèmes dans le processus de traitement du code JS. En général, il convient de garder à l'esprit que beaucoup plus de ressources système sont consacrées au traitement du code JavaScript, dont la taille, en octets, est comparable à la taille d'autres matériaux.Ces mots ont été écrits en 2018, mais ils sont encore plus que justes. Certes, compte tenu de la situation actuelle, l'idée exprimée ici est perçue aujourd'hui un peu différemment.
Considérant qu'une pandémie a éclaté dans le monde maintenant, j'ai remarqué que ma connexion Internet est devenue instable. Heureusement, du fait qu'Internet est protégé par d'excellents spécialistes qui ne connaissent pas la fatigue, la plupart du World Wide Web fonctionne toujours bien. Mais sur Internet, quelque chose se passe définitivement. J'utilise une connexion à 100 Mbps, mais j'ai l'impression que je suis assis sur un modem 3G.Cela apporte quelques modifications au raisonnement ci-dessus. Le fait est que nos appareils peuvent analyser et compiler JavaScript à la même vitesse qu'il y a quelques semaines. Mais les données transitent désormais plus lentement sur les réseaux. Par conséquent, pour le moment, il est extrêmement important de savoir combien de données représentant une certaine ressource sont transmises sur le réseau lorsque cette ressource est chargée.Et les sites ont généralement beaucoup plus de 200 Ko d'images. Une page avec plusieurs mégaoctets d'images est généralement le cas. De nombreux développeurs (et moi aussi!), En règle générale, ne pensent pas du tout à la taille des supports.Mais ce qui est très bien, l'optimisation des images utilisées sur les pages Web n'est pas si difficile. Dans cet article, nous expliquerons comment utiliser des formats graphiques modernes comme WebP. Les images enregistrées dans de tels formats s'avèrent souvent 2 à 3 fois plus petites que celles pour lesquelles les anciens et anciens formats connus (comme JPG et PNG) sont utilisés par tout le monde. L'utilisation de nouveaux formats peut sérieusement changer la situation pour le mieux.Aperçu général des formats graphiques modernes
Pour améliorer le travail avec les graphiques Web, nous pouvons utiliser les trois formats suivants:- JPEG 2000 est un format qui est une version améliorée de JPG standard. Ce format a été développé en 1997, principalement pour une utilisation au cinéma et en médecine. Il vous permet de compresser des images plus fortes que JPEG, mais avec moins d'artefacts.
- JPEG XR est un format lié à JPEG 2000. Il a été développé par Microsoft en 2009.
- WebP est un format créé par Google en 2010 pour le Web. Le principal objectif de son développement était d'utiliser des méthodes avancées d'optimisation des images afin de réduire la taille des fichiers. WebP prend en charge la transparence et même l'animation.
Ici, nous parlerons principalement de WebP. Formats liés au JPEG, nous verrons où se posera le problème de la compatibilité du navigateur.Combien pouvez-vous gagner en utilisant des formats graphiques alternatifs?
Il y a quelques mois, j'ai utilisé l'image suivante dans un matériau.L'image utilisée dans un matériauJ'ai effectué quelques expériences, compte tenu de l'utilisation des formats JPG et PNG pour stocker l'image d'origine. J'ai optimisé les options d'image en utilisant imagemin afin de découvrir ce que WebP peut me donner à la place de ces formats «rétro».Les résultats ont été incroyables.J'ai mené des expériences similaires avec de nombreuses images. Il s'est avéré presque toujours que les fichiers WebP étaient 30 à 70% plus petits que les versions même optimisées de fichiers graphiques d'autres formats.Cela peut soulever la question de savoir comment la conversion en WebP peut affecter les images SVG. Je n'ai pas mené de telles expériences avec SVG. SVG est un format vectoriel. Cela signifie que les images qu'il contient sont construites sur la base d'instructions mathématiques et non sur la base d'informations sur la couleur des pixels individuels. Convertir une image SVG en WebP signifie abandonner la possibilité de mettre à l'échelle des images SVG, ce qui, je crois, est inacceptable. De plus, je soupçonne qu'une telle conversion, dans la plupart des cas, entraînera une augmentation de la taille des fichiers.Compatibilité du navigateur
Pour en savoir plus sur la prise en charge de certains formats graphiques par les navigateurs, consultez caniuse.com .Le format WebP est pris en charge par la plupart des navigateurs.Prise en charge du format WebP par les navigateursBien que le niveau de prise en charge de ce format soit très élevé, il est très regrettable que Safari et Internet Explorer ne le prennent pas en charge.Et voici des informations sur la prise en charge de JPEG 2000.Prise en charge du format JPEG 2000 par les navigateursDonc, maintenant Safari est de notre côté, mais Internet Explorer est à nouveau sans travail.Qu'en est-il du JPEG XR?Prise en charge du format JPEG XR par les navigateursEt ici, Internet Explorer a été distingué. Par conséquent, en utilisant ces trois formats, nous chevauchons tous les navigateurs existants (le navigateur KaiOS ne prend en charge aucun de ces formats, et je m'excuse auprès de lui de l'ignorer, mais je ne sais même pas de quel navigateur il s'agit. )Parlons maintenant de la façon de choisir différents formats d'image conçus pour différents navigateurs.L'élément d'image à la rescousse
HTML a deux éléments pour produire des images. Le premier peut être comparé à une pop star internationale comme Madonna. Ça l'est img. Et le second est comme un nouveau groupe, connu uniquement dans les cercles étroits des mélomanes. Ceci est un élément picture.L'élément pictureest apparu en HTML beaucoup plus tard que img. L'objectif principal de ce nouvel élément est de permettre aux développeurs de télécharger diverses ressources graphiques en fonction de la résolution de l'écran ou selon que le navigateur prend en charge un certain format graphique.Voici à quoi ressemble le code HTML qui utilise l'élément picture:<picture>
<source srcset="/images/cereal-box.webp" type="image/webp" />
<source srcset="/images/cereal-box.jp2" type="image/jp2" />
<img src="/images/cereal-box.jxr" type="image/vnd.ms-photo" />
</picture>
Un élément picturepeut comprendre plusieurs éléments enfants sourceet un élément img. Le navigateur analyse séquentielle de ces éléments, la sélection, basée sur l'attribut type(s media), l' un d'entre eux qui peuvent l' utiliser. Lorsqu'un tel élément est trouvé, le navigateur recherche l'adresse de l'image à l'aide de l'attribut srcset, puis affiche cette image à l'aide de l'élément img.L'attribut srcseta des capacités beaucoup plus grandes que l'habituel src, mais, heureusement, nous pouvons le considérer comme un analogue src. En général, les éléments sourcesont quelque chose comme des paramètres qui correspondent à différentes images. L' imgimage qui correspond le mieux à l'environnement dans lequel la page est affichée est incluse.Dans Chrome, par exemple, après avoir traité le balisage ci-dessus, le navigateur arrivera à quelque chose de plus ou moins équivalent au code suivant:<picture>
<img src="/images/cereal-box.webp" />
</picture>
L'utilisation d'un ensemble d'éléments consécutifs sourcesignifie qu'au moins l'un d'entre eux conviendra à chaque navigateur. Ainsi, la plupart des navigateurs utilisent une image webp, Safari chargera une image jp2, IE une image jxr.Il convient de rappeler qu'Internet Explorer ne prend pas en charge l'élément picture. Cet élément est trop nouveau pour ce navigateur. Mais, malgré cela, le fragment de balisage ci-dessus dans IE fonctionnera comme prévu.Le fait est que lorsque le navigateur tombe sur un élément qui lui est inconnu, il le considère comme un élément div. Par conséquent, lors de l'analyse de notre code, IE voit de nombreux éléments div, ainsi qu'une balise<img>qui contient le chemin d'accès à l'image jxr. Et il se trouve que c'est le format même qu'Internet Explorer prend en charge.Alternative simplifiée
Le fragment de code ci-dessus est extrêmement bon car il vous permet d'utiliser des formats graphiques modernes dans tous les navigateurs actuels. Mais l'utilisation d'un tel code est basée sur l'hypothèse de l'existence des images auxquelles il a des liens.Si vous créez vous-même de telles images, vous devez y investir beaucoup de travail manuel. Si vous les générez automatiquement, cela peut augmenter considérablement le temps de génération du projet. Le traitement graphique, comme vous le savez, devient un processus très lent pour beaucoup d'images.Seuls très peu de visiteurs de mon blog utilisent Internet Explorer (au cours des 7 derniers jours, seules 3 personnes avec IE ont essayé de le consulter, ce qui représentait 0,02% du trafic). Par conséquent, j'ai décidé d'utiliser une version simplifiée de la solution ci-dessus:<picture>
<source srcset="/images/cereal-box.webp" />
<img src="/images/cereal-box.jpg" />
</picture>
Je donne une image webp compacte aux navigateurs qui prennent en charge ce format (Chrome, Firefox, Edge) et aux navigateurs qui ne prennent pas en charge ce format (IE, Safari), j'offre un héritage du passé - une image jpeg.De mon point de vue, c'est un exemple d'amélioration progressive. Le projet reste opérationnel sur les anciens navigateurs, bien que le chargement des images prenne plus de temps. C'est un compromis qui me convient. (Certes, j'espère que le support WebP apparaîtra bientôt dans les navigateurs d'Apple également).Vérification de l'intégrité de la solution
Les outils de développement supposeront toujours que l'image contient ce qui a été écrit à l'origine dans l'attribut srctag img. Si vous cochez l'élément à l'aide de l'onglet Elements, vous pouvez voir que la page utilise une image jpg.Afin de vérifier l'opérabilité de tout cela, il est préférable, comme il me semble, de cliquer avec le bouton droit sur l'image et de sélectionner l'élément …Dans Chrome lorsque la commande est exécutée, le système devrait proposer d'enregistrer le fichier avec l'extension .webp. Mais dans Safari, ce sera un fichier jpeg.Afin de savoir exactement quel fichier graphique a été reçu du serveur lors du chargement de la page, vous pouvez vous référer à la barre d'outils du développeur Network.Convertir des fichiers image au format WebP
Google a créé un ensemble d'outils destinés à travailler avec des fichiers webp. Un tel outil est appelé cwebp . Il vous permet de convertir des fichiers graphiques d'autres formats en WebP.Si vous utilisez MacOS, vous pouvez installer cette boîte à outils à l'aide de Homebrew:brew install webp
Sur d'autres plates-formes, je pense qu'il sera nécessaire de télécharger le package libwebp approprié à partir du référentiel.Après avoir installé les outils, vous pouvez les utiliser comme ceci:cwebp -q 80 cereal.png -o cereal.webp
Considérez cette commande:- Le drapeau
-q 80vous permet de définir la qualité d'image. Sa valeur varie de 1 (pire qualité) à 100 (meilleure). Vous pouvez expérimenter avec différentes valeurs. J'ai découvert qu'il valait mieux demander quelque chose dans la région 70-80. - Le nom du fichier
cereal.jpgest l'image d'origine qui doit être convertie en webp. - La construction
-o cereal.webpdéfinit le chemin d'accès au fichier de sortie.
Personne ne veut perdre du temps à taper ces commandes manuellement. Heureusement, cette tâche peut être automatisée.Utilisation de formats d'image modernes dans les applications React
Un composant est un excellent moyen d'ignorer certaines des bizarreries de l'élément <picture>. J'utilise des composants React pour cela. À mon avis, c'est très pratique. Voici à quoi ça ressemble:const ImgWithFallback = ({
src,
fallback,
type = 'image/webp',
...delegated
}) => {
return (
<picture>
<source srcSet={src} type={type} />
<img src={fallback} {...delegated} />
</picture>
);
};
L'utilisation du composant est ImgWithFallbacktrès similaire à l'utilisation d'une balise standard img:<ImgWithFallback
src="/images/cereal.webp"
fallback="/images/cereal.png"
alt="A photo showing the expiration date on a box of Lucky Charms"
/>
L'utilisation de formats graphiques modernes avec des composants stylisés
Si vous utilisez des bibliothèques styled-componentsou emotionsi vous êtes habitué à la conception d'images spéciales:const FancyImg = styled.img`
whatever: stuff;
`
La très bonne chose est que cela fonctionne avec notre composant ImgWithFallback. Vous pouvez l'envelopper dans le wrapper approprié comme n'importe quel autre composant:const FancyImg = styled(ImgWithFallback)`
whatever: stuff;
`
La raison de l'opérabilité de cette conception est le fonctionnement exact de la structure auxiliaire styled. Il génère une classe et l'intègre dans la feuille de style du document. Ensuite, le nom de la classe générée est transmis au composant en tant que propriété:<ImgWithFallback className="sc-some-generated-thing" />
Nous déléguons toutes les propriétés à la balise enfant <img>, en conséquence, les styles corrects sont appliqués à l'image, comme cela se produit généralement. Tout fonctionne exactement comme vous pouvez vous y attendre.Utilisation du package gatsby-image
Si vous utilisez Gatsby, sachez que le package gatsby-image, lorsqu'il est utilisé normalement, utilise déjà de nombreuses optimisations d'image. Cela comprend la conversion d'images au format Webp (bien que, pour cela, vous devez activer l'option appropriée).Le colis gatsby-imagene prétend pas être un remplacement img. Son utilisation n'est peut-être pas si simple, ses mécanismes internes peuvent conduire à des surprises qui rendent la vie difficile au développeur.Si vous êtes intéressé par ce package, jetez un œil à sa documentation .Inconvénients de WebP
Le seul véritable inconvénient de webp que j'ai réussi à trouver est qu'il est très gênant de travailler avec des fichiers de ce format.La plupart des packages d'images de bureau ne le prennent pas encore en charge. Par exemple, je ne peux pas ouvrir les fichiers webp dans Aperçu sur MacOS. Cela signifie, disons que si j'enregistre une image webp à partir d'une page web, je ne pourrai pas la visualiser sur mon ordinateur!La conversion des fichiers webp en fichiers jpeg est un processus assez simple. Sur Internet, vous pouvez trouver de nombreux services gratuits qui effectuent une telle conversion. Mais, encore une fois, ce n'est pas aussi pratique que de travailler avec des formats graphiques traditionnels. Si votre site propose aux utilisateurs de télécharger des fichiers graphiques à partir de celui-ci, vous pouvez décider que vous n'avez pas besoin de passer à webp.Sommaire
J'aime beaucoup le fait qu'en utilisant webp, j'ai pu réduire la taille des images sur mon blog d'environ 50%. En plus du fait que dans nos moments difficiles, cela améliore l'expérience utilisateur de travailler avec lui, j'espère également que cela me permettra d'économiser un peu sur le paiement du trafic.Bien sûr, l'idée de convertir manuellement les fichiers image au format webp semble assez peu pratique. J'étudie déjà la question de savoir comment convertir automatiquement les fichiers jpg et png dans ce format. Idéalement, ce processus devrait se passer complètement inaperçu par le développeur, lors de l'assemblage du site.Les créateurs de projets Web ne sont généralement pas particulièrement intéressés par les fonctionnalités de l'utilisation de nouveaux formats d'image. Mais je pense que la compréhension de cette question est très utile. Après tout, l'utilisation de WebP est probablement le moyen le plus simple de réduire la taille de votre projet Web de centaines de kilo-octets.Chers lecteurs! Utilisez-vous le format WebP?