Smashing Podcast Folge 39 mit Addy Osmani: Bildoptimierung

Diese Folge wurde freundlicherweise von unseren lieben Freunden bei Storyblok unterstützt, die Menschen dabei helfen, leistungsstarke Inhaltserlebnisse auf jeder Plattform bereitzustellen: Unternehmenswebsites, E-Commerce-Websites, mobile Apps und Bildschirmanzeigen. Danke!

In der heutigen Folge des Smashing Podcast sprechen wir über Bildoptimierung. Welche Schritte sollten wir für performante Bilder im Jahr 2021 befolgen? Ich habe mit dem Experten Addy Osmani gesprochen, um das herauszufinden.

Notizen anzeigen

• „Bildoptimierung“, Addy Osmani
• Addy auf Twitter
• Addys persönliche Website

Wöchentliches Update

• Lernen Sie :has kennen, einen nativen CSS-Elternselektor (und mehr)
  geschrieben von Adrian Bece
• Drei Front-End-Audit-Tools, die ich kürzlich entdeckt habe
  Geschrieben von Stefan Judis
• Nützliche Front-End Boilerplates und Starter Kits
  Geschrieben von Cosima Mielke
• Webdesign gut gemacht: Audio nutzen
  Geschrieben von Frederick O'Brien
• Wenn CSS nicht ausreicht: JavaScript-Anforderungen für barrierefreie Komponenten
  Geschrieben von Stephanie Eckles

Abschrift

Drew McLellan: Er ist Engineering Manager und arbeitet an Google Chrome, wo sich sein Team auf Geschwindigkeit konzentriert und dabei hilft, das Internet schnell zu halten. Zu seinen bisherigen Beiträgen, die sich der Open-Source-Community verschrieben haben, gehören Lighthouse, Workbox, Yeoman, Critical und to do NVC. Wir wissen also, dass er sich mit der Optimierung der Webleistung auskennt. Aber wussten Sie, dass er aufgrund eines Schreibfehlers den Oscar als beste Schauspielerin in einer Nebenrolle gewinnen will? Meine großartigen Freunde, bitte heißen Sie Addy Osmani willkommen. Hallo Addi. Wie geht es dir?

Addy Osmani: Ich bin der Hammer.

Drew McLellan: Das ist gut zu hören. Ich wollte heute mit Ihnen über Bilder im Internet sprechen. Es ist ein Bereich, in dem es in den letzten Jahren überraschend viele Veränderungen und Innovationen gegeben hat, und Sie haben gerade ein sehr umfassendes Buch über die Bildoptimierung für Smashing geschrieben. Was war die Motivation, damals zu denken: „Jetzt ist es an der Zeit für ein Buch zur Bildoptimierung?“

Addy Osmani: Das ist eine großartige Frage. Ich denke, wir wissen, dass Bilder seit Jahrzehnten ein ziemlich wichtiger Bestandteil des Webs sind und dass unser Gehirn Bilder viel schneller interpretieren kann als Text. Aber dieses Gesamtthema wird mit der Zeit immer interessanter und differenzierter. Und ich sage den Leuten immer, dass dies wahrscheinlich, glaube ich, mein drittes oder viertes Buch ist. Ich habe mir nie vorgenommen, ein Buch zu schreiben.

Addy Osmani: Ich begann dieses Buch mit dem Schreiben eines Artikels über Bildoptimierung, und im Laufe der Zeit fand ich heraus, dass ich versehentlich ein ganzes Buch darüber geschrieben hatte. Wir haben an diesem Projekt jetzt etwa zwei Jahre gearbeitet. Und selbst in dieser Zeit hat die Branche Browser und Tools rund um Bilder und Bildformate weiterentwickelt.

Addy Osmani: Und so habe ich dieses Buch geschrieben, weil es mir schwer fiel, bei all diesen Veränderungen auf dem Laufenden zu bleiben. Und ich dachte: „Ich werde ein guter Web-Bürger sein und versuchen, alles, was ich gelernt habe, an einem Ort zu verfolgen, damit alle anderen davon profitieren können.“

Drew McLellan: Es ist einer dieser Bereiche, denke ich, mit viel Leistungsoptimierung im Browser, es ist eine sich schnell verändernde Landschaft, nicht wahr? Wenn eine Technik, die Sie als aktuell und als Best Practice erlernt haben, eine Technologieverschiebung erfährt und Sie dann feststellen, dass es sich tatsächlich um ein Anti-Pattern handelt und Sie es nicht tun sollten. Und der Versuch, sein Wissen auf dem Laufenden zu halten und sicherzustellen, dass man die richtigen Artikel liest und die richtigen Dinge lernt und nicht etwas von vor zwei Jahren liest, ist ziemlich schwierig.

Drew McLellan: Das alles in einem gut recherchierten Buch aus einer maßgeblichen Quelle gesammelt zu haben, ist wirklich großartig.

Addy Osmani: Ja. Sogar aus der Perspektive eines Autors war eines der interessantesten Dinge und vielleicht eines der stressigsten Dinge für unser Redaktionsteam, dass ich ein Kapitel einreichen und sagen würde, dass es fertig ist. Und dann, zwei Wochen später, würde sich etwas in einem Browser ändern, und ich würde sagen: „Oh, warte. Ich muss noch eine Last-Minute-Änderung vornehmen.“

Addy Osmani: Aber die Bildlandschaft hat sich auch im letzten Jahr stark weiterentwickelt. Wir haben gesehen, dass die WebP-Unterstützung in den meisten modernen Browsern endlich über die Ziellinie gekommen ist. AVIF-Bildunterstützung ist in Chrome, kommt zu Firefox, JPEG XL, verzögertes Laden. Und auf ganzer Linie haben wir Verbesserungen gesehen, wie Sie Bilder im Web ziemlich konkret in Browsern verwenden können. Aber noch einmal, eine Menge für die Leute, um den Überblick zu behalten.

Drew McLellan: Manche mögen das Thema Bildoptimierung als ziemlich biederes Thema ansehen. Wir alle haben irgendwann in unserer Karriere gelernt, wie man aus unserer Grafiksoftware für das Web exportiert. Und einige von uns haben vielleicht die Angewohnheit, diese exportierten Bilder zu nehmen und sie durch etwas wie ImageOptim laufen zu lassen.

Drew McLellan: Wir wissen also vielleicht, dass wir ein JPEG auswählen sollten, wenn es sich um ein fotografisches Bild handelt, und ein PNG, wenn es sich um ein grafikbasiertes Bild handelt, und denken: „Okay, das war's. Ich kenne Bildoptimierung, ich bin fertig.“ Aber wirklich, diese Dinge sind nur Tischeinsätze, nicht wahr, an diesem Punkt?

Addy Osmani: Ja, das sind sie. Ich denke, dass sich unsere Fähigkeit, detailliertere, gestochen scharfe Bilder und Bilder auch in einem anderen Kontext anzuzeigen, je nachdem, ob Sie sich für die künstlerische Ausrichtung interessieren oder nicht, im Laufe der Zeit weiterentwickelt hat. Ich denke, die Notwendigkeit herauszufinden, wie Sie diese Bilder für Ihre Endbenutzer so schön aussehen lassen können, wie sie beabsichtigt sind, und dabei ihre Umgebung, ihre Gerätebeschränkungen, ihre Netzwerkbeschränkungen im Auge behalten, ist ein schwieriges Problem und etwas, das ich noch kenne viele Leute Probleme haben mit.

Addy Osmani: Und wenn es darum geht, über Bilder nachzudenken und eine etwas differenziertere Sicht darauf zu bekommen, als nur „Hey, lass uns ein JPEG verwenden“ oder „Lass uns ein PNG verwenden“, denke ich, dass dieser Wert einige Dimensionen hat im Gedächtnis behalten. Die erste ist nur allgemein die Komprimierung. Sie haben ImageOptim erwähnt, und viele von uns sind es gewohnt, ein Bild einfach an einen Ort zu ziehen und etwas Kleineres davon zu entfernen.

Addy Osmani: Nun, wenn es um Komprimierung geht, sprechen wir normalerweise über verschiedene Codecs. Und Codecs sind eine Komprimierungstechnologie, die normalerweise eine Encoder-Komponente zum Codieren von Dateien und eine Decoder-Komponente zum Decodieren und Dekomprimieren von Dateien enthält. Und wenn Sie entscheiden, ob Sie etwas verwenden, müssen Sie im Allgemeinen darüber nachdenken, ob Sie die Fotos oder Bilder, die Sie verwenden, mit einem verlustbehafteten Komprimierungsansatz oder einem verlustfreien Ansatz angehen können.

