0
Hello,
I’m using the html tag <img srcset = "imagem.jpg, 400w, imagem1.jpg, 300w" sizes="(max-width: 300px) 300px,(max-width: 959px) 400px">
In the Edge and Mozilla browsers, it works perfectly, the image is selected according to the screen size of the browsers. But on Chrome (version 69) and safari does not work. Someone has already gone through it, or that using the html tag for responsive images can help?
Only one detail left to close the quotes in the attribute
srcset– NoobSaibot
https://caniuse.com/#feat=srcset
– Costamilam
@Noobsaibot thank you!
– lelopes
@lelopes on the website of MDN has that note: Use Mozilla Firefox to test
srcset. Chrome loads the best image if it’s cached in the browser, nullifying the purpose of the test in the development tool.– NoobSaibot
@Noobsaibot, had already read this. But the purpose of srcset is precisely to choose the image set for each screen size by tag. So on Chrome the behavior is different and on safari as well. I had a problem with these two browsers. Know some other solution so we can set the responsive images to the respective screen sizes?
– lelopes
I used srcset on Chrome and I had no problems... In my case it looked like this:
<img class="d-block w-100" src="img/slider/tintas-sm.jpg" alt="Tintas Líquidas" srcset="img/slider/tintas-sm.jpg 575w,
 img/slider/tintas-md.jpg 767w, 
 img/slider/tintas-xl.jpg 768w" sizes="(max-width: 575px) 100vw, 
 (max-width: 767px) 100vw,
 768px">Sometimes this can help you https://answall.com/questions/292403/load-das-imagens-diferentes-resolu%C3%A7%C3%B5es/292407#292407– hugocsl
Here also you have some https://answall.com/questions/257945/mobile-first-apareceimagem-somente-no-desktop/257961#257961
– hugocsl
@hugocsl thank you very much, I will use your example.
– lelopes
So, it’s just a suggestion... there may be people who think differently and can suggest other options... I just pointed out what worked for me etc. Good luck ai tmj
– hugocsl