I have this image tag with a few different srcs and it's only loading the one. I feel like I followed the directions, but it's only loading the 600px width image (w_600 image).
<img
srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_600%2Cf_auto%2Cq_auto/Brads-House/4.jpg 600w,
https://res.cloudinary.com/tjblackman08/image/upload/w_520%2Cf_auto%2Cq_auto/Brads-House/4.jpg 520w,
https://res.cloudinary.com/tjblackman08/image/upload/w_440%2Cf_auto%2Cq_auto/Brads-House/4.jpg 440w,
https://res.cloudinary.com/tjblackman08/image/upload/w_360%2Cf_auto%2Cq_auto/Brads-House/4.jpg 360w,
https://res.cloudinary.com/tjblackman08/image/upload/w_280%2Cf_auto%2Cq_auto/Brads-House/4.jpg 280w"
sizes="(min-width: 1500px) 600px,
(max-width: 1200px) 520px,
(max-width: 992px) 440px,
(max-width: 768px) 360px,
(max-width: 480px) 280px"
src="https://res.cloudinary.com/tjblackman08/image/upload/w_600%2Cf_auto%2Cq_auto/Brads-House/4.jpg 600w"
alt="picture"
class="picture"
/>
Here's a Live Demo
I'm trying to get it to load the largest image one desktops, and the smallest image on mobile devices, but it'a always loading the large image. Am I misunderstanding the purpose of srcset?
Try this and see,
<picture>
<source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_600%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 1500px)">
<source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_520%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 1200px)">
<source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_440%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 992px)">
<source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_360%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media=" (min-width: 768px)">
<source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_280%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 480px)">
<img srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_280%2Cf_auto%2Cq_auto/Brads-House/4.jpg" alt="Placehold" class="image">
</picture>
Hope this helps.
Related
Is it possible to use responsive images, for fetching an appropriately sized image, along with art direction for displaying a different image on mobile?
I haven't seen any docs with an example of this, but I also haven't seen any docs saying you can't.
This is the simplified code that I thought might work but doesn't (the original is messy Liquid/Shopify code)
<picture>
<source
media="(max-width: 989px)"
srcset="
image-one-300.jpg 300w,
image-one-800.jpg 800w,
image-one-1200.jpg 1200w,
image-one-1800.jpg 1800w,"
sizes="100vw"
src="image-one_1800.jpg"
>
<img
srcset="
image-two-300.jpg 300w,
image-two-800.jpg 800w,
image-two-1200.jpg 1200w,
image-two-1800.jpg 1800w,"
sizes="100vw"
src="image-two_1800.jpg"
>
</picture>
The way that I do separate images for mobile is to simply add some CSS and then split them out:
CSS:
.mobileOnly {display:none;}
.desktopOnly {display:block;}
#media only screen and (max-width: 600px) {
.mobileOnly {display:block}
.desktopOnly {display:none;}
}
Then in the HTML, you have classes that you can add to elements:
<img class="desktopOnly" src="..." />
<img class="mobileOnly" src="..." />
The great thing about this is that you can use it for anything, including specific divs, text and much more!
I would like to use webp images, of course safari doesn't support them so I also added the jpg's as fallbacks for different resolutions.
In chrome everything works fine, in safari it only works if I remove the webp versions from the image tag.
But I don't want to abandon webp images just because of safari...
My html code is below.
<picture>
<source type="image/webp" media="(max-width: 1200px)" srcset="/public/images/picture0-m.webp">
<source type="image/webp" media="(min-width: 1201px)" srcset="/public/images/picture0.webp">
<source type="image/jpeg" media="(max-width: 1200px)" srcset="/public/images/picture0-m.jpg">
<source type="image/jpeg" media="(min-width: 1201px)" srcset="/public/images/picture0.jpg">
<img src="/public/images/picture0-m.jpg"type="image/jpeg">
</picture>
Recovering an old question - but it was one of the first links that I found when I had the same issue.
I resolved this by adding a srcset to the <img> tag:
<picture>
<source sizes="(min-width: 1200px) 864px, (min-width: 992px) 708px, (min-width: 768px) 540px, calc(100% - 4rem)" srcset="img.webp 345w, img2.webp 650w, img3.webp 1024w" type="image/webp">
<source sizes="(min-width: 1200px) 864px, (min-width: 992px) 708px, (min-width: 768px) 540px, calc(100% - 4rem)" srcset="img.jpg 345w, img2.jpg 650w, img3.jpg 1024w" type="image/jpg">
<img src="img.jpg" srcset="img.jpg 345w, img2.jpg 650w, img3.jpg 1024w" alt="Whale">
</picture>
When opening the following code snippet on a small browser window, a first picture appears. When said window's size augments, the latter transitions to a second picture. However, when downsizing the window again, we are stuck with picture 2.
<img src="https://picsum.photos/800/400?image=0"
srcset="https://picsum.photos/800/400?image=0 800w,
https://picsum.photos/700/350?image=1 700w,
https://picsum.photos/600/300?image=2 600w,
https://picsum.photos/500/250?image=3 500w,
https://picsum.photos/400/200?image=4 400w,
https://picsum.photos/300/150?image=5 300w,
https://picsum.photos/200/100?image=6 200w,
https://picsum.photos/150/75?image=7 150w,
https://picsum.photos/100/50?image=8 100w"
sizes="(min-width: 800px) 800px,
(min-width: 700px) 700px,
(min-width: 600px) 600px,
(min-width: 500px) 500px,
(min-width: 400px) 400px,
(min-width: 300px) 300px,
(min-width: 200px) 200px,
(min-width: 150px) 150px,
100px">
How can I get browsers to switch back to picture 1 in such a situation?
It's a feature on srcset/sizes for img tag, as you can read in here
An alternative would be use picture in this case:
<picture>
<source media="(min-width: 800px)" srcset="https://picsum.photos/800/400?image=0">
<source media="(min-width: 700px)" srcset="https://picsum.photos/700/350?image=1">
<source media="(min-width: 600px)" srcset="https://picsum.photos/600/300?image=2">
<source media="(min-width: 500px)" srcset="https://picsum.photos/500/250?image=3">
<source media="(min-width: 400px)" srcset="https://picsum.photos/400/200?image=4">
<source media="(min-width: 300px)" srcset="https://picsum.photos/300/150?image=5">
<source media="(min-width: 200px)" srcset="https://picsum.photos/200/100?image=6">
<source media="(min-width: 150px)" srcset="https://picsum.photos/150/75?image=7">
<source media="(min-width: 100px)" srcset="https://picsum.photos/100/50?image=8">
<img src="https://picsum.photos/800/400?image=0" alt="">
</picture>
Picture is a responsive images method to control which image resource
a user agent presents to a user, based on resolution, media query
and/or support for a particular image format
I'm using scrset attribute for img tag and it seems not changing src at all. Please tell me what I'm doing wrong.
<img
src="download.jpg"
srcset="download.jpg 350w, mushroom_landscape.jpg 550w, t_1_lisitsa.jpg 880w"
sizes="(min-width: 880px) 300px, (min-width: 600px) 600px, 500px"
alt="">
The size of image is changing but the actual image does not
You should try this:
<picture>
<source media="(min-width: 880px)" srcset="download.jpg">
<source media="(min-width: 600px)" srcset="mushroom_landscape.jpg">
<img src="download.jpg" alt="" style="width:auto;">
</picture>
I'm trying to use <picture>and show 1x or 2x images depending on screen.
<picture class="general-info__photo">
<source srcset="images/me2x.png" media="
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx)">
<img src="images/me1x.png" alt="my photo">
</picture>
And it works on my retina macbook, but I see 1x image on iphone 5s. How to fix this?
Try this one:
<picture>
<source media="(min-width: 650px)" srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeP5nKHpuyus4LcJwBHjR2aDC6m28FSD9e-5dCu2Kl7rglEpVflQ">
<source media="(min-width: 465px)" srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTsPqgViwHdLlxPgRl6uC1NCe5t8jxyq9-m1gM6S3b6yy6jrqLa">
<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Flowers" style="width:auto;">
</picture>
Using the wflag we can tell the browser that we have the same image available in different widths. The width is similar to using the max-width CSS property in media queries.
<img
src="/images/me2x.png"
alt="my photo"
srcset="/images/me2x-medium.png 1024w,
/images/me2x-large.png 2048w,
/images/me2x.png 800w"
/>
<picture class="general-info__photo">
<img sizes="160px"
src="images/me.png"
alt="my photo"
srcset="images/me2x.png 320w, images/me.png 160w"
/>
</picture>