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">
Related
So I'm trying to display multiple images using the picture tag and whatever I do, the pictures I'm trying to display doesn't seem to appear at all, I don't know what's the problem so I don't know how to fix it.
<div class="container">
<div class="pic">
<picture>
<source media="(min-width: 600px)" srcset="images/gallery-01.png">
<source media="(min-width: 900px)" srcset="images/gallery-02.png">
<source media="(min-width: 1100px)" srcset="images/gallery-03.jpg">
</picture>
</div>
</div>
<img> element is required, <source> is optional
Your snippet doesn't have any <img> tag, which is required. <source> elements are optional, which might occupy the space presented in <img>
Accodring to MDN page:
The <picture> HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.
The browser will consider each child <source> element and choose the best match among them. If no matches are found—or the browser doesn't support the <picture> element—the URL of the <img> element's src attribute is selected. The selected image is then presented in the space occupied by the <img> element.
See the updated snippet below. The only change here (except the picsum.photos placeholder images) is the addition of <img> tage. In this example, the /300 image will be shown by default, but if/when the browser supports the <picture> element and certain media query matches a particular <source> image will replace the default image.
<div class="container">
<div class="pic">
<picture>
<source media="(min-width: 600px)" srcset="https://picsum.photos/200">
<source media="(min-width: 900px)" srcset="https://picsum.photos/400">
<source media="(min-width: 1100px)" srcset="https://picsum.photos/600">
<img src="https://picsum.photos/300" alt="" />
</picture>
</div>
</div>
Are you %100 sure that your srcset= "images/gallery-01.png" leads to the correct image?
If that's not the problem then I would recommend trying <img src="images/gallery-01.png">. Here's the full code,
<div class="container">
<div class="pic">
<picture>
<img alt="Image1" src="images/gallery-01.png">
<img alt="Image2" src="images/gallery-02.png">
<img alt="Image3" src="images/gallery-03.jpg">
</picture>
</div>
</div>
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 <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>
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.