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

Ce post répertorie les commentaires au format libre que Google Web DevRel a reçus dans son enquête sur les techniques d'optimisation des images de l'été 2019. Nous avons sollicité leurs réponses via le site Web Fundamentals et @ChromiumDev. L'objectif de cette enquête était de découvrir pourquoi la plupart des sites ne suivent pas les bonnes pratiques d'optimisation des images, alors qu'elles semblent être un moyen relativement simple d'améliorer les performances. Les données des réponses ne sont pas répertoriées ici, car la méthodologie de l'enquête comporte des défauts.

Audience

  • Si vous êtes développeur Web, cet article peut vous être utile pour découvrir de nouvelles techniques d'optimisation d'images ou pour expliquer comment d'autres développeurs Web ont résolu un problème auquel vous êtes confronté, ainsi que les coûts, les avantages et les limites de chaque technique.
  • Si vous êtes un fournisseur de services d'images ou de CDN pour les images, cet article peut vous aider à trouver de nouvelles opportunités sur le marché.
  • Si vous êtes un framework, un outil de création ou un développeur CMS, cet article peut vous donner des idées de nouvelles fonctionnalités à mettre en œuvre.

Commentaires

WebP

  • "J'aime bien le WebP, mais il n'est pas encore entièrement prêt. De plus, WordPress n'est pas compatible avec WebP. L'une des applications de retouche photo les plus populaires, Photoshop, n'est pas non plus compatible avec le WebP. Nous ne pouvons donc pas compter sur des applications ou services tiers pour la compression d'images."
  • "Rendre WebP utilisable sur Safari."
  • "J'aimerais utiliser WebP si je pouvais les exporter depuis Photoshop/Figma/Sketch, car tous les navigateurs le prennent en charge." [Remarque: Sketch est compatible avec WebP]
  • « Une solution de formatage nouvelle génération serait géniale. »
  • "Arrêtez de trop repousser les limites du format WebP lorsque la compatibilité du navigateur est insuffisante. Pensez à utiliser le format PNG au lieu d'un fichier JPEG pour les captures d'écran."
  • "Google Docs n'est pas compatible avec WebP."
  • "Nous n'utiliserions que WebP, mais nous nous préoccupons de la compatibilité des navigateurs."
  • "Commencez par corriger la compatibilité des navigateurs, puis mettez à jour les anciens navigateurs ou ajoutez d'anciens correctifs. Les utilisateurs seront 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 nouvelle génération, afin que les non-développeurs n'aient pas à le manipuler."

Images SVG et vectorielles

  • "Si possible, j'utilise le format SVG (animé). gatsby-image a résolu beaucoup de problèmes. Mais lorsque vous étudiez ce qu'ils ont fait, il est complètement irréaliste qu'un site Web normal doive créer quelque chose comme ça pour que les images fonctionnent correctement. Le navigateur doit assumer davantage de responsabilités."
  • "Est-il possible de documenter comment créer des animations SVG avec lottie.js ?"
  • "La plupart du temps, nous essayons d'utiliser des images JPEG de grande résolution avec de petites tailles sur notre site Web pour éviter les temps de chargement. Nous veillons également à utiliser des SVG si nécessaire pour offrir de la qualité dans le domaine du responsive design."
  • "Si possible, nous essayons d'utiliser des graphiques vectoriels optimisés pour toutes les images."

Autres formats d'images

  • "Nous [devons] mieux sensibiliser le public à l'arrêt des GIF."

Chargement différé

  • "Gardez l'utilisateur à l'esprit lorsque vous envisagez d'utiliser des fonctionnalités telles que le chargement différé, car cette fonctionnalité est généralement agaçante."
  • "Faites fonctionner l'attribut de chargement différé avec l'image de fond, s'il vous plaît."
  • "Les cadres doivent offrir un meilleur traitement des assets prêts à l'emploi."
  • "Le chargement différé est passé il y a longtemps. L'utilisateur signale un problème de chargement sur des millions d'images et de sites. C'est comme cela que notre équipe l'a résumé. Il est difficile pour un utilisateur non technique de décrire les problèmes."
  • "J'aimerais mieux comprendre comment utiliser l'API Intersection Observer pour le chargement différé plutôt que les techniques traditionnelles."
  • "Cette méthode fonctionne bien pour moi: pwafire.org/developer/codelabs/progressive-loading."

Image de fond

  • "Je charge généralement des images en tant qu'arrière-plan dans CSS."
  • "La balise <img> est problématique et difficile à contrôler précisément, en particulier avec le contenu envoyé par les utilisateurs. Nous utilisons bien plus souvent <div> et le style d'image de fond, car cela nous permet d'utiliser la taille et la position de l'arrière-plan, et d'éviter l'enregistrement de l'image par un clic droit."

