Behold the Power of WebP
If the below image has “webp” in the corner your browser can display WebP. If it has “jpeg” it is because your browser cannot show WebP images but the user experience remains the same. webp is a new image format pioneered by Google based on the VP8 video codec to reduce the download size of images on the web. What I am presenting is a way to offer WebP images to browsers that support them while falling back to jpegs so that visitors still have the same user experience.
<script src="weppy.js"></script> anywhere on the page but for the best performance add it add the end of your document right before the </body> tag. Then create your img tags like so:
<img alt="Baby Jesus and Mary" class="webp" data-src="baby-jesus-and-mary.jpg" />
Browser support and issues
Native Webp support is currently available in Chrome 9+ and Opera 11.10. Support for WebP using a WebM video tag is available in
<img data-src="image.jpg" class="webp" alt="an image" width="100" height="100" />
<img src="image.jpg" alt="an image" width="100" height="100" />
The major disadvantage with doing this is that it clutters up the html but it will ensure give everyone and everything can access your images.
Limitations of WebP images as WebM video
Since it creates a video tag from an img tag it’ll behave much differently. Naturally any css applied to img tags will have to be modified to apply to video tags as well. With an img tag the browser scales it to fit whatever width and height are set, but with video tags it will be scaled but the aspect ratio will always be the same as the native size of the image; it won’t be stretched to fit. since you should be setting the width and height to the image’s natural width and height this shouldn’t be an issue.
XmlHttpRequest is used to load the WebP image and create the WebM video and there may be a bit of a performance penalty because the image has to be loaded as binary data which has a little overhead. Also the WebP images have to be downloaded from same domain unless Cross-Origin Resource Sharing is used. Which basically means that the WebP file has to be served with the HTTP header:
WebP in CSS