Picture mit Image Placeholder, lazysizes.js und sizes="auto"

Das Bild 1 benutzt das picture-Tag und kommt aus einem Typo3 Default-Contentelement vom CType 'image', ist also vom Editor pflegbar. Das Bild sitzt in einer 50% breiten Spalte, auf kleineren Bildschirmen bricht es dann auf 100% Breite um.

Durch die Nutzung von lazysizes.js kann hier das sizes-attribut auf "auto" gesetzt werden. Für srcset wird eine verkleinerte Version des anzuzeigenden Bilds als base64 kodiert direkt inline angegeben, das die korrekte Aspect-Ratio besitzt. Wird die Seite geladen, dann läd der Browser zunächst dieses Placeholderbild. Sobald die Seite geladen ist, ersetzt lazysizes.js das sizes-Attribut durch die tatsächliche Breite des Bilds sowie das Placeholderbild in srcset durch die unter data-srcset angegebenen Kandidaten.

<picture>
    <source media="(max-width: 767px)"
            data-srcset="{ai:getSrcset(file:file, cropVariant: 'mobile', widths:'240,360,480,768', debug:debug)}"
            srcset="{ai:placeholder.image(image: file, width: 192, cropVariant: 'mobile')} 1w"
    >
    <f:media file="{file}"
             class="image-embed-item lazyload img-responsive"
             width="{dimensions.width}"
             alt="{file.alternative}"
             title="{file.title}"
             data="{
                'img-debug':'{jsdebug}',
                'sizes': 'auto',
                'srcset': '{ai:getSrcset(file:file, widths:\'1024,1440,1920\', debug:debug)}'
             }"
             additionalAttributes="{
                'sizes':'100vw',
                'srcset': '{ai:placeholder.image(image: file, width: 192)} 1w'
             }"
    />
</picture>

Plus

  • der Entwickler und Editor müssen dem Browser nicht mehr mit dem sizes-Attribut mitteilen, wie groß das Bild dargestellt wird, das erledigt nun lazysizes.js für uns. Dadurch entfällt sehr viel Komplexität: es funktioniert einfach.
  • lazy loading bekommt man automatisch dazu
  • das Placeholder Bild belegt den Platz fürs Bild vor und verhindert dadurch Sprünge im Layout, wenn ein Bild geladen wurde (Page Reflows/Redraws)
  • gefühlt schnellere Ladezeiten, da das Placeholder Bild sich direkt inline im Markup befindet und sofort da ist, wenn auch noch sehr verschwommen.
  • SEO-Probleme durch den Placeholder umschifft lazysizes.js, zumindest die Google-Bildersuche hat damit keine Probleme.
  • tatsächlich schnellere Ladezeiten durch das lazy loading

Minus

  • Funktioniert nicht ohne JavaScript. In dem Fall zeigt der Browser nur das Placeholder-Bild. Workarounds: noscript-Tag und/oder .js/.no-js-Klassen im html Tag, wenn man Fallbacks für User ohne JavaScript oder mit Scriptblockern (noScript, uMatrix etc.) braucht.
  • Placeholder sind direkt inline im Markup, die aufgerufene html-Datei wird dadurch etwas grösser: ca 1-2 kByte pro Placeholder-Image.

Wann verwenden?

Vor allem immer dann, wenn man die finale Grösse eines Bilds über die Breakpoints hinweg nicht kennt und automatisch bestimmen kann. Das betrifft vor allem alle Bilder, die ein Editor im Backend auf vielfältige Art in Spalten einfügen und anordnen kann.