How to work with webp in Edge, IE and older Safari?

Question

I want to reduce page load, since comparing webp vs jpg or png, webp has much lower size(in KB), but here is problem it does not work in Edge,IE(11) and older Safari(5.1.7).

Looking for solution I found post by @WaughWaugh https://stackoverflow.com/a/56021203/10966377 which posted tool which converts webp to png using base64, but before I could sleep without stress, doesnt that just increase unwanted page load because it has to convert webp to png?

Answer 1

It doesn't transfer PNGs across the wire.

The costs come from downloading the library itself and the CPU/memory usage of running it.

Answer 2

You can use a combination of Content Negotiation and URL rewriting to let the webserver handle it, but that won't enable WebP for non-supporting browsers, of course. Here's how you can do it with Apache (from .htaccess in image folder):

<If "%{HTTP_ACCEPT} =~ /webp/">
    Options +MultiViews
</If>
<Else>
    RewriteEngine on
    RewriteCond   "$1.jpg"           -f
    RewriteRule   "^(.*)$" "$1.jpg"
</Else>

So if the browser request contains "webp" in the Accept header, it uses ConNeg, otherwise the JPG is served, if it exists.