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>
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 have a header which I want responsive so that it only loads the relevant sized image. I've been using a Picture tag but it causes a CLS (Cumulative Layout Shift) because it will only size the height for 20px rather than 48px. I've not set any style to affect the picture so can't work out why the Picture reserves only 20px and then when the image loads, it sizes to 48px. When I specify the width, the width works correctly. Any tips?
<html>
<header>
<picture>
<source media="(min-width:624px)" type="image/webp" srcset="/pictures/site.webp"/>
<source media="(min-width:624px)" type="image/png" srcset="/pictures/site.png"/>
<source media="(max-width:623px)" type="image/webp" srcset="/pictures/site.webp"/>
<img src="/pictures/ugweb.png" width="340" height="48" alt="Site" title="Site"/>
</picture>
</header>
<body>
</body>
</html>
How to prevent img in a picture element to get bigger that that actual asset's dimensions? Similar as when loading an img element width height and width set to auto?
<img src="https://dummyimage.com/160x90/000/fff" />
<!-- vs. -->
<picture>
<source media="(min-width: 1px)" srcset="https://dummyimage.com/160x90/000/fff 160w" />
<img />
</picture>
https://jsfiddle.net/1zbdewpc/
The 160w messes up the code:
First Image:
Second Image:
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'm in the process of converting our images to webp, which means I need to use the 'picture' tag instead of 'img', as picture allows for a fallback to png formats for devices and browsers that don't support webp.
Anyway, I have an img that looks like this:
<img class="usp-pics pic1" src="/images/example.png" alt="" title="">
So, converting this to webp with the ability to fallback to png would look something like this:
<picture>
<source srcset="/images/example.webp" type="image/webp">
<source srcset="/images/example.png" type="image/png">
<img class="usp-pics pic1" src="/images/example.png" alt="" title="">
</picture>
If a browser reads the above code and takes the first webp image, will it also apply the classes, alt & title tags attached to the img element or do I need to repeat them for each source, or add them to the parent picture tag?
I've tried to look this up but I can't find an answer. Maybe because it's obvious or maybe because I'm using the wrong words to describe the issue. Sorry if this has already been covered somewhere.
Acccording to MDN the <picture> element simply takes the content of the <source> and puts it inside the space defined by the <img> tag:
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.
(My emphesis)
Therefore, I would expect that the classes on the <img> tag would still appear to the end user, regardless of which (or any) <source> material is used.
My Testing:
But I had not checked this. So I decided to run a few tests with image types (PNG / JPG / Webp) and <picture> elements:
.one {
border: 3px solid #f00;
}
.two {
border: 3px solid #0f0;
}
.thr {
border: 3px solid #00f;
}
.fou {
/* Picture Element */
border: 3px solid #333;
display: inline-block;
}
<picture class='fou'>
<source srcset="https://www.gstatic.com/webp/gallery/3.webp" type="image/webp" class='thr'>
<source srcset="https://developers.google.com/web/fundamentals/design-and-ux/responsive/img/art-direction.png" type="image/png" class='two'>
<img src="https://images.pexels.com/photos/163016/crash-test-collision-60-km-h-distraction-163016.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" title="" class='one'>
</picture>
From the above example, and from editing it and playing with it by
Rearranging the <source> materials.
It can be easily found that:
The <source> elements are NOT hidden on the page,but do not contain the graphical content.
Regardless of the <source> used, the <img> element is always the element that contains the picture graphic (sometimes called an image (WTF?) ) .
The <picture> container object always exists but is a container such as <figure> in HTML5. It should not be given CSS styling intended for contents such as <img>.
Conclusion:
The code above (and its fiddles and edits) shows that all elements are present in the HTML, but the only one that is the image is the <img> element.
Therefore, you should not be applying any styling or CSS whatsoever to <source> elements and only container stylings should be applied to <picture> elements.
You Asked:
Do I need to repeat the class attribute for each source inside a picture element?
The Answer:
The answer is NO. You should style the <img> element ONLY.
Example:
<picture>
<source srcset="/images/example.webp" type="image/webp">
<source srcset="/images/example.png" type="image/png">
<img class="usp-pics pic1" src="/images/example.png" alt="something" title="">
</picture>