Feedback aus der Umfrage zur Bildoptimierung im Sommer 2019

Kommentare von Umfrageteilnehmern zu verschiedenen Techniken zur Bildoptimierung

Sam Dutton

In diesem Beitrag wird das Feedback aufgeführt, das Google Web DevRel im Sommer 2019 im Rahmen einer Umfrage zu Techniken zur Bildoptimierung erhalten hat. Die Antworten wurden über Web Fundamentals und @ChromiumDev eingeholt. Die Motivation für die Umfrage war, herauszufinden, warum die meisten Websites die Best Practices für die Bildoptimierung nicht befolgen, obwohl sie eine relativ einfache Möglichkeit zur Leistungsverbesserung zu sein scheinen. Die Antwortdaten werden hier nicht aufgeführt, da die Umfragemethodik fehlerhaft war.

Zielgruppe

• Wenn ihr Webentwickler seid, findet ihr in diesem Beitrag möglicherweise neue Techniken zur Bildoptimierung oder Details dazu, wie andere Webentwickler ein Problem gelöst haben, mit dem ihr konfrontiert seid. Außerdem werden die Kosten, Vorteile und Einschränkungen der einzelnen Techniken erläutert.
• Wenn ihr ein Bilderdienst oder ein CDN-Anbieter für Bilder seid, kann euch dieser Beitrag helfen, neue Marktchancen zu finden.
• Wenn ihr Frameworks, Build-Tools oder CMS entwickelt, findet ihr in diesem Beitrag möglicherweise Ideen für neue Funktionen, die ihr implementieren könnt.

Kommentare

WebP

Hinweis: Warum ist das wichtig? Bildformate wie WebP können zu kleineren Dateien und besserer Qualität führen als ältere Formate wie JPEG und PNG. Es gibt mehrere Techniken, um moderne Formate mit Fallback für ältere Browser zu verwenden.

• „Ich mag WebP, aber es ist noch nicht ganz ausgereift. Außerdem wird WebP von unserem WordPress nicht unterstützt. Photoshop, eine der beliebtesten Bildbearbeitungs-Apps, unterstützt WebP ebenfalls nicht standardmäßig. Wir können uns also nicht auf Apps oder Dienste von Drittanbietern für die Bildkomprimierung verlassen.“
• „WebP in Safari nutzbar machen.“
• „Ich würde WebP gerne verwenden, wenn ich es aus Photoshop/Figma/Sketch exportieren könnte und alle Browser es 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 bewerben, wenn die Browserunterstützung schlecht ist, und überlegt, ob für Screenshots nicht PNG statt JPEG erforderlich ist.“
• „Google Docs unterstützt WebP nicht.“
• „Wir würden WebP ausschließlich verwenden, haben aber Bedenken hinsichtlich der Browserkompatibilität.“
• „Zuerst die Browserkompatibilität korrigieren und ältere Browser aktualisieren oder Korrekturen für ältere Browser hinzufügen, dann sind die Nutzer eher bereit, neue Bildtypen wie WebP zu verwenden…“
• „Ermutigen Sie Entwickler von Plug-ins und Themes, WebP und andere Bildformate der nächsten Generation zu unterstützen, damit sich Nicht-Entwickler nicht damit herumschlagen müssen.“

SVG- und Vektorbilder

• „Wenn möglich, verwende ich (animierte) SVGs. gatsby-image hat viele dieser Probleme 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 man SVG-Animationen mit lottie.js erstellt?“
• „Wir versuchen, auf unserer Website meistens hochauflösende JPEG-Bilder mit geringer Dateigröße zu verwenden, um lange Ladezeiten zu vermeiden. Außerdem verwenden wir bei Bedarf SVGs, um die Qualität für responsives Design zu gewährleisten.“
• „Wir versuchen, für alles außer Bildern optimierte Vektorgrafiken zu verwenden.“

Andere Bildformate

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

Lazy Loading

Hinweis: Warum ist das wichtig? Bilddateien erst dann anzufordern, wenn sie benötigt werden, anstatt alle Bilder für eine Seite abzurufen, sobald sie geladen wird, kann die Leistung verbessern und die Datenkosten senken.

• „Bitte denken Sie an die Nutzer, wenn Sie Funktionen wie Lazy Loading in Betracht ziehen, da dies für viele lästig ist.“
• „Sorge bitte dafür, dass das Lazy-Load-Attribut mit background-image funktioniert.“
• „Frameworks sollten die Asset-Verarbeitung standardmäßig besser erledigen.“
• „Wir haben schon vor langer Zeit auf Lazy Loading umgestellt. Nutzerberichte über Millionen von Bildern und Websites, die „NICHT GELADEN“ werden. So hat es unser Team verstanden. Für technisch nicht versierte Nutzer ist es schwierig, Probleme zu beschreiben.“
• „Ich möchte besser verstehen, wie die Intersection Observer API für Lazy Loading verwendet wird, anstatt herkömmliche Techniken zu nutzen.“
• „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, feine Details zu kontrollieren, insbesondere bei von Nutzern eingereichten Inhalten. Wir verwenden <div> und das Styling von Hintergrundbildern viel häufiger, da wir so die Hintergrundgröße und -position festlegen und verhindern können, dass das Bild per Rechtsklick gespeichert wird.“

