Bildgrößen Einstellungen / webp / Device Pixel Ratio / Vorgehensweise
Hallo,
ich spiele lokal etwas mit den Bildgrößen Einstellungen und würde dazu gerne eure Vorgehensweisen erfahren.
Zum Test habe ich folgenden Output:
HTML-Code:
<div class="col-sm-6 col-md-3 ">
<div class="ce_image block">
<figure class="image_container">
<picture>
<source srcset="assets/images/3/demo-800-7fea6f29.webp 800w, assets/images/1/demo-800-e27f58ca.webp 400w" sizes="(min-width: 550px) 400px, 800px" type="image/webp">
<img src="assets/images/4/demo-800-e512523a.jpg" srcset="assets/images/4/demo-800-e512523a.jpg 800w, assets/images/e/demo-800-48f6866e.jpg 400w"
sizes="(min-width: 550px) 400px, 800px" width="800" height="600" alt="" itemprop="image">
</picture>
</figure>
</div>
</div>
Ich verwende zum Test ein Photo in einem 4Spalten/2Spalten/1Spalten Grid. Das Ausgangs Bild hat die Ausmaße von 800x600 Pixel.
In den Chrome DevTools erhalte ich die currentSrc Angaben wie erwartet:
- Auf dem Desktop (DPR Faktor 1) ab 550px (in den mehspaltigen Grid) das 400er Image, ansonsten das 800er.
- Bei der mobilen Simulation (DPR Faktor 2) immer das 800er
Eigentlich müßte man für letztere ja mit einem Original Bild von 1600x1200 arbeiten und in den Bildgrößen für "Pixeldichte/Skalierungsfaktor" dann mit "0.5x, 1x, 2x".
Allerdings ist die Dateigröße für das 2x auch als .jpg groß und eigentlich für mobile Geräte nicht zu empfehlen. Diesbezüglich ist die .webp Ausgabe/Datei Größe zwar besser - Aber:
Nutzt wenig wenn Safari/ios-Safari webp nicht unterstützen s.: https://caniuse.com/#feat=webp
Also entweder scharfe Bilddarstellung vs. Dategröße (von 3.x gar nicht zu reden) ...
Wie geht Ihr damit um?