Transparence

  • "Nous sommes en 2019. Dans quelle mesure les fichiers JPG ne présentent-ils toujours pas la transparence alpha ?
  • "Je n'utilise vraiment le format PNG pour les photographies que lorsque j'ai besoin d'un arrière-plan transparent."

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

  • "Nous utilisons LQIPS. C'est une excellente technique pour préserver l'engagement des visiteurs sans avoir à charger très tôt des images de haute qualité."

Performances

  • "Nous avons récemment rencontré un problème de performances avec les images. Lorsque l'utilisateur fait défiler votre site vers le bas, nous affichons les 60 prochaines fiches qui incluent une vignette. En raison de la limite de six connexions sur le même domaine, les vignettes ont été bloquées, de même que la demande AJAX suivante visant à obtenir les 60 cartes suivantes si l'utilisateur continue de faire défiler la page vers le bas."
  • "Nous aimerions utiliser HTTP/2, mais la plupart de nos clients utilisent Internet Explorer 11. Nous étudions donc la possibilité de segmenter / charger des requêtes de données JSON AJAX à partir d'un autre domaine."

Taille

  • "Désolé pour la taille intrinsèque, l'utilisation de la hauteur et de la largeur me semble préférable."
  • "Je cherche un moyen de générer moins de tailles. Actuellement, il fait environ 12."
  • "Sans JavaScript, le redimensionnement dynamique des images est vraiment difficile, voire impossible."
  • "Un outil tel que responsivebreakpoints.com est intéressant pour web.dev.)"

Images de haute qualité en haute résolution

  • "Comment télécharger des images compressées sans perdre en qualité PPP ?"
  • "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 un véritable casse-tête. Les fichiers img haute résolution sont nécessaires pour le format d'impression et doivent être optimisés pour le Web. Réduire la taille des images pour le Web est une tâche ardue, mais si les auteurs ne fournissent que des fichiers légers pour les images destinées à une publication papier. Nous finissons par diffuser des messages mitigés sur les exigences liées à l'envoi de manuscrits accompagnés d'œuvres d'art. Nous finissons alors par des flux de travail complexes pour traiter ces matériaux. »

Capacité du navigateur

  • "Le recadrage src réactif automatique à partir du navigateur en tant que fonctionnalité [intégrée] serait très utile, car il serait fastidieux de recadrer toutes les images en quatre tailles et d'écrire tout le balisage. Si nous pouvons télécharger une grande photo et écrire un simple tag d'image, les navigateurs créeront automatiquement les multiples attributs src qui constitueraient la caractéristique gagnante."
  • "Personnellement, j'ai du mal à éviter un ajustement de la mise en page lorsque l'image est définie par CSS pour les images responsives (largeur maximale: 100%; hauteur automatique ou hauteur: largeur: 100%; hauteur automatique), en particulier lorsque la direction artistique est issue d'une balise d'image ou d'image adaptative. La meilleure façon d'éviter semble d'utiliser le "détournement de marge intérieure négatif" pour un format d'image fixe, puis de positionner l'image dans ce cadre. Une meilleure prise en charge du navigateur et une meilleure gestion des images réactives nous seraient très utiles !"
  • "Veuillez désactiver la lecture automatique des GIF en n'extrayant que la première image."

CDN et services d'image

  • "Google devrait fournir un CDN sans frais comme Cloudflare."
  • "Il serait peut-être intéressant de disposer d'autres outils pour configurer le scaling dynamique et les CDN avec différents fournisseurs."
  • "Une seule image surdimensionnée surdimensionnée est une solution très convenable, sans coûts de production supplémentaires. Vous avez besoin d'images d'environ 1 000 pixels de large pour les appareils mobiles (largeur d'affichage de 500 pixels). C'est également la taille dont vous avez besoin pour les grands écrans d'ordinateur de bureau autres que Retina. Je pense que le redimensionnement des CDN pour les images est une très mauvaise solution, même si je l'ai déjà utilisé par le passé. Le CMS doit pouvoir gérer le redimensionnement, ce qui est trop complexe à configurer. Une seule solution constitue un bon compromis (pour le moment)."
  • "CloudFlare adapte automatiquement nos images à l'écran de l'utilisateur. Cela nous permet de gagner du temps, car les images sont chargées par rapport à l'écran de l'utilisateur. Par exemple, si un utilisateur utilise un téléphone, il ne se chargera pas sur un arrière-plan de la taille d'un ordinateur de bureau. »
  • "Cloudflare effectue cette opération en arrière-plan sans que nous ayons à faire quoi que ce soit, sauf en cochant une case dans le panneau des paramètres."
  • "Pour rappel, la seule raison pour laquelle je peux utiliser srcset, etc., est la simplicité de Cloudinary. Mais Cloudinary devient cher, très rapide. Cela semble être une trouvaille majeure dans l'expérience de développement."
  • "Nous avons besoin d'une solution permettant de recadrer automatiquement les images de façon simple et intelligente, afin qu'elles puissent être adaptées à différents formats selon le contexte."
  • "J'utilise aussi des images d'autres fournisseurs comme Unsplash, qui offrent moins de contrôle sur la résolution, la qualité et la compression."

