I have the following laravel code:
<img sizes="(min-width:600px)100vw, (max-width:601px)100vw"
srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }} 600w, {{ asset('assets/img/img-home-experiences-410x620.jpg') }} 601w" class="img-responsive" />
What I'm trying to do is to display the 600x600 image for width < 600px, and the 410x620 for width > 600px.
The code above works on desktop. But on a iPhone (iOS 8.1.2, safari/chrome), it displays the 410x620 image instead. It works properly (both desktop and mobile) without Picturefill included, except IE9 - IE11.
Is there something I'm missing here?
Solution:
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }}" media="(max-width: 600px)">
<source srcset="{{ asset('assets/img/img-home-experiences-410x620.jpg') }}" media="(min-width: 601px)">
<!--[if IE 9]></video><![endif]-->
<img sizes="100vw" srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }} 600w, {{ asset('assets/img/img-home-experiences-410x620.jpg') }} 601w" class="img-responsive" />
</picture>
There are multiple errors:
sizes="(min-width:600px)100vw, (max-width:601px)100vw" doesn't make any sense
The default value of sizes is 100vw. So your sizes is computed, if min-width: 600px matches, use 100vw, if max-width: 601px use 100vw, otherwise use 100vw
You set the descriptor 601w for an 410 pixel wide image. This is just wrong.
I don't know, but it seems that you don't use the same image in different sizes, but you use 2 different images (one is 600x600 the other is 410x620). This means, that you don't want to offer different candidates, where the browser can choose from, it means you want different images depending on your layout??? And in that case you should use picture
<picture>
<source media="(min-width:600px)" srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }}" />
<source srcset="{{ asset('assets/img/img-home-experiences-410x620.jpg') }}" />
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
</picture>
Related
my html markup is as follows:
<img srcset="https://res.cloudinary.com/xxx/image/upload/c_scale,w_300/v1653408278/notforsquares/ll/DSCF4429.jpg 300w, https://res.cloudinary.com/makingthings/image/upload/c_scale,w_600/v1653408278/notforsquares/ll/DSCF4429.jpg 600w" sizes="(min-width:300px) 50vw 100vw" src="https://res.cloudinary.com/makingthings/image/upload/v1653408278/notforsquares/ll/DSCF4429.jpg" alt="Lamp" />
When I look at the network tab in the inspector it shows two images downloaded. Is that the correct behaviour?
Thanks in advance
Yes, if you open it on a wide-screen device, it will load only one image like the example below:
Otherwise, if you open it in small-screen device, it will load only both image like the example below:
this is the code he use to implement the elva-fairy image:
<img srcset="elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w" sizes="(max-width: 600px) 480px,
800px" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
Link to the web: https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html
You can use the picture tag if you want to load it only once based on screen size:
<picture>
<source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
<source media="(min-width: 800px)" srcset="elva-800w.jpg">
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
Yes, this is the correct behaviour. By using srcset you're basically setting all the possible image sources the browser can use (and their sizes). You should also use sizes attribute to indicate which image (and it's size) the browser should use on different breakpoints.
I'm scratching my head why Google Chrome loads JPG instead of Avif and WebP?
Here's my code:
<picture>
<source media="(max-width: 991px)" srcset="/assets/img/768w.avif" type="image/avif">
<source media="(max-width: 991px)" srcset="/assets/img/768w.webp" type="image/webp">
<source media="(max-width: 991px)" srcset="/assets/img/576w.avif" type="image/avif">
<source media="(max-width: 991px)" srcset="/assets/img/576w.webp" type="image/webp">
<img src="/assets/img/768w.jpg" alt="image" width="100%" height="auto" class="img-fluid" decoding="async" loading="lazy">
</picture>
First of all of your sources are specified for screens smaller than 991px – I guess you are loading page on larger device (or window width) so only default src fits the query.
The second mistake is expecting filename should be recognized as media query. I guess you are looking for something like this:
<source media="(max-width: 991px)" srcset="/assets/img/576w.avif 576w, /assets/img/768w.avif 768w" type="image/avif">
This means "while screen is smaller than 991px use avif. According to your screen pixel density and current width will be loaded one of two images".
Same for webp. You also need to specify sources for screens larger than 991px.
Take a look at this example
I used a <picture> element to make the image responsive based on the screen sizes. It works fine on most of the web browsers except Safari. With Safari web browser I have to refresh the page each time to see the expected results.
To fix this issue, I added polyfill from the following site and followed the instructions: http://scottjehl.github.io/picturefill/ but it didn't resolve the issue.
Any help regarding this issue would be greatly appreciated!
Here's the markup of <picture> element:
<picture>
<source media="(min-width: 600px)" srcset="images/image-lrg.jpg" />
<img src="images/image-smll.jpg" alt="image of laptop" />
</picture>
<picture>
<source media="(min-width: 600px)" srcset="https://www.w3schools.com/css/img_lights.jpg" />
<img src="https://www.w3schools.com/css/img_5terre.jpg" alt="Cinque Terre" />
</picture>
Read about URL: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL
Read about Browser compatibility - <picture>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture#browser_compatibility
I'm concerned about <picture> and srcset on <source> behaviour. I want to load different pictures dependent on:
retina / non retina displays
screen resolution
webp format support
Code I've wrote (only for mobile):
<picture>
<source
media="(max-width: 767px)"
srcset="
https://i.ibb.co/W6v8K6J/mob-2x-webp.png 2x,
https://i.ibb.co/xzNtHnL/mob-webp.png 1x
"
type="image/webp"
/>
<source
media="(max-width: 767px)"
srcset="
https://i.ibb.co/DkyRD4z/mob-x2.png 2x,
https://i.ibb.co/qC1JqMR/mob.png 1x
"
type="image/png"
/>
<img src="" alt="Not mobile!" />
</picture>
It works, however it always loads retina image - also for non-retina displays. Does anyone know why? And how can I achieve all the points I've listed?
Link to sandbox: https://codesandbox.io/s/relaxed-cloud-txynh
Live preview: https://txynh.csb.app/
I have a simple picture element that should be display one of two pictures depending on the browser window size:
<picture>
<source src="images/still_life-650_medium_2x.jpg" media="max-width:899px" type="image/jpeg">
<source src="images/still_life-1600_large_2x.jpg" media="min-width:900px" type="image/jpeg">
<img src="images/still_life-1600_large_2x.jpg" alt="Old calculator and some fruit">
</picture>
However when I test it with the browser sized below 899px, no matter how small I resize it in fact, it always loads the "images/still_life-1600_large_2x.jpg" file (Using Chrome devtools to determine what file it is loading as the image looks the same).
Is there something wrong with the above code?
Deryck answered it in his comment.
<picture>
<source srcset="images/still_life-650_medium_2x.jpg" media="(max-width:899px)" type="image/jpeg">
<source srcset="images/still_life-1600_large_2x.jpg" media="(min-width:900px)" type="image/jpeg">
<img src="images/still_life-1600_large_2x.jpg" alt="Old calculator and some fruit">
</picture>