Commentaires sur l'enquête sur l'optimisation des images de l'été 2019

Commentaires des personnes interrogées sur différentes techniques d'optimisation des images

Sam Dutton

Cet article présente les commentaires libres que Google Web DevRel a reçus lors de son enquête sur les techniques d'optimisation des images de l'été 2019. Les réponses ont été sollicitées via Principes fondamentaux du Web et @ChromiumDev. L'objectif de cette enquête était de comprendre pourquoi la plupart des sites ne suivent pas les bonnes pratiques d'optimisation des images, même si elles semblent être un moyen relativement simple d'améliorer les performances. Les données de réponse ne sont pas listées ici, car la méthodologie de l'enquête comportait des failles.

Audience

• Si vous êtes développeur Web, cet article peut vous aider à découvrir de nouvelles techniques d'optimisation des images, ou à en savoir plus sur la façon dont d'autres développeurs Web ont résolu un problème auquel vous êtes confronté, ainsi que sur les coûts, les avantages et les limites de chaque technique.
• Si vous êtes un fournisseur de services ou de CDN d'images, cet article peut vous aider à trouver de nouvelles opportunités sur le marché.
• Si vous êtes développeur de framework, d'outil de compilation ou de CMS, cet article peut vous donner des idées de nouvelles fonctionnalités à implémenter.

Commentaires

WebP

Remarque : Pourquoi est-ce important ? Les formats d'image tels que WebP peuvent générer des fichiers plus petits et de meilleure qualité que les anciens formats tels que JPEG et PNG. Il existe plusieurs techniques pour utiliser des formats modernes avec un fallback pour les anciens navigateurs.

• "J'aime bien WebP, mais il n'est pas encore tout à fait prêt. De plus, notre WordPress n'est pas compatible avec WebP. Photoshop, l'une des applications de retouche photo les plus populaires, n'est pas compatible avec WebP par défaut. Nous ne pouvons donc pas nous appuyer sur des applications ou services tiers pour compresser les images."
• "Rendre WebP utilisable sur Safari"
• "J'aimerais utiliser WebP si je pouvais les exporter depuis Photoshop/Figma/Sketch et si tous les navigateurs étaient compatibles." [Remarque: Sketch est compatible avec WebP]
• "Une solution de mise en forme de nouvelle génération serait idéale."
• "Arrêtez de promouvoir WebP de manière aussi agressive lorsque la compatibilité avec les navigateurs est faible, et envisagez d'utiliser PNG au lieu de JPEG pour les captures d'écran."
• "Google Docs n'est pas compatible avec le format WebP."
• "Nous aimerions utiliser WebP exclusivement, mais nous nous inquiétons de la compatibilité des navigateurs."
• "Commencez par corriger la compatibilité des navigateurs et mettez à jour les anciens navigateurs ou ajoutez des correctifs pour les anciens navigateurs. Les utilisateurs seront alors plus enclins à adopter de nouveaux types d'images comme WebP."
• "Encouragez les développeurs de plug-ins/thèmes à prendre en charge WebP et d'autres types d'images de nouvelle génération, afin que les non-développeurs n'aient pas à s'en soucier."

Images SVG et vectorielles

• "Si possible, j'utilise des SVG (animés). gatsby-image a résolu beaucoup de problèmes. Toutefois, lorsque vous examinez ce qu'ils ont fait, il est complètement irréaliste qu'un site Web normal doive créer quelque chose de semblable pour que les images fonctionnent correctement. Le navigateur devrait assumer davantage cette responsabilité."
• "Est-il possible de documenter la création d'animations SVG avec lottie.js ?"
• "Nous essayons d'utiliser des images JPEG haute résolution de petite taille sur notre site Web la plupart du temps pour éviter les temps de chargement. Nous nous assurons également d'utiliser des SVG lorsque cela est nécessaire pour garantir la qualité du responsive design."
• "Nous essayons d'utiliser des graphiques vectoriels optimisés pour tout, sauf les images, si possible."

Autres formats d'image

• "Nous devons mieux sensibiliser les utilisateurs à arrêter d'utiliser les GIF."

Chargement différé

Remarque : Pourquoi est-ce important ? Demander des fichiers image juste à temps, plutôt que d'obtenir toutes les images d'une page dès qu'elle se charge, peut améliorer les performances et réduire les coûts liés aux données.

