Feedback aus der Umfrage zur Bildoptimierung im Sommer 2019

Kommentare von Umfrageteilnehmern zu verschiedenen Techniken zur Bildoptimierung

Sam Dutton

In diesem Beitrag finden Sie das Feedback, das das Google Web DevRel-Team im Sommer 2019 in einer Umfrage zu Techniken zur Bildoptimierung erhalten hat. Die Antworten wurden über Web Fundamentals und @ChromiumDev eingeholt. Ziel der Umfrage war es herauszufinden, warum die meisten Websites nicht die Best Practices für die Bildoptimierung befolgen, obwohl dies eine relativ einfache Möglichkeit ist, die Leistung zu steigern. Die Antwortdaten sind hier nicht aufgeführt, da es Mängel bei der Umfragemethodik gab.

Zielgruppe

  • Wenn Sie Webentwickler sind, finden Sie in diesem Artikel möglicherweise neue Techniken zur Bildoptimierung oder Details dazu, wie andere Webentwickler ein Problem gelöst haben, mit dem Sie sich konfrontiert sehen, sowie die Kosten, Vorteile und Einschränkungen der einzelnen Techniken.
  • Wenn Sie ein Anbieter von Bilddiensten oder Bild-CDNs sind, kann Ihnen dieser Beitrag dabei helfen, neue Marktchancen zu finden.
  • Wenn Sie ein Framework, Build-Tool oder CMS entwickeln, erhalten Sie in diesem Beitrag möglicherweise Ideen für neue Funktionen, die Sie implementieren können.

Kommentare

WebP

  • „Ich mag WebP, aber es ist noch nicht vollständig ausgereift. Außerdem unterstützt unsere WordPress-Version WebP nicht. Auch Photoshop, eine der beliebtesten Fotobearbeitungs-Apps, unterstützt WebP nicht standardmäßig. Daher können wir keine Apps oder Dienste von Drittanbietern für die Bildkomprimierung verwenden.“
  • „WebP in Safari verwenden“
  • „Ich würde WebP gerne verwenden, wenn ich sie aus Photoshop/Figma/Sketch exportieren könnte und alle Browser sie unterstützen würden.“ [Hinweis: Sketch unterstützt WebP]
  • „Eine Formatierungslösung der nächsten Generation wäre toll.“
  • „Setzen Sie WebP nicht mehr so stark ein, wenn die Browserunterstützung schlecht ist, und überlegen Sie, ob Sie für Screenshots PNG anstelle von JPEG verwenden sollten.“
  • „WebP wird von Google Docs nicht unterstützt.“
  • „Wir würden WebP ausschließlich verwenden, haben aber Bedenken hinsichtlich der Browserkompatibilität.“
  • „Beheben Sie zuerst die Browserkompatibilität und aktualisieren Sie alte Browser oder fügen Sie entsprechende Fehlerkorrekturen hinzu. Dann sind Nutzer eher bereit, neue Bildtypen wie WebP zu verwenden…“
  • „Wir möchten Plugin-/Theme-Entwickler dazu ermutigen, WebP und andere Bildformate der nächsten Generation zu unterstützen, damit Nutzer, die keine Entwickler sind, sich nicht darum kümmern müssen.“

SVG- und Vektorbilder

  • „Nach Möglichkeit verwende ich (animierte) SVG-Dateien. Mit gatsby-image konnte ich viele dieser Probleme beheben. Wenn man sich aber die Lösung ansieht, ist es völlig unrealistisch, dass eine normale Website so etwas umsetzen muss, damit Bilder richtig funktionieren. Der Browser sollte mehr Verantwortung übernehmen.“
  • „Könnte es eine Anleitung geben, wie man SVG-Animationen mit lottie.js erstellt?“
  • „Wir verwenden auf unserer Website in der Regel JPEG-Bilder mit hoher Auflösung und kleiner Größe, um Ladezeiten zu vermeiden. Außerdem verwenden wir bei Bedarf SVGs, um für ein responsives Design zu sorgen.“
  • „Wir versuchen, nach Möglichkeit optimierte Vektorgrafiken für alle Elemente außer Bildern zu verwenden.“

Andere Bildformate

  • „Wir müssen die Nutzer besser darüber aufklären, dass sie GIFs nicht mehr verwenden sollten.“

