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>
Related
I know I can use loading="lazy"on <img> and <iframe> for browser native lazy loading, but can I also use this attribute on <source>? I cannot find related documentation.
Something like this:
<picture>
<source srcset="/image.webp" type="image/webp" loading="lazy"/>
</picture>
No, it can't be used on source, because a <picture> element has to have one <img> element inside. This <img> can have the lazy attribute. The browser then figures out on his own (at least I hope it does) which of the source tags it should lazy-load.
Description of picture from MDN
The HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.
So the correct code to lazy-load a source should be:
<picture>
<source srcset="/media/examples/surfer-240-200.jpg"
media="(min-width: 800px)">
<img src="/media/examples/painted-hand-298-332.jpg" alt="" loading="lazy"/>
</picture>
Cloned was correct - if using picture to wrap around sources, the last element should be a fallback img tag. The browser uses the img 'alt' and the 'loading="lazy" to feed into these sources.
Example, if any of these images are fetched, they'll be done so in a lazy manner:
<picture>
<source media="(min-width: 0)" srcset="image/bike-480.jpg">
<source media="(min-width: 800px)" srcset="image/bike-900.jpg">
<source media="(min-width: 1200px)" srcset="image/bike-1300.jpg">
<img loading="lazy" src="image/mage/bike-900.jpg" alt="man riding a blue bicycle">
</picture>
I try to use webp to save the loading time. But the picture tag only read the last one img tag.
<picture>
<source srcset="img/index-bg.webp" type="image/webp">
<img srcset="img/index-bg.png" alt="test">
</picture>
I checked my src and it all correct. I use google developer and I can see the webp picture.It seems only not working in picture tag.
How do I solve this problem?
The missed part is the media attribute, which is required if you want to render conditionally based on screen width.
Follow this syntax:
<picture>
<source srcset="/media/cc0-images/surfer-240-200.jpg"
media="(min-width: 800px)">
<img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
</picture>
Do check this link: [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture][1]
Within the http://schema.org/Product scope, I want to define the markup for an image. Usually it looks as follows:
<img itemprop="image" src="/path-to-image.suffix" alt="image-description" />
However, modern responsive pages use the <picture> tag. I tried...
<picture itemprop="image">
<source media="(max-width: ${viewport-size-1})" srcset="/path-to-image-size-1.suffix">
<source media="(min-width: ${viewport-size-2})" srcset="/path-to-image-size-2.suffix">
<img src="/fallback-path-to-image.suffix" alt="image-description">
</picture>
But it appears not to be accepted by Google's structured data testing tool. Adding it to the <img> tag within the <picture> doesn't seem right to me, as it doesn't highlight the whole context and hence neglects the fact that the image exists in various resolutions...
What is the right Microdata image markup for picture tags?
If you want a URL value
You have to specify the itemprop attribute on the img element, not on the picture element:
<picture>
<source media="(max-width: ${viewport-size-1})" srcset="/path-to-image-size-1.suffix">
<source media="(min-width: ${viewport-size-2})" srcset="/path-to-image-size-2.suffix">
<img itemprop="image" src="/fallback-path-to-image.suffix" alt="image-description">
</picture>
The reason is because only certain elements can be used if the Microdata property should have a URL as value, i.e., all elements with href or src attribute.
If you want an ImageObject value
You have to specify the contentUrl property on the img element:
<picture itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
<source media="(max-width: ${viewport-size-1})" srcset="/path-to-image-size-1.suffix">
<source media="(min-width: ${viewport-size-2})" srcset="/path-to-image-size-2.suffix">
<img itemprop="contentUrl" src="/fallback-path-to-image.suffix" alt="image-description">
</picture>
Specifying the itemprop on a source element (instead of the img element) is allowed, too, but it would need to have a src attribute.
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>
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