Transparenz

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

Bildplatzhalter von geringer Qualität (LQIPs)

• „Wir verwenden LQIPs. Das ist eine großartige Technik, um Besucher bei der Stange zu halten, ohne dass Bilder in hoher Qualität sehr früh 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 für dieselbe Domain wurden die Thumbnails blockiert, ebenso wie die nächste AJAX-Anfrage zum Abrufen der nächsten 60 Karten, 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 Domain-Sharding und das Laden von AJAX-JSON-Datenanfragen von einer anderen Domain.“

Größe

Hinweis: Warum ist das wichtig? Das Attribut srcset stellt alternative Bildquellen bereit. Sie geben die Breite oder Pixeldichte an, damit der Browser das kleinste Bild auswählen kann, ohne Bilder herunterladen zu müssen, um die Abmessungen zu berechnen.

• „Sorry wegen intrinsicsize; die Verwendung von height/width scheint mir besser zu sein.“
• „Ich suche nach einer Möglichkeit, weniger Größen zu generieren. Derzeit sind es etwa 12.“
• „Die dynamische Größenanpassung von Bildern ist sehr schwierig und ohne JS unmöglich.“
• „Ein Tool 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 beeinträchtigen?“
• „Wir sind ein Unternehmen für Dokumentenmanagement. Unsere Apps verarbeiten MILLIONEN hochauflösender gescannter Bilder, normalerweise im TIFF- oder PDF-Format.“
• „Das 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 Problem, wenn Autoren nur kleine Dateien für Bilder liefern, die für die Druckveröffentlichung bestimmt sind. Wir geben am Ende widersprüchliche Informationen zu den Anforderungen für die Einreichung von Manuskripten mit Abbildungen. Am Ende haben wir dann komplexe Workflows für die Verarbeitung dieser Materialien.“

Browserfunktionen