Addy Osmani: Nur für den Fall, dass die Leute mit diesen Konzepten nicht so vertraut sind, ein verlustfreier Ansatz ist einer, bei dem Sie am Ende der Dekomprimierung genau dieselbe Datei reproduzieren. An Qualität verliert man also nicht wirklich viel. Verlustfrei bedeutet viel mehr, Ihr Bild durch ein Faxgerät zu schicken. Sie erhalten ein Faksimile des Originals, und es wird nicht die Originaldatei sein. Dort könnten einige andere Artefakte vorhanden sein. Es könnte subtil anders aussehen. Aber im Allgemeinen gilt: Je mehr Sie komprimieren, desto mehr Qualität verlieren Sie normalerweise.

Addy Osmani: Und so versuchen sie bei all diesen modernen Bild-Codecs zu sehen, wie viel Qualität Sie herausquetschen können, während Sie je nach Anwendungsfall immer noch eine relativ anständige Dateigröße beibehalten.

Drew McLellan: Aus technologischer Sicht haben Sie also ein Quellbild und dann das Zieldateiformat. Aber der Prozess, das eine in das andere zu verwandeln, ist offen für Diskussionen. Solange Sie eine konforme Datei haben, hängt die Vorgehensweise von einem Codec ab, der viele verschiedene Implementierungen haben kann, und einige sind besser als andere.

Addy Osmani: Absolut. Absolut. Und ich denke, dass die Leute vielleicht wissen, dass JPEG für eine verlustbehaftete Komprimierung von Fotos erstellt wurde. Sie erhalten im Allgemeinen eine kleinere Datei von der Rückseite und können manchmal unterschiedliche Streifenartefakte aufweisen. PNG wurde ursprünglich für eine verlustfreie Komprimierung erstellt und eignet sich ziemlich gut für nicht fotografische Bilder.

Addy Osmani: Aber seitdem haben sich die Dinge weiterentwickelt. Um 2010 herum begannen wir, Unterstützung für WebP zu bekommen, das JPEG und PNG ersetzen sollte und sie in der Komprimierung ein wenig übertrifft. Aber die Zahl der Bildformate und Optionen auf dem Tisch ist seitdem geradezu explodiert. Ich denke, die Dinge entwickeln sich generell in eine gute Richtung, insbesondere bei modernen Formaten wie AVIF und JPEG XL. Aber es hat eine Weile gedauert, bis wir hier ankamen. Selbst die Bereitstellung von WebP-Unterstützung für alle Browser dauerte einige Zeit.

Addy Osmani: Und ich denke, letztendlich hat es dazu geführt, dass Entwickler danach gefragt haben, dass sie Lust darauf hatten, aus diesen modernen Formaten eine bessere Komprimierung herauszuholen, und dass sie einfach eine gute Kompatibilität zwischen Browsern haben wollten auch für diese Dinge.

Drew McLellan: Ja. WebP erscheint mir sehr interessant, da wir neben verlustfreier und verlustbehafteter Komprimierung innerhalb des Formats natürlich auch eine stark reduzierte Dateigröße haben. Und es gibt eine gute Browserunterstützung, und wir sehen die Übernahme durch große Unternehmen wie Google und Netflix und verschiedene große Unternehmen.

Drew McLellan: Aber meine Wahrnehmung in der Branche ist, dass wir nicht die gleiche Art von Akzeptanz auf der Basisebene sehen. Wartet WebP immer noch auf seinen Tag?

Addy Osmani: Ich denke, dass ich sagen würde, dass WebP ankommt. Viele Leute haben auf die Unterstützung von Safari und WebKit gewartet, und wir haben sie endlich. Aber wenn wir über neue Bildformate nachdenken, ist es sehr wichtig, dass wir verstehen, was Support eigentlich bedeutet. Es gibt Browserunterstützung zum Decodieren dieser Bilder. Wir brauchen auch wirklich gute Toolunterstützung, damit Sie diese Bildformate verwenden können, egal ob Sie sich in einer Knotenumgebung, einem Image-CDN oder einem CMS befinden.

Addy Osmani: Ich kann mich an die Zeit vor vielen Jahren erinnern, als WebP zum ersten Mal herauskam. Early Adopters hatten dieses Problem, dass Sie Ihre WebP-Datei auf Ihrem Desktop speichern und dann plötzlich „Oh, warten Sie. Muss ich das in meinen Browser ziehen, um es anzuzeigen?“ oder „Wenn meine Benutzer das WebP herunterladen, bleiben sie hängen und fragen sich, was los ist?“

Addy Osmani: Daher ist es meines Erachtens wirklich wichtig, sicherzustellen, dass das Bildformat sowohl auf Betriebssystemebene als auch in anderem Zusammenhang ziemlich ganzheitlich unterstützt wird, damit ein Bildformat durchstarten kann. Es ist auch wichtig, dass Leute, die Bilder bereitstellen, ein wenig über diese Anwendungsfälle nachdenken, damit Sie, wenn ich eine Datei speichere oder herunterlade, versuchen, sie in ein tragbares Format zu bringen, das die Leute im Allgemeinen leicht teilen können. Und ich denke, hier hat iOS zumindest auf iOS Unterstützung für eine Wanderung und einen Bindestrich. Und das Konvertieren von Dingen in JPEGs ermöglicht es den Leuten, sie bei Bedarf zu teilen.

Addy Osmani: Daher denke ich, dass es wichtig ist, über diese Arten von Anwendungsfällen nachzudenken, bei denen wir sicherstellen können, dass die Benutzer keine Verluste machen, während wir ihnen eine bessere Komprimierung liefern, denke ich.

Drew McLellan: Ich betreibe einen Dia-Sharing-Dienst, der, wie Sie sich vorstellen können, mit Hunderttausenden von Bildern umgeht. Und als ich WebP betrachtete, und das war wahrscheinlich vor drei Jahren, suchte ich in erster Linie nach einer Möglichkeit, die CDN-Bandbreitenkosten zu senken, denn wenn Sie eine kleinere Datei bereitstellen, werden Ihnen weniger Gebühren für die Bereitstellung in Rechnung gestellt. Aber obwohl ich immer noch ein Fullback-Bild brauchte, auch ein älteres Bildformat, zeigten meine Berechnungen, dass die Kosten für die Speicherung eines ganzen anderen Bildsatzes die Vorteile der Bereitstellung einer kleineren Datei aufwogen. Hier sind wir also im Jahr 2021. Ist das eine Entscheidung, die ich an diesem Punkt noch einmal überdenken sollte?

Addy Osmani: Ich denke, das ist eine wirklich wichtige Überlegung. Wenn wir darüber sprechen, wie Sie Ihre Imagestrategie angehen sollten, ist es manchmal sehr einfach, den Leuten eine allgemeine Antwort zu geben: „Hey, ja. Generieren Sie einfach fünf verschiedene Formate, und das lässt sich einfach unendlich skalieren.“ Und es ist nicht immer der Fall.

Addy Osmani: Ich denke, wenn Sie Speicher im Auge behalten müssen, sollten Sie manchmal versuchen, den besten gemeinsamen Nenner für Ihre Benutzer zu finden. Heutzutage würde ich eigentlich sagen, dass WebP als dieser gemeinsame Nenner eine Überlegung wert ist. Für Leute, die daran gewöhnt sind, das Bild-Tag zu verwenden, um verschiedene Formate bedingt für Personen bereitzustellen, würden Sie normalerweise ein JPEG als Hauptfallback verwenden. Vielleicht ist es heutzutage in Ordnung, das WebP tatsächlich als Fallback für die meisten Benutzer zu verwenden, es sei denn, Sie haben Leute, die sehr, sehr alte Browser verwenden. Und ich glaube, davon sehen wir heutzutage viel weniger. Aber da hat man auf jeden Fall eine gewisse Flexibilität.

Addy Osmani: Nun, wenn Sie versuchen, nach vorne zu schauen, würde ich sagen, wählen Sie ein Format, das Ihrer Meinung nach wirklich gut funktioniert. Wenn Sie den Speicher so angehen können, dass er skalierbar und flexibel auf Ihre Bedürfnisse abgestimmt ist, sollten die Leute meiner Meinung nach JPEG XL in Betracht ziehen. Technisch gesehen wird es noch nicht in einem Browser ausgeliefert. Wenn dies der Fall ist, sollte JPEG XL eine ziemlich gute Option für viele Fotos in verlustbehafteten oder verlustfreien Anwendungsfällen oder auch für Nicht-Foto-Anwendungsfälle sein. Und es wird wahrscheinlich viel besser sein als WebP V1. Das ist also ein Ort.

