<picture> oder srcset?

[mmild]

Hallo zusammen,

Ich betreibe einen Webshop und stelle in den Übersichtskategorien Bilder dar, die je nach Breite bzw. Gerät gegen angepasste Versionen ausgetauscht werden sollen. Umgesetzt habe ich das aktuell über einen <picture> Container mit 2 Bildquellen (source) für die Large & Medium Größe der Bilder, sowie einer img Quelle in der kleinsten Auflösung als Fallback.

Das gleiche ließe sich auch mit einem srcset in einem img Tag erledigen. Nun stellt FF sowie Chrome das am Desktop in beiden Varianten problemlos dar, allerdings wird am Smartphone in Chrome bzw FF nur die <picture> Variante korrekt dargestellt. das srcset lädt immer die größte AUflösunf und damit auch die größte Datei.

Hat hier jemand Erfahrung mit diesem Verhalten, bzw. was ist die mittlerweile 2018 bessere Variante?

LG

PS: Hier eine Quelle: https://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/

 

[owieortho]

Hast Du bei der Verwendung des srcset-Attributs auch das size-Attribut verwendet? Hier der Vergleich:

 <picture>
  <source media="(min-width: 700px)" srcset="img_700.jpg">
  <source media="(min-width: 350px)" srcset="img_350.jpg">
  <img src="img_fallback.jpg">
</picture>

<img src="img_fallback.jpg" 
     srcset="img_350.jpg 350w, img_700.jpg 700w"

     sizes="(min-width: 350px) 350px,
            (min-width: 700px) 700px">

Schönen Tag noch
O.

 

[Myhar]

In 2018 gilt, wie auch schon in den Jahren zuvor: Man soll das verwenden, was angebracht ist. picture und img + srcset (+sizes) sind zwei unterschiedliche Anwendungsfälle.
Geht es dir nur um verschiedene Größen eines Bildes, dann reicht img alleine aus. Möchtest du unterschiedliche Formate, unterschiedliche Filetypes (zb svg oder png für unterschiedliche devices ), etc an einer Stelle einsetzen, dann verwende picture (mit polyfill)
Mit beiden haben aktuelle Browser keine Probleme, sofern sie korrekt implementiert sind.
Für <picture> gibt es polyfills damit auch nicht ganz aktuelle Browser (IE) damit zurecht kommen.

 

[mmild]

Vielen Dank für eure Antworten,

Leider aber funktioniert es trotzdem nicht so wie ich meine dass es sollte:

Mein Code ist folgender:

<img src="bild-small.jpg"
             srcset="bild-small.jpg 480w,
                          bild-medium.jpg 768w,
                          bild-large.jpg 992w"
             sizes="(max-width: 480px) 480px,
                         (min-width: 992px) 100vw"
             class="img-responsive"
             alt="bilder-alttag">
     </div>

Nun ist am Desktoprechner die Anzeige völlig korrekt. Zwar lädt Chrome nicht automatisch nach, FF schon..aber die grundsätzliche Funktion stimmt. - Am Smartphone laden aber beiden Browser wieder (oder noch immer) das größte Bild - egal ob ich die Seite mit einem Smartphone oder einem Tablet aufrufe.

Wenn ich hingegen <picture> verwenden, wird auch am Smartphone das korrekte Bild ausgewählt.

Zum Vergleich:

<picture>
        <source srcset="bild-large.jpg" media="(min-width: 992px)">
        <source srcset="bild-medium.jpg " media="(min-width: 768px)">
        <img src="bild-small.jpg" />
    <picture>

Völlig unklar ist mir, wo der Fehler liegt. Ist mein Code für srcset falsch oder sind schlichtweg die mobilen Browser unfähig? Laut caniuse.com sollte beides in allen von mir benutzten Browsern funktionieren....

 

[Myhar]

Man sollte, soweit ich weiß, zuerst srcset angeben und danach erst src. Sonst laden die Browser das Bild unter src runter und dann, wenn etwas bei srcset zutrifft, dieses ebenso. Siehe auch https://www.smashingmagazine.com/2013/05/how-to-avoid-duplicate-downloads-in-responsive-images/

Auch sind deine mediaqueries bei deinen Beispielen doch nicht ident, kann es daran liegen?

 

[mmild]

Man sollte, soweit ich weiß, zuerst srcset angeben und danach erst src. Sonst laden die Browser das Bild unter src runter und dann, wenn etwas bei srcset zutrifft, dieses ebenso. Siehe auch https://www.smashingmagazine.com/2013/05/how-to-avoid-duplicate-downloads-in-responsive-images/

Auch sind deine mediaqueries bei deinen Beispielen doch nicht ident, kann es daran liegen?

Im Falle von <picture> ja, da der Browser hier der Reihenfolge nach lädt. Im Falle von <img> sollte es egal sein, ich habs aber trotzdem probiert und auch hier wieder das gleiche Verhalten. Desktop läuft, Mobil läuft nicht. Ich denke ich werde einfach bei <picture> bleiben, da läufts ja ohne Probleme.

 

[Myhar]

Und was ist mit dem letzten Satz, dass deine mq nicht gleich aussehen?
Kannst du vllt irgendwo eine Versuchsseite mit deinem Problem online stellen (inkl verfügbarer Bilder) damit man da genauer helfen kann?

 

[mmild]

dass deine mq nicht gleich aussehen

Was meinst du mit "gleich"? Ich hab alle Varianten durch. von 3 mq mit min-width bis hin zur o.a. variante.

Hier die betreffende Domain. Ich hab beides untereinander laufen. Die Bildergrößen sind:

Small 480 px
Medium: 768 px
Large: 1280 px