Lazy Loading

  • „Berücksichtigen Sie die Nutzer, wenn Sie Funktionen wie Lazy Load in Betracht ziehen, da dies für viele ärgerlich ist.“
  • „Das Lazy-Load-Attribut sollte mit dem Attribut ‚background-image‘ funktionieren.“
  • „Frameworks sollten eine bessere Asset-Verarbeitung bieten.“
  • „Wir haben vor langer Zeit auf Lazy Loading umgestellt. Nutzer berichten, dass Millionen von Bildern und Websites „NICHT GELADET WERDEN“. So hat unser Team es zusammengefasst. Es ist schwierig für technisch nicht versierte Nutzer, Probleme zu beschreiben.“
  • „Ich möchte mehr über die Verwendung der Intersection Observer API für das Lazy Loading erfahren, anstatt herkömmliche Techniken zu verwenden.“
  • „Das funktioniert bei mir gut: pwafire.org/developer/codelabs/progressive-loading.“

Hintergrundbilder

  • „Ich lade Bilder normalerweise als Hintergründe in CSS.“
  • „Das <img>-Tag ist problematisch und es ist schwierig, Details dazu zu steuern, insbesondere bei von Nutzern eingereichten Inhalten. Wir verwenden <div> und Hintergrundbild-Styling viel häufiger, da wir damit Hintergrundgröße und Hintergrundposition verwenden und das Speichern des Bilds per Rechtsklick verhindern können.“

Transparenz

  • „Wir schreiben das Jahr 2019. Wie kann es sein, dass JPGs immer noch keine Alphatransparenz haben?“
  • „Ich verwende PNGs für Fotos nur, wenn ich einen transparenten Hintergrund benötige.“

Platzhalter für Bilder mit geringer Qualität (Low Quality Image Placeholders, LQIPs)

  • „Wir verwenden LQIPS. Das ist eine gute Methode, um die Aufmerksamkeit der Besucher aufrechtzuerhalten, ohne zu früh Bilder in hoher Qualität zu laden.“

Leistung

  • „Wir hatten vor Kurzem ein Leistungsproblem mit Bildern. Wenn ein Nutzer auf unserer Website nach unten scrollt, werden die nächsten 60 Karten mit einem Thumbnail angezeigt. Aufgrund des Limits von sechs Verbindungen für dieselbe Domain wurden die Miniaturansichten und die nächste AJAX-Anfrage zum Abrufen der nächsten 60 Karten blockiert, wenn ein Nutzer weiter nach unten scrollte.“
  • „Wir würden gerne HTTP/2 verwenden, aber die meisten unserer Kunden verwenden IE11. Wir prüfen daher, ob wir das Domain-Sharding verwenden oder AJAX-JSON-Datenanfragen von einer anderen Domain laden können.“

Größe

  • „Tut mir leid, aber ich finde, dass Höhe/Breite besser geeignet ist.“
  • „Ich suche nach einer Möglichkeit, weniger Größen zu generieren. Derzeit sind es etwa zwölf.“
  • „Das dynamische Ändern der Größe von Bildern ist ohne JS wirklich schwierig und unmöglich.“
  • „Ein Tool wie responsivebreakpoints.com eignet sich gut für web.dev.“

Hochwertige und hochauflösende Bilder

  • „How to download compress images without losing DPI quality?“
  • „Wir sind ein Unternehmen für Dokumentenverwaltung. Unsere Apps verarbeiten MILLIONEN von hochauflösenden gescannten Bildern, in der Regel im TIFF- oder PDF-Format.“
  • „Das ist ein ziemlicher Aufwand. Für das Druckformat sind hochauflösende Bilddateien erforderlich, die für das Web optimiert sein müssen. Es ist mühsam, Bilder für das Web zu verkleinern, aber es ist ein Problem, wenn Autoren nur kleine Dateien für Bilder zur Veröffentlichung im Druck liefern. Wir geben widersprüchliche Informationen zu den Anforderungen für die Einreichung von Manuskripten mit Artwork. Das führt dann zu komplexen Workflows für die Verarbeitung dieser Materialien.“

