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 wird hier von dem Script das sizes-attribut auf "auto" gesetzt. Für srcset wird eine verkleinerte Version des anzuzeigenden Bilds als base64 kodiert direkt inline angegeben, das (annähernd) 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.

Tip: In den Developer Tools ansehen, wie das Tag von lazysizes nach dem Laden der Seite geändert wird.

• 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

• 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.