Feedback aus der Umfrage zur Bildoptimierung im Sommer 2019

Kommentare von Befragten zu verschiedenen Techniken zur Bildoptimierung

Dutton

In diesem Beitrag wird das formlose Feedback aufgeführt, das Google Web DevRel im Rahmen der Umfrage zu Bildoptimierungstechniken im Sommer 2019 erhalten hat. Antworten wurden über Web Fundamentals und @ChromiumDev angefordert. Der Grund für die Umfrage bestand darin, herauszufinden, warum sich die meisten Websites nicht an die Best Practices für die Bildoptimierung halten, obwohl diese eine relativ einfache Möglichkeit zur Leistungssteigerung zu sein scheinen. Die Antwortdaten sind hier nicht aufgeführt, da die Umfragemethode fehlerhaft war.

Zielgruppe

  • Wenn Sie ein Webentwickler sind, kann dieser Beitrag nützlich sein, um neue Techniken zur Bildoptimierung kennenzulernen oder Details darüber zu erfahren, wie andere Webentwickler ein Problem gelöst haben, mit dem Sie konfrontiert sind, sowie die Kosten, Vorteile und Einschränkungen der einzelnen Techniken.
  • Wenn Sie ein Bilddienst- oder Bild-CDN-Anbieter sind, kann dieser Beitrag Ihnen helfen, neue Marktchancen zu entdecken.
  • Wenn du ein Framework, Build Tool oder CMS-Entwickler bist, findest du in diesem Beitrag vielleicht Ideen für neue Funktionen, die du implementieren kannst.

Kommentare

WebP

  • „Ich mag WebP, aber es ist noch nicht ganz fertig. Außerdem unterstützt unsere WordPress-Website WebP nicht. Photoshop, eine der beliebtesten Apps zur Fotobearbeitung, unterstützt WebP ebenfalls nicht standardmäßig. Wir können uns bei der Bildkomprimierung also nicht auf Apps oder Dienste von Drittanbietern verlassen.“
  • „WebP in Safari nutzbar machen“
  • „Ich würde WebP gerne verwenden, wenn ich sie aus Photoshop/Figma/Sketch exportieren könnte und alle Browser unterstützen.“ [Hinweis: WebP wird in Sketch unterstützt.]
  • „Die Formatierungslösung der nächsten Generation wäre toll.“
  • „Lass WebP nicht so stark laufen, wenn der Browser nur schleppend unterstützt, und verwende für Screenshots PNG statt JPEG.“
  • „Google Docs unterstützt WebP nicht.“
  • „Wir würden ausschließlich WebP verwenden, haben aber Bedenken hinsichtlich der Browserkompatibilität.“
  • „Zuerst die Browserkompatibilität zu verbessern und ältere Browser zu aktualisieren oder ältere Korrekturen hinzuzufügen, werden die Menschen eher bereit sein, neue Bildtypen wie WebP zu verwenden.“
  • „Ermutigen Sie Plug-in-/Design-Entwickler, WebP und andere Image-Typen der nächsten Generation zu unterstützen, damit Nicht-Entwickler nicht mit ihnen herumarbeiten müssen.“

SVG- und Vektorbilder

  • „Wenn möglich, verwende ich (animierte) SVG. Mit gatsby-image wurde das häufig behoben. Wenn man sich die Arbeit aber genauer ansieht, ist es völlig unrealistisch, dass eine normale Website etwas so programmieren muss, damit die Bilder richtig funktionieren. Der Browser sollte mehr dieser Verantwortung übernehmen.“
  • „Kann ich dokumentieren, wie SVG-Animationen mit lottie.js erstellt werden?“
  • „Wir versuchen, auf unserer Website meistens JPEG-Bilder mit großen Auflösungen und niedrigen Größen zu verwenden, um Ladezeiten zu vermeiden. Wir verwenden auch SVGs, wenn dies notwendig ist, um die Qualität für responsives Design zu gewährleisten.“
  • „Wir versuchen, nach Möglichkeit optimierte Vektorgrafiken für alle Bilder zu verwenden.“

Andere Bildformate

  • „Wir [müssen] Menschen besser vermitteln, damit sie keine GIFs verwenden.“

