In diesem Artikel werde ich 8 Techniken zur Optimierung des Bildladens vorstellen, die die erforderliche Netzwerkbandbreite und Prozessorlast reduzieren, wenn sie auf dem Bildschirm angezeigt werden. Hier sind einige Beispiele für kommentiertes HTML, um Ihnen die Reproduktion zu erleichtern. Einige Techniken sind seit langem bekannt, andere sind erst vor relativ kurzer Zeit aufgetaucht. Im Idealfall sollte Ihr bevorzugter Mechanismus zum Veröffentlichen von Webdokumenten (z. B. ein CMS, ein statischer Site-Generator oder ein Webanwendungsframework) all dies sofort erledigen.



Zusammen optimieren die Techniken alle Elemente von Google Core Web Vitals durch:

• Minimierung größerer Inhaltsprobleme ( Largest Contentful Paint (LCP) ) durch Größenreduzierung, Caching und verzögertes Laden;
• Beibehaltung der kumulativen Layoutverschiebung von Null ( Cumulative Layout Shift (CLS) );
• Reduzieren der Verzögerung des ersten Eingangs ( First Input Delay (FID) ) durch Reduzieren des Prozessorverbrauchs (für den Hauptausführungsthread).

Sehen Sie sich den Quellcode zum Laden dieses Bildes an, um alle Techniken in Aktion zu sehen:

https://www.industrialempathy.com/img/remote/ZiClJf.jpg
<img loading="lazy" decoding="async" style="background-size: cover; background-image: none;" src="/img/remote/ZiClJf.avif" alt="Sample image illustrating the techniques outlined in this post." width="4032" height="2268">

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Optimierungstechniken

Reaktionsschnelles Layout

Diese einfache Technik ermöglicht es dem Bild, den verfügbaren horizontalen Raum einzunehmen, während das Seitenverhältnis beibehalten wird. Im Jahr 2020 haben Browser gelernt, den richtigen vertikalen Platz für ein Bild zu reservieren, bevor es geladen wird, wenn das Element img



Attribute width



und enthält height



. Dies vermeidet die kumulative Verschiebung des Layouts.

<style>
 img {
   max-width: 100%;
   height: auto;
 }
</style>
<!-- Providing width and height is more important than ever. -->
<img height="853" width="1280" … />

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Faules Rendern

Die zweite Technik ist komplizierter. Das neue CSS-Attribut content-visibility: auto



weist den Browser an, das Bild erst dann zu platzieren, wenn es fertig ist. Dieser Ansatz hat mehrere Vorteile, von denen der wichtigste darin besteht, dass der Browser, bis er ein verschwommenes Platzhalterbild oder das Bild selbst empfängt, es nicht dekodiert, wodurch Prozessorressourcen gespart werden.

Sie müssen keine intrinsische Größe mehr enthalten

In einer früheren Version des Artikels wurde erläutert, wie contain-intrinsic-size



der CLS-Effekt bei der Verwendung vermieden werden kann content-visibility: auto



. Bei Chromium 88 ist dies jedoch bei Bildern, für die width



und height



. Ab dem 27. Januar 2021, content-visibility: auto



noch nicht in anderen Browser-Engines implementiert , dürften sie dem Beispiel von Chromium folgen. Also ja, jetzt ist es viel einfacher!

<style>
 /* This probably only makes sense for images within the main scrollable area of your page. */
 main img {
   /* Only render when in viewport */
   content-visibility: auto;
 }
</style>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

AVIF

AVIF ist das neueste Grafikformat, das in Browsern unterstützt wird. Es wird jetzt in Chromium und in Firefox als Flag unterstützt. Safari funktioniert noch nicht damit, aber da Apple Teil der Gruppe ist , die das Format entwickelt hat, sollte dieser Browser in Zukunft auch AVIF unterstützen.



