Use the configuration below without specifying wxxx
<picture>
<source media="(min-width:1024px)" srcset="arquivo3/foto.jpg">
<source media="(min-width:500px)" srcset="arquivo2/foto.jpg">
<img src="arquivo1/foto.jpg" alt="">
</picture>
CONDITIONS OF USE:
- Photos are stored by the same Width (and different heights)
- File3 = Large photos (width = 800 for use in Desktop)
- File2 = Average photos (width = 400 for use in Mobile and Tablet)
- File1 = small photos (width = 150 for use in Mobile)
DOUBTS: I saw some suggest using wxxx in srcset, conf. below:
<picture>
<source media="(min-width:1024px)" srcset="arquivo3/foto.jpg" w800>
<source media="(min-width:500px)" srcset="arquivo2/foto.jpg" w400>
<img src="arquivo1/foto.jpg" alt="" w150>
</picture>
I did some performance tests and did not see differences with wxxx and without !!!
QUESTIONS:
1st) Put the w800, w400 and w150 help (even) the browser to load faster?
2nd) Is this the right solution?
Thank you in advance for your colleagues to resolve any doubts.