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

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

Cet article répertorie les commentaires au format libre que Google Web DevRel a reçus lors de son enquête sur les techniques d'optimisation des images cet été 2019. Nous avons sollicité leurs réponses via les 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 listées ici, car la méthodologie de l'enquête comporte des failles.

Audience

  • Si vous êtes développeur Web, cet article peut vous être utile pour découvrir de nouvelles techniques d'optimisation des images ou pour en savoir plus sur la façon dont d'autres développeurs Web ont résolu votre problème, ainsi que sur les coûts, les avantages et les limites de chaque technique.
  • Si vous êtes un fournisseur de services d'image ou de CDN, 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 sur les nouvelles fonctionnalités à implémenter.

Commentaires

WebP

  • "J'aime bien WebP, mais il n'est pas encore entièrement prêt. De plus, WordPress n'est pas compatible avec le format WebP. Photoshop, l'une des applications de retouche photo les plus populaires, n'est pas directement compatible avec WebP. Nous ne pouvons donc pas compter sur des applications ou services tiers pour la compression des images."
  • « Rendre WebP utilisable dans Safari ».
  • "J'adorerais utiliser WebP si je pouvais les exporter depuis Photoshop/Figma/Sketch et tous les navigateurs le prenaient en charge." [Remarque: Sketch est compatible avec WebP]
  • "Une solution de formatage nouvelle génération serait parfaite."
  • "Arrêtez d'appuyer si difficilement sur le WebP lorsque la compatibilité du navigateur est insuffisante. Pour les captures d'écran, pensez à utiliser le format PNG plutôt que JPEG."
  • "Google Docs n'est pas compatible avec WebP."
  • "Nous n'utiliserions que le format WebP, mais nous nous inquiétons de la compatibilité des navigateurs."
  • "Tout d'abord, corrigez la compatibilité des navigateurs et mettez à jour les anciens navigateurs ou ajoutez d'anciens correctifs. Ensuite, les utilisateurs seront plus enclins à adopter de nouveaux types d'images comme WebP..."
  • "Encouragez les développeurs de plug-ins et de 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 à s'en préoccuper."

Images SVG et vectorielles

  • "Si possible, j'utilise le format SVG (animé). gatsby-image a corrigé une grande partie de ce problème. Mais lorsqu'on étudie 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 cette responsabilité."
  • "Est-il possible de montrer comment créer des animations SVG avec lottie.js ?"
  • "Pour éviter les temps de chargement, nous essayons d'utiliser la plupart du temps des images JPEG haute résolution et de petite taille sur notre site Web. Nous veillons également à utiliser le format SVG si nécessaire afin d'assurer la qualité du responsive design."
  • "Nous essayons d'utiliser des graphiques vectoriels optimisés pour toutes les images, sauf si possible."

Autres formats d'image

  • "Nous [devons] mieux informer les gens pour qu'ils cessent d'utiliser les GIF."

Chargement différé

  • "Veuillez tenir compte de l'utilisateur lorsque vous envisagez d'utiliser des fonctionnalités telles que le chargement différé, car pour beaucoup, c'est ennuyeux."
  • "Faites en sorte que l'attribut de chargement différé fonctionne avec l'image de fond, s'il vous plaît."
  • "Les frameworks devraient permettre un meilleur traitement des éléments dès la première utilisation."
  • "Nous sommes passés du chargement différé il y a longtemps. Les utilisateurs signalent des millions d'images et de sites "NE CHARGEMENT PAS". C'est ce que notre équipe a résumé comme ça. 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."
  • "Pour moi, cette solution fonctionne bien: pwafire.org/developer/codelabs/progressive-loading."

Image de fond

  • "Je charge généralement des images en tant qu'arrière-plan en 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 <div> et le style d'image d'arrière-plan beaucoup plus souvent, car ils nous permettent d'utiliser la taille et la position de l'arrière-plan, et d'empêcher l'enregistrement de l'image par un clic droit."

Transparence

  • "Nous sommes en 2019. Pourquoi les fichiers JPG sont-ils toujours sans transparence alpha ?"
  • "Je n'utilise réellement le format PNG que pour mes photos lorsque j'ai besoin d'un arrière-plan transparent."

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

  • "Nous utilisons les technologies LQIPS. C'est une excellente technique pour maintenir l'engagement des visiteurs sans 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 la page de notre site vers le bas, nous affichons les 60 fiches suivantes, qui incluent une vignette. En raison de la limite de 6 connexions sur le même domaine, les vignettes étaient bloquées, ainsi que la requête AJAX suivante visant à obtenir les 60 fiches suivantes si un utilisateur continue de faire défiler la page vers le bas."
  • "Nous aimerions beaucoup utiliser HTTP/2, mais la plupart de nos clients utilisent IE11 ! Nous envisageons donc de segmenter les domaines et de charger les requêtes de données JSON AJAX à partir d'un autre domaine."