Lazy Loading

  • „Berücksichtige bei Funktionen wie Lazy Loading nicht den Nutzer, da dies für viele Nutzer als störend empfunden wird.“
  • „Stellen Sie sicher, dass das Lazy-Load-Attribut mit dem Hintergrundbild funktioniert.“
  • „Frameworks sollten standardmäßig eine bessere Asset-Verarbeitung ermöglichen.“
  • „Wir haben vor langer Zeit vom Lazy Loading umgestellt. Nutzerberichte zu Millionen von Bildern und Websites, die nicht geladen werden Das war in unserem Team so zusammengefasst. Für technisch nicht versierte Nutzer ist es schwierig, Probleme zu beschreiben.“
  • „Ich würde gern mehr über den Einsatz der Intersection Observer API für Lazy Loading anstelle von herkömmlichen Verfahren erfahren.“
  • „Für mich funktioniert das hier gut: pwafire.org/developer/codelabs/progressive-loading.“

Hintergrundbilder

  • „Ich lade Bilder normalerweise als Hintergründe in CSS.“
  • „Das <img>-Tag ist problematisch und schwierig zu kontrollieren – insbesondere bei von Nutzern eingereichten Inhalten. Wir verwenden <div> und den Stil für Hintergrundbilder viel häufiger, weil wir so die Hintergrundgröße und die Position des Hintergrunds nutzen können und verhindern, dass das Bild per Rechtsklick gespeichert wird.“

Transparenz

  • „Es ist 2019. Wie kommt es bei JPGs immer noch ohne Alphatransparenz an?“
  • „Ich verwende PNGs nur für Fotos, wenn ich einen transparenten Hintergrund benötige.“

Bildplatzhalter von geringer Qualität (LQIPs)

  • „Wir nutzen LQIPS und eine tolle Methode, um das Interesse der Besucher aufrechtzuerhalten, ohne gleich zu Beginn qualitativ hochwertige Bilder zu laden.“

Leistung

  • „In letzter Zeit hatten wir ein Problem mit der Leistung von Bildern. Wenn ein Nutzer auf unserer Website nach unten scrollt, werden die nächsten 60 Karten angezeigt, die ein Thumbnail enthalten. Aufgrund des Limits von sechs Verbindungen in derselben Domain wurden die Miniaturansichten sowie die nächste AJAX-Anfrage blockiert, um die nächsten 60 Karten zu erhalten, falls ein Nutzer weiter nach unten scrollt.“
  • "Wir würden gerne HTTP/2 nutzen, aber die meisten unserer Kunden nutzen Internet Explorer 11! Wir untersuchen daher die Domain-Fragmentierung / das Laden von AJAX JSON-Datenanfragen aus einer anderen Domain.“

Größen

  • „Tut mir leid für die Besonderheiten. Ich finde es besser, Höhe/Breite zu nutzen.“
  • „Wir suchen nach einer Möglichkeit, weniger Größen zu generieren. Derzeit sind es etwa 12.“
  • „Ohne JS ist die dynamische Größenanpassung von Bildern wirklich schwierig und unmöglich.“
  • „Ein Tool wie responsivebreakpoints.com eignet sich gut für web.dev :).“

Qualitativ hochwertige und hochauflösende Bilder

  • „Wie kann ich Bilder komprimieren, ohne die DPI-Qualität zu beeinträchtigen?“
  • „Wir sind ein Unternehmen für Dokumentenverwaltung. Unsere Apps verarbeiten MILLIONEN hochauflösender gescannte Bilder, in der Regel im TIFF- oder PDF-Format.“
  • „Es ist mühsam. Hochauflösende img-Dateien sind für das Druckformat erforderlich und müssen für das Web optimiert sein. Die Verkleinerung von Bildern für das Web ist mühsam, aber es ist ein Hingucker, wenn Autoren nur einfache Dateien für Bilder bereitstellen, die für eine gedruckte Veröffentlichung bestimmt sind. Abschließend geben wir gemischte Botschaften über die Anforderungen an die Einreichung von Manuskripten mit Kunstwerken. Am Ende haben wir dann komplexe Arbeitsabläufe für die Verarbeitung dieser Materialien.“