Addy Osmani: Ich denke, dass AVIF wahrscheinlich besser sein wird, wenn Sie zu wirklich niedrigen Bitraten gehen müssen. Vielleicht interessieren Sie sich sehr für die Bandbreite. Vielleicht interessiert Sie die Bildtreue etwas weniger. Und bei diesen Bitraten könnte ich mir vorstellen, dass es schärfer aussieht als einige der Alternativen. Und bis wir JPEG XL haben, würde ich versuchen, einen Blick auf Ihre Analysen zu werfen und zu verstehen, ob es Ihnen möglich ist, AVIF bereitzustellen. Ansonsten würde ich mich auf dieses WebP konzentrieren. Wenn Sie Analytiker wären, denke ich, dass die meisten Leute WebP bedienen können und Sie sich ein bisschen weniger um Wide-Gamut oder Textüberlagerungen kümmern, Orte, an denen die Chromosomenprobenahme in WebP möglicherweise nicht perfekt ist. Das ist sicherlich etwas, das es wert ist, im Auge behalten zu werden.

Addy Osmani: Also würde ich versuchen zu bedenken, dass es keine Einheitsgröße für alle geben wird. Ich persönlich mache mir heutzutage etwas weniger Gedanken über die Kosten für Speicherplatz, Egress und Bandbreite, nur weil ich ein Image-CDN verwende. Und ich freue mich sagen zu können, dass ich Cloudinary persönlich verwende. Dort, wo ich arbeite, verwenden wir viele verschiedene Image-CDNs. Aber ich habe festgestellt, dass ich mich nicht so sehr um die Wartungskosten für den Umgang mit Bildpipelines kümmern muss und mich darum kümmern werde, wie ich unterstützen werde, wie: „Oh, hey, hier ist noch ein anderes Bildformat oder neue Arten von Fallbacks oder neue Web-APIs “, das war ein netter Vorteil, in etwas zu investieren, das sich für mich nur darum kümmert.

Addy Osmani: Und dann waren die Gesamtkosten für meine Anwendungsfälle in Ordnung. Aber ich kann mir durchaus vorstellen, dass dies nicht unbedingt eine Option ist, wenn Sie einen Foliendienst in dieser Größenordnung betreiben.

Drew McLellan: Ja. Deshalb möchte ich auf einige dieser kommenden zukünftigen Formate zurückkommen. Aber ich denke, das ist es wert, sich damit zu befassen, denn mit jeder Art von Performance-Tools, Lighthouse oder WebPageTests, wenn einer von uns unsere Websites durchführt, ist eines der wichtigsten Dinge, die es vorschlagen wird, dass wir ein CDN für Bilder verwenden. Und das ist eine sehr realistische Sache für sehr große Unternehmen. Ist es realistisch und für Leute erreichbar, die kleinere Websites und Apps erstellen, oder ist das tatsächlich so einfach, wie es sich anhört?

Addy Osmani: Ich denke, die Frage sollte lauten: „Wofür verwenden Sie Bilder?“ Wenn Sie nur ein paar Bilder haben, wenn Sie einen Blog erstellen und die Bilder, die Sie hinzufügen, relativ einfach sind, Sie nicht Hunderte und Hunderte oder Tausende von Tausenden von Bildern haben, könnten Sie damit einverstanden sein zur Build-Zeit, auf sehr statische Weise, wo Sie ein paar NPM-Pakete installieren. Vielleicht benutzt du nur Sharp. Und das kümmert sich größtenteils um Sie.

Addy Osmani: Es gibt Tools, die Ihnen beim Generieren mehrerer Formate helfen können. Es erhöht zwar Ihre Bauzeit ein wenig, aber das könnte für viele Leute tatsächlich in Ordnung sein. Und dann für Leute, die in der Lage sein wollen, mehrere

Addy Osmani: Und dann für Leute, die in der Lage sein möchten, mehrere Formate zu nutzen, die sich nicht so sehr mit den Werkzeugdetails auseinandersetzen möchten und in der Lage sein möchten, ein wirklich reichhaltiges, ansprechendes Bild oder eine Geschichte zu erstellen, ich würde sagen, probieren Sie ein Image-CDN aus. Ich persönlich war anfangs aus Kostengründen ziemlich zurückhaltend, es für persönliche Projekte zu verwenden, und als ich dann im Laufe der Zeit einen Blick auf meine Abrechnung warf, wurde mir tatsächlich klar, dass es mir Zeit spart, die ich sonst investieren würde, um diese Probleme selbst anzugehen. Ich weiß nicht, wie viel Sie in der Vergangenheit benutzerdefinierte Skripte für den Umgang mit Ihren Bildern schreiben mussten, aber mir wurde klar, wenn ich mir durch diese verschiedenen npm-Pakete mindestens ein paar Tage Debugging im Monat sparen kann, dann die Kosten Kümmern Sie sich irgendwie um die Zeit, die ich spare, und so ist es in Ordnung.

Addy Osmani: Aber es kann etwas sein, wo Sie nachdenken müssen, wenn Sie auf Hunderte von Tausenden oder Millionen von Bildern skalieren und das nicht unbedingt durch Ihre Einnahmen gedeckt ist oder wofür Sie nicht bereit sind zu zahlen alternative Strategien. Und ich denke, wir können uns glücklich schätzen, dass wir mit den Tools, die uns heute zur Verfügung stehen, genug Flexibilität haben, um in beide Richtungen gehen zu können, wo wir etwas ein bisschen individuelleres machen, wir es selbst angehen oder rollen unser eigenes Image-CDN oder wir investieren in etwas etwas Kommerzielleres. Und wir sind an einem Punkt angelangt, an dem ich sagen würde, dass Sie für einige Anwendungsfälle ein Image-CDN verwenden können und es erschwinglich ist.

Drew McLellan: Ich denke, eines der Leitprinzipien ist immer, einfach agil zu sein und auf Veränderungen vorbereitet zu sein. Und Sie könnten damit beginnen, ein Bild-CDN zu verwenden, um Ihre Bilder dynamisch für Sie zu konvertieren, wenn sie angefordert werden, und wenn dies zu einem Punkt kommt, an dem es kostenmäßig nicht mehr tragbar ist, können Sie sich eine andere Lösung ansehen und Ihre Codebasis in einen Zustand versetzen wo es einfach sein wird, eine Lösung durch eine andere zu ersetzen. Ich denke, im Allgemeinen und überall dort, wo Sie sich auf einen Drittanbieterdienst verlassen, ist das ein gutes Prinzip, nicht wahr? Also diese kommenden Bildformate, Sie erwähnten JPEG XL. Was ist JPEG XL? Wo kommt es her? Und was bringt es uns?

Addy Osmani: Das ist eine ausgezeichnete Frage. JPEG XL ist also ein Bildformat der nächsten Generation, es soll universell einsetzbar sein und ist ein Codec des JPEG-Komitees. Es begann mit einigen Wurzeln im Bildformat von Google und dann im FUIF-Format von Cloudinary. Im Laufe der Jahre gab es viele Formate, die durch diese Bemühungen irgendwie subsumiert wurden, aber es ist viel mehr geworden als nur die Summe seiner einzelnen Teile, und einige der Vorteile von JPEG XL sind, dass es großartig für High-Fidelity ist Bilder, wirklich gut für verlustfrei, es hat Unterstützung für progressive Dekodierung, verlustfreie JPEG-Transkodierung, und es ist auch ziemlich umständlich und lizenzfrei, was definitiv ein Vorteil ist. Ich denke, dass JPEG XL möglicherweise ein wirklich starker Kandidat sein könnte. Wir haben vorhin darüber gesprochen, wenn Sie nur eine auswählen müssten, was würden Sie verwenden? Und ich denke, das JPEG XL hat das Potenzial dazu.

Addy Osmani: Ich möchte auch nicht zu viel versprechen, wir stehen mit der Browserunterstützung noch sehr am Anfang. Ich denke also, dass wir wirklich abwarten und sehen sollten, experimentieren und bewerten, wie gut es in der Praxis funktioniert und die Erwartungen der Leute erfüllt, aber ich sehe viel Potenzial mit JPEG XL sowohl für diese verlustbehafteten als auch für verlustfreie Fälle. Im Moment glaube ich, dass Chrome in Bezug auf die Unterstützung wahrscheinlich am weitesten fortgeschritten ist, aber ich habe auch definitiv Interesse von Mozilla-Seite und anderen Browsern daran gesehen, also bin ich gespannt auf die Zukunft mit JPEG XL. Und wenn wir sagen würden, was ist für die Leute noch kürzer? Natürlich gibt es auch AVIF.

Drew McLellan: Erzählen Sie uns etwas über AVIF, das ist ein anderes, mit dem ich nicht vertraut bin.

