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>
Related
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>
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 want to serve responsive images with the <picture> tag.
What I want to achieve is:
If the viewport is x then serve the browser "a.webp", if it doesn't support webp then serve "a.png" and
if the viewport is y then serve the browser "b.webp", if it doesn't support webp then serve "b.png".
I've tried a few approaches and they don't seem to work. Any ideas?
<picture>
<source media="(min-width: 1125px) 1125px, 100vw" srcset="img/phone/happy_girl_top-phone.webp 414w, img/happy_girl_top.webp 1125w">
<source media="(min-width: 1125px) 1125px, 100vw" srcset="img/phone/happy_girl_top-phone.png 414w, img/happy_girl_top.png 1125w">
<img class="img-fluid" alt="top background" src="img/happy_girl_top.png">
</picture>
The contents of your media attributes are not valid media queries.
Here's the official HTML documentation for embedded content: https://html.spec.whatwg.org/multipage/embedded-content.html
The syntax of a <picture> element should look like this:
body {margin: 0;}
<picture>
<source srcset="https://via.placeholder.com/414x200 414w"
media="(max-width: 414px)">
<source srcset="https://via.placeholder.com/800x200 800w"
media="(max-width: 800px)">
<source srcset="https://via.placeholder.com/1150x200 1150w"
media="(min-width: 801px)">
<img class="img-fluid" alt="top background" src="https://via.placeholder.com/1125x200">
</picture>
I'm trying to use the <picture> element to provide 3 different images: 1 for mobile, 1 for min-width: 768px, and 1 for IE as a fallback.
<picture>
<source class="article-bg-image" media="(min-width: 768px)" srcset="tablet-desktop.jpg" alt="Text" title="Text">
<img class="img-responsive" srcset="mobile.jpg" alt="Text" title="Text">
</picture>
This works as expected on mobile vs. desktop, but I don't want the mobile image to be used as a fallback on IE. How would I specifically provide an image for mobile? I tried a second source with no media attribute, but it wasn't used.
Thanks in advance!
You can try this way
<img src="mobile.jpg" class="img-responsive" srcset="large.png 1280w,medium.png 640w, small.png 320w" sizes="100%" alt="Text" title="Text">
I'm completing a FrontEnd project, and I'm using Bootstrap 3 for the grid system.
Now, I'm also using art direction using the picture element, but I have a problem with this images because, every time I added this source element: <source media="(min-width: 800px)" srcset="images/web-development.jpg 1x, images/web-development_2x.jpg 2x">, the picture is displayed 50% of the size of the picture. Does anyone know why might this happen?
<section class="row">
<div class="col-md-12">
<picture>
<source media="(min-width: 800px)" srcset="images/web-development.jpg 1x, images/web-development_2x.jpg 2x">
<source media="(max-width: 799px)" srcset="images/web-development-small_1x.jpg 1x, images/web-development-small_2x.jpg 2x">
<img src="images/web-development.jpg" class="img-responsive center-block" alt="Common desktop of a developer">
</picture>
</div>
</section>
I've also tried like this and the same result happens
<section class="row">
<div class="col-md-12">
<picture>
<source media="(max-width: 799px)" srcset="images/web-development-small_1x.jpg 1x, images/web-development-small_2x.jpg 2x">
<img src="images/web-development.jpg" srcset="images/web-development.jpg 1x, images/web-development_2x.jpg 2x" class="img-responsive center-block" alt="Common desktop of a developer">
</picture>
</div>
</section>
I finally found an answer.
I created my own class in my style.css, and instead of adding max-width: 100%; I added it width: 100%.
And the problem was solved.
Have a read on srcset:
https://webkit.org/demos/srcset/
The reason you are getting 50% smaller is normal, the higher the pixel ratio / density 2x, 3x, 4x and so on, the smaller the image will display because monitor resolution is fix.
When you apply image with 1x solution will be the default dimension (e.g. 100px by 100px), when the resolution is doubled, in this case 2x you will need 200px by 200px to maintain the same size.