• "Veuillez garder l'utilisateur à l'esprit lorsque vous envisagez des fonctionnalités telles que le chargement paresseux, car pour beaucoup, il est gênant."
• "Faire fonctionner l'attribut de chargement paresseux avec l'attribut background-image, s'il vous plaît."
• "Les frameworks devraient améliorer le traitement des éléments dès la sortie de la boîte."
• "Nous avons abandonné le chargement paresseux il y a longtemps. Des millions d'images et de sites ne s'affichent pas, selon les signalements des utilisateurs. C'est ainsi que notre équipe a résumé la situation. Il est difficile pour un utilisateur non technique de décrire les problèmes."
• "Je souhaite mieux comprendre l'utilisation de l'API Intersection Observer pour le chargement paresseux plutôt que d'utiliser des techniques traditionnelles."
• "C'est bien pour moi: pwafire.org/developer/codelabs/progressive-loading."

Image de fond

• "Je charge généralement les images en tant qu'arrière-plans en CSS."
• "La balise <img> pose problème et il est difficile de contrôler les détails précis, en particulier avec le contenu envoyé par les utilisateurs. Nous utilisons beaucoup plus souvent <div> et le style background-image, car cela nous permet d'utiliser background-size et background-position, et d'empêcher l'enregistrement de l'image par clic droit."

Transparence

• "Nous sommes en 2019. Comment les fichiers JPG ne disposent-ils toujours pas de la transparence alpha ?"
• "Je n'utilise les fichiers PNG que pour les photos lorsque j'ai besoin d'un arrière-plan transparent."

Espaces réservés pour images de mauvaise qualité (LQIP)

• "Nous utilisons les LQIPS. C'est une excellente technique pour maintenir l'engagement des visiteurs sans charger des images de haute qualité trop tôt."

Performances

• "Nous avons récemment rencontré un problème de performances avec les images. Lorsque l'utilisateur fait défiler notre site, nous affichons les 60 fiches suivantes, qui incluent une miniature. En raison de la limite de six connexions sur le même domaine, les miniatures étaient bloquées, ainsi que la prochaine requête AJAX pour obtenir les 60 cartes suivantes si un utilisateur continue de faire défiler la page vers le bas."
• "Nous aimerions utiliser HTTP/2, mais la plupart de nos clients utilisent IE11. Nous étudions donc le fractionnement de domaine et le chargement de requêtes de données JSON AJAX à partir d'un autre domaine."

Dimensionnement

Remarque : Pourquoi est-ce important ? L'attribut srcset fournit d'autres sources d'images. Vous spécifiez la largeur ou la densité de pixels afin que le navigateur puisse choisir la plus petite image sans avoir à télécharger d'images pour calculer les dimensions.

• "Désolé pour la taille intrinsèque. Utiliser la hauteur/la largeur me semble plus approprié."
• "Je cherche un moyen de générer moins de tailles. Actuellement, il y en a environ 12."
• "Le redimensionnement dynamique des images est très difficile et impossible sans JavaScript."
• "Un outil comme responsivebreakpoints.com est utile pour web.dev :)."

Images de haute qualité et haute résolution

• "How to download compress images without losing DPI quality?"
• "Nous sommes une entreprise de gestion de documents. Nos applications gèrent des MILLIONS d'images numérisées haute résolution, généralement au format TIFF ou PDF."
• "C'est compliqué. Les fichiers img haute résolution sont nécessaires pour le format d'impression. Ils doivent être optimisés pour le Web. Il est pénible de réduire la taille des images pour le Web, mais c'est un problème majeur si les auteurs ne fournissent que des fichiers légers pour les images destinées à la publication papier. Nous envoyons des messages contradictoires sur les exigences concernant l'envoi de manuscrits avec des illustrations. Nous nous retrouvons alors avec des workflows complexes pour traiter ces matériaux."

Fonctionnalités du navigateur