Dimensionnement

  • "Désolé pour la caractéristique intrinsèque, il me semble préférable d'utiliser la hauteur et la largeur."
  • "Je cherche un moyen de générer moins de tailles. Actuellement, on en a environ 12."
  • "Sans JS, le redimensionnement dynamique des images est vraiment difficile et impossible."
  • "Un outil tel que responsivebreakpoints.com est adapté pour web.dev :)."

Images de haute qualité et 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 en haute résolution, généralement au format TIFF ou PDF."
  • « C'est un 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. La réduction de la taille des images pour le Web peut s'avérer fastidieuse. En revanche, si les auteurs ne fournissent que des fichiers légers pour les images destinées à être publiées en version papier, il s'agit d'un point essentiel. Nous finissons par émettre des messages mitigés sur les exigences à respecter pour l'envoi de manuscrits accompagnés d'œuvres d'art. Nous nous retrouvons ensuite avec des flux de travail complexes pour traiter ces matériaux."

Fonctionnalités du navigateur

  • "Recadrer l'image automatiquement responsive à partir du navigateur, en tant que fonctionnalité [intégrée], serait très utile, car il faut beaucoup de temps pour recadrer toutes les images en quatre tailles et écrire tout le balisage. Si nous pouvions télécharger une grande photo et écrire un tag d'image simple, les navigateurs créeront automatiquement les multiples attributs src qui seraient une fonctionnalité gagnante."
  • "Personnellement, j'ai du mal à éviter les ajustement de la mise en page lorsque l'image avec est définie par CSS pour les images responsives (largeur maximale: 100%; hauteur automatique: hauteur: 100%; hauteur automatique), en particulier en association avec la direction artistique des images adaptatives et des tags d'image. La meilleure façon d'éviter cela est d'utiliser le "piratage de la marge intérieure négative" pour obtenir un format d'image fixe, puis de placer l'image dans ce cadre. Une meilleure prise en charge du navigateur et une meilleure gestion des images réactives seraient d'une grande aide !"
  • "Veuillez désactiver la lecture automatique des GIF en récupérant uniquement 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'outils supplémentaires pour configurer le scaling dynamique et les CDN avec différents fournisseurs."
  • "Une seule image surcompressée surdimensionnée est une solution très efficace, 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), ce qui correspond également à la taille requise pour les grands écrans non Retina. Je pense que le redimensionnement des images dans les CDN est une très mauvaise solution, même si je l'ai déjà utilisé. Le CMS devrait gérer le redimensionnement, ce qui est trop complexe à mettre en place. Une seule solution est un bon compromis (pour le moment)."
  • "CloudFlare ajuste automatiquement nos images pour qu'elles correspondent au mieux à l'écran de l'utilisateur. Le temps de chargement est donc réduit, car les images sont chargées par rapport à l'écran de l'utilisateur. Par exemple, si un utilisateur est sur 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 cocher une case dans notre panneau de paramètres."
  • "Pour rappel, la seule raison pour laquelle je peux utiliser srcset, etc., est la simplicité de Cloudinary. Mais Cloudinary devient onéreux et très rapide. Cela semble être une faille majeure dans l'expérience de développement."
  • "Nous avons besoin d'un moyen de recadrer automatiquement les images facilement et de façon intelligente, afin qu'elles puissent s'adapter à différents formats dans différents contextes."
  • "J'utilise également des images provenant d'autres fournisseurs comme Unsplash, qui offrent un contrôle très limité sur la résolution, la qualité et la compression."

