Responsive Bilder im Picture-Tag größer angezeigt als erwartet

[Failix]

Hallo zusammen,

ich habe ein Plugin (Easy Image Resizer) in Joomla 4 verwendet, um dieses Picture-Tag zu erstellen:

<picture class="responsive-image">
<source type="image/webp" 
srcset="/joomla/media/cached-resp-images/images/000/feuer-o_2000.webp?version=919f89595d0820237ff764fb0c08fb70 2000w, 
/joomla/media/cached-resp-images/images/000/feuer-o_1400.webp?version=3912bf077d9c6b40b33dc44400a457af 1400w, 
/joomla/media/cached-resp-images/images/000/feuer-o_1200.webp?version=894718617521a95ef571c7adffeb72fc 1200w, 
/joomla/media/cached-resp-images/images/000/feuer-o_992.webp?version=a5919e8e30597f99101ddb1f8987e921 992w, 
/joomla/media/cached-resp-images/images/000/feuer-o_768.webp?version=43489a55f65b70ced0e4f62a6c2341ff 768w, 
/joomla/media/cached-resp-images/images/000/feuer-o_576.webp?version=a3b1890ca4ce7cd89c68b8843dfb0479 576w, 
/joomla/media/cached-resp-images/images/000/feuer-o_320.webp?version=1df65941f2fc38a01581be66e43728be 320w">
<source type="image/jpeg"
srcset="/joomla/media/cached-resp-images/images/000/feuer-o_2000.jpg?version=8e626d730a19d416dbd15b7e19bfacb5 2000w, 
/joomla/media/cached-resp-images/images/000/feuer-o_1400.jpg?version=5096e8cd7226a13512ac1ca8c1ec5e1b 1400w, 
/joomla/media/cached-resp-images/images/000/feuer-o_1200.jpg?version=083e7d64570f0c6dd11b732b501e9b69 1200w, 
/joomla/media/cached-resp-images/images/000/feuer-o_992.jpg?version=bbdfaa6e185461391f9998b436ba6deb 992w, 
/joomla/media/cached-resp-images/images/000/feuer-o_768.jpg?version=67cb420e76caf6bc1f557df9b1267d42 768w, 
/joomla/media/cached-resp-images/images/000/feuer-o_576.jpg?version=9b4c969a828bba369893ad3cdc8c7299 576w, 
/joomla/media/cached-resp-images/images/000/feuer-o_320.jpg?version=df6c7887f6ad66511961d62e2538fbfc 320w">
<img width="6000" height="4000" decoding="async" src="/joomla/images/000/feuer-o.jpg" alt="" loading="lazy">
</picture>

Nun habe ich erwartet, dass bei einer Viewport-Breite von 350 px das 576 px breite Bild auf der Website angezeigt wird. Tatsächlich wird aber das 768 px breite Bild angezeigt, zumindest auf meinem Notebook-Bildschirm mit HD-Auflösung in den DevTools von Chrome.

Auf meinem Smartphone, das zwar eine höhere Auflösung hat, aber für CSS und Javascript einen nur 396 px breiten Viewport (Hochformat), wird sogar das 992 px breite Bild verwendet.

Könnte mir bitte jemand erklären, warum das so ist und warum nicht die meiner Meinung nach passenderen kleineren Bildvarianten verwendet werden? Vielen Dank!

Gruß
Felix

 

[AndreasB]

Hallo @Failix,

Viele Browser laden kleinere Bilder nicht nach, wenn schon größere geladen sind.
(Da sie davon ausgehen, dass es das Selbe Bild in unterschiedlichen Auflösungen / Größen ist und es sich daher nicht lohnt, eine kleinere Version nach zu laden.)

Wenn du es also testen möchtest, schalte in deinem Browser das Chaching aus und teste die Bildschirmbreiten von klein nach groß. Dann solltest du es sehen können.

Tip:
Wenn du der srcset Attribut mit Breitenangaben verwendest, verwende zusätzlich das sizes. Es kann nämlich sein, dass das srcset ignoriert wird, wenn kein sizes vorhanden ist.

 

[Failix]

Hallo zusammen und danke für Eure Antworten!

@Sclero2004 Verstehe ich es richtig, dass der Browser bei der Bildauswahl die tatsächliche Auflösung des Displays verwendet, also anders vorgeht, als wenn er das Bild von CSS vorgeschrieben kriegt?

@AndreasB Das mit dem Cache hatte ich bedacht - das zu große Bild wird bereits beim ersten Aufruf geladen. Leider kann ich den Quellcode vom Plugin nicht ändern, um "sizes" einzufügen.

 

[Failix]

Ja, die Ausgabe des Device-Pixel-Ratios (bei meinem Smartphone rund 2,73) erklärt einiges. Die Browser wählen die Bildgröße anhand dieses Wertes aus.

Allerdings tritt das doch das Prinzip, aus SEO-Gründen die Ladezeiten so gering wie möglich zu halten, mit Füßen. Wenn ich die Bilder händisch auf die gewünschten Abmessungen bringe und das CSS dazu schreibe, habe ich vielleicht nicht mehr die beste Bildqualität, aber definitiv die geringere Datenmenge.

Und mehr Arbeit, klar ...

 

[Failix]

Mein Notebook- und mein PC-Monitor haben beide Full HD. Da das Notebook wesentlich kleiner ist, wirkt der Bildschirm natürlich viel schärfer. Mittlerweile empfinde ich den großen PC-Monitor als unangenehm unscharf - früher, als ich nicht so viel vorm Notebook saß wie jetzt, hat mich das nicht gestört.

Was die Bilder angeht, werde ich mich für die besseren Ladezeiten entscheiden. Sie sind wichtig fürs Google-Ranking, die Bildschärfe nicht. Wo möglich, versuche ich einen Kompromiss.