I’ve been thinking about using WebP altogether in most of my projects, the benefits is quite big. As I had written in earlier post, almost 10x smaller file size. But there’s one main problem, it is not supported by a few major browsers. As you can see from these table, two major browsers that everyone wants to support is Safari and iOS Safari.

But why? Why dont Firefox and Safari supports it? As a redditor mentioned, its a bit complicated.

So anyway, alienating iOS Safari is a big no-no. Well, that depends on your target audience, but for me who does websites for events, there’s no way I can do that.

Enter the Polyfill Zone.

Yes, we need to add additional js stuffs to make it work though but for the sake of multi browser support, sacrifices have to be made. In this case, we need to use WebP polyfill.

So the step is

• add this polyfill in your HTML page
• convert the image using convertico.co
• add the image
• follow the polyfill’s github instruction
• ???
• profit!

I might need to revisit this post with another post to tell how it goes because I have not tried it (the polyfill). I wanted to but I can’t right now because I’m working in a very serious company doing very serious shit.