We expect the audience of this article as the advance GNU/Linux users and webmaster. WebP image format is not usable in real. It clearly has no future like Google’s most crap quality products. Safari, FireFox, IE none supports at the time of publication of this article. Including a Javascript to save bandwidth invites one extra HTTP request. WebPJS is a Javascript library to convert WebP images into dataURI string on the client site. If we use dataURI string to serve image, why not use dataURI natively? Most importantly, WebP image format is not usable on a normal user’s computer. On Emails they will create problem. JPEG, PNG, GIF are age old formats.
dataURI is far better for the smaller images, there is SVG+XML too. WebP image format may be good for few manually selected web pages, particularly the landing pages. Cloudinary is a Cloud SaaS Which Has a Freemium WebP Batch Converter. Cloudinary is a Freemium service, up to 75K images & videos conversion per month goes free of cost.
Google’s PageSpeed module has automatic conversion feature. But, Google is famous for PRISM, NSA spyware works etc. Google, Microsoft, Facebook and the other companies which were found by Edward Snowden are better to avoid as much as possible. We never say PayPal is bad. PayPal uses HSTS and they implemented that HSTS. A 4 MB Photo is not practical to load by any normal method. WebP image format is good for this purpose but falling back to dataURI is not good idea.
Cloudinary May Be a Good Freemium WebP Batch Converter + CDN For Landing Pages of Websites
Cloudinary has not sponsored us to write this article. We found this service as good at free tier :
1 | http://cloudinary.com/pricing |
They offer 75K per month free work plus 2 GB Storage and 5 GB Monthly Bandwidth in free plan. It is honestly huge. Cloudinary is not smaller service, see their documentation & customers. They support Akamai CDN in paid plan. In general, they have great services, not only WebP conversion, like serving scale images to display size, auto-select file format based on client detection etc, this is quite informative article :
Advertisement---
1 2 3 | https://support.cloudinary.com/hc/en-us/articles/202521522-How-can-I-make-my-images-load-faster- http://cloudinary.com/blog/how_to_support_webp_images_save_bandwidth_and_improve_user_performance http://cloudinary.com/documentation/image_transformations |
They have a WordPress Plugin too :
1 | >https://wordpress.org/plugins/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/ |
WordPress Jetpack does have full support for WebP usage with self-hosted blogs using the Photon service, but that is not known to be a faster service.
I Do Not Need Cloudinary WebP Batch Converter, I need Hand Coding!
No Problem. This is HTML5 way of fallback :
1 2 3 4 | <picture> source srcset="photo.webp 1x" type="image/webp"> <img src="photo.jpg"> </picture> |
There is another way :
1 | <img src="photo.webp" onerror="this.onerror=null; this.src='photo.png'"> |
More way :
1 2 3 4 5 6 | <picture> <source media="(min-width: 1024px)" srcset="photo.webp" type="image/webp"> <source media="(min-width: 1024px)" srcset="photo.jpg"> <source srcset="photo-closeup.webp" type="image/webp"> <img src="photo-closeup.jpg" alt="Closeup of photo"> </picture> |
picture is used instead of image as HTML5 parser algorithm aliases image to img.
But, we have Retina display too :
1 2 3 4 | <picture> <source srcset="photo-1x.webp 1x, photo-2x.webp 2x, photo-3x.webp 3x" type="image/webp"> <img src="photo-1x.jpg" alt="Closeup of photo" srcset="opera-2x.jpg 2x, opera-3x.jpg 3x"> </picture> |
There is the final better way. You probably know about Modernizer :
1 | https://modernizr.com/docs/#what-is-modernizr |
Load it on head. Then photo :
1 2 3 4 | <noscript data-jpg="photo.jpg" data-webp="photo.webp" data-alt="My photo" id="myphoto"> <img src="photo.jpg" alt="My photo"> </noscript> |
Obviously you need this :
1 2 3 4 5 6 7 8 9 10 11 12 13 | Modernizr.on('webp', function (result) { // nscript is not typo var nscript = document.getElementById('myphoto'); var img = document.createElement('img'); img.alt = nscript.getAttribute('data-alt'); if (result) { img.src = nscript.getAttribute('data-webp'); } else { img.src = nscript.getAttribute('data-jpg'); } nscript.parentNode.insertBefore(img, nscript.nextSibling); }); |
So much work, does not worth. All used to say once that, content is king. But now CSS, Js etceteras appears to be the King.