• "Le recadrage automatique de la source responsive à partir du navigateur en tant que fonctionnalité [intégrée] serait très utile, car il est long de recadrer toutes les images en quatre tailles et d'écrire tout le balisage. Si nous pouvons importer une grande photo et écrire une balise image simple, les navigateurs créeront automatiquement les attributs src multiples. Ce serait une fonctionnalité gagnante."
• "Personnellement, j'ai du mal à éviter les reflows de page lorsque la largeur de l'image est définie par CSS pour les images responsives (max-width: 100%; height auto ou height: width: 100%; height auto), en particulier en combinaison avec la direction artistique des images adaptatives/de la balise picture. Le meilleur moyen d'éviter cela semble être d'utiliser le "hack de marge négative" pour un format d'image fixe, puis de positionner l'image dans cette zone de format. Une meilleure compatibilité avec les navigateurs et une meilleure gestion des images responsives seraient vraiment utiles."
• "Veuillez désactiver la lecture automatique des GIF en n'extrayant que le premier frame."

CDN et services d'images

Remarque : Pourquoi est-ce important ? Les services d'images vous permettent d'optimiser plus facilement vos images. En général, il vous suffit d'importer une seule version haute résolution de chaque image, puis d'utiliser une API de service Web pour optimiser ou transformer l'image si nécessaire. Les réseaux de diffusion de contenu (CDN) optimisent la distribution et la diffusion d'images et d'autres composants de site Web. Ils fournissent parfois des services d'optimisation, comme la diffusion automatique d'images WebP dans les navigateurs compatibles au lieu de PNG ou JPEG, sans modifier l'extension de fichier.

• "Google devrait fournir un CDN sans frais comme Cloudflare."
• "Il serait peut-être intéressant de proposer plus d'outils pour configurer la mise à l'échelle dynamique et les CDN avec différents fournisseurs."
• "Une seule image surdimensionnée et surcompressée est une solution très correcte, sans frais de production supplémentaires. Vous avez besoin d'images d'environ 1 000 pixels de large pour les mobiles (largeur de rendu de 500 pixels). C'est également la taille dont vous avez besoin pour les grands écrans/ordinateurs de bureau non Retina. Je pense que les CDN de redimensionnement des images sont une très mauvaise solution, bien que je les aie utilisés par le passé. Le CMS doit gérer le redimensionnement. S'il est trop complexe à configurer, une seule solution est un bon compromis (pour le moment)."
• "CloudFlare redimensionne automatiquement nos images pour qu'elles s'adaptent au mieux à l'écran de l'utilisateur. Nous pouvons ainsi réduire le temps de chargement, car les images sont chargées en fonction de l'écran de l'utilisateur. Par exemple, si un utilisateur utilise un téléphone, il ne se chargera pas en arrière-plan en taille d'ordinateur."
• "Cloudflare effectue cette opération en arrière-plan, sans que nous ayons à faire quoi que ce soit, si ce n'est cocher une case dans notre panneau de paramètres."
• "Pour rappel, la seule raison pour laquelle je peux utiliser srcset, etc. est la facilité d'utilisation de Cloudinary. Mais Cloudinary devient très rapidement coûteux. Cela semble être un problème majeur dans l'expérience de développement."
• "Nous avons besoin d'un moyen de recadrer automatiquement les images de manière intelligente afin qu'elles puissent fonctionner avec différents formats dans différents contextes."
• "J'utilise également des images d'autres fournisseurs comme Unsplash, où le contrôle de la résolution, de la qualité et de la compression est très limité."

CMS, plate-forme et framework

• "Je ne parviens toujours pas à trouver la meilleure façon d'utiliser les images lorsque je crée un site à l'aide d'un CMS. Les auteurs ont tendance à configurer des images avec des dimensions différentes et s'attendent à ce qu'elles ne soient pas réduites ni redimensionnées. Je ne suis pas sûr qu'il soit possible de définir une largeur ou une hauteur maximales pour les images."
• "J'utilise gatsby-image pour mes derniers projets et je n'ai jamais regretté."
• "Les images sont souvent la partie la plus difficile, car elles sont mises dans le CMS par l'utilisateur final. Elles peuvent utiliser n'importe quelle taille et n'importe quel format. Parfois, l'image d'origine est au format idéal, mais les dimensions ne sont pas disponibles."
• "Les images sont difficiles à gérer, car notre système est en libre-service. Il est difficile d'ajouter des commandes, sauf si les choses se produisent automatiquement sans affecter la résolution. De plus, les images ne s'affichent pas correctement sur mobile par rapport à l'ordinateur."
• "J'aide les gens à optimiser leurs sites (WordPress). Les plus gros problèmes que j'ai rencontrés avec les images sont les suivants: il faut dépendre d'un CDN ou de plug-ins pour créer des fichiers WebP. srcset/picture doit être correctement codé par les développeurs de thèmes. La plupart des plug-ins de chargement différé se chargent lentement, ce qui entraîne une mauvaise expérience utilisateur. Les images de fond sont difficiles à charger de manière différée."