Addy Osmani: Okay. Wir haben also etwas früher erwähnt, dass AVIF vielleicht ein besserer Kandidat ist, wenn Sie zu niedrigen Bitraten wechseln müssen und Ihnen die Bandbreite wichtiger ist als die Bildtreue. Als allgemeines Prinzip übernimmt AVIF wirklich die Führung bei der Low-Fidelity-High-Appeal-Komprimierung. Und JPEG XL sollte sich durch mittlere bis hohe Wiedergabetreue auszeichnen, aber es handelt sich um etwas andere Formate für sich. Wir sind an einem Punkt angelangt, an dem AVIF eine zunehmend gute Browserunterstützung hat, aber lassen Sie mich einen Schritt zurücktreten und ein wenig mehr über das Format sprechen. AVIF selbst basiert also auf dem AV1-Videocodec, der von der Alliance for Open Media standardisiert wurde, und versucht, den Menschen erhebliche Komprimierungsgewinne gegenüber JPEG und WebP zu verschaffen, über das wir zuvor gesprochen haben. Und während die genauen Einsparungen, die Sie mit AVIF erzielen können, vom Inhalt und Ihren Qualitätszielen abhängen, haben wir viele Fälle gesehen, in denen es im Vergleich zu JPEG über 50 % Einsparungen bieten kann.

Addy Osmani: Es hat viele gute Funktionen, es kann Ihnen Container-Unterstützung für neue Funktionen wie High Dynamic Range und breite Farbskalen, Filmkörnungssynthese geben. Und noch einmal, ähnlich wie bei der Rede davon, nach vorne gerichtet zu sein, ist eines der netten Dinge am Bild-Tag, dass Sie den Benutzern jetzt AVIF-Dateien bereitstellen können und es in Fällen, in denen es nicht unbedingt unterstützt wird, immer noch auf Ihr WebP oder Ihr JPEG zurückgreift . Aber zurück zu Ihrem Beispiel zu Photoshop Save For Web: Sie könnten ein JPEG mit einer Größe von 500 Kilobyte nehmen und versuchen, eine ähnliche Qualität wie Photoshop Save For Web zu erzielen, und mit AVIF würde ich sagen, dass Sie wahrscheinlich zu einem gelangen können Punkt, an dem diese Dateigröße etwa 90 Kilobyte beträgt, 100 Kilobyte, also ziemlich viele Einsparungen ohne wirklich erkennbaren Qualitätsverlust.

Addy Osmani: Und eines der schönen Dinge daran ist, dass Sie idealerweise in Bildern mit vielen Details nicht so viel Texturverlust sehen werden. Wenn Sie also Fotos von Wäldern oder Campingplätzen oder ähnlichen Dingen haben, sollten sie mit AVIF immer noch sehr reichhaltig aussehen. Ich bin also ziemlich aufgeregt über die Richtung, die AVIF einschlägt. Ich denke, es braucht ein bisschen mehr Arbeit in Bezug auf die Werkzeugunterstützung. Also habe ich neulich einen Tweet darüber veröffentlicht, wir haben jetzt eine Reihe von Optionen für die Verwendung von AVIF, für einzelne Bilder haben wir Squoosh, squoosh.app, das von einem anderen Team in Chrome geschrieben wurde, also schreien Sie an Surma und Jake für die Arbeit an Squoosh. Avif.io hat eine Reihe guter Optionen für Leute, die heute versuchen, AVIF zu verwenden, unabhängig davon, auf welchen Tech-Stack sie sich konzentrieren, Sharp unterstützt auch AVIF.

Addy Osmani: Aber dann denken Sie im Allgemeinen an andere Stellen, an denen wir mit Bildern umgehen, sei es in Figma oder in Sketch oder in Photoshop oder an anderen Stellen, und ich würde sagen, dass wir in Bezug auf das noch ein bisschen arbeiten müssen AVIF-Unterstützung dort, weil es für Entwickler und Benutzer allgegenwärtig sein muss, um wirklich das Gefühl zu haben, dass es gelandet ist und nach Hause kommt. Und das ist einer der Schwerpunkte für uns bei den Teams, die im Moment an AVIF in Chrome arbeiten und versuchen sicherzustellen, dass wir die Werkzeuge an einen ziemlich guten Ort bringen können.

Drew McLellan: Wir haben jetzt in HTML das Bildelement, das uns mehr Flexibilität gegenüber dem traditionellen Bild-Tag gibt. Obwohl das Bild-Tag auch einen langen Weg zurückgelegt hat, nicht wahr? Aber wir haben gesehen, wie ein Bild hinzugefügt wurde, es war ungefähr zur gleichen Zeit wie das native Video-Tag, ich glaube, in dieser Art von ursprünglichen Stapel von HTML5-Änderungen. Und das gibt uns die Möglichkeit, mehrere Quellen anzugeben, ist das richtig?

Addy Osmani: Ja, das stimmt.

Drew McLellan: Sie können also verschiedene Bildformate auflisten und der Browser wählt dasjenige aus, das er unterstützt, und das ermöglicht es uns, sofort ziemlich experimentell zu sein, ohne uns zu viele Gedanken darüber machen zu müssen, dass Leute mit älteren Browsern Dinge kaputt machen.

Addy Osmani: Absolut. Ich denke, das ist einer der schönsten Vorteile der Verwendung des Bild-Tags außerhalb von Anwendungsfällen, in denen wir über unsere Richtung nachdenken, einfach in der Lage zu sein, den Leuten ein Bild zu liefern und den Browser die Liste der potenziellen Quellen durchgehen zu lassen und zu sehen, okay, Nun, ich werde die erste in dieser Liste verwenden, die ich verstehe, sonst werde ich zurückgreifen, das ist eine wirklich mächtige Fähigkeit für Leute. Ich denke, gleichzeitig habe ich auch gehört, dass einige Leute Bedenken oder Bedenken geäußert haben, dass wir jetzt wirklich riesige Markup-Blobs regenerieren, wenn wir versuchen, mehrere Formate zu unterstützen, und Sie berücksichtigen unterschiedliche Größen für diese Formate und plötzlich wird es ein bisschen sperrig.

Addy Osmani: Gibt es also andere Möglichkeiten, wie wir diese Probleme angehen könnten? Ich möchte den Leuten nicht zu viel auf Image-CDNs verkaufen, ich möchte, dass sie für sich alleine stehen. Aber dies ist einer der Orte, an denen eine Idee namens Inhaltsverhandlung Ihnen tatsächlich einen interessanten Weg bieten kann. Wir haben also ein wenig über Bild-Tags gesprochen, bei denen Sie eine Reihe verschiedener Ressourcen generieren und die bevorzugte Reihenfolge festlegen müssen, richtig, zusätzliches HTML. Bei der Inhaltsverhandlung bedeutet es, dass wir all diese Arbeit auf dem Server erledigen. So können die Clients dem Server im Voraus über eine Liste von MIME-Typen über den Accept-HTTP-Header mitteilen, welche Formate er unterstützt. Dann kann der Server all die schwere Arbeit erledigen, um die ultimativen Ressourcen zu generieren und zu verwalten und zu entscheiden, welche an die Clients gesendet werden. Und eines der wichtigsten Dinge hier ist, dass Sie, wenn Sie ein Bild-CDN verwenden, auf eine einzelne Ressource verweisen können.

Addy Osmani: Wenn wir also ein Welpenbild wie Puppy.JPEG haben, könnten wir den Leuten vielleicht eine URL zu Puppy.JPEG geben, und wenn ihr Browser WebP oder AVIF unterstützt, kann der Server wirklich schlau werden, rechts unten zu bedienen Bild an diese Benutzer, je nachdem, wie ihr Support aussieht, aber ansonsten zurückgreifen, ohne dass Sie selbst eine Menge zusätzlicher Arbeit leisten müssen. Nun, ich denke, das ist eine starke Idee. Es gibt eine Menge, was Sie auf dem Server tun können, wir sprechen manchmal darüber, dass nicht jeder Zugriff auf eine wirklich starke Netzwerkqualität hat, Ihr effektiver Verbindungstyp kann wirklich unterschiedlich sein, je nachdem, wo Sie sich befinden.

Addy Osmani: Selbst wenn ich im Silicon Valley lebe, könnte ich von einem Café zu einem Hotel gehen oder im Auto sitzen und die Qualität meines WLANs oder meines Signals könnte nicht so gut sein. Hier haben Sie also Zugriff auf andere APIs, andere Ideen wie den Save-Data-Client-Hinweis, um möglicherweise Menschen mit noch kleineren Ressourcen zu bedienen, wenn der Benutzer sich für Dateneinsparungen entschieden hat. Es gibt also eine Menge interessanter Dinge, die wir auf der Serverseite tun könnten, und ich denke, wir sollten diese Ideen weiter vorantreiben, um eine gute Balance zu finden, bei der Leute, die mit dem Marktpfad vertraut sind, die gesamte Flexibilität dazu haben und Leute, die eine etwas magischere Lösung wollen, haben auch ein paar Optionen.

