Responsive Images Srcset συζητηση/γνωμες?

[Ruhl]

Θελω λιγο βοηθεια στην κατανοηση και την σωστη χρηση τους.

μετα απο καποια tutorial και αρθρα
https://www.udacity.com/course/responsive-images--ud882
https://ericportis.com/posts/2014/srcset-sizes/
http://usecases.responsiveimages.org/#introduction
https://cloudfour.com/thinks/responsive-images-101-definitions/

Ειναι το picture element
πχ

<picture>
  <source media="(min-width: 900px)" srcset="cat-vertical.jpg">
  <source media="(min-width: 750px)" srcset="cat-horizontal.jpg">
  <img src="cat.jpg" alt="cat">
</picture>

και το img srcset & sizes

πχ

<img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw,
       100vw"

     alt="A rad wolf" />

ε και τα δυο πανω κατω εχουν ιδιο support για τους browsers οπως βλεπω στο caniuse.com και τις τρυπες στα browsers που δεν υποστηριζοντε τις συμπληρωνεις με picturefill  https://scottjehl.github.io/picturefill/
η κατι παρομοιο.

Πρακτικα ομως εφοσον τις εικονες τις χειριζομαι με css η και bootstrap γιατι να προτιμησω το <img srcset και sizes? εναντι του picture

Σκεφτομουν να βαλω  δηλαδη size 100% του view port αλλα εφοσον δεν αξιοποιω τοσο το sizes μηπως ειναι λαθος να το χρησιμοποιω? οταν θελω απλα με αλλες συσκευες να αλαζουν εικονες για να μειωνετε το load time.

<img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
     sizes="100vw"
     alt="A rad wolf" />

Και τελος οι εικονες που ειναι στο CSS background το image-set δεν εχει καλη υποστηριξη απο browsers και σκεφτομουν απλα να αλαζω τις εικονες οταν φτανει σε καποιο media query  1024 κτλ... ειναι λαθος προσεγγιση? 

[XPHSTOS_]

Υπάρχουν περιπτώσεις (semantics, accessibility, performance) που θα θέλεις να έχεις img tag και όχι background-image.
Οπότε το "responsive" το ξεχνάς.
Εκτός αν εννοείς το width: 100% όπου προσαρμόζεται η εικόνα μέσα στο container.
Εκεί πάρε παράδειγμα τις οθόνες με retina display.
Αν έχεις μια εικόνα η οποία είναι μεγάλη σε διάσταση και ανάλυση ώστε να καλύψει τις ανάγκες των οθονών αυτών, όσο και να την συμπιέσεις το μέγεθος τους θα είναι σχεδόν απαγορευτικό για mobile συσκευές.
Εκεί θα χρησιμοποιήσεις τις παραπάνω τεχνικές έτσι ώστε να πεις στον browser να κατεβάσει την σωστή εικόνα για την συγκεκριμένη ανάλυση.
Σε μια φωτογραφικά γεμάτη σελίδα η διαφορά είναι τεράστια!

Πάντως αυτό που προτείνεις, να αλλάζεις την εικόνα με το CSS, λάθος δεν είναι, απλά αν έχεις πολλές εικόνες ως background-images θα έχεις θέμα στο performace.
Επίσης αν σε ενδιαφέρει και το SEO, τότε καλά θα ήταν να ήταν img tags.