Feedback von der Umfrage zur Bildoptimierung im Sommer 2019

Kommentare von Umfrageteilnehmern zu verschiedenen Bildoptimierungstechniken

22. November 2019

This Post lists the freeform feedback that Google Web DevRel received in its Summer 2019
Umfrage zu Bildoptimierungstechniken.
Antworten wurden durch angefordert Web-Grundlagen und
@ChromiumDev. Die Motivation für die Umfrage war herauszufinden, warum
Die meisten Websites folgen nicht den Best Practices für die Bildoptimierung, obwohl sie relativ zu sein scheinen
easy way to improve performance. The response data isn’t listed here because there were flaws
in der Umfragemethodik.

Publikum

• Wenn Sie ein Webentwickler sind, ist dieser Beitrag möglicherweise hilfreich, um neue Bildoptimierungen zu entdecken
  Techniken oder Details darüber, wie andere Webentwickler ein Problem gelöst haben, mit dem Sie konfrontiert sind
  sowie die Kosten, Vorteile und Einschränkungen jeder Technik.
• Wenn Sie ein Image-Service oder Image-CDN-Anbieter sind, kann Ihnen dieser Beitrag dabei helfen, einen neuen Markt zu finden
  Chancen.
• If you’re a Rahmen, build tool, or CMS developer, this post might give you ideas on new
  zu implementierende Funktionen.

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.»
• "Machen Sie WebP auf Safari nutzbar."
• "Ich würde gerne WebP verwenden, wenn ich sie aus Photoshop / Figma / Sketch exportieren könnte und alle Browser dies unterstützen." [Hinweis: Sketch unterstützt WebP]
• "Die Formatierungslösung der nächsten Generation wäre großartig."
• "Hören Sie auf, WebP so stark zu pushen, wenn die Browserunterstützung schlecht ist, und berücksichtigen Sie die Notwendigkeit von PNG anstelle von JPEG für Screenshots."
• "Google Text & Tabellen unterstützt WebP nicht."
• "Wir würden ausschließlich WebP verwenden, sind jedoch besorgt über die Browserkompatibilität."
• «Korrigieren Sie zuerst die Browserkompatibilität und aktualisieren Sie ältere Browser oder fügen Sie ältere Korrekturen hinzu. Dann sind die Benutzer eher geneigt, sich auf neue Bildtypen wie WebP einzustellen ...»
• «Encourage Plugin/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- und Vektorbilder

• «Wenn möglich verwende ich (animiertes) SVG. Gatsby-Image hat vieles behoben. Aber wenn Sie sich mit dem beschäftigen, was sie getan haben, ist es völlig unrealistisch, dass eine normale Website so etwas aufbauen muss, damit die Bilder richtig funktionieren. Der Browser sollte mehr von dieser Verantwortung übernehmen. »
• «Wäre es möglich zu dokumentieren, wie SVG-Animationen mit erstellt werden? lottie.js? »
• «Wir versuchen die meiste Zeit, JPEG-Bilder mit hoher Auflösung und geringer Größe auf unserer Website zu verwenden, um Ladezeiten zu vermeiden. Wir stellen außerdem sicher, dass bei Bedarf SVGs verwendet werden, um Qualität für reaktionsschnelles Design zu gewährleisten. »
• "Wir versuchen, wenn möglich optimierte Vektorgrafiken für alle außer Bildern zu verwenden."

Andere Bildformate

• "Wir müssen die Menschen besser dazu erziehen, GIF nicht mehr zu verwenden."

Faules Laden

• "Bitte denken Sie an den Benutzer, wenn Sie Funktionen wie" Lazy Load "in Betracht ziehen, da dies für viele ärgerlich ist."
• "Lassen Sie das Lazy Load-Attribut bitte mit dem Hintergrundbild funktionieren."
• "Wir lieben es, dass das verzögerte Laden von Bildern endlich zu einem nativen Feature wird."
• "Frameworks sollten sofort eine bessere Asset-Verarbeitung durchführen."
• «Wir haben vor langer Zeit von faulem Laden konvertiert. Benutzerberichte von Millionen von Bildern und Websites «NICHT LADEN». Das war Verständnis, dass unser Team es als zusammengefasst hat. Für nicht technische Benutzer ist es schwierig, Probleme zu beschreiben. »
• «I’m keen to get a better understanding of using Intersection Observer API for lazy loading rather than using traditional techniques.»
• «Das funktioniert bei mir gut: pwafire.org/developer/codelabs/progressive-loading. »

Hintergrundbilder

• «I usually load images as backgrounds in CSS. »
• "Das <img> Das Tag ist problematisch und schwer zu kontrollieren, insbesondere bei vom Benutzer eingereichten Inhalten. Wir gebrauchen <div> und Hintergrundbild-Styling viel häufiger, da wir so die Hintergrundgröße und die Hintergrundposition verwenden und das Speichern des Bildes mit der rechten Maustaste verhindern können. »

Transparenz