Drew McLellan: Das Konzept dieser Art von Data Saver-Ansatz habe ich zuerst aus Ihrem Buch gelernt. Ich meine, lasst uns ein bisschen mehr darauf eingehen, weil das ziemlich interessant ist. Sie sprechen also davon, dass der Browser in der Lage ist, eine Präferenz dafür zu signalisieren, dass er ein reduziertes Datenerlebnis zurück haben möchte, weil er möglicherweise über eine gemessene Verbindung verfügt oder einen niedrigen Akkustand hat oder so.

Addy Osmani: Genau. Exakt. Ich bin in den normalen Zeiten oder vor Zeiten gereist, als wir noch viel mehr gereist sind, ich habe viele Orte auf der Welt oder Situationen erlebt, in denen meine Netzwerkqualität sehr schlecht oder sehr lückenhaft war und sich sogar öffnete eine Webseite aufzubauen, kann eine frustrierende oder schwierige Erfahrung sein. Ich schaue vielleicht eine Speisekarte nach und wenn ich keine Bilder von dem schönen Essen sehen kann, das sie zur Verfügung haben, gehe ich vielleicht irgendwohin, wo ich kann, oder ich könnte, ich weiß nicht, stattdessen etwas Essen machen. Aber ich denke, eines der interessanten Dinge am Datensparmodus ist, dass er Ihnen eine Verbindung zu den Präferenzen des Benutzers herstellt. Wenn ich also als Benutzer weiß, dass ich mit meiner Netzwerkverbindung Schwierigkeiten habe. Ich kann sagen: „Okay, gut, ich werde den Datensparmodus in meinem Browser aktivieren.“

Addy Osmani: Und dann können Sie das als Entwickler als Signal verwenden, um zu sagen: „Okay, nun, der Benutzer ist etwas eingeschränkt, vielleicht surfen wir sie durch viel kleinere Bilder oder Bilder von viel geringerer Qualität.“ Aber sie bekommen immer noch einige Bilder zu sehen, was besser ist, als sehr lange darauf zu warten, dass etwas viel Reichhaltigeres serviert wird. Weitere Vorteile dieser Art von Signalen sind, dass Sie sie für die bedingte Bereitstellung von Medien verwenden können. Vielleicht gibt es also Fälle, in denen Text das Wichtigste auf dieser Seite ist, vielleicht können Sie diese Bilder ausschalten, wenn Sie feststellen, dass sich Benutzer in einer eingeschränkten Umgebung befinden. Ich werde nur 30 Sekunden damit verbringen, aber Sie können diese Idee wirklich auf die Spitze treiben. Einige der interessanten Dinge, die Sie mit Save-Data tun können, sind vielleicht sogar das Abschalten sehr kostspieliger Funktionen, die in JavaScript implementiert sind.

Addy Osmani: Wenn Sie bestimmte Komponenten haben, die als etwas optionaler angesehen werden, müssen diese vielleicht nicht unbedingt an alle Benutzer gesendet werden, wenn sie nur das Erlebnis verbessern. Sie können immer noch jedem ein sehr zentrales, kleines, schnelles Erlebnis bieten und es dann einfach mit etwas nettem Zuckerguss für Leute überziehen, die eine schnellere Verbindung oder ein schnelleres Gerät haben.

Drew McLellan: Potentiell, denke ich, könnte es in die Paginierung einfließen und Sie könnten 10 Ergebnisse auf einer Seite statt 100 und solche Dinge zurückgeben. Es gibt also viele interessante, interessante Fähigkeiten. Ich denke, wir alle kennen den frustrierenden Prozess, eine neue Website fertig zu stellen, alle Ihre Bilder zu optimieren, sie dem Kunden zu übergeben, ihm ein CMS zur Verwaltung der Inhalte zu geben und festzustellen, dass sie einfach alles ersetzen schlecht optimierte Bilder. Ich meine, noch einmal, ein Image-CDN wäre, denke ich, eine wirklich bequeme Lösung dafür, aber gibt es andere Lösungen, gibt es Dinge, die das CMS auf dem Server tun könnte, um dabei zu helfen, oder ist ein Image-CDN wahrscheinlich das Richtige? Weg zu gehen?

Addy Osmani: Ich denke, was wir nach wahrscheinlich mindestens sechs oder sieben Jahren des Versuchs, alle dazu zu bringen, ihre Bilder zu optimieren, herausgefunden haben, ist, dass es ein schwieriges Problem ist, wenn einige Leute, die an dem Bild beteiligt sind, technisch etwas versierter und vielleicht bequemer eingestellt sind ihre eigenen Tools entwickeln oder Lighthouse betreiben oder andere Tools ausprobieren, um sie wissen zu lassen, ob es Verbesserungsmöglichkeiten gibt. Ich würde gerne sehen, wie Leute konsequent Dinge wie Lighthouse verwenden, um zu erkennen, ob Sie Möglichkeiten haben, Bilder in der richtigen Größe weiter zu optimieren oder herunterzuladen, aber darüber hinaus stoßen wir manchmal auf Anwendungsfälle, in denen die Leute, die Bilder hochladen, dies möglicherweise nicht tun unbedingt sogar die Kosten der Ressourcen verstehen, die sie hochladen. Dies ist häufig etwas, dem wir begegnen, und ich entschuldige mich, ich werde die Leute nicht zu sehr herausfordern, aber das ist etwas, dem wir sogar im Google-Blog begegnen.

Addy Osmani: Alle paar Wochen wird im Google-Blog jemand ein sehr großes animiertes GIF mit 20 oder 30 Megabyte hochladen. Und ich erwarte nicht, dass sie wissen, dass das keine gute Idee ist, sie versuchen, den Artikel cool und sehr ansprechend und interaktiv aussehen zu lassen, aber dieses Publikum wird nicht unbedingt wissen, wie man Tools ausführt oder ImageOptim verwendet oder eines dieser anderen Tools an Ort und Stelle zu verwenden und so für sie zu dokumentieren, dass sie sie ausprobieren sollten, ist sicherlich eine Option. Aber in der Lage zu sein, das Problem zu automatisieren, ist meiner Meinung nach sehr überzeugend und hilft uns, konsequent an einen Punkt zu gelangen, an dem wir hoffentlich die Bedürfnisse aller unserer Benutzer von CMS ausbalancieren, egal ob sie technisch oder nicht technisch sind wie die Bedürfnisse unserer Benutzer.

Addy Osmani: So I think the image CDNs can definitely play a role in helping out here. Ultimately, the thing that's important is making sure you have a solution in place between people, stakeholders who might be uploading those images, and what gets served down to users. If it's an image CDN, if it's something you've rolled yourself, if it's a built step, just needs to be something in place to make sure that you are not serving down something that's very, very large and inefficient.

Drew McLellan: Talking about animated GIFs, they're surprisingly popular. They're fun, we love them, but they're also huge. And really, it's a case where a file format that was not designed for video is being used for video. Is there a solution to that with any of these image formats? What can we do?

Addy Osmani: Oh, gosh. The history of GIFs is fascinating. We saw a lot of the formats we know and love or have been around for a while were originated in the late '80s to early '90s, and the GIF is one of those. It was created in 1987. I'm about as old as the GIF.

Addy Osmani: As you mentioned, it wasn't originally created necessarily for use case. I think it was Netscape Navigator which in mid '90s maybe added support for looping GIFs and giving us this kind of crazy fun way to do memes and the like, but GIFs have got so many weaknesses. They're kind of limited in many cases to a very finite color palette; 256 colors, in many cases. They're a bitmapped raster format with pixel value stored in image files.

Addy Osmani: They're very inefficient, for a number of reasons. And you mentioned that they're also quite large. I think that we've gotten into this place of thinking that if we want a short segment of video or animation that's going to be looping, the GIF is the thing that we have to use. And that's just not the case.

Addy Osmani: While we do see that there are modern image formats that have support for animation, I think that the most basic thing you can do these days is make sure you're serving a video down instead of a GIF. Muted auto-play videos combined with HD64, HD65, whatever video you're going to use, can be really powerful, and significantly smaller for use cases where you need to be showing a sequence of images.

Addy Osmani: There are options for this. AVIF has got image sequences in there, potentially. Other formats have explored these ideas as well. But I think that one thing you can do is, if you're using GIFs today, or you have users who are slightly less technical who are using GIFs today, try to see if you can give them tools that will allow them to export a video instead, or if your pipeline can take care of that for them, that's even better.

Addy Osmani: I have plenty of conversations with CMS providers where you do see people uploading GIFs. They don't know the difference between a video and a GIF file. But if you can just, whether it's with an image CDN or via some built process, change the file over to a more efficient format, that would be great.

