Feedback aus der Umfrage zur Bildoptimierung im Sommer 2019

Kommentare von Umfrageteilnehmern zu verschiedenen Bildoptimierungstechniken

Sam Dutton

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

Zielgruppe

  • Wenn Sie Webentwickler sind, finden Sie in diesem Beitrag möglicherweise neue Techniken zur Bildoptimierung oder Details dazu, wie andere Webentwickler ein Problem gelöst haben, mit dem Sie konfrontiert sind. Außerdem werden die Kosten, Vorteile und Einschränkungen der einzelnen Techniken beschrieben.
  • Wenn Sie ein Bilddienst oder ein Bild-CDN-Anbieter sind, finden Sie in diesem Beitrag möglicherweise neue Marktchancen.
  • Wenn Sie ein Framework, ein Build-Tool oder ein CMS entwickeln, finden 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 ganz ausgereift. Außerdem unterstützt unser WordPress-System WebP nicht. Photoshop, eine der beliebtesten Apps zur Fotobearbeitung, unterstützt WebP ebenfalls nicht standardmäßig. Wir können uns also nicht auf Drittanbieter-Apps oder ‑Dienste zur Bildkomprimierung verlassen.“
  • „WebP in Safari nutzbar machen“
  • „Ich würde WebP gerne verwenden, wenn ich die Bilder aus Photoshop/Figma/Sketch exportieren könnte und alle Browser das Format unterstützen würden.“ [Hinweis: Sketch unterstützt WebP]
  • „Eine Formatierungslösung der nächsten Generation wäre toll.“
  • „Hört auf, WebP so stark zu pushen, wenn die Browserunterstützung schlecht ist, und überlegt, ob für Screenshots PNG anstelle von JPEG benötigt wird.“
  • „Google Docs unterstützt WebP nicht.“
  • „Wir würden WebP ausschließlich verwenden, sind aber besorgt wegen der Browserkompatibilität.“
  • „Zuerst sollten Sie die Browserkompatibilität beheben und ältere Browser aktualisieren oder entsprechende Korrekturen hinzufügen. Dann sind Nutzer eher bereit, neue Bildtypen wie WebP zu verwenden.“
  • „Wir empfehlen Plugin- und Theme-Entwicklern, die Unterstützung von WebP und anderen Bildtypen der nächsten Generation in Betracht zu ziehen, damit Nutzer ohne Entwicklerkenntnisse nicht selbst Hand anlegen müssen.“

SVG- und Vektorbilder

  • „Wenn möglich, verwende ich (animierte) SVGs. gatsby-image hat vieles davon behoben. Wenn man sich aber ansieht, was sie getan haben, ist es völlig unrealistisch, dass eine normale Website so etwas entwickeln muss, damit Bilder richtig funktionieren. Der Browser sollte mehr von dieser Verantwortung übernehmen.“
  • „Wäre es möglich, zu dokumentieren, wie SVG-Animationen mit lottie.js erstellt werden?“
  • „Wir versuchen, auf unserer Website meistens JPEGs mit hoher Auflösung und geringer Größe zu verwenden, um Ladezeiten zu vermeiden. Außerdem verwenden wir bei Bedarf SVGs, um die Qualität für responsives Design zu gewährleisten.“
  • „Wir versuchen, wenn möglich, für alle Elemente außer Bildern optimierte Vektorgrafiken zu verwenden.“

Andere Bildformate

  • „Wir [müssen] die Leute besser aufklären, damit sie keine GIFs mehr verwenden.“

Lazy Loading

  • „Bitte berücksichtigen Sie den Nutzer bei Funktionen wie Lazy Loading, da viele Nutzer sie als störend empfinden.“
  • „Sorge dafür, dass das Attribut für Lazy Loading mit background-image funktioniert.“
  • „Frameworks sollten eine bessere Asset-Verarbeitung bieten.“
  • „Wir haben schon vor langer Zeit auf Lazy Loading umgestellt. Nutzerberichte über Millionen von Bildern und Websites, die „NICHT GELADEN“ werden. So hat unser Team das verstanden. Es ist für technisch nicht versierte Nutzer schwierig, Probleme zu beschreiben.“
  • „Ich möchte mehr darüber erfahren, wie ich die Intersection Observer API für Lazy Loading anstelle herkömmlicher Techniken verwenden kann.“
  • „Diese Quelle funktioniert gut für mich: 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, detaillierte Einstellungen dafür vorzunehmen, insbesondere bei von Nutzern eingereichten Inhalten. Wir verwenden <div> und das Styling von Hintergrundbildern viel häufiger, da wir so „background-size“ und „background-position“ verwenden und das Speichern des Bildes per Rechtsklick verhindern können.“

Transparenz

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

Platzhalterbilder in niedriger Qualität (Low Quality Image Placeholders, LQIPs)

  • „Wir verwenden LQIPS. Das ist eine tolle Technik, um Besucher zu fesseln, ohne dass hochwertige Bilder sofort geladen werden müssen.“

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 6 Verbindungen zur selben Domain wurden die Thumbnails sowie die nächste AJAX-Anfrage zum Abrufen der nächsten 60 Karten blockiert, wenn ein Nutzer weiter nach unten scrollt.“
  • „Wir würden gerne HTTP/2 verwenden, aber die meisten unserer Kunden nutzen IE11. Wir prüfen daher, ob wir Domain-Sharding verwenden oder AJAX-JSON-Datenanfragen von einer anderen Domain laden können.“