• "Es ist 2019. Wie sind JPGs noch ohne Alpha-Transparenz?"
• "Ich verwende PNGs nur dann wirklich für Fotos, wenn ich einen transparenten Hintergrund benötige."

Bildplatzhalter mit geringer Qualität (LQIPs)

• "Wir verwenden LQIPS und es ist eine großartige Technik, um Besucher zu beschäftigen, ohne sehr früh qualitativ hochwertige Bilder zu laden."

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 scrollen 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.»

Dimensionierung

• Entschuldigung für intrinsicsize; Höhe / Breite zu nutzen scheint mir besser. »
• "Auf der Suche nach einer Möglichkeit, weniger Größen zu generieren, ist es momentan ~ 12."
• "Die dynamische Größenänderung von Bildern ist ohne JS sehr schwierig und unmöglich."
• «Ein Werkzeug wie responsivebreakpoints.com ist gut für web.dev :). »

Hochwertige und hochauflösende Bilder

• "Wie kann ich komprimierte Bilder herunterladen, ohne die DPI-Qualität zu verlieren?"
• «Wir sind ein Dokumentenmanagementunternehmen. Unsere Apps verarbeiten MILLIONEN hochauflösender gescannter Bilder, normalerweise TIFF oder PDF. »
• Es ist ein Ärger. Hochauflösende IMG-Dateien sind für das Druckformat erforderlich. muss für das Web optimiert werden. Es ist mühsam, Bilder für das Web zu verkleinern, aber es ist ein Show-Stopper, wenn Autoren nur leichtgewichtige Dateien für Bilder bereitstellen, die für die Druckveröffentlichung bestimmt sind. Am Ende geben wir gemischte Botschaften über die Anforderungen für die Einreichung von Manuskripten mit Kunstwerken. Wir haben dann komplexe Workflows für die Verarbeitung dieser Materialien. »

Browser-Fähigkeit

• «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 Markup. 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.»
• «Persönlich fällt es mir schwer, Seitenrückflüsse zu vermeiden, wenn das Bild mit von CSS für reaktionsschnelle Bilder festgelegt wird (maximale Breite: 100%; Höhe automatisch oder Höhe: Breite: 100%; Höhe automatisch), insbesondere in Kombination mit Art Direction von Adaptive Bilder / Bild-Tag. Der beste Weg, dies zu vermeiden, scheint darin zu bestehen, den «Negative Padding Hack» für ein festes Bildverhältnis zu verwenden und das Bild dann in diesem Verhältnisfeld zu positionieren. Eine bessere Browserunterstützung / reaktionsschnelle Bildbearbeitung wäre eine wirklich große Hilfe! »
• "Bitte deaktivieren Sie die automatische Wiedergabe von GIF, indem Sie nur den ersten Frame abrufen."

CDNs und Image-Dienste

• "Google sollte ein kostenloses CDN wie Cloudflare bereitstellen."
• "Vielleicht wären mehr Tools zum Einrichten von dynamischer Skalierung und CDNs bei verschiedenen Anbietern hilfreich."
• «Ein einzelnes übergroßes überkomprimiertes Bild ist eine sehr anständige Lösung ohne zusätzliche Produktionskosten. Sie benötigen etwa 1000 Pixel breite Bilder für Mobilgeräte (500 Pixel Renderbreite). Dies ist auch die Größe, die Sie für große / Desktop-Displays ohne Retina benötigen. Ich denke, dass die Größenänderung von CDNs für Bilder eine sehr schlechte Lösung ist, obwohl ich sie in der Vergangenheit verwendet habe. Das CMS sollte die Größenänderung übernehmen und das ist zu komplex, um es einzurichten. Eine einzige Lösung ist (vorerst) ein guter Kompromiss. »
• «CloudFlare skaliert unsere Bilder automatisch so, dass sie am besten zur Anzeige des Benutzers passen. So können wir Ladezeit sparen, da Bilder relativ zur Anzeige des Benutzers geladen werden. Wenn sich ein Benutzer beispielsweise auf einem Telefon befindet, wird er nicht in einem Desktop-Hintergrund geladen. »
• "Cloudflare tut dies im Hintergrund, ohne dass wir etwas anderes tun müssen, als ein Kontrollkästchen in unserem Einstellungsfeld zu aktivieren."
• «Nur um es noch einmal zu wiederholen, der einzige Grund, warum ich srcset usw. erfolgreich verwenden kann. liegt an der Leichtigkeit von Cloudinary. Aber Cloudinary wird teuer, Ja wirklich schnell. Dies scheint ein großes Loch in der Entwicklungserfahrung zu sein. »
• "Wir brauchen eine Möglichkeit, Bilder auf intelligente Weise einfach automatisch zuzuschneiden, damit sie in unterschiedlichen Kontexten mit unterschiedlichen Seitenverhältnissen arbeiten können."
• "Ich verwende auch Bilder von anderen Anbietern wie Unsplash, bei denen Auflösung, Qualität und Komprimierung weniger kontrolliert werden."

