I have a simple picture element that should be display one of two pictures depending on the browser window size:
<picture>
<source src="images/still_life-650_medium_2x.jpg" media="max-width:899px" type="image/jpeg">
<source src="images/still_life-1600_large_2x.jpg" media="min-width:900px" type="image/jpeg">
<img src="images/still_life-1600_large_2x.jpg" alt="Old calculator and some fruit">
</picture>
However when I test it with the browser sized below 899px, no matter how small I resize it in fact, it always loads the "images/still_life-1600_large_2x.jpg" file (Using Chrome devtools to determine what file it is loading as the image looks the same).
Is there something wrong with the above code?
Deryck answered it in his comment.
<picture>
<source srcset="images/still_life-650_medium_2x.jpg" media="(max-width:899px)" type="image/jpeg">
<source srcset="images/still_life-1600_large_2x.jpg" media="(min-width:900px)" type="image/jpeg">
<img src="images/still_life-1600_large_2x.jpg" alt="Old calculator and some fruit">
</picture>
Related
I want to use tag and 3 image formats. avif \ webp \ png. At the same time, but not to forget about retina displays.
At the moment I came up with something like this format:
<picture>
<source srcset="components/header/img/logo.avif, components/header/img/logo#2x.avif 2x" type="image/avif">
<source srcset="components/header/img/logo.webp, components/header/img/logo#2x.webp 2x" type="image/webp">
<img class="someClass" src="components/header/img/logo.png" srcset="components/header/img/logo#2x.png 2x" alt="Logo">
</picture>
But how much of this is correct ? Maybe it should be implemented in some other way ?
You can combine both concepts via an art-direction rule.
The art direction concept is basically intended to switch between different image versions with different aspect ratios depending on your viewport size.
Example from german web studio "kulturbanause":
<picture>
<source media="(min-width: 56.25em)" srcset="large.webp" type="image/webp">
<source media="(min-width: 56.25em)" srcset="large.jpg">
<source media="(min-width: 37.5em)" srcset="medium.webp" type="image/webp">
<source media="(min-width: 37.5em)" srcset="medium.jpg">
<source srcset="small.webp" type="image/webp">
<source srcset="small.jpg">
<img src="fallback.jpg" alt="">
</picture>
Use svg if feasible (logos, info graphics etc)
Referring to your code example referencing a logo img:
Most likely, your logo could be used as a svg.
If it's created (or optimized) well, you don't need any HiRes candidates.
(and most likely svg will also wipe the floor with raster images regarding filesize)
See also: MDN Docs: Responsive images
While the standard HTML <img> element doesn't support compatibility fallbacks for images, the <picture> element does. <picture> is used as a wrapper for a number of <source> elements, each specifying a version of the image in a different format or under different media conditions, as well as an <img> element which defines where to display the image and the fallback to the default or "most compatible" version.
<picture>
<source srcset="diagram.svg" type="image/svg+xml">
<source srcset="diagram.png" type="image/png">
<img src="diagram.gif" width="620" height="540"
alt="Diagram showing the data channels">
</picture>
More info developer.mozilla.org
I hope I was helpful
In the end I got a design that works with both image switching to source (we can get avif\webp for browsers that support it) and srcset which allows us to output x1 or x2 images for different displays.
path to files only for example :)
<picture>
<source srcset="components/features/img/icon-5.avif 1x, components/features/img/icon-5#2x.avif 2x" type="image/avif">
<source srcset="components/features/img/icon-5.webp 1x, components/features/img/icon-5#2x.webp 2x" type="image/webp">
<img class="someClass" src="components/features/img/icon-5.png" alt="Icon" srcset="components/features/img/icon-5.png 1x, components/features/img/icon-5#2x.png 2x">
</picture>
I'm scratching my head why Google Chrome loads JPG instead of Avif and WebP?
Here's my code:
<picture>
<source media="(max-width: 991px)" srcset="/assets/img/768w.avif" type="image/avif">
<source media="(max-width: 991px)" srcset="/assets/img/768w.webp" type="image/webp">
<source media="(max-width: 991px)" srcset="/assets/img/576w.avif" type="image/avif">
<source media="(max-width: 991px)" srcset="/assets/img/576w.webp" type="image/webp">
<img src="/assets/img/768w.jpg" alt="image" width="100%" height="auto" class="img-fluid" decoding="async" loading="lazy">
</picture>
First of all of your sources are specified for screens smaller than 991px – I guess you are loading page on larger device (or window width) so only default src fits the query.
The second mistake is expecting filename should be recognized as media query. I guess you are looking for something like this:
<source media="(max-width: 991px)" srcset="/assets/img/576w.avif 576w, /assets/img/768w.avif 768w" type="image/avif">
This means "while screen is smaller than 991px use avif. According to your screen pixel density and current width will be loaded one of two images".
Same for webp. You also need to specify sources for screens larger than 991px.
Take a look at this example
I have the following code, which I am using for image-gallery, but am not able to make it work:
<picture>
<source srcset="/web/gallery/17/1567772625.webp" type="image/webp">
<source srcset="/web/gallery/17/1567772625.jpg" type="image/jpg">
<source srcset="/web/gallery/17/1567772625-thumb.webp" type="image/webp">
<source srcset="/web/gallery/17/1567772625-thumb.jpg" type="image/jpg">
<a class="mg-image-wrap" data-title="Snaps From The Resort" href="/web/gallery/17/1567772625.jpg">
<img alt="Snaps From The Resort" class="mg-image" data-position="0" src="/web/gallery/17/1567772625-thumb.jpg" />
</a>
</picture>
However, if I change the code to the following:
<picture>
<source srcset="/web/gallery/17/1567772625-thumb.webp" type="image/webp">
<source srcset="/web/gallery/17/1567772625-thumb.jpg" type="image/jpg">
<img src="/web/gallery/17/1567772625-thumb.jpg" />
</picture>
I have two questions:
How I can make the the first block download webp, where supported, particularly thumbnail image is downloaded as jpg?
How to prevent href image not to download till user click on href link?
Picture element
Well, first of all, only <source> and <img> elements are allowed INSIDE a <picture>. That means if want it to link somewhere you should wrap the picture in the anchor tag or use a javascript click handler on the picture.
<a href="#">
<picture>...</picture>
</a>
Using Webp
You should treat the <picture> as a single element with multiple properties just like any other image. This means thumbnails and gallery images are separate and use JS to interact/change the "visible" image.
Basically, the browser grabs the first image that matches its abilities. (that's why the img tag is last)
You CAN specify different sized images inside a picture element by using media-queries BUT those are designed to load different images based on layout size NOT for different interactions/use cases.
Example:
<picture>
<source srcset="imageOne.jpg" type="image/jpg" media="(min-width: 1400px)">
<source srcset="mediumImg.jpg" type="image/jpg" media="(min-width: 800px)">
<source srcset="smallImg.jpg" type="image/jpg" media="(min-width: 400px)">
<img src="fallback.jpg" />
</picture>
This will cause the device to load different images based on device width...
You can also add any additional attributes directly on the picture tag like you would any other image.
<picture class="mg-image" data-position="0" >
...
</picture>
This is the sort of thing I'm doing:
<picture style="display: block; margin:auto;">
<source media="(min-width: 1080px)" srcset="imagesIndex\hero-images\centaurs-horn-crop-1080.webp">
<source media="(min-width: 600px)" srcset="imagesIndex\hero-images\centaurs-horn-crop-720.webp">
<source media="(min-width: 360px)" srcset="imagesIndex\hero-images\centaurs-horn-crop-360.webp">
<!-- ios media -->
<source media="(min-width: 1024px)" srcset="imagesIndex\hero-images\centaurs-horn-crop-1080.jpp">
<source media="(min-width: 750px)" srcset="imagesIndex\hero-images\centaurs-horn-crop-750.jpp">
<source media="(min-width: 640px)" srcset="imagesIndex\hero-images\centaurs-horn-crop-640.jpg">
<img src="imagesIndex\hero-images\centaurs-horn-crop-750.jpg" alt="Firenze, Harry Potter's divination teacher poses for a photo for my walking tour on Edinburgh's Royal Mile" class="center-box"/>
</picture>
Wrapped in <picture> tags. And it does not work, not even the fallbacks work. Is there a work around? Do I need to cut the alt text or something? What can I do?
It's meant to work on both. And the fallback is always meant to work (actually does in IE) so why doesn't it here?
It's a graphics rich site viewed on mobile, I need to use Webp whenever possible.
Site is here
www.pottertour.co.uk/index.html
I see a possible problem because of the file extensions on the later .jpg images, a couple of them are marked as jpp instead of jpg.
I got the following code:
<picture>
<source media="(min-width: 960px)" srcset="http://placehold.it/960x150">
<source media="(min-width: 575px)" srcset="http://placehold.it/575x150">
<img src="" alt="">
</picture>
When loading the page, the img src get's automatically replaced by the first matching source element.
Is there a way to prevent this automatic replacement the first time the page loads? I thought of something like an additional html attribute oder so.
Which browser are you testing on?
<picture>
<source media="(min-width: 960px)" srcset="http://placehold.it/960x150">
<source media="(min-width: 575px)" srcset="http://placehold.it/575x150">
<img src="" alt="">
</picture>
This seems to work fine on Chrome. The picture feature has not got full support, so this could be the issue