Ich suche nach einer guten Lösung für Responsive Image und Lazy Loading wie man es heute umsetzt.
Seit langer Zeit verwende ich immer data-src mit javaScript
:
HTML-Code:
<a href="/here-is-a-link/" title="Test Image">
<img
src="https://xhtmlforum.de/.../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133.jpg"
data-src=".../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133a.jpg"
data-bigger=".../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133b.jpg"
data-large=".../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133.jpg"
data-medium=".../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133f.jpg"
data-small=".../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133e.jpg"
title="Test Image"
alt="Test Image"
class="lazyload img-fluid border-0 rounded-0 mb-6"
data-preload="true"
style="opacity: 1;"
>
<noscript>
<img src="https://xhtmlforum.de/.../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133.jpg" title="" alt="" />
</noscript>
</a>
In diesem Beispiel scheidet und verkleinert mir das CMS die Bilder in den richtigen Auflösungen / Größen.
Gibt es denn mittlerweile bessere Lösungen?
Besonders was den Suchmaschinen gefällt und den Pagespeed verbessert?