I currently try to use the picture tag for a website. This is my current code (the picture are at /images/test1.jpg and /images/test2.jpg:
<picture>
<source srcset="/images/test2.jpg" type="image/jpeg" >
<img src="/images/test1.jpg">
</picture>
The expected result is that when the browser supports it it loads the image from the srcset and otherwise from the img tag. However I tested in Chrome and Firefox, which should both support it and the result is that it shows the image from the srcset with a size of 0x0 and additionally shows the picture from the src tag.
How to correctly implement this using the picture tag?
Edit:
this is how I added the class defining the image width earlier, which resulted in a empty field of the width I set in the image class and a field with the image from the src.
<picture>
<source class="image" srcset="/images/test2.jpg" type="image/jpeg" >
<img class="image" src="/images/test1.jpg">
</picture>
I don't clearly understand what is the goal here.
But you missed the media attribute. The last fallback only works when there are no media around.
<picture>
<source class="image" srcset="images/test2.jpg" type="image/jpeg" media="(min-width: 1900px)">
<img class="image" src="images/test1.jpg">
</picture>
thanks for all the help. I found my issue:
Actually I screwed up two things
I did not really get that I always get the image from the src tag
I should not set the class for both source tag and the img tag, but only for the img tag
this solution works
<picture>
<source srcset="/images/test2.jpg" type="image/jpeg" >
<img class="image" src="/images/test1.jpg">
</picture>
Related
I know the solution is <picture>
but which format is standard?
1.
<picture>
<source type="image/webp" srcset="pic.webp">
<img src="pic.jpg" alt="test">
</picture>
2.
<picture>
<source type="image/webp" srcset="pic.webp">
<img src="pic.jpg" alt="test" type="image/jpeg">
</picture>
3.
<picture>
<source type="image/webp" srcset="pic.webp">
<source type="image/jpeg" srcset="pic.jpg">
<img src="pic.jpg" alt="test">
</picture>
Number 1 would be the standard way of doing it.
When using the <picture> element the browser looks through each <source> element – starting from the top – to find an image that best fits the the current scenario. In your case it would only be if it supports the format in the type attribute. But it could also look for things like media queries in the media attribute or the pixel density of the user's screen if you add 2x or 3x versions in the srcset list.
As stated on MDN, if the browser can't find a fitting match in the <source>s, it defaults to the <img> tag:
The <img> element serves two purposes:
It describes the size and other attributes of the image and its
presentation. It provides a fallback in case none of the offered
<source> elements are able to provide a usable image.
So the JPEG in your example doesn't need to have a <source> as well, because it will be chosen if none of the <source>s are used.
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]
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>
I like using srcset to define responsive images. Supose we have this situation with picture and img:
<picture>
<source srcset='myimage-large.svg' media='(min-width: 1000px)'>
<source srcset='myimage-small.svg' media='(min-width: 600px)'>
<img src='myimage.svg'>
</picture>
It works good, but I have to interact with a svg image. So object would be the best solution. But how do I do something like srcset in this case?
I know this is a new format for images, but I don't know how to show it in HTML.
Does anyone know how I can do that? Which browsers can show this image format besides chrome?
sample-webp-image.webp
You use webp like any image:
<img src="img.webp" />
However since it's not always supported (see http://caniuse.com/#feat=webp), you can use this to set a fallback:
<picture>
<source srcset="img.webp" type="image/webp">
<source srcset="img.jpg" type="image/jpeg">
<img src="img.jpg">
</picture>
What if it doesn't find the image for the specified path, how can I show a no picture image in that case, something similar to this:
<img src="img.jpg" onerror="this.src = 'nopicture.gif';"/>