Browserfunktion

  • „Eine automatische responsive src-Zuschneidung im Browser als [eingebaute] Funktion wäre sehr nützlich, da es zeitaufwendig ist, alle Bilder in vier Größen zuzuschneiden und das gesamte Markup zu schreiben. Wenn wir ein großes Foto hochladen und ein einfaches Bild-Tag schreiben können, das in Browsern automatisch die mehreren src-Attribute erstellt, wäre das eine tolle Funktion.“
  • „Ich habe Schwierigkeiten, Seitenneuformatierungen zu vermeiden, wenn das Bild mit CSS für responsive Bilder festgelegt ist (max-width: 100%; height auto oder height: width: 100%; height auto), insbesondere in Kombination mit der Art Direction von adaptiven Bildern/Picture-Tags. Am besten verwenden Sie den „negativen Padding-Hack“ für ein festes Bildseitenverhältnis und positionieren das Bild dann in diesem Verhältnisfeld. Eine bessere Browserunterstützung und eine responsive Bildverarbeitung wären sehr hilfreich.“
  • „Deaktivieren Sie die GIF-Funktion „Autoplay“, indem Sie nur den ersten Frame abrufen.“

CDNs und Bilddienste

  • „Google sollte ein kostenloses CDN wie Cloudflare bereitstellen.“
  • „Mehr Tools zum Einrichten der dynamischen Skalierung und CDNs mit verschiedenen Anbietern wären schön.“
  • „Ein einzelnes übergroßes, überkomprimiertes 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 (500 Pixel Renderbreite). Diese Größe ist auch für große Displays/Desktop-Computer ohne Retina-Technologie erforderlich. Ich denke, dass CDNs zur Bildgrößenänderung eine sehr schlechte Lösung sind, obwohl ich sie in der Vergangenheit verwendet habe. Das CMS sollte die Größenänderung übernehmen. Wenn das zu komplex ist, ist eine einzelne Lösung (vorerst) ein guter Kompromiss.“
  • „CloudFlare skaliert unsere Bilder automatisch so, dass sie am besten zum Display des Nutzers passen. So können wir die Ladezeit verkürzen, da Bilder relativ zum Display des Nutzers geladen werden. Wenn ein Nutzer beispielsweise ein Smartphone verwendet, wird der Hintergrund nicht in Desktopgröße geladen.“
  • „Cloudflare erledigt das im Hintergrund, ohne dass wir etwas tun müssen, außer ein Kästchen in den Einstellungen anzuklicken.“
  • „Nur zur Wiederholung: Der einzige Grund, warum ich srcset usw. erfolgreich verwenden kann, ist die Benutzerfreundlichkeit von Cloudinary. Aber Cloudinary wird schnell sehr teuer. Das ist ein großes Problem bei der Entwicklung.“
  • „Wir brauchen eine Möglichkeit, Bilder auf intelligente Weise automatisch zuzuschneiden, damit sie in verschiedenen Kontexten mit unterschiedlichen Seitenverhältnissen verwendet werden können.“
  • „Ich verwende auch Bilder von anderen Anbietern wie Unsplash, bei denen die Auflösung, Qualität und Komprimierung nur sehr eingeschränkt gesteuert werden können.“

CMS, Plattform und Framework

  • „Ich finde immer noch nicht heraus, wie ich Bilder am besten verwenden kann, wenn ich eine Website mit einem CMS erstelle. Autoren konfigurieren Bilder in der Regel mit unterschiedlichen Abmessungen und erwarten, dass sie nicht verkleinert oder skaliert werden. Ich bin mir nicht sicher, ob es in Ordnung ist, für Bilder eine maximale Breite oder Höhe festzulegen.“
  • „Ich verwende gatsby-image schon seit einigen Projekten und würde es nicht mehr missen.“
  • „Bilder sind oft der schwierigste Teil, da sie vom Endnutzer in das CMS hochgeladen werden. Sie können jede Größe und jedes Format haben. Manchmal ist das Originalbild im idealen Bildformat und die Abmessungen sind nicht verfügbar.“
  • „Bilder sind schwer zu verwalten, da unser System ein Selfservice-System ist. Das Hinzufügen von Steuerelementen ist schwierig, es sei denn, die Änderungen erfolgen automatisch, ohne die Auflösung zu beeinträchtigen. Außerdem sehen die Bilder auf Mobilgeräten und Computern nicht richtig aus.“
  • „Ich helfe Menschen, ihre Websites zu optimieren (WordPress). Die größten Probleme, die ich bei Bildern festgestellt habe, sind: Es ist ein CDN oder Plugins erforderlich, um WebP-Bilder zu erstellen. „srcset/picture“ muss von den Entwicklern des Themas richtig codiert werden. Die meisten Lazy-Loading-Plug-ins laden langsam und bieten eine schlechte Nutzererfahrung. Hintergrundbilder lassen sich nur schwer per Lazy Loading laden.“