Coût-bénéfice

• "Les nouvelles pratiques sont efficaces, mais elles augmentent le temps de développement des sites."
• "Le manque d'adhésion aux nouvelles normes telles que srcset et WebP a été lent à être adopté par de nombreuses entreprises du Fortune 500. De nombreuses entreprises ont donc résisté à ce changement, car il représente un coût de développement inutile pour les sites Web actuels. Les gains de performances ne sont pas largement discutés ni signalés par l'utilisateur final (expérience utilisateur). Au contraire, cela rend l'enregistrement d'images sur le Web un peu plus difficile."
• "Créer et gérer plusieurs tailles et versions est coûteux."
• "Ils prennent beaucoup de place sur notre serveur."

SEO

• "Il est difficile de trouver le juste équilibre entre la qualité d'image acceptable et la taille de fichier. D'un côté, je souhaite un chargement rapide pour bénéficier des avantages du référencement naturel, mais d'un autre côté, des images de mauvaise qualité nuisent à l'UI/UX."

Rôle des images sur le Web

• "Il y en a trop sur le Web. Arrêtez d'utiliser des images inutiles qui n'améliorent pas le contenu écrit."
• "Vous vous souvenez encore de l'époque où le Web n'avait pas d'images et que nous partagions des selfies sous forme d'art ASCII ?"

Outils, consignes, normes et bonnes pratiques: frustrations et demandes

• [Un participant a rédigé un article de blog en réponse à cette enquête]
• "Les exigences semblent changer constamment. En tant que développeur Web, c'est extrêmement frustrant, car enregistrer les images prend du temps. Nous optimisons le mieux possible, nous vérifions le site, puis des mois plus tard, Google décide que les images pourraient être encore plus compressées ou qu'elles doivent être dans un autre format. Cela nous empêche de fournir la meilleure solution possible à notre client, qui dure dans le temps, et crée une entreprise coûteuse pour lui et pour nous. Certains de nos clients PME n'ont tout simplement pas le budget nécessaire pour que nous continuions à corriger et à enregistrer à nouveau les images afin qu'elles respectent les exigences. Nous n'avons pas le budget nécessaire pour effectuer ce travail dans le cadre de leurs packages de gestion. Écrire le code permettant d'appeler différentes tailles d'image pour différents appareils est également chronophage. Il serait idéal de trouver un système d'enregistrement des images qui serait cohérent sur une période plus longue."
• "Oui, je pense que vous avez tout faux pour "Réduisez au maximum le nombre de requêtes et la taille des transferts" dans Lighthouse. Si un site est diffusé via HTTP1.x, c'est bien sûr le cas, mais si un site est diffusé via HTTP2, le nombre de requêtes est moins important, voire pas du tout un problème s'il provient du même nom d'hôte. Je dispose d'un site Web allégé, mais je charge 30 petits fichiers WebP représentant environ 35 requêtes au total, via HTTP2 sur le même nom d'hôte. Lighthouse signale ce problème comme un problème de "Réduisez le nombre de requêtes et la taille des fichiers", alors qu'il est ultrarapide. De plus, en raison de HTTP2 sur le même nom d'hôte, le nombre de requêtes ne pose pas de problème. Oui, les fichiers sont déjà petits (la plupart entre 1 Ko et 2 Ko ou moins). Je pourrais charger un sprite, mais cela nécessiterait plus de calculs CSS. Veuillez donc mettre à jour le rapport "Réduisez au maximum le nombre de requêtes et la taille des transferts" dans Lighthouse pour tenir compte d'HTTP2 sur le même nom d'hôte."
• "Les utilisateurs ont du mal à se souvenir de compresser leurs images."
• "Le comportement inter-navigateurs reste imprévisible. Par conséquent, les solutions les plus simples sont souvent les plus sûres."