Größe

  • „Entschuldige, aber ich glaube, es ist besser, Höhe und Breite zu verwenden.“
  • „Ich suche nach einer Möglichkeit, weniger Größen zu generieren. Derzeit sind es etwa 12.“
  • „Das dynamische Anpassen der Größe von Bildern ist wirklich schwierig und ohne JavaScript unmöglich.“
  • „Ein Tool wie responsivebreakpoints.com ist gut für web.dev :).“

Hochwertige Bilder mit hoher Auflösung

  • „Wie kann ich Bilder komprimieren, ohne die DPI-Qualität zu verlieren?“
  • „Wir sind ein Unternehmen für Dokumentenmanagement. In unseren Apps werden MILLIONEN von hochauflösenden gescannten Bildern verarbeitet, in der Regel TIFF- oder PDF-Dateien.“
  • „Es ist mühsam. 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 Showstopper, wenn Autoren nur leichte Dateien für Bilder liefern, die für die Druckveröffentlichung bestimmt sind. Wir geben widersprüchliche Informationen zu den Anforderungen für die Einreichung von Manuskripten mit Illustrationen. Das führt dann zu komplexen Workflows für die Verarbeitung dieser Materialien.“

Browserfunktion

  • „Eine automatische responsive Quellbeschneidung im Browser als [integrierte] Funktion wäre sehr nützlich, da es zeitaufwendig ist, alle Bilder auf vier Größen zuzuschneiden und das gesamte Markup zu schreiben. Wenn wir ein großes Foto hochladen und ein einfaches Bild-Tag schreiben könnten, mit dem Browser automatisch die mehreren „src“-Attribute erstellen, wäre das ein großer Vorteil.“
  • „Ich persönlich habe Schwierigkeiten, Seitenumbruch zu vermeiden, wenn die Bildbreite für responsive Bilder per CSS festgelegt wird (max-width: 100%; height auto oder height: width: 100%; height auto), insbesondere in Kombination mit Art Direction aus adaptiven Bildern/Picture-Tag. Am besten lässt sich das vermeiden, indem Sie den „Hack mit dem negativen Padding“ für ein festes Bildseitenverhältnis verwenden und das Bild dann in diesem Seitenverhältnis-Container positionieren. Eine bessere Browserunterstützung und eine responsive Bildbearbeitung wären wirklich hilfreich.“
  • „Bitte deaktivieren Sie die automatische Wiedergabe von GIFs, indem Sie nur den ersten Frame abrufen.“

CDNs und Bilddienste

  • „Google sollte ein kostenloses CDN wie Cloudflare anbieten.“
  • „Vielleicht wäre es gut, wenn es mehr Tools zum Einrichten von dynamischer Skalierung und CDNs mit verschiedenen Anbietern gäbe.“
  • „Ein einzelnes, überdimensioniertes und ü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). Das ist auch die Größe, die Sie für große/Desktop-Displays ohne Retina-Technologie benötigen. Ich halte CDNs für die Größenanpassung von Bildern für eine sehr schlechte Lösung, obwohl ich sie in der Vergangenheit verwendet habe. Das CMS sollte die Größenanpassung übernehmen. Wenn das zu komplex ist, ist eine einzelne Lösung (vorerst) ein guter Kompromiss.“
  • „CloudFlare skaliert unsere Bilder automatisch, damit sie optimal auf dem Display des Nutzers dargestellt werden. So können wir Ladezeit sparen, da Bilder relativ zum Display des Nutzers geladen werden. Wenn ein Nutzer beispielsweise ein Smartphone verwendet, wird kein Hintergrund in Desktopgröße geladen.“
  • „Cloudflare erledigt das im Hintergrund, ohne dass wir etwas tun müssen, außer ein Kästchen in unserem Einstellungsbereich anzukreuzen.“
  • „Ich möchte noch einmal betonen, dass ich srcset usw. nur dank der Benutzerfreundlichkeit von Cloudinary erfolgreich verwenden kann. Cloudinary ist aber sehr teuer. Das ist ein großes Manko für Entwickler.“
  • „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 ich nur sehr wenig Kontrolle über Auflösung, Qualität und Komprimierung habe.“