• „Ein automatisches responsives Zuschneiden der Quelle 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, sodass Browser automatisch die mehreren src-Attribute erstellen, wäre das eine tolle Funktion.“
• „Ich persönlich habe Schwierigkeiten, Seiten-Reflows zu vermeiden, wenn die Bildbreite durch CSS für responsive Bilder festgelegt wird (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 lässt sich das vermeiden, indem Sie den „negativen Padding-Hack“ für ein festes Bildverhältnis verwenden und das Bild dann in diesem Verhältnis positionieren. Eine bessere Browserunterstützung und ein besseres Handling responsiver Bilder wären eine große Hilfe!“
• „Bitte deaktivieren Sie die automatische Wiedergabe von GIFs, indem Sie nur den ersten Frame abrufen.“

CDNs und Bilderdienste

Hinweis: Warum ist das wichtig? Bilddienste erleichtern die Optimierung Ihrer Bilder. In der Regel laden Sie einfach eine hochauflösende Version jedes Bildes hoch und verwenden dann eine Webdienst-API, um das Bild nach Bedarf zu optimieren oder zu transformieren. Content Delivery Networks (CDNs) optimieren die Verteilung und Bereitstellung von Bildern und anderen Website-Assets. Manchmal bieten sie auch Optimierungsdienste an, z. B. die automatische Bereitstellung von WebP-Bildern an unterstützende Browser anstelle von PNG oder JPEG, ohne die Dateiendung zu ändern.

• „Google sollte ein kostenloses CDN wie Cloudflare anbieten.“
• „Vielleicht wären mehr Tools zum Einrichten der dynamischen Skalierung und von CDNs mit verschiedenen Anbietern gut.“
• „Ein einzelnes, übergroßes, stark komprimiertes 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-Display benötigen. Ich halte CDNs zur 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 angezeigt 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 den Einstellungen zu aktivieren.“
• „Ich möchte noch einmal betonen, dass ich srcset usw. nur deshalb erfolgreich verwenden kann, weil Cloudinary so einfach zu bedienen ist. Aber Cloudinary wird sehr schnell teuer. Das ist eine große Lücke in der Entwicklung.“
• „Wir brauchen eine Möglichkeit, Bilder auf intelligente Weise automatisch zuzuschneiden, damit sie in verschiedenen Kontexten mit unterschiedlichen Seitenverhältnissen funktionieren.“
• „Ich verwende auch Bilder von anderen Anbietern wie Unsplash, bei denen ich kaum 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 oft mit unterschiedlichen Abmessungen und erwarten, dass die Bilder nicht verkleinert oder skaliert werden. Ich bin mir nicht sicher, ob es in Ordnung ist, „max-width“ oder „max-height“ für Bilder festzulegen.“
• „Ich habe gatsby-image für die letzten Projekte verwendet und bin begeistert.“
• „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 haben. Manchmal ist das Originalbild nicht im idealen Bildformat und in den idealen Abmessungen verfügbar.“
• „Bilder sind schwer zu verwalten, da unser System ein Selfservice-System ist. Es ist schwierig, Kontrollen hinzuzufügen, es sei denn, die Dinge passieren automatisch, ohne die Auflösung zu beeinträchtigen. Außerdem sehen die Bilder auf Mobilgeräten anders aus als auf Desktop-Computern.“
• „Ich helfe Nutzern, ihre Websites (WordPress) zu optimieren. Die größten Probleme, die ich bei Bildern gesehen habe, sind: Abhängigkeit von einem CDN oder von Plug-ins, um WebP zu erstellen. srcset/picture muss von Theme-Entwicklern richtig codiert werden. Die meisten Lazy-Loading-Plug-ins werden langsam geladen, was zu einer schlechten UX führt. Hintergrundbilder sind schwer per Lazy Loading zu laden.“

Kosten/Nutzen

• „Die neuen Verfahren 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 bestehende Websites ansehen. Die Leistungssteigerungen werden von den Endnutzern (UX) nicht umfassend diskutiert oder gemeldet. Wenn überhaupt, wird es dadurch etwas schwieriger, Bilder aus dem Web zu speichern.“
• „Es ist teuer, mehrere Größen und Versionen zu erstellen und zu verwalten.“
• „Sie nehmen viel Platz auf unserem Server ein.“

SEO

• „Es ist schwierig, ein ausgewogenes Verhältnis zwischen akzeptabler Bildqualität und Dateigröße zu finden. Einerseits möchte ich schnelle Ladezeiten, um die SEO zu verbessern, andererseits beeinträchtigen Bilder von schlechter Qualität die UI/UX.“

Die Rolle von Bildern im Web

• „Es gibt zu viele im Web. Verwenden Sie keine nutzlosen Bilder, die den Textinhalt nicht aufwerten.“
• „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 Antwort auf diese Umfrage einen Blogpost verfasst]
• „Die Anforderungen scheinen sich ständig zu ändern. Als Webentwickler ist das extrem frustrierend, weil es zeitaufwendig ist, die Bilder überhaupt zu speichern. Wir optimieren so gut wir können, prüfen die Website und Monate später entscheidet Google, dass die Bilder noch stärker komprimiert werden könnten oder ein anderes Format haben müssen. Das verhindert, dass wir unseren Kunden die bestmögliche, nachhaltige Lösung bieten können, und führt stattdessen zu einem kostspieligen Unterfangen für sie und uns. Einige unserer Kunden, die Kleinunternehmen betreiben, haben einfach nicht das Budget, um uns dafür zu bezahlen, dass wir Bilder immer wieder korrigieren und neu speichern, damit sie den Anforderungen entsprechen. Wir haben nicht das Budget, um diese Arbeit im Rahmen ihrer Verwaltungspakete zu erledigen. Das Schreiben des Codes zum Aufrufen verschiedener Bildgrößen für unterschiedliche Geräte ist ebenfalls 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 die Empfehlung ‚Anzahl der Anfragen niedrig und Dateigrößen klein halten‘ in Lighthouse völlig falsch verstanden. Wenn eine Website über HTTP1.x bereitgestellt wird, dann ja. Wenn eine Website jedoch über HTTP2 bereitgestellt wird, ist die Anzahl der Anfragen weniger wichtig oder gar kein Problem, wenn sie vom selben Hostnamen stammen. Ich habe eine einfache Website, lade aber 30 kleine WebP-Dateien mit insgesamt etwa 35 Anfragen über HTTP2 auf demselben Hostnamen. Lighthouse kennzeichnet dies als Problem „Anzahl der Anfragen niedrig und Dateigrößen klein halten“, obwohl es superschnell ist und die Anzahl der Anfragen aufgrund von HTTP2 auf demselben Hostnamen kein Problem darstellt. Und 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-Computing durchgeführt werden. Bitte aktualisieren Sie den Bericht „Keep Request Counts Low And File Sizes Small“ (Anzahl der Anfragen niedrig und Dateigrößen klein halten) in Lighthouse, um HTTP2 über denselben Hostnamen zu berücksichtigen.“
• „Es war für die Leute immer schwierig, daran zu denken, ihre Bilder zu komprimieren.“
• „Das Verhalten von Browsern ist unvorhersehbar, daher sind die einfachsten Lösungen oft die sichersten.“