Retour d'expérience de l'enquête d'optimisation d'image de l'été 2019

Commentaires des répondants au sondage sur diverses techniques d'optimisation d'image

22 novembre 2019

This Publier lists the freeform feedback that Google Web DevRel received in its Summer 2019
enquête sur les techniques d'optimisation d'image.
Les réponses ont été demandées via Fondamentaux du Web et
@ChromiumDev. La motivation de l'enquête était de découvrir pourquoi
la plupart des sites ne suivent pas les meilleures pratiques d'optimisation d'image même s'ils semblent relativement
easy way to improve performance. The response data isn’t listed here because there were flaws
dans la méthodologie d'enquête.

Public

• Si vous êtes un développeur Web, vous trouverez peut-être cet article utile pour découvrir une nouvelle optimisation d'image
  techniques, ou des détails sur la façon dont d'autres développeurs Web ont résolu un problème auquel vous êtes confronté, comme
  ainsi que les coûts, les avantages et les limites de chaque technique.
• Si vous êtes un fournisseur de services d'imagerie ou de CDN d'images, cet article peut vous aider à trouver un nouveau marché
  Opportunités.
• If you’re a cadre, build tool, or CMS developer, this post might give you ideas on new
  fonctionnalités à mettre en œuvre.

WebP

• «I do like WebP but it isn’t yet fully ready. Moreover, our WordPress doesn’t support WebP. One of the most popular photo editing apps, Photoshop, also doesn’t support WebP out of the box. So we can’t rely on 3rd party apps or services for image compression.»
• "Rendre WebP utilisable sur Safari."
• "J'adorerais utiliser WebP si je pouvais les exporter à partir de Photoshop / Figma / Sketch et que tous les navigateurs le supportaient." [Remarque: Sketch prend en charge WebP]
• "Une solution de formatage de nouvelle génération serait géniale."
• "Arrêtez de pousser WebP si fort lorsque la prise en charge du navigateur est médiocre et considérez le besoin de PNG au lieu de JPEG pour les captures d'écran."
• "Google Docs ne prend pas en charge WebP."
• "Nous utiliserions exclusivement WebP, mais nous sommes préoccupés par la compatibilité des navigateurs."
• «Commencez par corriger la compatibilité du navigateur et mettre à jour les anciens navigateurs ou ajouter des correctifs hérités, puis les gens seront plus enclins à adopter de nouveaux types d'images comme WebP ...»
• «Encourage brancher/theme developers to consider providing support to WebP and other next-gen image types, so that non-developers don’t need to fiddle with it.»

SVG et images vectorielles

• «Si possible, j'utilise SVG (animé). gatsby-image a corrigé une grande partie de ce problème. Mais lorsque vous vous penchez sur 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 devrait assumer davantage cette responsabilité. »
• «Serait-il possible de documenter comment créer des animations SVG avec lottie.js? »
• «Nous essayons d'utiliser des images JPEG de grande résolution avec de petites tailles sur notre site Web la plupart du temps pour éviter les temps de chargement. Nous veillons également à utiliser des SVG lorsque cela est nécessaire pour offrir une qualité de conception réactive. »
• "Nous essayons d'utiliser des graphiques vectoriels optimisés pour tout sauf les photos si possible."

Autres formats d'image

• "Nous [devons] mieux éduquer les gens pour qu'ils arrêtent d'utiliser le GIF."

Chargement paresseux

• "Veuillez garder l'utilisateur à l'esprit lorsque vous envisagez des fonctionnalités telles que la charge paresseuse, car pour beaucoup, c'est ennuyeux."
• "Faites fonctionner l'attribut de chargement paresseux avec l'image d'arrière-plan s'il vous plaît."
• "Nous adorons que le chargement paresseux d'images devienne enfin une fonctionnalité native."
• "Les cadres devraient faire un meilleur traitement des actifs dès la sortie de la boîte."
• «Nous sommes passés du chargement paresseux il y a longtemps. Rapports d'utilisateurs de millions d'images et de sites «NOT LOADING». C'était comprendre que notre équipe le résumait comme suit. Il est difficile pour un utilisateur non technique de décrire les problèmes. »
• «I’m keen to get a better understanding of using Intersection Observer API for lazy loading rather than using traditional techniques.»
• «Cela fonctionne bien pour moi: pwafire.org/developer/codelabs/progressive-loading. »

Images d'arrière-plan

