I used a <picture> element to make the image responsive based on the screen sizes. It works fine on most of the web browsers except Safari. With Safari web browser I have to refresh the page each time to see the expected results.
To fix this issue, I added polyfill from the following site and followed the instructions: http://scottjehl.github.io/picturefill/ but it didn't resolve the issue.
Any help regarding this issue would be greatly appreciated!
Here's the markup of <picture> element:
<picture>
<source media="(min-width: 600px)" srcset="images/image-lrg.jpg" />
<img src="images/image-smll.jpg" alt="image of laptop" />
</picture>
<picture>
<source media="(min-width: 600px)" srcset="https://www.w3schools.com/css/img_lights.jpg" />
<img src="https://www.w3schools.com/css/img_5terre.jpg" alt="Cinque Terre" />
</picture>
Read about URL: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL
Read about Browser compatibility - <picture>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture#browser_compatibility
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 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 just started a new webpage so there's not much markup to go over.
I set this down:
<picture>
<source media="(min-width: 1000px)"
srcset="images/largeme.jpg">
<source media="(min-width: 465px)"
srcset="images/medme.jpg">
<img src="images/smallme.jpg"alt="hero profile">
</picture>
and it defaults to the medme.jpg picture no matter the width of the window. I set down this:
<picture>
<source media="(min-width: 1000px)"
srcset="images/largeme.jpg">
<source media="(min-width: 465px)"
srcset="images/medme.jpg">
<!-- <img src="images/smallme.jpg"alt="hero profile">-->
</picture>
commenting out the img fallback tag and it doesn't show anything.
I'm running Chrome 52 which should support picture element. But it seems to be acting as if it doesn't support it or something. What am I doing wrong here?
The img element inside the picture element isn't optional. The picture wrapper and its source elements are there to change the img, not replace it.
It should work in chrome, maybe you need the viewport meta-tag to trigger the different sources? <meta name="viewport" content="width=device-width, initial-scale=1"> Here is a simple picture-tag example which works in chrome. Compare it with your site to find out what is different.
It sounds silly, but have you tried reverting the order? For some reason doing this made it work for me.
So, instead of:
<picture>
<source media="(min-width: 1000px)"
srcset="images/largeme.jpg">
<source media="(min-width: 465px)"
srcset="images/medme.jpg">
<img src="images/smallme.jpg"alt="hero profile">
</picture>
try this:
<picture>
<source media="(min-width: 465px)"
srcset="images/medme.jpg">
<source media="(min-width: 1000px)"
srcset="images/largeme.jpg">
<img src="images/smallme.jpg"alt="hero profile">
</picture>
You must set a max-width for the lower width image, otherwise it is the only one always served (you can see it in devtools network tab if you try).
Like this
<picture>
<source media="(min-width: 1000px)"
srcset="images/largeme.jpg">
<source media="(max-width: 999px)"
srcset="images/medme.jpg">
<img src="images/smallme.jpg"alt="hero profile">
</picture>
According to this source the <source> media attribute is not being supported at all...
According to caniuse, support is conditional on enabling experimental Web Platform features in chrome://flags
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