• Home
  • Archive
  • Tools
  • Contact Us

The Customize Windows

Technology Journal

  • Cloud Computing
  • Computer
  • Digital Photography
  • Windows 7
  • Archive
  • Cloud Computing
  • Virtualization
  • Computer and Internet
  • Digital Photography
  • Android
  • Sysadmin
  • Electronics
  • Big Data
  • Virtualization
  • Downloads
  • Web Development
  • Apple
  • Android
Advertisement
You are here:Home » Cloudinary WebP Batch Converter with CDN & Hand Coding

By Abhishek Ghosh April 4, 2016 9:13 pm Updated on April 4, 2016

Cloudinary WebP Batch Converter with CDN & Hand Coding

Advertisement

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.

Advertisement

---

 

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 :

Vim
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 :

Documentations
Vim
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 :

WordPress Plugin on Official Repo
Vim
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.

Cloudinary WebP Batch Converter with CDN & Hand Coding

 

I Do Not Need Cloudinary WebP Batch Converter, I need Hand Coding!

 

No Problem. This is HTML5 way of fallback :

Vim
1
2
3
4
<picture>
    source srcset="photo.webp 1x" type="image/webp">
    <img src="photo.jpg">
</picture>

There is another way :

Vim
1
<img src="photo.webp" onerror="this.onerror=null; this.src='photo.png'">

More way :

Vim
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 :

Vim
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 :

Vim
1
https://modernizr.com/docs/#what-is-modernizr

Load it on head. Then photo :

Coded by: stucox.com/blog/using-webp-with-modernizr/
Vim
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 :

Coded by: stucox.com/blog/using-webp-with-modernizr/
Vim
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.

Facebook Twitter Pinterest

Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, Surgeon, Author and Blogger. You can keep touch with him on Twitter - @AbhishekCTRL.

Here’s what we’ve got for you which might like :

Articles Related to Cloudinary WebP Batch Converter with CDN & Hand Coding

  • Nginx WordPress Installation Guide (All Steps)

    This is a Full Nginx WordPress Installation Guide With All the Steps, Including Some Optimization and Setup Which is Compatible With WordPress DOT ORG Example Settings For Nginx.

  • WordPress & PHP : Different AdSense Units on Mobile Devices

    Here is How To Serve Different AdSense Units on Mobile Devices on WordPress With PHP. WordPress Has Function Which Can Be Used In Free Way.

  • Changing Data With cURL for OpenStack Swift (HP Cloud CDN)

    Changing Data With cURL For Object is Quite Easy in OpenStack Swift. Here Are Examples With HP Cloud CDN To Make it Clear. Official Examples Are Bad.

  • OpenStack Swift & HPCloud CDN PHP Bindings : Basics

    Here is the basics of OpenStack Swift & HPCloud CDN PHP Bindings for the WordPress Plugin developers and those who works with PHP based CMS.

performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!

If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.

Contact Us

Subscribe To Our Free Newsletter

Get new posts by email:

Please Confirm the Subscription When Approval Email Will Arrive in Your Email Inbox as Second Step.

Search this website…

 

Popular Articles

Our Homepage is best place to find popular articles!

Here Are Some Good to Read Articles :

  • Cloud Computing Service Models
  • What is Cloud Computing?
  • Cloud Computing and Social Networks in Mobile Space
  • ARM Processor Architecture
  • What Camera Mode to Choose
  • Indispensable MySQL queries for custom fields in WordPress
  • Windows 7 Speech Recognition Scripting Related Tutorials

Social Networks

  • Pinterest (24.3K Followers)
  • Twitter (5.8k Followers)
  • Facebook (5.7k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.3k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • Affordable Earphone/IEM for Audiophiles: HiFiMan RE-400 WaterlineOctober 2, 2023
  • What is Hardware Security Module (HSM)September 30, 2023
  • Transducer Technologies of HeadphonesSeptember 28, 2023
  • What is Analog-to-Digital Converter (ADC)September 27, 2023
  • Comparison of Tube Amplifiers and SemiconductorsSeptember 26, 2023
PC users can consult Corrine Chorney for Security.

Want to know more about us?

Read Notability and Mentions & Our Setup.

Copyright © 2023 - The Customize Windows | dESIGNed by The Customize Windows

Copyright  · Privacy Policy  · Advertising Policy  · Terms of Service  · Refund Policy