CMS, Plattform und Framework

  • „Ich habe immer noch Schwierigkeiten, herauszufinden, wie ich Bilder am besten verwende, wenn ich eine Website mit einem CMS erstelle. Autoren konfigurieren Bilder häufig mit unterschiedlichen Abmessungen und erwarten, dass die Bilder nicht verkleinert oder skaliert werden. Ich bin mir nicht sicher, ob es in Ordnung ist, für Bilder „max-width“ oder „max-height“ festzulegen.
  • „Ich habe gatsby-image für die letzten paar Projekte verwendet und bin sehr zufrieden.“
  • „Bilder sind oft schwierig, da sie vom Endnutzer in das CMS eingefügt werden. Sie können jede Größe und jedes Format haben. Manchmal ist das Originalbild nicht im idealen Bildformat und mit den idealen Abmessungen verfügbar.“
  • „Bilder sind schwer zu verwalten, da unser System Self-Service-basiert ist. Es ist schwierig, Steuerelemente hinzuzufügen, es sei denn, die Änderungen erfolgen automatisch, ohne die Auflösung zu beeinträchtigen. Auch bei uns sehen Bilder auf Mobilgeräten und Desktop-Computern unterschiedlich aus.“
  • „Ich helfe Menschen, ihre Websites (WordPress) zu optimieren. Die größten Probleme, die ich bei Bildern gesehen habe, sind: Die Erstellung von WebP-Dateien ist von einem CDN oder Plugins abhängig. Das srcset-/picture-Element muss von Theme-Entwicklern richtig codiert werden. Die meisten Lazy-Loading-Plug-ins werden langsam geladen, was zu einer schlechten Nutzerfreundlichkeit führt. Hintergrundbilder lassen sich nur schwer per Lazy Loading laden.“

Kosten/Nutzen

  • „Die neuen Methoden sind effektiv, verlängern aber die Entwicklungszeit der Websites.“
  • „Die Einhaltung der neuen Standards wie srcset und WebP wurde von vielen Fortune 500-Unternehmen nur langsam umgesetzt. Viele Unternehmen haben sich daher gegen die Umstellung gewehrt, da sie unnötige Entwicklungskosten für ihre aktuellen Websites befürchteten. Die Leistungssteigerungen werden vom Endnutzer (UX) nicht häufig diskutiert oder gemeldet. Wenn überhaupt, wird es dadurch etwas schwieriger, Bilder aus dem Web zu speichern.“
  • „Es ist kostspielig, mehrere Größen und Versionen zu erstellen und zu verwalten.“
  • „Sie nehmen viel Speicherplatz auf unserem Server ein.“

SEO

  • „Es ist schwierig, ein Gleichgewicht zwischen akzeptabler Bildqualität und Dateigröße zu finden. Einerseits möchte ich, dass die Seite schnell geladen wird, um von SEO-Vorteilen zu profitieren. Andererseits beeinträchtigen Bilder von schlechter Qualität die Benutzeroberfläche und ‑freundlichkeit.“

Die Rolle von Bildern im Web

  • „Es gibt zu viele im Web. Verzichten Sie auf nutzlose Bilder, die die schriftlichen Inhalte 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 scheinen sich ständig zu ändern. Als Webentwickler ist das extrem frustrierend, weil es sehr zeitaufwendig ist, die Bilder zu speichern. Wir optimieren so gut wie möglich, prüfen die Website und Monate später entscheidet Google, dass die Bilder noch stärker komprimiert werden könnten oder ein anderes Format erforderlich ist. So können wir unserem Kunden nicht die bestmögliche Lösung anbieten, die Bestand hat. Stattdessen entsteht für ihn und uns ein kostspieliges Unterfangen. Einige unserer Kleinunternehmer 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, um diese Arbeit im Rahmen der Managementpakete zu erledigen. Auch das Schreiben des Codes zum Aufrufen verschiedener Bildgrößen für unterschiedliche Geräte ist zeitaufwendig. Es wäre toll, wenn wir ein System zum Speichern von Bildern entwickeln könnten, das über einen längeren Zeitraum hinweg konsistent ist.“
  • „Ja, ich glaube, du hast in Lighthouse alles falsch gemacht, was ‚Halte die Anfrageanzahl niedrig und die Dateigrößen gering‘ betrifft. Wenn eine Website über HTTP1.x bereitgestellt wird, ist das sicher ein Problem. Wenn eine Website jedoch über HTTP2 bereitgestellt wird, ist die Anzahl der Anfragen weniger wichtig oder sogar irrelevant, wenn sie vom selben Hostnamen stammen. Ich habe eine Lite-Website, lade aber 30 kleine WebP-Dateien mit insgesamt ca. 35 Anfragen über HTTP2 auf demselben Hostnamen. Lighthouse kennzeichnet dies als Problem mit der Empfehlung, die Anzahl der Anfragen und die Dateigrößen gering zu halten. Die Website ist jedoch sehr schnell und aufgrund von HTTP2 auf demselben Hostnamen ist die Anzahl der Anfragen kein Problem. Die Dateien sind bereits klein (die meisten zwischen 1 KB und 2 KB oder weniger). Ich konnte ein Sprite laden, aber dann muss mehr CSS berechnet werden. Bitte aktualisieren Sie den Bericht „Anzahl der Anfragen niedrig halten und Dateigrößen klein halten“ in Lighthouse, um HTTP2 über denselben Hostnamen zu berücksichtigen.“
  • „Es war für die Nutzer schwierig, daran zu denken, ihre Bilder zu komprimieren.“
  • „Das Verhalten in verschiedenen Browsern bleibt unvorhersehbar. Daher sind die einfachsten Lösungen oft die sichersten.“