Dieses Format ist insofern bemerkenswert, als es JPEG weit überlegen ist. Dies ist im Vergleich zum WebP-Format günstig, da die Bilder nicht immer kleiner als JPEG sind und der Ressourcenverbrauch aufgrund der mangelnden Unterstützung für das fortschreitende Laden steigen kann.



Sie können eine progressive Erweiterung für AVIF implementieren picture



.



Das Element ist tatsächlich in img



verschachtelt picture



... Dies kann verwirrend sein, da es img



manchmal als Fallback-Lösung für Browser bezeichnet wird, die dies nicht unterstützen picture



. Tatsächlich hilft dieses Element jedoch nur bei der Auswahl src



und verfügt nicht über ein eigenes Layout. Das Element img



wird gezeichnet und Sie werden den Stil darauf anwenden.



Bis vor kurzem war es ziemlich schwierig, AVIF-Images auf der Serverseite zu implementieren, aber neuere Versionen von Bibliotheken wie scharf machten diese Aufgabe viel einfacher.

<picture>
 <source
   sizes="(max-width: 608px) 100vw, 608px"
   srcset="
     /img/Z1s3TKV-1920w.avif 1920w,
     /img/Z1s3TKV-1280w.avif 1280w,
     /img/Z1s3TKV-640w.avif   640w,
     /img/Z1s3TKV-320w.avif   320w
   "
   type="image/avif"
 />
 <!-- snip lots of other stuff -->
 <img />
</picture>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Laden der richtigen Pixelanzahl

Der obige Code hat Attribute srcset



und sizes



. Mithilfe eines Selektors w



teilen sie dem Browser anhand der physischen Pixelanzahl mit, welche URL zum Rendern des Bilds auf einem bestimmten Gerät verwendet werden soll. Dieser Betrag hängt von der Breite des Bildes ab, die anhand des Attributs berechnet wird sizes



(das ein Ausdruck aus der Medienabfrage ist).



Dies stellt sicher, dass der Browser immer das kleinstmögliche Bild lädt und die beste Qualität auf einem bestimmten Gerät bietet. Alternativ kann er das kleinste Bild auswählen, wenn der Benutzer den Datenspeichermodus aktiviert hat.

Fallback-Lösung

Für Browser, die nur ältere Bildformate unterstützen, können Sie mithilfe srcset



von:

<source
 sizes="(max-width: 608px) 100vw, 608px"
 srcset="
   /img/Z1s3TKV-1920w.webp 1920w,
   /img/Z1s3TKV-1280w.webp 1280w,
   /img/Z1s3TKV-640w.webp   640w,
   /img/Z1s3TKV-320w.webp   320w
 "
 type="image/webp"
/>
<source
 sizes="(max-width: 608px) 100vw, 608px"
 srcset="
   /img/Z1s3TKV-1920w.jpg 1920w,
   /img/Z1s3TKV-1280w.jpg 1280w,
   /img/Z1s3TKV-640w.jpg   640w,
   /img/Z1s3TKV-320w.jpg   320w
 "
 type="image/jpeg"
/>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Caching und unveränderliche URLs

Betten Sie in die Bild-URL einen Hash der Anzahl der Bytes ein, die das Bild belegt. Im obigen Beispiel habe ich es mit gemacht Z1s3TKV



. Wenn Sie das Bild ändern, ändert sich auch die URL. Dies bedeutet, dass Sie das unendliche Zwischenspeichern von Bildern anwenden können. Das Zwischenspeichern von Headern sollte so aussehen cache-control: public,max-age=31536000,immutable



.



immutable



Ist eine semantisch korrekte Bedeutung cache-control



, hat aber heute wenig Browserunterstützung (ich sehe dich an, Chrome). max-age=31536000



- Fallback-Caching-Methode während des ganzen Jahres. public



wird benötigt, damit Ihr CDN das Image zwischenspeichern und vom Netzwerkrand aus bereitstellen kann. Dieser Ansatz kann jedoch nur verwendet werden, wenn er nicht gegen Ihre Datenschutzrichtlinien verstößt.

Faules Laden

Durch Hinzufügen loading=«lazy»



