× Fact! Joining this forum will make you a happier person! - Register for FREE

Webp vs Jpeg vs PNG vs Base64
Do any of you use the webp image format in your websites yet? I love it I absolutely do, but now I have this irritating issue of neither firefox nor EDGE supporting the webp image format.

So now I am lost as to what would be the best way forward I used to like base64 but it's like 30% larger than the original so for years I just sticked to jpeg for web and use PNGs only if I really really need the transparency then webp came along and it was love at first sight, but now it only works in Blink browsers so I need to figure out a way to make it work for all browsers.

I was thinking of this:

 <source srcset="img/awesomeWebPImage.webp" type="image/webp">
 <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg">
 <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">

However I get the feeling that this will download both versions and is a bad idea?
Join the official JSE Discord Channel

I'd stick with the classics until webp is more recognized and adopted.

I know people use it on the web but base64 is intended to be used for storing and transporting binary data in simple alphanumeric characters.

There's always *.gif
IQ Test

I use base64 to save my sprites like the small CSS stuff that I want to cache with the css in the browser like I'll put my common UI icons in base64 in my CSS, then let that whole chunk get cached by the browser. As for webp, I don't think there is anything out there that can match it you can't tell the difference between a webp image and a PNG with alpa yet the one is 900kb and the other one is 33Kb.

I just love it, I see firefox did not want to add it due to "browser politics" Google did not want to implement one of Mozilla's technologies a few years back so Mozilla decided they won't support webp so they are killing the web by being children.

Join the official JSE Discord Channel

Users browsing this thread: 1 Guest(s)

Color Skins

Change Color:

Background Patterns:

Background Images:

Main Options: