0
Use the settings below without indicating 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 equal width (and different heights)
- Archive3 = Large Photos (width=800 w/ Desktop use)
- Archive2 = Medium photos (width=400 p/ use on Mobile and Tablet)
- Archive1 = small photos (width=150 p/ use in Mobile)
DOUBT: I saw that some indicate 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) Place w800, w400 and W150 help (even) the browser to load faster ?
2nd) This is the right solution?
I thank my colleagues in advance for resolving the doubts
Hello, can anyone answer? I believe it is a pertinent question and that can help other tb. Thanks.
– Geo
It’s not that "help". If you omit, it’s the same as putting "1x" as string. Anyway it has specification, what changes is whether it is pixel density, or width (x or w). On what is correct, it only depends on your specific case (what size the image occupies on the page in reality). When you specify the width, the browser will know which image is most suitable without loading. When you specify density, it tries to use the most suitable one for the "Pixel CSS" density. I usually prefer to use w and pre-calculate case by case, but it goes from each one.
– Bacco
Related: Change image on smaller screens
– Bacco
Thank you, Bacco. Since I am converting Asp to php, and I will have to redo the lines, I think I will include Wnn. For your explanation, the browser will interpret and render more correctly. I appreciate the help, Qdo vc says to pre-calculate is to use media=(min-width:...?
– Geo
Calculate the appropriate "w" for each media. For example, if your image occupies 1/3 of the width of the screen, in 960 px it is sufficient that it has 320px in 1x, or 640px in 2x.
– Bacco