• «I usually load images as backgrounds in CSS. »
• "Le <img> La balise est problématique et difficile à contrôler dans les détails précis, en particulier avec le contenu soumis par l'utilisateur. Nous utilisons <div> et le style de l'image d'arrière-plan beaucoup plus souvent car il nous permet d'utiliser la taille d'arrière-plan, la position d'arrière-plan et d'empêcher l'enregistrement de l'image par un clic droit. »

Transparence

• "Nous sommes en 2019. Comment les JPG sont-ils toujours sans transparence alpha?"
• "Je n'utilise vraiment les PNG pour les photos que lorsque j'ai besoin d'un fond transparent."

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

• "Nous utilisons LQIPS et c'est une excellente technique pour fidéliser les visiteurs sans charger très tôt des images de haute qualité."

Performance

• «We actually had a recent performance issue with images. As a user scrolls down on our site, we show the next 60 cards which include a thumbnail. Due to the 6 connection limit on the same domain, the thumbnails were being blocked as well as the next AJAX request to get the next 60 cards if a user continues to scroll down.»
• «We would love to use HTTP/2 but most of our customers use IE11! We are therefore exploring domain sharding / loading AJAX JSON data requests off a different domain.»

Dimensionnement

• Désolé pour intrinsicsize; tirer parti de la hauteur / largeur me semble préférable. »
• "Vous cherchez un moyen de générer moins de tailles, pour l'instant c'est ~ 12."
• "Le redimensionnement dynamique des images est vraiment difficile et impossible sans JS."
• «Un outil comme responsivebreakpoints.com est bon pour web.dev :). »

Images de haute qualité et haute résolution

• "Comment télécharger des images compressées sans perdre la qualité DPI?"
• «Nous sommes une société 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 problème. Les fichiers img haute résolution sont nécessaires pour le format d'impression; doit être optimisé pour le Web. Il est difficile de réduire la taille des images pour le Web, mais c'est un spectacle si les auteurs ne fournissent que des fichiers légers pour les images destinées à la publication imprimée. Nous finissons par donner des messages mitigés sur les exigences de soumission de manuscrits avec des œuvres d'art. Nous nous retrouvons ensuite avec des flux de travail complexes pour le traitement de ces matériaux. »

Capacité du navigateur

• «Auto responsive src crop from browser as native feature would be very useful as it is time consuming to crop all images to 4 sizes and writing all the balisage. If we can upload one large photo and writing a simple picture tag that browsers will automatically create the multiple src attributes that would be a winning feature.»
• «Personnellement, j'ai du mal à éviter les redistributions de page lorsque l'image avec est définie par CSS pour les images responsives (largeur max: 100%; hauteur auto ou hauteur: largeur: 100%; hauteur auto), en particulier en combinaison avec la direction artistique de adaptative images / étiquette d'image. Le meilleur moyen d'éviter semble utiliser le «hack de remplissage négatif» pour un rapport d'image fixe, puis de positionner l'image à l'intérieur de cette boîte de rapport. Une meilleure prise en charge du navigateur / une gestion des images réactive serait d'une très grande aide! »
• "Veuillez désactiver la" lecture automatique "du GIF en récupérant uniquement la première image."

CDN et services d'imagerie

• "Google devrait fournir un CDN gratuit comme Cloudflare."
• "Peut-être que plus d'outils pour mettre en place une mise à l'échelle dynamique et des CDN avec différents fournisseurs serait bien."
• «Une seule image surcompressée surdimensionnée est une solution très décente sans coût de production supplémentaire. Vous avez besoin d'images d'environ 1000 pixels de large pour mobile (largeur de rendu de 500 pixels) et c'est également la taille dont vous avez besoin pour les écrans non rétiniens de grande taille / de bureau. Je pense que le redimensionnement des images CDN est une très mauvaise solution, même si je l'ai utilisé dans le passé. Le CMS doit gérer le redimensionnement et c'est trop complexe à mettre en place, une solution unique est un bon compromis (pour l'instant). »
• «CloudFlare met automatiquement nos images à l'échelle pour qu'elles correspondent le mieux à l'affichage de l'utilisateur. Nous pouvons donc gagner du temps de chargement car les images sont chargées par rapport à l'affichage de l'utilisateur. Par exemple, si un utilisateur est sur un téléphone, il ne se chargera pas dans un arrière-plan de la taille d'un bureau. »
• "Cloudflare fait cela en arrière-plan sans que nous ayons à faire quoi que ce soit, sauf à cocher une case dans notre panneau de paramètres."
• «Juste pour répéter, la seule raison pour laquelle je peux utiliser avec succès srcset, etc. est dû à la facilité de Cloudinary. Mais Cloudinary devient cher, vraiment vite. cela ressemble à un trou majeur dans l'expérience de développement. »
• "Nous avons besoin d'un moyen de recadrer facilement automatiquement les images de manière intelligente afin qu'elles puissent travailler avec différents rapports hauteur / largeur dans différents contextes."
• "J'utilise également des images d'autres fournisseurs comme Unsplash où il y a très moins de contrôle de la résolution, de la qualité et de la compression."