Drew McLellan: We talked briefly about tools like ImageOptim that manage to strip out information from the files to give us the same quality of result with a smaller file size. I'm presuming that's because the file formats that we commonly deal with weren't optimized for delivery over the Web in the first place, so they're doing that step of removing anything that isn't useful for serving on the Web. Do these new formats take that into consideration already? Is something like ImageOptim a tool that just won't be required with these newer formats?

Addy Osmani: I'm anticipating that some of the older formats… Things that have been around for a while, take a while to phase out or to evolve into something else. And so I can see tools like ImageOptim continuing to be useful. Now, what are modern image formats doing that are much better? Well, I would say that they're taking into account quite a few things.

Addy Osmani: They're taking into account, are there aspects of the picture that the human eye can't necessarily make out a difference around? When I'm playing around with different quality settings or different codecs, I'm always looking for that point where if I take the quality down low enough, I'm going to see banding artifacts. I'm going to see lots of weird looking squares around my buildings or the details of my picture.

Addy Osmani: But once those start to disappear, I really need to start zooming in to the image and making comparisons across these different formats. And if users are unlikely to do that, then I think that there are good questions around is that point of quality good enough? I think that modern image formats are pretty good at being able to help you navigate, filtering out some of those details pretty well. Keeping in mind what are the needs of color, because obviously we've got white gamut as a thing right now as well.

Addy Osmani: Some people might be okay with an amount of changing your color palette versus not, depending on the type of images that you have available, but definitely I see modern formats trying to be resilient against things like generational loss as well. Generational loss is this idea that… We mentioned memes earlier. A common problem on the Web today is you'll find a meme, whether it's on Facebook or Instagram or Reddit or wherever else, you'll save it, and maybe you'll share it around with a friend. Maybe they'll upload it somewhere else. And you suddenly have this terrible kind of copy machine or fax effect of the quality of that image getting worse and worse and worse over time.

Addy Osmani: And so when I see something get reshared that I may have seen three months ago, now it might not be really, really bad quality. You can still make out some of the details, but image formats, being able to keep that in mind and work around those types of problems, I think are really interesting.

Addy Osmani: I know that JPEG XL was trying to keep this idea of generational loss in mind as well. So there's plenty of things that modern codecs and formats are trying to do to evolve for our needs, even if they're very meme focused.

Drew McLellan: Let's say you've inherited a project that has all sorts of images on it. What would be the best way to assess the state of that project in terms of image optimization? Are there tools or anything that would help there?

Addy Osmani: I think that it depends on how much time you've got to sink into the problem. There are very basic things people can try doing, like obviously batch converting those images over to more modern formats at the recommended default quality and do an eyeball check on how well they're doing compared to the original.

Addy Osmani: If you're able to invest a little bit more time, there are plenty of tools and techniques like DSSIM and other ways of being able to compare what the perceptual quality differences are between different types of images that have been converted. And you can use that as a kind of data-driven approach to deciding, if I'm going to batch convert all of my old images to WebP, what is the quality setting that I should be relying on? If I'm going to be doing it for AVIF or JPEG XL, what is the quality setting that I should be relying on?

Addy Osmani: I think that there's plenty of tools people have available. It really just depends on your time sink that's possible. Other things that you can do, again, going back to the image CDN aspect, if you don't have a lot of time and you're comfortable with the cost of an image CDN, you can just bulk upload all of those images. And there are CDNs that support this idea of automatic quality setting. I think in Cloudinary it's q_auto, or something like that.

Addy Osmani: But the basic idea there is they will do a scan of the image, try to get a sense of the type of content that's in there, and automatically decide on the right level of quality that you should be using for the images that are getting served down to users. And so you do have some tooling options that are available here, for sure.

Drew McLellan: I mean, you mentioned batch processing of images. Presumably you're into the area of that generational loss that you're talking about, when you do that. When you take an already compressed JPEG and then convert it to a WebP, for example, you risk some loss of quality. Is batch converting a viable strategy or does that generational loss come too much into play if you care about the pristine look of the images?

Addy Osmani: I think it depends on how much you're factoring in your levels of comfort with lossy versus lossless, and your use case. If my use case is that I've inherited a project where the project in question is all of my family's photos from the last 20 years, I may not be very comfortable with there being too much quality loss in those images, and maybe I'm okay with spending a little bit more money on storage if the quality can remain mostly the same, just using a more modern format.

Addy Osmani: If those are images for a product catalog or any commerce site, I think that you do need to keep in mind what your use case is. Are users going to require being able to see these images with a certain level of detail? And if that's the case, you need to make those trade-offs in mind when you're choosing the right format, when you're choosing the right quality.

Addy Osmani: So I think that batch is still okay. To give you a concrete idea of one way of seeing people approach this at scale, sometimes people will take a smaller sample of the images from that big collection that they've inherited, and they'll try out a more serious set of experiments with just that set. And if they're able to land on an approach that works well for the sample, they'll just apply it to the whole batch. And I've seen that work to varying degrees of success.

Drew McLellan: So optimizing file size is just sort of one point on the overall image optimization landscape. And I'd like to get on to talking about what we can do in our browsers to optimize the way the images are used, which we'll do after a quick word from this episode sponsor.

Drew McLellan: So we've optimized and compressed our large files, but now we need to think about a strategy for using those in the browser. The good old faithful image tag has gained some new powers in recent times, hasn't it?

Addy Osmani: Yeah, it has. And maybe it's useful for folks… I know that a lot of people that ask me about images these days also ask me to frame it in terms of metrics and the Core Web Vitals. Would it be useful for me to talk about what the Core Web Vitals are and maybe frame some of those ideas in those current terms?

Drew McLellan: Absolutely, because Core Web Vitals is a sort of initiative from Google, isn't it, that we've seen more recently? We're told that it factors into search ranking potentially at some level. What does Core Web Vitals actually mean for us in terms of images?

Addy Osmani: Great question. As you mentioned, Core Web Vitals is an initiative by Google, and it's all about trying to share unified guidance for quality signals. That can be pretty key to delivering a great user experience on the Web. And it is part of a set of page experience signals Google Search may be evaluating for ranking purposes, but they can impact the Core Web Vitals in a number of ways.

Addy Osmani: Now, before I talk about what those ways are, I should probably say, what are the Core Web Vitals metrics? There's currently three metrics that are in the Core Web Vitals. There's largest contentful paint, there's cumulative layout shift, and there's first input delay. Now, in a lot of modern Web experiences we find that images tend to be one of the largest visible elements on the page. We see a lot of product pages where we have a big image that's the main product item image. We see images in carousels, in stories and in banners.

Addy Osmani: Now, largest contentful paint, or LCP, is a Core Web Vitals metric that tries to measure when the largest contentful element, whether it's an image text or something else, is in a user's viewport, such that we're able to tell when that image becomes visible. And that really allows a browser to determine when the main content of the page has really finished rendering.

Addy Osmani: Wenn ich also versuche, auf eine Rezeptseite zu gehen, ist es mir vielleicht wichtig, wie dieses Rezept aussieht, und deshalb kümmern wir uns darum, sicherzustellen, dass dieses große Heldenbild des Rezepts für mich sichtbar ist. Nun kann sich das LCP-Element im Laufe der Zeit ändern. Es ist sehr gut möglich, dass zu Beginn des Ladevorgangs das Größte eine Überschrift ist, aber wenn die Seite weiter geladen wird, kann es am Ende tatsächlich zu einem viel größeren Bild oder einer Art Poster kommen.

Addy Osmani: Wenn Sie also versuchen, die größtmögliche Inhaltsfarbe zu optimieren, gibt es ungefähr vier Dinge, die Sie tun können. Stellen Sie zunächst sicher, dass Sie Ihr Schlüsselheldenbild so früh wie möglich anfordern. Im Allgemeinen haben wir eine Reihe von Dingen, die auf der Seite wichtig sind. Wir möchten sicherstellen, dass wir den Inhalt und das Layout der Hauptseite rendern können.

Addy Osmani: Beim Layout sprechen wir normalerweise von CSS. Sie verwenden also möglicherweise kritisches CSS, Inline-CSS, auf Ihren Seiten, möchten Dinge vermeiden, die das Rendering blockieren, aber wenn es dann um Ihr Bild geht, sollten Sie dieses Bild idealerweise frühzeitig anfordern. Vielleicht geht es darum, sicherzustellen, dass der Browser dieses Bild so früh wie möglich auf der Seite entdecken kann, da viele von uns heutzutage auf Frameworks angewiesen sind.

Addy Osmani: Wenn Sie nicht unbedingt SSR, serverseitiges Rendering, verwenden, wenn Sie im Browser darauf warten, einige Ihrer JavaScript-Bundles zu entdecken, Bundles für Ihre Komponenten, ob Sie eine Komponente für Ihr Hero-Image oder Ihr Produktbild haben, Wenn der Browser warten muss, um all diese verschiedenen Dateien abzurufen, zu parsen, auszuführen, zu kompilieren und auszuführen, bevor er das Bild entdecken kann, kann das bedeuten, dass Ihr größtes Inhaltsbild einige Zeit braucht, bevor es entdeckt werden kann.

