I am trying to use picture Tag in react app (jsx file) but it doesn't seems to work.
Here is my code
<picture>
<source media="(min-width: 1024px)" src="image_Desktop.png"/>
<source media="(max-width: 768px)" src="image_Mobile.png"/>
<source media="(min-width: 768px) and (max-width: 1024px)" src="image_Tab.png"/>
<img src="image.png" alt="" styleName='brain-image'/>
</picture>
I tried giving attribute as srcset/src both in source tag but still not working.Any solution for the above problem?
If you are using srcset instead of using srcSet (with capital), this could be your problem.
Here is the another problem caused by usage of srcset:
Why is React.js removing the srcset tag on <img />?
As per the Official Doc :
The HTML <picture> element is a container used to specify multiple
elements for a specific contained in it. The browser
will choose the most suitable source according to the current layout
of the page (the constraints of the box the image will appear in) and
the device it will be displayed on (e.g. a normal or hiDPI device.
And img is a DOM element but a javascript expression.
Possibly duplicate of this React img tag issue with url and class
If this doesnt help you , please share the inspected HTML for this Component
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 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>
Working on a portfolio for a photographer / videographer and trying to find a good balance between fast load and good image quality on mobile devices.
So far, I'm keen to bet on the picture element to load multiple versions of the images based on device max width like so:
<picture>
<source media="(max-width: 360px)"
srcset="picture_small.jpg">
<source media="(max-width: 640px)"
srcset="picture_medium.jpg">
<source media="(max-width: 1366px)"
srcset="picture_large.jpg">
<img src="picture_original.jpg" width="6000" height="4000"
alt="Really usefull description for each image">
</picture>
My concern is that the "alt" attribute will be ignored all together by user agents for the first 3 versions of the picture and hope of search engines to use it is also a long shot.
The <picture> element is a container only. The <img> element is the main part describing its contents. <source> only describes different sources. So the alt remains the same for all of them.
You cannot have a picture element without an img element. alt is a requirement in <img> and is part of its specification in the standard.
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?