Search code examples
imageinternet-explorerinternet-explorer-11webpwebm

Any Workarounds for WebP on Internet Explorer?

Currently working on a new website for my workplace, I was asked to make it faster and more optimized, so I decided to use WebP for all the images to reduce on loading times, the only downside is, we have been forced to use IE 11 as our main browser at work, and WebP doesn't work on it (As some of you probably know already)

Just wondering if there are any scripts that I could use or any workarounds that would allow IE 11 to either swap WebP to JPEG, something like the <!--[if (IE)]> that I could use to load JPEG instead?

Any solutions are welcome! Just want to try and ensure that I get compatibility for all browsers!

Thanks and sorry is this seems like a noob-ish question!

Solution

  • There're two solutions to deal with the issue in IE 11.

    1. The easiest way is to use a <picture> element. You can set a webp <source> and a jpeg <img> fallback. The browser will try to load the first compatible one. In IE, it will load the jpeg file. In other supported browsers, it will load webp file.

    Sample code:

    <picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpeg" />
</picture>
    1. You can use a polyfill webp-hero to convert webp format to IE 11 supporting format. In other supporting webp browsers, the polyfill won't run. But it will take a few time to convert in IE 11.

    Sample code:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://unpkg.com/webp-hero@0.0.1/dist-cjs/polyfills.js"></script>
    <script src="https://unpkg.com/webp-hero@0.0.1/dist-cjs/webp-hero.bundle.js"></script>
</head>
<body>
    <img src="picture/landscape.webp" />
    <script>
        var webpMachine = new webpHero.WebpMachine()
        webpMachine.polyfillDocument()
    </script>
</body>
</html>