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:
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>
https://pastebin.com/2AY6s2tm
html
<picture>
<!-- _1_1_2, _16x9 -->
<source srcset="/media/img/raster/4fe4c2e2-b8f3-4c88-a06d-2f44e76f53ef/img_width_70_height_39_dpr_1x_ver_4.webp 1x" type="image/webp" media="(max-width: 359px)">
...
<source srcset="/media/img/raster/4fe4c2e2-b8f3-4c88-a06d-2f44e76f53ef/img_width_339_height_190_dpr_1x_ver_4.jpg 1x" type="image/jpeg" media="(min-width: 1920px)">
<img loading="lazy" width="70" height="39" src="/media/img/raster/4fe4c2e2-b8f3-4c88-a06d-2f44e76f53ef/img_width_239_height_134_dpr_1x_ver_4.jpg" alt="Trololo">
</picture>
css
img {
width: 100%;
}
Well, lazy loading.
Images should include width and height.
Documentation: https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes
If we don't include width and height, layout shifts can occur.
So, if we include width and height, then a clever browser calculates its proportions. And allocates the necessary space for the element.
Please, have a look at the image. I stipulated width = 70 and height = 39.
This seems reasonable. This image's aspect ratio is 16 : 9.
height = 70 * 9/16 = 39.375 ~ 39.
If I'm not mistaken, exact pixels are not important here: screens will always be different in mobile world.
Problem
As we can clearly see, width fits the width of the parent element. But the height is still 39. It has not been recalculated.
And of course, this distorted the whole aspect ratio of the image.
Could you help me here.
I would imagine if you set in CSS width:100%; you also need to explicitly set the height:auto;.
img {
width: 100%;
height: auto;
}
You may also find some structural advice here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
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've been struggling some hours trying to understand how the picture tag exactly works. I'm able to load different art directions at specific screen sizes using the <picture> tag in combination with <srcset> but I can't seem to find how I make these responsive.
I gave the <picture> element a class named .header-img. I tried to set media queries for the class and adjust the size of it. But when I try to set a width to .header-img, the width doesn't change.
Maybe an important detail, the <picture>element is inside a grid
<picture class="header-img">
<source media="(max-width: 500px)" srcset="./assets/img/header/header-bg-sm.png">
<source media="(max-width: 1100px)" srcset="./assets/img/header/header-bg-md.png">
<source media="(max-width: 1300px)" srcset="./assets/img/header/header-bg-lg.png">
<img src="./assets/img/header/header-bg-lg.png" alt="ISB header">
</picture>
Any help is really really appreciated !
Add this to your CSS:
.header-img img {
max-width: 100%;
}
And also, you have a container with property width of 70rem.
You should change the property width to max-width like so:
.container {
max-width: 70rem;
...
}