CMS, plate-forme et framework

  • "Lorsque je crée un site à l'aide d'un CMS, j'ai toujours du mal à savoir quelle est la meilleure façon d'utiliser les images. Les auteurs ont tendance à configurer des images avec différentes dimensions et s'attendent à ce qu'elles ne soient pas réduites ou mises à l'échelle. Je ne sais pas s'il est acceptable de définir les valeurs "max-width" ou "max-height" pour les images"
  • "J'ai utilisé gatsby-image pour mes derniers projets, et je n'ai jamais regretté ce choix."
  • "Les images sont souvent la partie la plus difficile, car elles sont intégrées au CMS par l'utilisateur final. Elles peuvent utiliser n'importe quelle taille et n'importe quel format. Parfois, les images originales dans le format d'image idéal ne sont pas disponibles."
  • "Les images sont difficiles à gérer, car notre système est en libre-service. L'ajout de commandes est difficile, sauf si les choses sont automatiques sans affecter la résolution. De plus, les images ne s'affichent pas correctement sur mobile par rapport à ordinateur."
  • "J'aide les gens à optimiser leurs sites (WordPress). Voici les principaux problèmes que j'ai rencontrés pour les images: dépend d'un CDN ou de plug-ins pour créer des images au format WebP. Les développeurs de thèmes doivent coder correctement les éléments srcset/picture. La plupart des plug-ins de chargement différé se chargent lentement, ce qui donne une mauvaise expérience utilisateur. Le chargement différé des images de fond est difficile."

Coût/avantage

  • "Les nouvelles pratiques sont efficaces, mais augmentent le temps de développement des sites."
  • "Le manque d'adhésion aux nouvelles normes telles que srcset et WebP met du temps à être adoptées par de nombreuses entreprises du Fortune 500. Face à ce constat, de nombreuses entreprises ont résisté à ce changement, car il s'agissait d'un coût de développement inutile pour les sites Web actuels. Les gains de performances ne font pas l'objet d'un grand nombre de commentaires ni d'échanges avec l'utilisateur final. Au contraire, cela rend un peu plus difficile l'enregistrement d'images sur le Web."
  • "La création et la gestion de plusieurs tailles et versions sont coûteuses."
  • "Ils occupent beaucoup d'espace sur notre serveur."

SEO

  • "Il est difficile de trouver le bon équilibre entre la qualité d'image acceptable et la taille du fichier. D'une part, je veux un chargement rapide pour le SEO, mais d'autre part, des images de mauvaise qualité nuisent à l'interface/expérience utilisateur."

Le rôle des images sur le Web

  • "Il y en a trop sur le Web. Cessez d'utiliser des images inutiles qui n'améliorent pas le contenu écrit."
  • "Vous souvenez-vous de l'époque où le Web n'avait pas d'images et nous partageions des selfies au format 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 changer constamment. En tant que développeur Web, c'est extrêmement frustrant, car il faut beaucoup de temps pour enregistrer les images. Nous optimisons au mieux le contenu, nous vérifions le site, puis, plusieurs mois plus tard, Google a décidé que les images pouvaient être encore plus compressées ou qu'elles devaient être dans un autre format. Cela nous empêche de fournir à notre client la meilleure solution qui soit et qui soit durable. Au contraire, cela crée un effort coûteux pour lui comme pour nous. Certaines de nos petites entreprises ne disposent tout simplement pas du budget nécessaire pour continuer à corriger les images et à les enregistrer à nouveau afin de respecter les exigences. Nous n'avons pas le budget nécessaire pour effectuer cette tâche dans leurs packages de gestion. Écrire le code permettant d'appeler différentes tailles d'image pour différents appareils prend également du temps. Ce serait formidable de trouver un système d'enregistrement d'images qui serait cohérent sur une plus longue période."
  • "Oui, je pense que l'erreur "Limiter le nombre de requêtes et la taille des fichiers" est incorrecte dans Lighthouse. Bien sûr, si un site diffuse du contenu via HTTP1.x, mais qu'il utilise le protocole HTTP2, le nombre de requêtes est moins important, voire pas de problème s'il provient du même nom d'hôte. J'ai un site Web allégé, 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 ce problème en tant que "Keep Request Counts and File Sizes Small" (Conserver un nombre de requêtes faible et une taille de fichier réduite), alors qu'il est ultrarapide. De plus, 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à petits (la plupart entre 1 Ko et 2 Ko ou moins). Je pourrais charger un lutin, mais d'autres calculs CSS doivent être effectués. Veuillez donc mettre à jour le rapport "Keep Request Counts and File Sizes Small" (Conserver un nombre de requêtes faible et une taille de fichier faible) dans Lighthouse afin de prendre en compte HTTP2 pour le même nom d'hôte.
  • "Les gens ont eu du mal à se souvenir de compresser leurs images."
  • "Le comportement multi-navigateur reste imprévisible, donc les solutions les plus simples sont souvent les plus sûres."