Browserfunktion

  • „Automatisch responsiver src-Zuschnitt aus dem Browser als [integrierte]-Funktion wäre sehr nützlich, da es zeitaufwändig ist, alle Bilder auf 4 Größen zuzuschneiden und das gesamte Markup zu schreiben. Wenn wir ein großes Foto hochladen und ein einfaches Bild-Tag schreiben können, erstellen die Browser automatisch mehrere src-Attribute, die den Zuschlag geben würden.“
  • „Ich persönlich finde es schwierig, Seitenumbrüche zu vermeiden, wenn das Bild von CSS für responsive Bilder festgelegt wird (max-width: 100%; Höhe automatisch oder Höhe: Breite: 100%; Höhe automatisch), insbesondere in Kombination mit Art Direction von adaptiven Bildern/Bild-Tags. Die beste Möglichkeit, das zu vermeiden, scheint der „negative Abstand-Hack“ für ein festes Bildverhältnis zu verwenden und das Bild dann in diesem Verhältnisfeld zu positionieren. Eine bessere Browserunterstützung/ein responsives Bildmanagement wäre wirklich eine große Hilfe.“
  • „Bitte deaktiviere die automatische Wiedergabe von GIFs, indem du nur den ersten Frame abrufst.“

CDNs und Bilddienste

  • „Google sollte wie Cloudflare ein kostenloses CDN bereitstellen.“
  • „Vielleicht wären mehr Tools zum Einrichten der dynamischen Skalierung und CDNs bei verschiedenen Anbietern schön.“
  • „Ein einzelnes übergroßes Bild ist eine sehr gute Lösung ohne zusätzliche Produktionskosten. Für Mobilgeräte benötigen Sie Bilder mit einer Breite von etwa 1.000 Pixeln (Renderingbreite von 500 Pixeln). Das ist auch die Größe, die Sie für große Bildschirme ohne Retina-Displays für Computer benötigen. Ich denke, die Größe von CDNs von Bildern ist eine sehr schlechte Lösung, obwohl ich diese Möglichkeit in der Vergangenheit bereits verwendet habe. Das CMS sollte die Größenanpassung übernehmen können, und da es zu komplex für die Einrichtung ist, ist eine einzige Lösung ein guter Kompromiss (für den Moment).“
  • „CloudFlare skaliert unsere Bilder automatisch so, dass sie dem Display des Nutzers entsprechen. Wir können also die Ladezeit sparen, da Bilder im Verhältnis zum Display des Nutzers geladen werden. Wenn ein Nutzer beispielsweise ein Smartphone verwendet, wird die App nicht in einem Desktop-Hintergrund geladen.“
  • „Cloudflare macht das im Hintergrund, ohne dass wir etwas tun müssen, außer in den Einstellungen ein Kästchen anzuklicken.“
  • „Zur Wiederholung: Der einzige Grund, warum ich srcset usw. erfolgreich verwenden kann, ist die Benutzerfreundlichkeit von Cloudinary. Aber Cloudinary wird teuer, sehr schnell. Das fühlt sich wie eine große Lücke in der Entwicklungsphase an."
  • „Wir brauchen eine Möglichkeit, Bilder einfach und intelligent automatisch zuzuschneiden, damit sie mit unterschiedlichen Seitenverhältnissen in unterschiedlichen Kontexten funktionieren.“
  • „Ich verwende auch Bilder von anderen Anbietern wie Unsplash, bei denen ich die Auflösung, Qualität und Komprimierung sehr viel weniger kontrollieren kann.“

CMS, Plattform und Framework

  • „Ich habe immer noch Schwierigkeiten, herauszufinden, wie ich Bilder am besten verwenden kann, wenn ich eine Website mit einem CMS erstelle. Autoren neigen dazu, Bilder mit unterschiedlichen Abmessungen zu konfigurieren und erwarten, dass Bilder nicht verkleinert oder skaliert werden. Ich bin mir nicht sicher, ob „max-width“ oder „max-height“ für Bilder festgelegt werden darf“
  • „Ich habe gatsby-image bereits in den letzten Projekten verwendet und bisher noch nie bereut.“
  • „Bilder sind oft der schwierige Teil, da sie vom Endnutzer in das CMS eingefügt werden. Sie können jede Größe und jedes Format verwenden. Manchmal sind Originalbilder im idealen Bildformat und die Abmessungen nicht verfügbar.“
  • „Die Verwaltung der Bilder ist schwierig, da sich unser System um das Self-Service-System kümmert. Das Hinzufügen von Steuerelementen ist schwierig, es sei denn, Dinge erfolgen automatisch, ohne die Auflösung zu beeinträchtigen. Außerdem sehen die Bilder für uns auf Mobilgeräten und Computern nicht richtig aus.“
  • „Ich helfe Menschen bei der Optimierung ihrer Websites (WordPress). Die größten Probleme, die ich bei Bildern festgestellt habe, sind folgende: Zum Erstellen von WebP sind ein CDN oder Plug-ins erforderlich. srcset/picture muss von Designentwicklern ordnungsgemäß codiert werden. Die meisten Lazy Loading-Plug-ins werden langsam geladen, was zu einer schlechten Nutzererfahrung führt. Für Hintergrundbilder ist Lazy Loading schwierig.

