Kommentare von Umfrageteilnehmern zu verschiedenen Bildoptimierungstechniken
In diesem Beitrag wird das freie Feedback aufgelistet, das Google Web DevRel im Rahmen der Umfrage zu Bildoptimierungstechniken im Sommer 2019 erhalten hat. Die Antworten wurden über Web Fundamentals und @ChromiumDev erbeten. 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 Verbesserung der Leistung zu sein scheinen. Die Antwortdaten sind hier nicht aufgeführt, da die Umfragemethodik fehlerhaft war.
Zielgruppe
- Wenn Sie als Webentwickler tätig sind, können Sie in diesem Beitrag mehr über neue Techniken zur Bildoptimierung erfahren. Sie erfahren darin auch, wie andere Webentwickler ein Problem gelöst haben, mit dem Sie konfrontiert sind, sowie die Kosten, Vorteile und Einschränkungen der einzelnen Methoden.
- Wenn Sie ein Bilddienst oder ein CDN-Anbieter für Bilder sind, kann dieser Beitrag Ihnen helfen, neue Marktchancen zu entdecken.
- Wenn Sie ein Framework-, Build-Tool- oder CMS-Entwickler sind, könnte dieser Beitrag Ihnen Ideen zu neuen Funktionen geben, die Sie implementieren können.
Kommentare
WebP
- „Ich mag WebP, aber es ist noch nicht ganz bereit. Außerdem unterstützt unsere WordPress WebP nicht. Photoshop, eine der beliebtesten Bildbearbeitungs-Apps, unterstützt WebP ebenfalls nicht. Daher können wir uns bei der Bildkomprimierung nicht auf Apps oder Dienste von Drittanbietern verlassen.“
- „WebP in Safari nutzbar machen“
- „Ich würde gerne WebP verwenden, wenn ich sie aus Photoshop/Figma/Sketch exportieren könnte und das von allen Browsern unterstützt wird.“ [Hinweis: Sketch unterstützt WebP.]
- „Die Formatierungslösung der nächsten Generation wäre toll.“
- „Hör auf, WebP so hart zu installieren, wenn die Browserunterstützung schlecht ist, und überlege, ob für Screenshots PNG anstelle von JPEG verwendet werden muss.“
- „Google Docs unterstützt WebP nicht.“
- „Wir würden nur WebP verwenden, haben aber Bedenken bezüglich der Browserkompatibilität.“
- „Korrigieren Sie zuerst die Browserkompatibilität und aktualisieren Sie ältere Browser oder fügen Sie alte Fehlerkorrekturen hinzu. Dann werden die Nutzer eher zu neuen Image-Typen wie WebP neigen...“
- „Empfiehl den Plug-in-/Designentwicklern, Unterstützung für WebP und andere Bildtypen der nächsten Generation anzubieten, damit sich Nicht-Entwickler nicht damit befassen müssen.“
SVG- und Vektorbilder
- "Wenn möglich, verwende ich (animiertes) SVG. Mit gatsby-image wurde ein Großteil der Probleme behoben. Aber wenn Sie sich die Arbeit dieser Unternehmen genauer ansehen, ist es völlig unrealistisch, dass eine normale Website so etwas erstellen müsste, damit die Bilder richtig funktionieren. Der Browser sollte mehr dieser Verantwortung übernehmen.“
- "Könnte ich mit lottie.js dokumentieren, wie SVG-Animationen erstellt werden?"
- „Wir versuchen, auf unserer Website meist JPEG-Bilder mit hoher Auflösung und niedriger Größe zu verwenden, um Ladezeiten zu vermeiden. Außerdem verwenden wir bei Bedarf SVGs, um Qualität für responsives Design zu bieten.“
- „Wir versuchen, möglichst für alle Elemente mit Ausnahme von Bildern optimierte Vektorgrafiken zu verwenden.“
Andere Bildformate
- „Wir müssen die Menschen besser davon überzeugen, GIFs nicht mehr zu verwenden.“
Lazy Loading
- „Denke bitte an die Nutzer, wenn du Funktionen wie Lazy Loading in Erwägung ziehst. Für viele ist das lästig.“
- „Bitte verwenden Sie für das Lazy-Load-Attribut ein Hintergrundbild.“
- „Mit Frameworks sollte sofort eine bessere Asset-Verarbeitung möglich sein.“
- „Wir haben vor langer Zeit vom Lazy Loading umgestellt. Nutzer meldeten Millionen Bilder und Websites, die nicht geladen werden. Das war das Verständnis unseres Teams. Für technisch nicht versierte Nutzer ist es schwierig, Probleme zu beschreiben.“
- „Ich würde gerne besser verstehen, wie ich die Intersection Observer API für Lazy Loading einsetzen kann, statt herkömmliche Techniken zu verwenden.“
- „Das funktioniert gut für mich: pwafire.org/developer/codelabs/progressive-loading.“
Hintergrundbilder
- „Normalerweise lade ich Bilder als Hintergründe in CSS.“
- „Das
<img>
-Tag ist problematisch und schwierig zu steuern. Das gilt insbesondere für von Nutzern eingereichte Inhalte. Wir verwenden<div>
und das Gestalten von Hintergrundbildern viel häufiger, da dadurch die Hintergrundgröße und die Hintergrundposition verwendet werden können und das Speichern des Bildes durch einen Rechtsklick verhindert wird.“
Transparenz
- „2019 ist da. Inwiefern sind JPGs ohne Alphatransparenz noch?“
- „Für Fotos verwende ich PNGs nur, wenn ich einen transparenten Hintergrund benötige.“
Minderwertige Bildplatzhalter (LQIPs)
- „Wir verwenden LQIPS. Damit können wir das Interesse der Besucher aufrecht erhalten, ohne dass wir wirklich früh qualitativ hochwertige Bilder laden müssen.“
Leistung
- „In letzter Zeit hatten wir ein Leistungsproblem mit Bildern. Wenn ein Nutzer auf der Website nach unten scrollt, werden die nächsten 60 Karten angezeigt, die ein Thumbnail enthalten. Aufgrund des Verbindungslimits von 6 in derselben Domain wurden die Miniaturansichten blockiert und die nächste AJAX-Anfrage zum Erhalt der nächsten 60 Karten wurde blockiert, wenn ein Nutzer weiter nach unten scrollt.“
- „Wir würden gerne HTTP/2 verwenden, aber die meisten unserer Kunden nutzen IE11! Aus diesem Grund untersuchen wir die Aufteilung der Domain und das Laden von AJAX-JSON-Datenanfragen aus einer anderen Domain.“
Größe
- „Entschuldigung für Intrinsik. Die Nutzung von Höhe und Breite scheint mir besser zu sein.“
- „Ich suche nach einer Möglichkeit, weniger Größen zu generieren. Im Moment sind es nur ca. 12.“
- „Die dynamische Größenanpassung von Bildern ist ohne JS sehr schwierig und unmöglich.“
- „Ein Tool wie responsivebreakpoints.com ist gut für web.dev :).“
Qualitativ hochwertige Bilder mit hoher Auflösung
- „Wie lade ich komprimierte Bilder herunter, ohne die DPI-Qualität zu verlieren?“
- „Wir sind ein Unternehmen für Dokumentenverwaltung. Unsere Apps verarbeiten MILLIONEN hochauflösender gescannter Bilder, meist 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. Das Verkleinern von Bildern für das Web ist mühsam, aber es ist eine Hürde, wenn Autoren nur einfache Dateien für Bilder liefern, die für die Printpublikation bestimmt sind. Am Ende werden gemischte Botschaften über die Anforderungen für die Einreichung von Manuskripten mit künstlerischen Arbeiten veröffentlicht. Wir entwickeln dann am Ende komplexe Workflows für die Verarbeitung dieser Materialien.“
Browserfunktionen
- „Die automatische, responsive Funktion zum Zuschneiden von Bildquellen aus dem Browser als [integrierte Funktion] wäre sehr nützlich, da es sehr zeitaufwendig 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 Browser automatisch die mehrfachen Attribute "src", mit denen die besten Ergebnisse erzielt werden."
- „Ich kann Reflows nur schwer vermeiden, wenn ein Bild mit CSS für responsive Bilder festgelegt wird (max-width: 100%; Höhe automatisch oder Höhe: width: 100%; Höhe automatisch). Dies gilt insbesondere in Kombination mit Art Direction aus dem adaptiven Bilder-/Bild-Tag. Um dies zu vermeiden, sollten Sie einen „negativen Padding-Hack“ für ein festes Bildverhältnis verwenden und das Bild dann innerhalb dieses Seitenverhältnisfelds positionieren. Eine bessere Browserunterstützung und die Verarbeitung responsiver Bilder wären eine wirklich große Hilfe.“
- „Bitte deaktiviere die Autoplay-Funktion für GIFs, indem du nur den ersten Frame abrufst.“
CDNs und Bilddienste
- „Google sollte ein kostenloses CDN wie Cloudflare zur Verfügung stellen.“
- „Vielleicht wären mehr Tools zum Einrichten der dynamischen Skalierung und CDNs mit verschiedenen Anbietern schön.“
- „Ein übergroßes, überkomprimiertes Image ist eine sehr gute Lösung ohne zusätzliche Produktionskosten. Sie benötigen Bilder mit einer Breite von etwa 1.000 Pixeln für Mobilgeräte (500 Pixel Rendering-Breite) und das ist auch die Größe, die Sie für große Bildschirme/Desktop-Displays ohne Retina-Displays benötigen. Ich denke, dass die Größenanpassung von CDNs durch Images eine sehr schlechte Lösung ist, obwohl ich diese Funktion schon einmal verwendet habe. Das CMS sollte die Größenanpassung übernehmen und deren Einrichtung zu komplex ist. Eine einzige Lösung ist (vorerst) ein guter Kompromiss.“
- „CloudFlare skaliert unsere Bilder automatisch so, dass sie dem Bildschirm des Nutzers entsprechen. Auf diese Weise können wir die Ladezeit sparen, da Bilder relativ zum Bildschirm des Nutzers geladen werden. Wenn ein Nutzer beispielsweise ein Smartphone verwendet, wird die App nicht vor einem Desktop-Hintergrund geladen.“
- „Cloudflare macht das im Hintergrund, ohne dass wir etwas tun müssen, außer ein Häkchen in den Einstellungen zu setzen.“
- „Wie bereits erwähnt, kann ich srcset usw. nur aufgrund der Nutzerfreundlichkeit von Cloudinary erfolgreich verwenden. Aber Cloudinary wird wirklich schnell teuer. Das fühlt sich wie eine Schwäche in der Entwicklungsumgebung an.“
- „Wir brauchen eine Möglichkeit, Bilder einfach und intelligent zuzuschneiden, damit sie mit unterschiedlichen Seitenverhältnissen und verschiedenen Kontexten funktionieren.“
- „Ich verwende auch Bilder von anderen Anbietern wie Unsplash, bei denen ich kaum Kontrolle über die Auflösung, Qualität und Komprimierung habe.“
CMS, Plattform und Framework
- „Beim Erstellen einer Website mit einem CMS fällt es mir immer noch schwer herauszufinden, wie ich Bilder am besten verwenden kann. Autoren konfigurieren Bilder in der Regel mit unterschiedlichen Abmessungen und gehen davon aus, dass 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 bei den letzten Projekten gatsby-image verwendet und nie darauf zurückgegriffen.“
- „Bilder sind oft der schwierige Teil, da sie vom Endnutzer in CMS eingefügt werden. Sie können jede beliebige 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 unser System das Hinzufügen von Steuerelementen zur Self-Service-Funktion hat. Es ist schwierig, es sei denn, Dinge werden automatisch ausgeführt, ohne dass sich dies auf die Auflösung auswirkt. Außerdem sehen die Bilder 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: Die Notwendigkeit, WebP auf ein CDN oder Plug-ins zu setzen, um WebP zu erstellen. srcset/picture muss von Designentwicklern richtig codiert werden. Die meisten Lazy-Loading-Plug-ins werden langsam geladen, was zu einer schlechten Nutzererfahrung führt. Das Lazy Loading von Hintergrundbildern ist kompliziert.“
Kosten/Nutzen
- „Die neuen Praktiken sind effektiv, erhöhen aber die Entwicklungszeit der Websites.“
- „Die mangelnde Einhaltung neuer Standards wie srcset und WebP hat sich bei vielen Fortune-500-Unternehmen nur schleppend weiterentwickelt. Viele Unternehmen wehren sich dagegen als unnötige Entwicklungskosten für aktuelle Websites. Die Leistungssteigerungen werden vom Endnutzer nicht umfassend diskutiert oder gemeldet. Wenn überhaupt, wird es etwas schwieriger, Bilder aus dem Web zu speichern.“
- „Aufwendige Erstellung und Verwaltung mehrerer Größen und Versionen.“
- „Sie belegen viel Speicherplatz auf unserem Server.“
SEO
- „Es ist schwierig, das richtige Gleichgewicht zwischen akzeptabler Bildqualität und Dateigröße zu finden. Auf der einen Seite ist ein schnelles Laden zum SEO-Vorteil wichtig, aber andererseits beeinträchtigen Bilder in schlechter Qualität die Benutzeroberfläche und die Nutzererfahrung.“
Die Rolle von Bildern im Web
- „Im Web gibt es zu viele. Verwende keine unbrauchbaren Bilder, die den schriftlichen Inhalt nicht verbessern.“
- „Erinnern Sie sich noch an die Zeit, als es im Web noch keine Bilder gab und wir Selfies als ASCII-Kunst geteilt haben?“
Tools, Anleitungen, Standards und Best Practices: Frustrationen und Wünsche
- [Ein Teilnehmer hat als Antwort auf diese Umfrage einen Blogpost verfasst.]
- „Die Anforderungen ändern sich offenbar ständig. Für Webentwickler ist das äußerst frustrierend, da das Speichern der Bilder von vornherein sehr zeitaufwendig ist. Wir optimieren die Bilder so gut wie möglich. Wir überprüfen die Website und haben dann Monate später entschieden, dass die Bilder noch stärker komprimiert werden oder ein anderes Format benötigen. Das hindert uns daran, unseren Kunden die bestmögliche Lösung zu bieten, die lange hält, was für sie und uns stattdessen ein kostspieliges Unterfangen ist. Einigen unserer Kleinunternehmen fehlt einfach das Budget, um Bilder ständig zu korrigieren und zur Einhaltung der Anforderungen wieder zu speichern. Wir haben nicht das Budget, um diese Arbeit in den Managementpaketen durchzuführen. Den Code zum Aufrufen verschiedener Bildgrößen für verschiedene Geräte zu schreiben, ist ebenfalls zeitaufwendig. Es wäre toll, ein System zum Speichern von Bildern zu entwickeln, das über einen längeren Zeitraum einheitlich wäre.“
- „Ja, ich glaube, Ihnen wurde in Lighthouse die Option „Anzahl der Anfragen niedrig und Dateigrößen klein halten“ nicht richtig angezeigt. Wenn eine Website über HTTP1.x bereitstellt, aber wenn eine Website über HTTP2 bereitgestellt wird, ist die Anzahl der Anfragen weniger wichtig oder kein Problem, wenn sie von demselben Hostnamen stammen. Ich habe eine Lite-Website, aber ich lade 30 kleine WebP-Dateien mit insgesamt etwa 35 Anfragen über HTTP2 auf demselben Hostnamen. Lighthouse nannte dies als Problem, dass die Anzahl der Anfragen niedrig und die Dateigrößen gering bleiben. Es ist jedoch sehr schnell und aufgrund des HTTP2-Codes auf demselben Hostnamen stellt die Anzahl der Anfragen kein Problem dar. Und ja, die Dateien sind bereits klein (meist zwischen 1 KB und 2 KB oder weniger). Ich könnte ein Sprite laden, aber dann muss noch mehr CSS-Computing ausgeführt werden. Bitte aktualisieren Sie daher den Bericht „Anzahl der Anfragen niedrig und Dateigrößen klein halten“ in Lighthouse, damit HTTP2 über denselben Hostnamen berücksichtigt wird.“
- „Für die Menschen war es schwierig, daran zu denken, ihre Bilder zu komprimieren.“
- „Das browserübergreifende Verhalten bleibt unvorhersehbar, sodass die einfachsten Lösungen oft die sichersten sind.“