A normal image

Picture / lazysizes auto / SVG with embedded preview img Fluid source  Parsed Fluid
Bild 1: picture Tag mit lazysizes.js und sizes="auto". SVG Placeholder mit embedded preview image.

Picture mit 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 ein SVG-Placeholder Image angegeben, das die korrekten Bilddimensionen 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.

Im Placeholder SVG wird mit <image xlink:href="data:" eine verkleinerte Version des Bilds eingebettet.

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 verhinder dadurch Sprünge im Layout, wenn ein Bild geladen wurde (Page Reflows/Redraws)
  • indem das Vorschaubild in das SVG eingebettet wird belegt es exakt die vom SVG vorgegebenen Dimensionen, Page Reflows damit vermieden
  • gefühlt schnellere Ladezeiten, da das Placeholder Bild sich direkt inline im Markup befindet und sofort da ist.
  • 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 3kb pro Placeholder-SVG mit eingebettetem Vorschaubild.

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.