CMS, plateforme et framework

• «J'ai encore du mal à savoir quelle est la meilleure façon d'utiliser les images, lorsque je construis un site à l'aide d'un CMS. Les auteurs ont tendance à configurer des images avec des dimensions différentes et s'attendent à ce que les images ne rétrécissent pas ou ne se mettent pas à l'échelle. Je ne sais pas si vous pouvez définir la largeur maximale ou la hauteur maximale sur les images »
• "J'ai utilisé gatsby-image pour les derniers projets et je n'ai jamais regardé en arrière."
• "Les images sont souvent la partie la plus difficile car elles sont placées dans le CMS par l'utilisateur final, elles peuvent utiliser n'importe quelle taille, format, parfois l'image originale au format d'image idéal et les dimensions ne sont pas disponibles."
• «Les images sont difficiles à maintenir puisque notre système est en libre-service, ajouter des contrôles est difficile à moins que les choses ne 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 gens à optimiser leurs sites (WordPress). Les plus gros problèmes que j'ai vus pour les images sont: Besoin de dépendre d'un CDN ou de plugins pour créer WebP. srcset / picture doit être correctement codé par les développeurs de thèmes. La plupart des plugins de chargement paresseux se chargent lentement, donnant une mauvaise UX. Les images d'arrière-plan sont difficiles à charger paresseusement. »

Coût / bénéfice

• "Les nouvelles pratiques sont efficaces mais augmentent le temps de développement des sites."
• «Le non-respect des nouvelles normes telles que srcset et WebP a mis du temps à être adopté par de nombreuses entreprises Fortune 500. 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 sont pas largement discutés ou rapportés par l'utilisateur final (UX). Si quoi que ce soit, il est un peu plus difficile d'enregistrer des images à partir du Web. »
• "Coûteux de créer et de gérer plusieurs tailles, versions."
• "Ils prennent beaucoup de place sur notre serveur."

SEO

• «Il est difficile de trouver un équilibre entre une qualité d'image acceptable et une taille de fichier. D'une part, je souhaite un chargement rapide pour le référencement, mais d'autre part, des images de mauvaise qualité nuiront à l'interface utilisateur / UX. »

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 souvenez-vous encore de l'époque où le Web n'avait pas d'images et où nous partagions des selfies sous forme d'ASCII-art?"

Outillage, conseils, normes et bonnes pratiques: frustrations et demandes

• [Un participant a écrit à 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 du temps pour enregistrer les images en premier lieu. Nous optimisons le mieux possible, nous vérifions le site et des mois plus tard, Google a décidé que les images pourraient être encore plus compressées ou doivent être dans un format différent. Cela nous empêche de fournir à nos clients la meilleure solution possible qui dure et crée plutôt une entreprise coûteuse pour eux et pour nous. Certains de nos petites entreprises clientes n'ont tout simplement pas le budget nécessaire pour continuer à corriger les images et à les réenregistrer pour respecter les exigences. Nous n'avons pas le budget pour faire ce travail dans leurs packages de gestion. L'écriture du code pour appeler différentes tailles d'image pour différents appareils prend également du temps. Ce serait formidable de proposer un système de sauvegarde des images qui serait cohérent pendant une période plus longue. »
• «Oui, je pense que tu as Gardez le nombre de demandes bas et les tailles de fichier réduites all wrong in Lighthouse. If a site serves over HTTP1.x then sure, but if a site serves over HTTP2 then the number of requests is less important or not even an issue if originating from the same hostname. I have a lite website, but I load 30 small WebP files of approx 35 requests total, over HTTP2 on the same hostname. Lighthouse is flagging this as an «Keep Request Counts Low And File Sizes Small» issue whereas it is superfast and because of the HTTP2 on the same hostname the number of requests are not a problem. And yes, the files are already small (most between 1 KB and 2 KB or less). I could load a sprite but then more CSS computing needs to be done. So please update the «Keep Request Counts Low And File Sizes Small» report in Lighthouse to take HTTP2 over same hostname into account.»
• "Les gens ont eu du mal à se souvenir de compresser leurs images."
• "Le comportement entre navigateurs reste imprévisible, les solutions les plus simples sont donc souvent les plus sûres."