Addy Osmani: Nun, wenn das der Fall ist, wenn Sie sich an einem Ort befinden, an dem das Bild ziemlich spät angefordert wird, können Sie eine Browserfunktion namens Link rel preload nutzen, um sicherzustellen, dass der Browser dieses Bild so früh erkennen kann wie möglich. Jetzt ist Preload eine wirklich mächtige Fähigkeit. Es ist auch eines, mit dem Sie viel Sorgfalt walten lassen müssen. Heutzutage ist es sehr einfach, an einen Ort zu gelangen, an dem Sie vielleicht hören, dass wir das Vorladen für Ihren Schlüssel empfehlen.

Addy Osmani: Vielleicht haben Sie gehört, dass wir das Vorabladen für Ihr Key-Hero-Image sowie Ihre Key-Skripte und Key-Fonts empfehlen. Und es wird einfach so wirklich groß, massiv, um sicherzustellen, dass Sie die Dinge in der richtigen Reihenfolge anordnen. Die LCP-Bilder sind also definitiv ein wichtiger Ort, an dem es sich lohnt, dies zu beachten.

Addy Osmani: Die andere Sache, wie ich bereits vier Dinge erwähnt habe, ist die andere Sache, sicherzustellen, dass Sie einen Quellsatz und ein effizientes, modernes Bildformat verwenden. Ich denke, dass Source-Set wirklich mächtig ist. Ich sehe auch manchmal, wenn Leute es verwenden, dass sie versuchen, es zu überkompensieren und vielleicht 10 verschiedene Versionen von Bildern für jede mögliche Auflösung versenden. Wir stellen zumindest bei einigen Untersuchungen fest, dass es den Benutzern über drei Bilder hinaus wirklich schwer fällt, die Unterschiede in Bezug auf Bildqualität, Schärfe und Details zu erkennen. Daher ist DPR-Capping, also die Begrenzung des Pixelverhältnisses von Geräten, sicherlich eine Idee, die es wert ist, im Hinterkopf behalten zu werden.

Addy Osmani: Und für moderne Bildformate haben wir vorhin über Formate gesprochen, aber denken Sie an Ihr WebP, Ihr AVIF, Ihr JPEG XL. Vermeiden Sie Pixelverschwendung. Es ist wirklich wichtig, eine gute Strategie für Qualität zu haben. Und ich denke, dass es viele Fälle gibt, in denen selbst die Standardqualität manchmal zu viel sein kann. Also würde ich damit experimentieren, Ihre Bitrate zu senken, Ihre Qualitätseinstellungen zu senken und zu sehen, wie weit Sie die Dinge für Ihre Benutzer bringen können, während Sie die Schärfe beibehalten.

Addy Osmani: Und wenn wir über das Laden sprechen, eines der anderen Dinge, die das Image-Tag in den letzten Jahren entwickelt hat, um es zu unterstützen, ist das verzögerte Laden. Da Laden gleich Lazy ist, müssen Sie nicht mehr unbedingt eine JavaScript-Bibliothek verwenden, um Lazy Loading zu Ihren Bildern hinzuzufügen. Das legst du einfach auf dein Bild. Und in Chromium-Browsern und Firefox können Sie diese Bilder faul laden, ohne Abhängigkeiten von Drittanbietern verwenden zu müssen. Und das ist auch ganz nett.

Addy Osmani: Wir haben also Lazy Loading eingeführt. Wir haben Unterstützung für andere Dinge wie Sync-Decodierung, aber ich werde die Dinge am Laufen halten und sehr schnell über die anderen beiden wichtigen Vitaldaten sprechen.

Drew McLellan: Mach es, ja.

Addy Osmani: Beseitigen Sie also Layoutverschiebungen. Niemand mag Dinge, die auf seinen Seiten herumspringen. Ich habe das Gefühl, eine meiner größten Frustrationen ist, dass ich eine Webseite eröffne. Ich bewege meinen Finger über eine Schaltfläche, auf die ich klicken möchte, und dann erscheinen plötzlich eine Reihe von Anzeigen oder Bildern ohne festgelegte Abmessungen oder andere Dinge. Und das verursacht eine wirklich unangenehme Erfahrung.

Addy Osmani: Die kumulative Layoutverschiebung versucht also, die Instabilität des Inhalts zu messen. Und oft sind es Bilder oder andere Elemente auf Ihrer Seite, die einfach keine Bemaßung festgelegt haben, was Ihre Layoutänderungen vorantreibt. Ich denke, das ist einer der Orte, an denen es für die Leute oft einfach ist, die Bildabmessungen festzulegen. Vielleicht ist es etwas, wovon wir in der Vergangenheit nicht so viel gemacht haben, aber sicherlich etwas, wofür es sich lohnt, Ihre Zeit zu verbringen. In Tools wie Lighthouse wird versucht, Ihnen beim Sammeln zu helfen, wie lautet die Liste der Bilder auf Ihrer Seite, die Abmessungen erfordern? Sie können also gehen und sie einstellen.

Drew McLellan: Ich wollte sagen, das ist ein wirklich interessanter Punkt, denn als Responsive Webdesign eine Sache wurde, gingen wir alle unsere Websites durch und entfernten Bilddimensionen, weil die Tools, die uns zur Verfügung standen, um diese Arbeit zu machen, dies erforderten Unsere Bilder haben keine Höhen- und Breitenattribute. Aber das ist jetzt eine schlechte Idee, oder?

Addy Osmani: Was alt ist, ist wieder neu. Ich würde sagen, dass es sich auf jeden Fall lohnt, die Abmessungen Ihrer Bilder festzulegen. Legen Sie die Abmessungen für Ihre Anzeigen, Ihre Augenrahmen und alles, was dynamischer Inhalt ist, dessen Größe sich möglicherweise ändern könnte, fest, es lohnt sich, die Abmessungen festzulegen.

Addy Osmani: Und für Leute, die wirklich lustige Erlebnisse da draußen aufbauen, ist da draußen der falsche Ausdruck, wirklich lustige Layout-Erlebnisse, bei denen Sie vielleicht etwas mehr an responsiven Karten und dergleichen arbeiten müssen; Ich würde erwägen, CSS-Seitenverhältnis- oder Seitenverhältnis-Boxen zu verwenden, um Ihren Platz zu reservieren. Und das kann auch die Einstellung der Abmessungen für diese Bilder ergänzen, um sicherzustellen, dass die Dinge so fest wie möglich sind, wenn Sie versuchen, Ihre Layoutverschiebungen zu vermeiden.

Addy Osmani: Und dann, endlich, letztes Core Web Vital, erste Eingangsverzögerung. Das ist etwas, woran die Leute nicht unbedingt immer denken, wenn es um Bilder geht. Es ist also tatsächlich möglich, dass Bilder die Bandbreite und CPU eines Benutzers beim Laden der Seite blockieren. Sie können das Laden anderer kritischer Ressourcen behindern, insbesondere bei wirklich langsamen Verbindungen oder auf Mobilgeräten der unteren Preisklasse, was zu einer Bandbreitensättigung führen kann.

Addy Osmani: Die erste Eingabeverzögerung ist also eine Core Web Vital-Metrik, die den ersten Eindruck des Benutzers von der Interaktivität und Reaktionsfähigkeit einer Website erfasst. Indem Sie also die CPU-Auslastung des Hauptthreads reduzieren, kann Ihre erste Eingabeverzögerung auch irgendwie minimiert werden. Vermeiden Sie also im Allgemeinen Bilder, die Netzwerkkonflikte verursachen könnten. Sie blockieren nicht. Sie können sich jedoch immer noch indirekt auf Ihre Renderleistung auswirken.

Drew McLellan: Gibt es irgendetwas, was wir mit Bildern tun können, um zu verhindern, dass sie beim Rendern blockiert werden? Können wir den Browser in dieser Anfangsphase irgendwie entlasten, damit wir schneller interaktiv werden können?

Addy Osmani: Ich denke, dass es heutzutage immer wichtiger wird, ein gutes Verständnis für die richtige optimale Bildsequenz zu haben, um etwas „above the fold“ anzuzeigen. Ich weiß, dass "above the fold" ein überladener Begriff ist, aber wie im ersten Ansichtsport des Benutzers. Sehr oft können wir versuchen, eine ganze Menge Ressourcen anzufordern, von denen einige Bilder sind, die für das, was der Benutzer sofort sehen wird, nicht wirklich notwendig sind. Und diese sind in der Regel großartige Kandidaten für das spätere Laden im Lebenszyklus der Seite, großartige Dinge, um sie an Ort und Stelle zu laden. Wenn Sie jedoch sehr früh eine ganze Reihe von Bildern anfordern, z. B. eine ganze Reihe von Dingen, können diese möglicherweise Auswirkungen haben.

