I have a problem. In my HTML pages, I have a lot of Webp images that I can visualize only using Google Chrome. With other browsers like Mozilla, Explore, and Safari I can't see them.
Is there a solution? Maybe without change every image's extension (cause they are a lot)?
Thanks
You need to fallback to a supported image format.
Below's example is using the <picture> element and the <source> elements with an img element fallback. The browser will try loading the assets inside the <picture> element from top to bottom until all the "conditions were satisfied" (optional sizes attribute and complex srcset which aren't in the below code) and the content format is supported.
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="">
</picture>
If the images are used in CSS:
You can use Modernizr's .no-webp class name to target non-support browsers and serve a non-webp format instead:
.no-webp .elementWithBackgroundImage {
background-image: url("image.jpg");
}
This article has good information you can use
Detecting browser WEBP support - A guide by Google (creator of WEBP)
Related
I need to display my .png in background-image in older Safari versions and for the rest of browsers just display .webp format.
I need to do it only throught CSS and HTML. No script insluded. (#supports doesn´t support older Safari versions as well).
Thank you for any advice!
The webp format is not supported by Safari as of today, and I'm not sure if it is planned for implementation in the near future. But you can give the browser a choice whether to use webp or jpg like so.
The browsers are smart enough to download and use only the best supported image.
You can give a fallback or default img
refer this - How to add webp support in Safari browser
<picture>
<source srcset="
/uploads/img_small.webp 1x,
/uploads/img_big.webp 2x" type="image/webp">
<source srcset="
/uploads/img_small.jpg 1x,
/uploads/img_big.jpg 2x" type="image/jpeg">
<img src="/uploads/img_small.jpg">
</picture>
The above example allows the browser to choose either a .jpeg or .webp image.
And as far as .webp goes, it is available on Safari 14
Answer Source
<picture>
<source type="image/svg+xml" srcset="stackoverflow.svg">
<source type="image/webp" srcset="stackoverflow.webp">
<img src="stackoverflow.png">
</picture>
This allows browser to reject the unsupported file types.
Source
Just for completenes sake, image-set is the way to set webp background-image with fallback:
.some-class {
background-image: url('fallback-image.png');
background-image: image-set(
url('image.webp') 1x,
url('image#2x.webp') 2x,
url('fallback-image.png') 1x,
url('fallback-image#2x.png') 2x
);
}
The webkit-prefix might have to be used depending on the browser. And to this day firefox does not seem to support it. Check out caniuse for more info.
Edit: Just tried it myself in firefox and the webkit-prefix seems to work. This just shows that one should rather trust the official docs and test it yourself.
I'm trying to render different images in chrome and in safari. The problem is that we are using latest formats of images (like webp and jpeg2000) but safari won't accept webp. So what I would like to have is without js, if possible, a conditional rendering of sources. I pretty sure I can solve it using the "picture" tag of HTML5, or maybe a css solution but I haven't done it succesfully yet.
I tried this with picture tag:
<picture>
<source srcset="img_pink_flowers.webp">
<source srcset="img_white_flower.jp2">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
More details about the project is that I am using React but I do not think this is relevant for the issue. Any more info you might required will be provided!
Thanks very much for the help!
I tried to use the <picture> Tag in html to load "webp" images for faster loading times.
This works and loads the webp image:
<picture>
<source srcset="img/imageXYZ.webp" type="image/webp">
<img src="img/imageXYZ.png">
</picture>
This works and loads the png image:
<img src="img/imageXYZ.png">
But Firefox, Chrome and Edge aren't able to load the fallback image. I tested that by changing the name of the webp image to a wrong one like in the example below:
<picture>
<source srcset="img/imageXYZZZ.webp" type="image/webp">
<img src="img/imageXYZ.png">
</picture>
It just shows the "missing image symbol" like you see in the screenshot here:
Screenshot
EDIT: To get the test to work, Rodrigo Faria pointed out the right answer. For a more specific answer to my problem, see my answer.
The mistake was on my side: The fallback image does work, for example the png image is loaded on Safari, because Safari doesn't support webp images. The fallback img just doesn't work when you give the webp image a wrong name like I did with srcset="img/imageXYZZZ.webp". The reason for that is that the fallback image is loaded when the browser can't support the type (type="image/webp"). Firefox, Chrome and Edge can support the type and try to load the webp img and then don't find it because it is named wrong. But then they don't check again for the fallback image, they only do that when errors happen with "type" or "media".
The fallback image is used when none of sources matches with the attribute "media".
For your test, try to do this:
<picture>
<source srcset="img/imageXYZ.webp" type="image/webp" media="(min-width: 2800px)">
<img src="img/imageXYZ.png">
</picture>
You will see that the media doesn't match and the "img" will be used!
Look at this description: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
<picture>
<source type="image/webp" srcset="images/me.webp">
<img id="avatar" src="images/me.webp" alt="Me">
</picture>
When I use the picture element, the browser(chrome) doesn't load the image with the other resources. However, when I replace <picture> with only <img> element it works fine:
<img id="avatar" src="images/me.webp" alt="Me">
Why is that happening?
Your code will load the me.webp image if the browser supports its. If not, the jpg image will be shown (which works). Chrome 67 supports webp format, so the only issue I can figure out is that me.webp is not in the images folder.
AFAIK, <picture> is used when you want multiple possible images to use in a responsive design. The <img> at the end is the fallback. It sounds like images/me.webp isn;'t working.
Unless you are really making use of <picture>, use <img>.
Is <PICTURE> officially in HTML5? I can't find it in w3schools.com.
Assuming it is official, is the source attribute of the fallback <img> element src or srcset. I am seeing some web sites using srcset and they don't work in any version of IE, but src works in IE.
You can see an (unofficial) overview of browser support here.
The <img> element must be included, and this has the side-effect of offering a fall-back option.
The picture element, by necessity, must have an <img> tag inside it, alongside the <source> elements. This has the side-effect of providing a fall-back option, but is also necessary to provide the base image and metadata (especially to provide the required alt attribute). The <source> elements merely override the src attribute of the <img> tag (under specified circumstances).
Here is an example of the picture element, used properly. This example comes from the Mozilla Developer's Network.
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
The src attribute should always be included, even if you use the srcset attribute in addition.
The srcset attribute is (from what I understand) an "older" technique of defining sources for different resolutions. It does not use standard-syntax media queries or have the other flexibilities afforded by using the <picture> and <source> elements (although Chris Coyier of CSS-tricks disagrees with me here), but may be supported by some browsers which don't support the newer standard. Including the srcset attribute on your <img> tag might be desirable, but, in these cases, you still need to include the src attribute as well (which provides a default when none of the srcset files are appropriate, and provides a fall-back for browsers that don't support srcset). All image tags always need src and alt attribute -- these are required attributes for the <img> tag.
A valid example of the <picture> tag, including the srcset attribute as a fall-back, and the src attribute as a worst-case-scenario fall-back, is below.
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" srcset="mdn-logo.png 2x" alt="MDN">
</picture>
This Smashing Magazine article gives a much more in-depth analysis of the different responsive images techniques and when to use each one.
Aside: Please don't trust W3Schools as an official source. W3Schools chose a name that is similar to W3C (the World Wide Web Consortium), but they are not, in fact, related to the official standards body. From their about page: "The site derives its name from the World Wide Web (W3), but is not affiliated with the W3C."
Yes <picture> tag is part of html5 and according to documentation, its fallback is <img src=... > which will work even in very old browsers.
<picture>
<source media="(min-width: 64em)" src="high-res.jpg">
<source media="(min-width: 37.5em)" src="med-res.jpg">
<source src="low-res.jpg">
<img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
<p>Accessible text.</p>
</picture>
Its also worth noting that other solutions, such as the srcset attribute, are also being discussed and are starting to see support. The srcset attribute was implemented in Webkit a while ago. However srcset attribute is not used for fallback but allows you to specify higher-quality images for your users who have high-resolution displays, without penalizing the users who don’t.