CatDeely / webp.js

The library load a webp image if the browser is supported, else load a jpg, png or whatever format you want in img tag

webp.js

Implement now WebP images on your site

The library load a webp image if the browser is supported, else load a jpg, png or whatever format you want in img tag

How can i serve different images for different browsers?

In order to load the correct image you need to upload the same image with the same name and different extension of course, .webp and .jpg|.png|.gif

How can i convert a png, jpg image to WebP format?

Well you can go to Google Developers Site and search for "WebP" (https://developers.google.com/speed/webp/). The page shows you how convert image from or to WebP format.

How implement the webp.js library?

It's very easy to configure webp.js library, just need load the ".min" file in the head section of your html. Example:

```HTML <script type="text/javascript" src="../lib/webp.min.js"></script> ```

And now, how load the image files?

For achieve the goal of load the correct image and execute one only request to server, we need use the data-* property for img tag, in this case we use data-src & data-format. In the data-src attribute you can specify the filename and path for that file (without extension). On other hand in the data-format attribute you may specify the format (extension) which is loaded in which case of the web browser not supported WebP. Example:

```HTML

```

If the browser supports webp the result of img tag will look something like this...

```HTML

```

If the browser NOT supports webp will look like this...

```HTML

```

And, if the user has disabled javascript?

Obviously if the user has disabled javascript from his browser, the library not work at all. Solution:

1. Asks the user to enable the javascript duh!
2. Put the same image with png, jpg extension after the webp image, inside of noscript html tag. Example:

```HTML

```

At last but not least important, I would like you to contribute with the project if you think is awesome or maybe a little functional, and thanks for the feedback!