What is Webp Image Format? Why Use It and How to Use It.

Webp image format that provides both lossless and compresses images format on the web. Using Webp images, make your web pages faster and decease web pages load time. Webp image format created by google web performance team as a replacement of JPEG, PNG, and GIF different kinds of images.

The format was first announced on 30 September 2010, as a new open standard for lossy compressed true-color graphics on the web, producing smaller files of comparable image quality to the older JPEG scheme.

On October 3, 2011, Google announced WebP support for animation, ICC profile, XMP metadata, and tiling (compositing very large images from maximum 16384×16384 tiles).

How does WebP image Work?

Webp Lossy compression image format uses predicting coding to encode an image, like the same method used in VP8 video codec to compress keyframes in videos. Predicting coding use the neighbor values of pixels blocks to predict the block values, and then encodes only differences. WebP Lossless compression uses image fragments in order to exactly reconstruct new pixels.

WebP Support

WebP can also be displayed in all major browsers using the WebPJS JavaScript library. Currently, only Google Chrome and Opera support WebP images. Although other popular web browsers such as Firefox, Safari, and IE do not currently support the new image format natively, there has been some discussion regarding this topic at social media.

Which web browsers natively support WebP?

WebP lossy support

  • Google Chrome (desktop) 17+
  • Google Chrome for Android version 25+
  • Microsoft Edge 18+
  • Firefox 65+
  • Opera 11.10+
  • Native web browser, Android 4.0+ (ICS)

WebP lossy, lossless & alpha support

  • Google Chrome (desktop) 23+
  • Google Chrome for Android version 25+
  • Microsoft Edge 18+
  • Firefox 65+
  • Opera 12.10+
  • Native web browser, Android 4.2+ (JB-MR1)
  • Pale Moon 26+

WebP Animation support

  • Google Chrome (desktop and Android) 32+
  • Microsoft Edge 18+
  • Firefox 65+
  • Opera 19+

Use WebP Image in HTML File.

Using a WebP image in HTML is like using any other kind of image, right? Just slap that sucker into the  tag’s src attribute and away you go!

HTML Code,
<img src=”img/myAwesomeWebPImage.webp” alt=”WebP rules.” />

This will work great, but only for browsers that support it.

So what is the solution for the non-compatible browser or what we do that’s browsers are not supported to webp image format.
we use,

HTML Code,
<picture>
<source srcset=”img/my.webp” type=”image/webp”>
<source srcset=”img/my.jpg” type=”image/jpeg”>
<img src=”img/my.jpg” alt=”my”>
</picture>

it will work in every single browser, not just those that support the  element. The reason for this is that browsers that don’t support  will just display whatever source is specified in the tag.

How to use the webp image as a background image or CSS?

It made more complex when you need to use WebP images in CSS or set webp image as background.
When you add this custom build to your website via the <script> tag, it will automatically add one of two classes to the <html> element:

  1. The webp class is added when the browser supports WebP.
  2. The no-webp class is added when the browser doesn’t support WebP.

CSS

.no-webp .elementWithBackgroundImage {

background-image: url(“image.jpg”);

}

.webp .elementWithBackgroundImage{

background-image: url(“image.webp”);

}

Script Include when use webp as CSS file.

Web Script

<script>

/*! modernizr 3.6.0 (Custom Build) | MIT *

* https://modernizr.com/download/?-webp-setclasses !*/

!function(e,n,A){function o(e,n){return typeof e===n}function t(){var e,n,A,t,a,i,l;for(var f in r)if(r.hasOwnProperty(f)){if(e=[],n=r[f],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(A=0;A<n.options.aliases.length;A++)e.push(n.options.aliases[A].toLowerCase());for(t=o(n.fn,”function”)?n.fn():n.fn,a=0;a<e.length;a++)i=e[a],l=i.split(“.”),1===l.length?Modernizr[l[0]]=t:(!Modernizr[l[0]]||Modernizr[l[0]]instanceof Boolean||(Modernizr[l[0]]=new Boolean(Modernizr[l[0]])),Modernizr[l[0]][l[1]]=t),s.push((t?””:”no-“)+l.join(“-“))}}function a(e){var n=u.className,A=Modernizr._config.classPrefix||””;if(c&&(n=n.baseVal),Modernizr._config.enableJSClass){var o=new RegExp(“(^|\\s)”+A+”no-js(\\s|$)”);n=n.replace(o,”$1″+A+”js$2″)}Modernizr._config.enableClasses&&(n+=” “+A+e.join(” “+A),c?u.className.baseVal=n:u.className=n)}function i(e,n){if(“object”==typeof e)for(var A in e)f(e,A)&&i(A,e[A]);else{e=e.toLowerCase();var o=e.split(“.”),t=Modernizr[o[0]];if(2==o.length&&(t=t[o[1]]),”undefined”!=typeof t)return Modernizr;n=”function”==typeof n?n():n,1==o.length?Modernizr[o[0]]=n:(!Modernizr[o[0]]||Modernizr[o[0]]instanceof Boolean||(Modernizr[o[0]]=new Boolean(Modernizr[o[0]])),Modernizr[o[0]][o[1]]=n),a([(n&&0!=n?””:”no-“)+o.join(“-“)]),Modernizr._trigger(e,n)}return Modernizr}var s=[],r=[],l={_version:”3.6.0″,_config:{classPrefix:””,enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var A=this;setTimeout(function(){n(A[e])},0)},addTest:function(e,n,A){r.push({name:e,fn:n,options:A})},addAsyncTest:function(e){r.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=l,Modernizr=new Modernizr;var f,u=n.documentElement,c=”svg”===u.nodeName.toLowerCase();!function(){var e={}.hasOwnProperty;f=o(e,”undefined”)||o(e.call,”undefined”)?function(e,n){return n in e&&o(e.constructor.prototype[n],”undefined”)}:function(n,A){return e.call(n,A)}}(),l._l={},l.on=function(e,n){this._l[e]||(this._l[e]=[]),this._l[e].push(n),Modernizr.hasOwnProperty(e)&&setTimeout(function(){Modernizr._trigger(e,Modernizr[e])},0)},l._trigger=function(e,n){if(this._l[e]){var A=this._l[e];setTimeout(function(){var e,o;for(e=0;e<A.length;e++)(o=A[e])(n)},0),delete this._l[e]}},Modernizr._q.push(function(){l.addTest=i}),Modernizr.addAsyncTest(function(){function e(e,n,A){function o(n){var o=n&&”load”===n.type?1==t.width:!1,a=”webp”===e;i(e,a&&o?new Boolean(o):o),A&&A(n)}var t=new Image;t.onerror=o,t.onload=o,t.src=n}var n=[{uri:”data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=”,name:”webp”},{uri:”data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAABBxAR/Q9ERP8DAABWUDggGAAAADABAJ0BKgEAAQADADQlpAADcAD++/1QAA==”,name:”webp.alpha”},{uri:”data:image/webp;base64,UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA”,name:”webp.animation”},{uri:”data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=”,name:”webp.lossless”}],A=n.shift();e(A.name,A.uri,function(A){if(A&&”load”===A.type)for(var o=0;o<n.length;o++)e(n[o].name,n[o].uri)})}),t(),a(s),delete l.addTest,delete l.addAsyncTest;for(var p=0;p<Modernizr._q.length;p++)Modernizr._q[p]();e.Modernizr=Modernizr}(window,document);

</script>