zum Element img



weisen wir den Browser an, das Bild erst dann abzurufen, wenn es zum Rendern bereit ist.

<img loading="lazy" … />

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Asynchrone Entschlüsselung

Durch Hinzufügen decoding=«async»



zum Element img



ermöglichen wir dem Browser, das Bild außerhalb des Hauptstroms zu entschlüsseln, damit dieser Vorgang den Benutzer nicht stört. Diese Lösung sollte keine erkennbaren Mängel aufweisen, außer dass sie in älteren Browsern standardmäßig nicht immer anwendbar ist.

<img decoding="async" … />

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Verschwommener Stummel

Ein Fuzzy-Stub ist ein Inline-Bild, das dem Benutzer eine Vorstellung von einem vollwertigen Bild gibt, das später geladen wird, ohne Daten über das Netzwerk zu übertragen.



https://www.industrialempathy.com/img/blurry.svg





Einige Implementierungshinweise:

• Der Stummel ist wie background-image
  
  
  
  Bilder eingefügt . Mit dieser Technik können Sie das zweite HTML-Element löschen, indem Sie den Stub beim Laden des Hauptbilds buchstäblich ausblenden. Es wird kein JavaScript benötigt.
• Der Hauptbilddaten-URI wird in den SVG-Bilddaten-URI eingeschlossen. Dies geschieht, weil die Unschärfe auf SVG-Ebene erfolgt und kein CSS-Filter verwendet wird. Das heißt, die Unschärfe wird einmal für jedes Bild ausgeführt, wenn es von SVG gerastert wird, nicht für jedes Layout. Dies spart Prozessorressourcen.

<img
 style="
     …
     background-size: cover;
     background-image:
       url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http%3A//www.w3.org/2000/svg\'

xmlns%3Axlink=\'http%3A//www.w3.org/1999/xlink\' viewBox=\'0 0 1280 853\'%3E%3Cfilter id=\'b\' color-interpolation-filters=\'sRGB\'%3E%3CfeGaussianBlur stdDeviation=\'.5\'%3E%3C/feGaussianBlur%3E%3CfeComponentTransfer%3E%3CfeFuncA type=\'discrete\' tableValues=\'1 1\'%3E%3C/feFuncA%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter=\'url(%23b)\' x=\'0\' y=\'0\' height=\'100%25\' width=\'100%25\'
       xlink%3Ahref=\'data%3Aimage/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAIAAACepSOSAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAs0lEQVQI1wGoAFf/AImSoJSer5yjs52ktp2luJuluKOpuJefsoCNowB+kKaOm66grL+krsCnsMGrt8m1u8mzt8OVoLIAhJqzjZ2tnLLLnLHJp7fNmpyjqbPCqLrRjqO7AIeUn5ultaWtt56msaSnroZyY4mBgLq7wY6TmwCRfk2Pf1uzm2WulV+xmV6rmGyQfFm3nWSBcEIAfm46jX1FkH5Djn5AmodGo49MopBLlIRBfG8yj/dfjF5frTUAAAAASUVORK5CYII=\'%3E%3C/image%3E%3C/svg%3E');
   "
 …
/>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

(Optional) JavaScript-Optimierung

Browser können gezwungen sein, den verschwommenen Stub zu rastern, selbst wenn das Bild bereits geladen ist. Das Problem kann gelöst werden, indem die Rasterung beim Booten entfernt wird. Wenn Ihr Bild transparente Bereiche hat, ist diese Optimierung obligatorisch, andernfalls wird ein Stub durch das Bild angezeigt.

<sript>
 document.body.addEventListener(
   "load",
   (e) => {
     if (e.target.tagName != "IMG") {
       return;
     }
     // Remove the blurry placeholder.
     e.target.style.backgroundImage = "none";
   },
   /* capture */ true
 );
</sript>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

zusätzlich

Ein nützliches Tool, das alle beschriebenen Optimierungen implementiert: elf-Hochleistungs-Blog