Kosten/Nutzen

  • „Die neuen Praktiken sind effektiv, erhöhen aber die Entwicklungszeit der Websites.“
  • „Die mangelnde Einhaltung von neuen Standards wie srcset und WebP wird von vielen Fortune-500-Unternehmen nur langsam umgesetzt. Viele Unternehmen haben sich der Veränderung als unnötige Entwicklungskosten aktueller Websites widersetzt. Die Leistungssteigerungen werden vom Endnutzer (UX) weder ausführlich diskutiert noch gemeldet. Wenn überhaupt, ist es etwas schwieriger, Bilder aus dem Web zu speichern.“
  • „Das Erstellen und Verwalten mehrerer Größen und Versionen ist teuer.“
  • „Sie belegen viel Speicherplatz auf unserem Server.“

SEO

  • „Es ist schwierig, ein Gleichgewicht zwischen akzeptabler Bildqualität und Dateigröße zu finden. Zum einen möchte ich schnelles Laden zum Vorteil der SEO, aber auf der anderen Seite beeinträchtigen Bilder von schlechter Qualität die Benutzeroberfläche und/oder die UX.“

Die Rolle von Bildern im Web

  • „Es gibt zu viele im Web. Verzichten Sie auf nutzlose Bilder, die den schriftlichen Inhalt nicht ergänzen.“
  • „Erinnern Sie sich noch an die Zeit, als es im Web noch keine Bilder gab und wir Selfies als ASCII-Art teilten?“

Tools, Anleitungen, Standards und Best Practices: Frustrationen und Wünsche

  • [Ein Teilnehmer hat als Antwort auf diese Umfrage einen Blogpost verfasst.]
  • „Die Anforderungen scheinen sich ständig zu ändern. Für Webentwickler ist das extrem frustrierend, da es sehr zeitaufwendig ist, die Bilder überhaupt zu speichern. Wir optimieren nach Möglichkeit, indem wir die Website überprüfen. Monate später hat Google entschieden, dass die Bilder noch komprimierter sein oder ein anderes Format haben müssen. Daher können wir nicht für unseren Kunden die bestmögliche Lösung anbieten, die dauerhaft ist. Stattdessen entstehen kostspielige Anstrengungen für Sie und uns. Einige unserer Kleinunternehmen haben einfach nicht das Budget, mit dem wir Bilder korrigieren und neu speichern müssen, um die Anforderungen zu erfüllen. Wir verfügen im Rahmen der Managementpakete nicht über das Budget, um diese Arbeit zu übernehmen. Das Schreiben des Codes zum Aufrufen verschiedener 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 hinweg konsistent bleibt.“
  • „Ja, ich glaube, das ist in Lighthouse nicht richtig. Wird eine Website über HTTP1.x bereitgestellt, ist dies sicher. Wenn die Website aber über HTTP2 funktioniert, ist die Anzahl der Anfragen weniger wichtig oder gar kein Problem, wenn sie vom gleichen Hostnamen kommt. Ich verfüge über eine Lite-Website, aber ich lade 30 kleine WebP-Dateien mit insgesamt ca. 35 Anfragen über HTTP2 auf demselben Hostnamen. Lighthouse meldet das Problem als „Niedrige Anforderungsanzahl niedrig und kleiner“ Problem, obwohl es superschnell ist und weil die Anzahl der Anfragen kein Problem darstellt, da HTTP2 für denselben Hostnamen verwendet wird. Ja, die Dateien sind bereits klein (die meisten zwischen 1 und 2 KB oder weniger). Ich könnte ein Sprite laden, aber dann muss mehr CSS-Computing ausgeführt werden. Aktualisieren Sie daher bitte den Bericht „Keep Request Counts Low And File Tables Small“ (Anfrageanzahl niedrig und Dateigrößen klein halten) in Lighthouse, damit HTTP2 anstelle desselben Hostnamens berücksichtigt wird.
  • „Für die Nutzer war es oft eine Herausforderung, Bilder zu komprimieren.“
  • „Das browserübergreifende Verhalten bleibt unvorhersehbar, daher sind die einfachsten Lösungen oft die sichersten.“