How to view webp format on ie11

Question

Is there anyway to view webp image format on IE11 or can convert it to another format with javascript code on this browser? I tried "picture" element but seems like it cann't work like Chrome62

Tusk

see caniuse.com/#feat=webp ... look in resources for polyfills ... though, IE11 doesn't support webm either, so you may be stuck – Extravert

please give me a hint to convert webp to another format (png, jpg) with javascript – Overalls

hint: IE11 doesn't support webp or webm ... so ... {rock} ... you ... {hard place} – Extravert

Answer 1

This is also a very easy-to-use and effective polyfill for rendering WebP images on IE or other browsers which do not support WebP rendering. Here is how to use it:-

<script src="https://unpkg.com/[email protected]/dist-cjs/polyfills.js"></script>
<script src="https://unpkg.com/[email protected]/dist-cjs/webp-hero.bundle.js"></script>
<script>
 var webpMachine = new webpHero.WebpMachine();
 webpMachine.polyfillDocument();
</script>

Votaw

While this looks great and with the depreciation of Flash is the only possibility on IE11 and Safari, it adds 300kb minified/100kb minified+gzipped, and is still at least 10x slower than png/jpeg in IE11/Safari. To put this into perspective, the entire VueJS framework is 1/3rd this size, and this will slow down your site on Safari and IE11. If webp saves you 100kb per image and you have hundreds of images, and don't use webp for icons, and you only load this library if IE11 or Safari are detected, this solution is beautiful and awesome. – Rhizobium

@NickSteele My thought xD – Johnston

That's work awesome. Thank you so much for posting the solution! – Kingbolt