Hallo zusammen,
es geht nicht um eine mit Contao erstellte Seite. Ich versuche nur den Quelltext zu verstehen um beutreilen zu können, ob der das erzeugt was er soll.
Das Ziel war: Es sollen für unterschiedliche Endgeräte die passenden Bilder (Größe, Datenmenge) ausgespielt werden, sodass sich (durch geringe Dateigrößen) auch die Ladezeit der Seite verbessert. Der Inhalt des Bildes ist immer gleich, also kein "wichtiger Teil". So der Auftrag an die Agentur. Und es sollte "lazy-loading" genutzt werden.
Herausgekommen ist im Quellext folgendes:
Code:
<picture>
<source data-variant="default" data-maxwidth="1100" media="(min-width: 1200px)" srcset="/fileadmin/images/news/2023_News/Azubifoto_600x397.jpg 1x">
<source data-variant="large" data-maxwidth="920" media="(min-width: 992px)" srcset="/fileadmin/images/news/2023_News/Azubifoto_600x397.jpg 1x">
<source data-variant="medium" data-maxwidth="680" media="(min-width: 768px)" srcset="/fileadmin/images/news/2023_News/Azubifoto_600x397.jpg 1x">
<source data-variant="small" data-maxwidth="500" media="(min-width: 576px)" srcset="/fileadmin/_processed_/0/4/csm_Azubifoto_600x397_22b8fc58df.jpg 1x">
<source data-variant="extrasmall" data-maxwidth="374" srcset="/fileadmin/_processed_/0/4/csm_Azubifoto_600x397_0f116af9bf.jpg 1x">
<img loading="lazy" alt="12 Auszubildende starten in ihr erstes Jahr" src="/fileadmin/images/news/2023_News/Azubifoto_600x397.jpg" width="600" height="397">
</picture>
Und irgendwie habe ich den Eindruck, dass das nicht das von uns gewünschte ist. Erwartet hätte ich ein <img srcset> Element und kein <picture>. Es sollten ja keine unterschiedlichen Bilder ausgespielt werden, sondern ein und dasselbe Bild in angepasster Größe.
Habe ich einen Denkfehler oder die Agentur?
Danke & Gruß
Neelix