CMS, Plattform und Framework

• «Ich habe immer noch Schwierigkeiten herauszufinden, wie Bilder am besten verwendet werden können, wenn ich eine Site mit einem CMS erstelle. Autoren neigen dazu, Bilder mit unterschiedlichen Abmessungen zu konfigurieren und erwarten, dass Bilder nicht schrumpfen oder skalieren. Ich bin mir nicht sicher, ob es in Ordnung ist, die maximale Breite oder Höhe für Bilder festzulegen. »
• "Ich habe in den letzten Projekten Gatsby-Image verwendet und habe nie zurückgeschaut."
• "Bilder sind oft der schwierige Teil, da sie vom Endbenutzer in CMS eingegeben werden. Sie können jede Größe, jedes Format verwenden, manchmal sind Originalbilder im idealen Bildformat und Abmessungen nicht verfügbar."
• «Bilder sind schwer zu pflegen, da unser System sich selbst bedient. Das Hinzufügen von Steuerelementen ist schwierig, es sei denn, die Dinge geschehen automatisch, ohne die Auflösung zu beeinträchtigen. Auch für uns sehen Bilder in Mobile vs Desktop nicht richtig aus »
• «Ich helfe Menschen, ihre Websites zu optimieren (WordPress). Die größten Probleme, die ich bei Bildern gesehen habe, sind: Sie müssen sich auf ein CDN oder Plugins verlassen, um WebP zu erstellen. srcset / picture muss von Theme-Entwicklern richtig codiert werden. Die meisten Lazy Loading Plugins werden langsam geladen, was zu einer schlechten UX führt. Hintergrundbilder sind schwer zu faul zu laden. »

Kosten-Nutzen

• "Die neuen Praktiken sind effektiv, verlängern jedoch die Entwicklungszeit der Standorte."
• «Die mangelnde Einhaltung der neuen Standards wie srcset und WebP wurde von vielen Fortune 500-Unternehmen nur langsam übernommen. Angesichts dessen haben sich viele Unternehmen der Änderung als unnötige Entwicklungskosten für aktuelle Websites widersetzt. Die Leistungssteigerungen werden vom Endbenutzer (UX) nicht ausführlich diskutiert oder gemeldet. Wenn überhaupt, ist es etwas schwieriger, Bilder aus dem Internet zu speichern. »
• "Das Erstellen und Verwalten mehrerer Größen und Versionen ist kostspielig."
• "Sie nehmen viel Platz auf unserem Server ein."

SEO

• «Es ist schwierig, ein Gleichgewicht zwischen akzeptabler Bildqualität und Dateigröße herzustellen. Einerseits möchte ich ein schnelles Laden für den SEO-Vorteil, andererseits beeinträchtigen Bilder von schlechter Qualität die Benutzeroberfläche / UX. »

Die Rolle von Bildern im Web

• «Es gibt zu viele im Web. Verwenden Sie keine nutzlosen Bilder mehr, die den geschriebenen Inhalt nicht verbessern. »
• "Erinnerst du dich noch an die Zeit, als das Web keine Bilder hatte und wir Selfies als ASCII-Kunst geteilt haben?"

Werkzeuge, Anleitungen, Standards und bewährte Verfahren: Frustrationen und Anforderungen

• [Ein Teilnehmer schrieb an Blogeintrag als Antwort auf diese Umfrage]
• «Die Anforderungen scheinen sich ständig zu ändern. Als Webentwickler ist es äußerst frustrierend, weil es zeitaufwändig ist, die Bilder überhaupt zu speichern. Wir optimieren das Beste, was wir können, überprüfen die Website und Monate später hat Google entschieden, dass die Bilder möglicherweise noch stärker komprimiert werden oder in einem anderen Format vorliegen müssen. Dies hindert uns daran, unseren Kunden die bestmögliche Lösung zu bieten, die von Dauer ist, und schafft stattdessen ein kostspieliges Unterfangen für sie und uns. Einige unserer kleinen Geschäftskunden haben einfach nicht das Budget, um Bilder weiter zu reparieren und sie erneut zu speichern, um die Anforderungen zu erfüllen. Wir haben nicht das Budget, um diese Arbeit in ihren Management-Paketen zu erledigen. Das Schreiben des Codes zum Aufrufen unterschiedlicher Bildgrößen für verschiedene Geräte ist ebenfalls zeitaufwändig. Es wäre großartig, ein System zum Speichern von Bildern zu entwickeln, das über einen längeren Zeitraum konsistent ist. »
• «Ja, ich glaube du hast Halten Sie die Anzahl der Anfragen niedrig und die Dateigrößen klein 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.»
• "Es war ein Kampf für die Menschen, sich daran zu erinnern, ihre Bilder zu komprimieren."
• "Das browserübergreifende Verhalten bleibt unvorhersehbar, daher sind die einfachsten Lösungen oft die sichersten."