CMS, plate-forme et framework

  • "J'ai encore du mal à trouver la meilleure façon d'utiliser des images lorsque je crée un site à l'aide d'un CMS. Les auteurs ont tendance à configurer les images dans des dimensions différentes et s'attendent à ce qu'elles ne se rétrécissent ou ne se mettent pas à l'échelle. Je ne sais pas si vous pouvez définir max-width ou max-height sur les images."
  • "J'ai utilisé gatsby-image au cours des derniers projets et je n'ai jamais regardé en arrière."
  • "Les images constituent souvent la partie la plus difficile, car elles sont intégrées au système de gestion de contenu par l'utilisateur final. Elles peuvent utiliser n'importe quelle taille et n'importe quel format. Parfois, les images originales sont dans un format idéal, et 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, pour nous, les images ne semblent pas correctes sur mobile et sur ordinateur."
  • "J'aide les utilisateurs à optimiser leurs sites (WordPress). Les principaux problèmes que j'ai constatés avec les images sont les suivants: les images doivent dépendre d'un CDN ou de plug-ins pour créer WebP. L'élément srcset/picture doit être codé correctement par les développeurs de thèmes. La plupart des plug-ins de chargement différé se chargent lentement, ce qui nuit à l'expérience utilisateur. Les images de fond sont difficiles à charger en différé."

Coût/avantage

  • "Les nouvelles pratiques sont efficaces, mais augmentent le temps de développement des sites."
  • "L'absence de respect des nouvelles normes telles que srcset et WebP a pris du temps à être adoptée par de nombreuses entreprises du classement Fortune 500. En voyant cela, de nombreuses entreprises ont résisté au changement en tant que coût de développement inutile pour les sites Web actuels. Les gains de performances ne font pas l'objet de nombreuses discussions et ne sont pas rapportés par l'utilisateur final. Le cas échéant, il est un peu plus difficile d'enregistrer des images provenant du Web."
  • "Créer et gérer plusieurs tailles et versions coûte cher."
  • "Ils occupent beaucoup d'espace sur notre serveur."

SEO

  • "Il est difficile de trouver un équilibre entre une qualité d'image et une taille de fichier acceptables. D'un côté, je veux un chargement rapide pour bénéficier du SEO, mais d'un autre côté, les images de mauvaise qualité nuisent à l'UI ou à l'expérience utilisateur."

Le 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ù il n'y avait pas d'images sur le Web et où nous partageions des selfies en forme d'art ASCII ?"

Outils, conseils, 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 évoluer constamment. En tant que développeur Web, c'est extrêmement frustrant, car le stockage initial des images prend du temps. Nous optimisons du mieux que nous pouvons, nous vérifions le site, puis plusieurs mois plus tard, Google a décidé que les images pourraient être encore plus compressées ou avoir besoin d'un format différent. Cela nous empêche de fournir à notre client la meilleure solution durable qui soit, au contraire, coûteuse, pour lui comme pour nous. Certaines de nos petites entreprises n'ont tout simplement pas le budget nécessaire pour continuer à réparer les images et les réépargner afin de respecter les exigences. Nous n'avons pas de budget pour effectuer ce travail dans le cadre de leurs outils de gestion. Écrire le code pour appeler différentes tailles d'image en fonction des appareils est également chronophage. Ce serait formidable de proposer un système d'enregistrement d'images qui resterait cohérentes pendant une plus longue période."
  • "Oui, je pense que vous avez obtenu une erreur dans Lighthouse. Si un site utilise le protocole HTTP1.x, c'est tout à fait normal. Toutefois, s'il utilise le protocole HTTP2, le nombre de requêtes est moins important, voire pas problématique s'il provient du même nom d'hôte. J'ai un site Web simplifié, mais je charge 30 petits fichiers WebP d'environ 35 requêtes au total, via HTTP2 sur le même nom d'hôte. Lighthouse signale que ce problème est de type "Keep Request Counts Low And File Sizes Small" (Conserver un nombre de requêtes faible et une taille de fichier faible). En revanche, c'est très rapide et, en raison du protocole 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à de petite taille (la taille de ces fichiers est comprise entre 1 Ko et 2 Ko ou moins). Je pourrais charger un sprite, mais il faudrait faire plus de CSS. Veuillez donc mettre à jour le rapport "Keep Request Counts Low And File Sizes Small" dans Lighthouse pour prendre en compte HTTP2 sur le même nom d'hôte."
  • "Les gens ont eu du mal à se souvenir de compresser leurs images."
  • "Le comportement sur plusieurs navigateurs reste imprévisible. Les solutions les plus simples sont donc souvent les plus sûres."