Kosten/Nutzen

  • „Die neuen Praktiken sind effektiv, erhöhen aber die Entwicklungszeit der Websites.“
  • „Die neuen Standards wie srcset und WebP werden von vielen Fortune-500-Unternehmen nur langsam übernommen. Viele Unternehmen haben sich daher gegen die Umstellung gewehrt, da sie sie als unnötige Entwicklungskosten für ihre aktuellen Websites betrachteten. Die Leistungssteigerungen werden von den Endnutzern (UX) nicht ausführlich diskutiert oder gemeldet. Es ist eher so, dass es etwas schwieriger ist, Bilder aus dem Web zu speichern.“
  • „Es ist aufwendig, mehrere Größen und Versionen zu erstellen und zu verwalten.“
  • „Sie belegen viel Speicherplatz auf unserem Server.“

SEO

  • „Es ist schwierig, einen guten Kompromiss zwischen akzeptabler Bildqualität und Dateigröße zu finden. Einerseits möchte ich ein schnelles Laden für den SEO-Vorteil, andererseits beeinträchtigen Bilder mit schlechter Qualität die Benutzeroberfläche/Nutzererfahrung.“

Die Rolle von Bildern im Web

  • „Es gibt zu viele im Web. Verwenden Sie keine nutzlosen Bilder, die den Text nicht ergänzen.“
  • „Erinnerst du dich noch an die Zeit, als es im Web keine Bilder gab und wir Selfies als ASCII-Art geteilt haben?“

Tools, Anleitungen, Standards und Best Practices: Frustrationen und Anfragen

  • [Ein Teilnehmer hat als Reaktion auf diese Umfrage einen Blogpost geschrieben]
  • „Die Anforderungen ändern sich anscheinend ständig. Für Webentwickler ist das extrem frustrierend, da es zeitaufwendig ist, die Bilder überhaupt zu speichern. Wir optimieren die Website nach bestem Wissen und Gewissen, prüfen sie und dann entscheidet Google Monate später, dass die Bilder noch stärker komprimiert werden könnten oder in einem anderen Format vorliegen müssen. Das verhindert, dass wir unserem Kunden die bestmögliche Lösung anbieten können, die langfristig Bestand hat. Stattdessen entsteht für ihn und uns ein kostspieliges Unterfangen. Einige unserer Kleinunternehmen haben einfach nicht das Budget, damit wir Bilder immer wieder korrigieren und neu speichern können, um die Anforderungen zu erfüllen. Wir haben nicht das Budget, diese Arbeit im Rahmen ihrer Verwaltungspakete zu erledigen. Auch das Schreiben des Codes zum Aufrufen verschiedener Bildgrößen für verschiedene Geräte ist zeitaufwendig. Es wäre toll, ein System zum Speichern von Bildern zu entwickeln, das über einen längeren Zeitraum hinweg konsistent ist.“
  • „Ja, ich glaube, Sie haben in Lighthouse den Ratschlag ‚Halte die Anfrageanzahl niedrig und die Dateigrößen klein‘ falsch verstanden. Bei einer Website, die über HTTP1.x bereitgestellt wird, ist das der Fall. Bei einer Website, die über HTTP2 bereitgestellt wird, ist die Anzahl der Anfragen weniger wichtig oder kein Problem, wenn sie vom selben Hostnamen stammen. Ich habe eine Lite-Website, lade aber 30 kleine WebP-Dateien mit insgesamt etwa 35 Anfragen über HTTP2 auf denselben Hostnamen. Lighthouse meldet dies als Problem vom Typ „Anzahl der Anfragen niedrig und Dateigrößen klein halten“, obwohl die Website superschnell ist und die Anzahl der Anfragen aufgrund von HTTP2 auf demselben Hostnamen kein Problem darstellt. Ja, die Dateien sind bereits klein (die meisten zwischen 1 KB und 2 KB oder kleiner). Ich könnte ein Sprite laden, aber dann muss mehr CSS berechnet werden. Bitte aktualisieren Sie den Bericht „Anfrageanzahl niedrig und Dateigrößen klein halten“ in Lighthouse, um HTTP2 über denselben Hostnamen zu berücksichtigen.“
  • „Es war für Nutzer schwierig, sich daran zu erinnern, ihre Bilder zu komprimieren.“
  • „Das plattformübergreifende Verhalten bleibt unberechenbar, daher sind die einfachsten Lösungen oft die sichersten.“