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>
Related
I am using picture element to provide webP images where appropriate like this:
<picture>
<source srcset="picture.webp" type="image/webp">
<source srcset="picture.jpg">
<img src="picture.jpg" alt="alt">
</picture>
The questions is where should I place title attribute. Should I put it on img element or picture element?
I disagree with the previous posters. I would keep the title on the img element.
According to the HTML5 spec's, the picture element is a container, and dependent on the img element for rendering of its source element choices. In fact, the img element is a requirement for picture, not just as a fallback. Therefore, picture is just a hollow wrapper around img and really doesn't do anything. img remains the primary conveyor of images.
The HTML specification goes on to say...
The picture element is a container which provides multiple sources to
its contained img element...
...and then
...the picture element itself does not display anything; it merely
provides a context for its contained img element that enables it to
choose from multiple URLs
That means the img element continues to represent the image and so in my opinion must have the title element. The fact that the img element's alt still works and title, even when a source image is chosen over img by the browser, shows the image element is what is active in the display. Below is an example of how I design images using the picture element.
<figure aria-labelledby="picturecaption1">
<picture id="picture1">
<source srcset="image.webp" type="image/webp" media="(min-width: 800px)" />
<source srcset="image.gif" type="image/gif" />
<img id="image1" alt="image:Image Alternate Text" title="The Image Description" src="image.jpg" width="200" height="200" loading="lazy" no-referrer="no-referrer" />
</picture>
<figcaption id="picturecaption1">My Image Caption</figcaption>
</figure>
You should place title attribute in picture tag because The <picture> tag also supports the Global Attributes in HTML.
E.g.
<picture title="Your goes here">
<source srcset="picture.webp" type="image/webp">
<source srcset="picture.jpg">
<img src="picture.jpg" alt="alt">
</picture>
I'm trying to make a picture element work but it doesn't load the fallback img
<div class="card">
<picture>
<source type="image/png" srcset="https://company-dev.s3.amazonaws.com/carscan/https://lorempixel.com/250/250/transport/?66555">
<img class="card-img-top scale-on-hover" alt="Fallback" src="http://carscan.test/storage/images/no_image_found.jpg">
</picture>
<div class="card-body">
<h6><strong>Location</strong>: Door LB</h6>
<p><strong>Type</strong>: Window Crack <br>
<strong>Severity damage</strong>: Medium</p>
</div>
</div>
In my browser I get a 403 on the source (aws) element, but then I expect it to go to the fallback image. But instead it shows me the little img icon together with my alt text
When I remove the source item out of the element my img element is shown without any problems. Am i forgetting an element or a small character?
Try this as an alternative
<p>
<object data="https://company-dev.s3.amazonaws.com/carscan/https://lorempixel.com/250/250/transport/?66555" type="image/png">
<img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" alt="Stack Overflow logo and icons and such">
</object>
</p>
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.