Drew McLellan: Ja. Also, ich meine, Sie haben das faule Laden von Bildern erwähnt, für das wir in der Vergangenheit eine JavaScript-Bibliothek benötigt haben, was seine eigenen Rückschläge hat, denke ich, aufgrund historischer Methoden, mit denen Browser das Laden von Bildern optimieren, bei denen es fast unmöglich ist, sie daran zu hindern, Bilder zu laden , es sei denn, Sie geben einfach keine Quelle an. Und wenn Sie keine Quelle angeben und anschließend versuchen, es mit JavaScript zu korrigieren, wenn dieses JavaScript nicht ausgeführt wird, erhalten Sie keine Bilder. Also Lazy Loading, natives Lazy Loading ist eine Antwort auf all das.

Addy Osmani: Ja, absolut. Und ich denke, dass dies ein Punkt ist, an dem wir versucht haben, das native Lazy-Loading-Erlebnis im letzten Jahr browserübergreifend zu verbessern. Wie Sie wissen, ist dies eine dieser Funktionen, bei denen wir etwas früher ausgeliefert haben und wir in der Lage sind, Gespräche mit Vordenkern in der Branche zu nutzen, um zu verstehen wie: „Oh, hey, was sind die Schwellenwerte, die Sie tatsächlich manuell festlegen wenn Sie Lazy-Sizes oder die Lazy-Loading-Bibliotheken anderer JavaScripts verwenden?“ Und dann haben wir unsere Schwellenwerte angepasst, um zu versuchen, dem, was Sie erwarten, etwas näher zu kommen.

Addy Osmani: In vielen Fällen können Sie also einfach natives Lazy Loading verwenden. Wenn Sie etwas viel Verfeinertes brauchen, wenn Sie viel mehr Kontrolle darüber haben müssen, wie Sie die Schnittpunkt-Beobachterschwellenwerte festlegen können, den Zeitpunkt, an dem der Browser Dinge anfordern wird, empfehlen wir im Allgemeinen, in diesen Fällen eine Bibliothek zu verwenden , nur weil wir versuchen, den 90 %-Use-Case zu lösen. Aber die 10% sind immer noch gültig. Es mag Menschen geben, die noch etwas mehr brauchen. Und so hoffe ich für die meisten Menschen, dass natives Lazy Loading auf absehbare Zeit gut genug sein wird.

Drew McLellan: Vor allem ist es kostenlos. Ein einfaches Attribut zum Hinzufügen, und Sie erhalten all diese Funktionen kostenlos, was großartig ist. Wenn es eine Sache gäbe, die unsere Zuhörer tun könnten, weggehen und auf ihrer Website etwas tun könnten, um ihre Bildoptimierung zu verbessern, was wäre das? Wo sollen sie anfangen?

Addy Osmani: Ein guter Ausgangspunkt ist, zu verstehen, wie groß das Problem für Ihre Website ist. Ich würde mir entweder Lighthouse ansehen oder Speed ​​Insights bezahlen. Führen Sie es auf einigen Ihrer beliebtesten Seiten aus und sehen Sie, was dabei herauskommt. Wenn es so aussieht, als hätten Sie nur ein oder zwei kleine Dinge zu tun, ist das fantastisch. Vielleicht kannst du da etwas Zeit investieren.

Addy Osmani: Wenn es eine lange Liste von Dingen gibt, die Sie tun müssen, werfen Sie vielleicht einen Blick auf die höchsten Gelegenheiten, die Sie dort haben, Dinge, die sagen: „Oh, hey, Sie könnten mehrere Sekunden sparen, wenn Sie dies tun würden Ding." Und konzentrieren Sie Ihre Energie zunächst darauf.

Addy Osmani: Wie wir hier bereits besprochen haben, sind die Tools für moderne Bildformate im Laufe der Zeit immer besser geworden. Image CDNs können durchaus eine Überlegung wert sein. Aber darüber hinaus gibt es viele kleine Schritte, die Sie tun können. Manchmal, wenn es sich um eine Website handelt, die klein genug ist, kann es ein guter Ausgangspunkt sein, einfach nur Squoosh zu öffnen und ein paar Ihrer Bilder dort durchzugeben.

Drew McLellan: Das ist ein solider Ratschlag. Jetzt weiß ich, dass es eine großartige Veröffentlichung ist, aber ich muss Ihnen wirklich zu dem Buch gratulieren. Es ist einfach so umfassend und wirklich leicht zu verdauen. Ich finde, es ist eine wirklich wertvolle Lektüre.

Drew McLellan: Ich habe also alles über Bildoptimierung gelernt. Was hast du in letzter Zeit gelernt, Addy?

Addy Osmani: Was habe ich in letzter Zeit gelernt? Eigentlich zu einem etwas anderen Thema, das immer noch mit Bildern zu tun hat. Als ich also meinen Master am College machte, habe ich mich wirklich tief mit Computer Vision beschäftigt und versucht zu verstehen, wie wir verschiedene Teile eines Bildes erkennen und wild machen können interessante Dinge mit ihnen?

Addy Osmani: Und ein spezielles Problem, mit dem ich mich in letzter Zeit beschäftigt habe, ist, dass ich mir Bilder von mir angesehen habe, als ich ein Baby oder ein Kind war. Und damals waren viele Lebensmittel, die meine Eltern zu sich nahmen, nicht unbedingt auf Digitalkameras. Es waren Polaroids. Sie sind oft Bilder mit etwas niedriger Auflösung. Und ich wollte eine Möglichkeit, diese zu skalieren. Und so fing ich vor kurzem wieder an, mich mit diesem Problem zu beschäftigen. Und es führte dazu, dass ich viel mehr darüber lernte, was ich im Browser tun kann.

Addy Osmani: Also habe ich einige kleine Tools entwickelt, mit denen Sie mithilfe von maschinellem Lernen, mithilfe von TensorFlow und mithilfe vorhandener Technologien ein Bild oder eine Illustration mit relativ niedriger Auflösung aufnehmen und diese dann auf etwas mit viel höherer Qualität hochskalieren können. Damit es besser ist, als einfach nur das Bild zu strecken. Es ist, als würde man tatsächlich Details ausfüllen.

Addy Osmani: Und das hat irgendwie Spaß gemacht. Ich habe viel darüber gelernt, wie stabil Webassembly jetzt browserübergreifend ist und wie gut Sie einige dieser Ideen für Anwendungsfälle von Desktop-Anwendungen verwenden können. Und das hat richtig Spaß gemacht. Also habe ich mich in letzter Zeit viel mit Webassembly beschäftigt. Und das war cool.

Drew McLellan: Es ist lustig, nicht wahr? Wenn eine Technologie auftaucht, die alles, was Sie wissen, auf den Kopf stellt. Wir haben immer gesagt, dass wir im Web Bilder kleiner machen können. Aber wenn wir nur ein kleines Bild haben, können wir es nicht größer machen. Es ist einfach unmöglich. Aber jetzt haben wir eine Technologie, die das unter vielen Umständen möglich machen könnte. Es ist wirklich faszinierend.

Drew McLellan: Wenn Sie, lieber Zuhörer, mehr von Addie hören möchten, finden Sie ihn auf Twitter, wo er @AddieOsmani ist, und finden Sie alle seine Projekte, die von AddyOsmani.com verlinkt sind. Das Buch „Image Optimization“ ist ab sofort sowohl physisch als auch digital von Smashing unter smashingmagazine.com erhältlich. Danke, dass du heute dabei bist, Addy. Hast du Abschiedsworte?

Addy Osmani: Irgendwelche Abschiedsworte? Ich habe eine kleine Macke aus der Geschichte, die ich mit den Leuten teilen werde. Tim Berners-Lee hat 1992 das allererste Bild ins Internet hochgeladen. Ich bin mir nicht sicher, ob Sie erraten können, was es war, aber Sie werden wahrscheinlich überrascht sein. Drew, hast du irgendwelche Vermutungen?

Drew McLellan: Ich tippe auf eine Katze.

Addy Osmani: Eine Katze. Es ist eine gute Vermutung, aber nein. Das war am CERN. Und das Bild war tatsächlich von einer Band namens Les Horribles Cernettes, einer Parodie-Pop-Band, die von einem Haufen CERN-Mitarbeiter gegründet wurde. Und die Musik, die sie machen würden, ist wie Doo-Wop-Musik. Und sie sangen Liebeslieder über Collider und Macken und flüssigen Stickstoff und Antimaterie in Sechzigerjahre-Outfits, die ich einfach wunderbar und zufällig fand.