<img src=${imageUrlWebp} onerror="this.error=null;this.src=${imageUrl}" width="700" height="110"/>
Does this method of using fallback images in angular work in all the browsers.It seems to work in browser but not sure how to check in browsers which don't support webp. I know that they is another method something like this
<picture>
<source srcset="img/awesomeWebPImage.webp" type="image/webp">
<source srcset="img/creakyOldJPEG.jpg" type="image/jpeg">
<img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>
But this doesn't seem to work properly as I am appending this snippet to html from a typescript file and always renders the src i give in img tag.
So can anyone tell if the first method is correct and any pointers on how to check if fallback is working properly in browsers which don't support 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.
GIFs are heavy (xx mb), so we convert them to mp4 and webp. How to make the browser choose <img webp> or fallback to <video mp4> if he does not support webp?
I know we can use <source> in one <video> or in one <picture>, but how to make the browser choose between one <img webp> and fallback into <video mp4> if needed?
Is there a way to put the webp in the <video>? or a mp4 in <img>?
Regards
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
I'm facing a problem, I just can't seem to find out what the problem is, I have:
<picture>
<source type="image/webp" srcset="/images/meh_logo.webp">
<img src="/images/meh_logo.png" type="image/png">
</picture>
On chrome, it's just defaulting to the png logo.
If I hover over the link in inspector, it shows the webp image.
If I open the webp image link in a new tab, it loads file.
My headers return:
image/webp,image/apng,image/,/*;q=0.8
If I change source srcset to img srcset - that will display the webp file.
Chrome: 70.0.3538.110
Tested locally on MAMP Pro and doesn't display.
The WEBP is a tree. The PNG is a rose. You used the code below...
<picture>
<source type="image/webp" srcset="https://www.gstatic.com/webp/gallery/4.sm.webp">
<img src="https://www.gstatic.com/webp/gallery3/1.sm.png" type="image/png">
</picture>
According to this source you should repeat the source, like this:
<picture>
<source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" type="image/webp">
<source srcset="https://www.gstatic.com/webp/gallery3/1.sm.png" type="image/png">
<img src="https://www.gstatic.com/webp/gallery3/1.sm.png" alt="Image" class="tm-img">
</picture>
When I run these scripts in FF and Chrome they show a tree, thus show the WEBP image. What do you see?
After reading through this question and answer, I was still a little confused, so I'd like to add this clarification: When you use the Chrome inspect tool on your image, it will still highlight the line with your <img> in it, which makes it seem that the larger file is loading. But, as you can see with the example given, the WEBP is actually what is loading and showing on the screen, because neither snippet shows the photograph of a rose found here.
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)