Hallo,
mir ist auf der Produkt-Detailseite aufgefallen, dass die Thumbnail Bilder zwar mittels srcset ausgegeben werden, dies aber viel zu groß ist.
<img src="https://showpare6.local:9998/media/ec/28/76/1620722445/dummy-product-side-front.jpg" srcset="https://showpare6.local:9998/thumbnail/ec/28/76/1620722445/dummy-product-side-front_1920x1920.jpg 1920w, https://showpare6.local:9998/thumbnail/ec/28/76/1620722445/dummy-product-side-front_800x800.jpg 800w, https://showpare6.local:9998/thumbnail/ec/28/76/1620722445/dummy-product-side-front_400x400.jpg 400w" sizes="200px" class="gallery-slider-thumbnails-image loaded tns-complete" alt="Dummy Product" title="Dummy Product" itemprop="image">
Das macht an der Stelle absolut keinen Sinn.
Die Thumbnails werden in 80x80 px im Theme ausgegeben.
Wenn ich die Seite nun aber auf einem Retina Display aufrufe, wird das Thumbnail über die URL „https://showpare6.local:9998/thumbnail/ec/28/76/1620722445/dummy-product-side-front_1920x1920.jpg“ geladen.
Das heißt das Bild wird in 80x80 angezeigt, wird aber in 1920x1920 geladen.
Verfehlt das nicht absolut den Sinn eines Thumbnails?
Auf Desktop Geräten mit einer schnellen Internet Verbindung klappt das vielleicht, aber selbst Mobile Geräte oder z.B. Tablets, laden das Bild in einer viel zu großen Auflösung.
Wodurch die Seite und die Darstellung der Thumbnails natürlich länger lädt als notwendig.
Die Größe der Thumbnails hat hier doch keinerlei Relevanz zu der Bildschirm-Auflösung meines Gerätes?
Auch wenn ich ein 8k Display mit 4000x4000 hätte, würde ich das Thumbnail, das nur in 80x80 angezeigt wird, weiterhin nicht in 1920x1920 laden wollen.
Gibts hierfür vielleicht einen logischen Grund, der sich mir nur nicht erschließt?
Verwendet wird Shopware v6.4.7.0 Stable Version
1 „Gefällt mir“
ping Sonst keiner dem dieser Fehler aufgefallen ist?
Dem Standard-Theme fehlt einfach das sizes Attribut. Das kann man innerhalb 5 Minuten im Theme im Listing nachtragen.
Ich verstehe nicht so ganz, welches Size Attribute fehlt und inwiefern löst es die Problematik dass die Thumbnails in einer viel zu großen Auflösung dargestellt werden?
Das sizes Attribut gibt vor, welche Größe der in srcset angegebenen Bildern geladen werden soll. Wird dieses Attribut nicht angegeben, lädt der Browser automatisch das Bild aus dem srcset das passend zur Bildschirmgröße ist und nicht passend zur Anzeigegröße.
1 „Gefällt mir“
Hallo zusammen, ich stehe vor dem gleichen Problem.
Obwohl in der cms-element-image-gallery.html.twig 120px als Referenz angegeben wird lädt Google Chrome das größte Thumbnail (1920x1920.jpg)
{% sw_thumbnails 'gallery-slider-thumbnails-image-thumbnails' with {
media: image,
sizes: {
'default': '120px'
}
} %}
Die Ausgabe im Html sieht so aus:
<img src="/media/ff/c1/1d/1672934242/ass-savers-win-wing-gravel-detour_e2d3ee93d5f8ca309903a4ced7609bfd.jpg"
srcset="
/thumbnail/ff/c1/1d/1672934242/ass-savers-win-wing-gravel-detour_e2d3ee93d5f8ca309903a4ced7609bfd_400x400.jpg 400w,
/thumbnail/ff/c1/1d/1672934242/ass-savers-win-wing-gravel-detour_e2d3ee93d5f8ca309903a4ced7609bfd_800x800.jpg 800w,
/thumbnail/ff/c1/1d/1672934242/ass-savers-win-wing-gravel-detour_e2d3ee93d5f8ca309903a4ced7609bfd_1920x1920.jpg 1920w,
/thumbnail/ff/c1/1d/1672934242/ass-savers-win-wing-gravel-detour_e2d3ee93d5f8ca309903a4ced7609bfd_1280x1280.jpg 1280w,
/thumbnail/ff/c1/1d/1672934242/ass-savers-win-wing-gravel-detour_e2d3ee93d5f8ca309903a4ced7609bfd_120x120.jpg 120w"
sizes="120px"
class="gallery-slider-thumbnails-image tns-complete"
alt="Ass Savers Win Wing Gravel Hinterrad Schutzblech"
title="ass-savers-win-wing-gravel-detour_e2d3ee93d5f8ca309903a4ced7609bfd"
itemprop="image">
Was mich wundert ist, dass es im Configurator aber funktioniert und das 120x120.jpg geladen wird.
Dort sieht der Code in der configurator.html.twig so aus:
{% sw_thumbnails 'configurator-option-img-thumbnails' with {
media: media,
sizes: {
'default': '120px'
},
attributes: {
'class': 'product-detail-configurator-option-image',
'alt': option.translated.name,
'title': option.translated.name
}
} %}
und die Ausgabe im Html so:
<img src="/media/98/80/e6/1672933045/ass-savers-win-wing-gravel-spektrum_1248828553045b899c2f5a1be6f001d1.jpg"
srcset="
/thumbnail/98/80/e6/1672933045/ass-savers-win-wing-gravel-spektrum_1248828553045b899c2f5a1be6f001d1_400x400.jpg 400w,
/thumbnail/98/80/e6/1672933045/ass-savers-win-wing-gravel-spektrum_1248828553045b899c2f5a1be6f001d1_800x800.jpg 800w,
/thumbnail/98/80/e6/1672933045/ass-savers-win-wing-gravel-spektrum_1248828553045b899c2f5a1be6f001d1_1920x1920.jpg 1920w,
/thumbnail/98/80/e6/1672933045/ass-savers-win-wing-gravel-spektrum_1248828553045b899c2f5a1be6f001d1_1280x1280.jpg 1280w,
/thumbnail/98/80/e6/1672933045/ass-savers-win-wing-gravel-spektrum_1248828553045b899c2f5a1be6f001d1_120x120.jpg 120w"
sizes="120px"
class="product-detail-configurator-option-image"
alt="Spektrum"
title="Spektrum">
Gruß Mattes
Was soll an dem HTML nun falsch sein? Es macht doch, was es soll.
Wieso Chrome etwas anderes lädt hat zwei Ursachen:
- Bilder im Cache werden immer bevorzugt geladen
- Retina Displays laden bis zu 4fach größere Bilder
1 „Gefällt mir“
Mein Problem ist, dass Google Pagespeed bemängelt, dass die kleinen Thumbnails falsch dimensioniert sind.
In dem Screenshot steht auch nichts mehr von 120px.
Hier wird zum einen mit min-width gearbeitet, d.h. die Logik wird umgedreht. Es müsste als img src das kleinste Thumbnail angegeben werden.
Und bei srcset, das Kleinste was ich sehe ist 768px. Das vierfach für Retina und schon sind wir wieder bei 1280px.
1 „Gefällt mir“
