![\"picture\"](\"https:\/\/blog.mindworkshop.com\/image\/webp004.gif\")
<\/p>\nThe WebP format was developed by Google as a twenty-first century replacement for the aging hoard of mutant armadillos which has previously served the web as graphic standards. It can be used in place of still image formats, such as JPEG and PNG, and it really gets up and dances when it’s used to replace the medieval relic that is GIF to manage animations.<\/p>\n
<\/p>\n
WebP offers both lossless image compression like PNG and lossy image compression like JPEG. It uses vastly more effective image compression than existed when the foregoing formats were originally created back at the dawn of human civilization, resulting in both smaller animation files and better looking ones. It supports full alpha transparency.<\/p>\n
It also handles timing in milliseconds, rather than in the hundredths of a second that GIF uses.<\/p>\n
In case the whole lossless and lossy compression issue sounds a bit like two Martians discussing what to order for lunch, here\u2019s a brief digression on the matter.<\/p>\n
Graphic files are by their nature sort of huge, and huge files can be a bit of an issue if you have a finite amount of storage space, such as on the SD memory card of a digital camera, or a finite amount of bandwidth over which to transmit said files, such as the Internet if you didn\u2019t spring for a gigabit fiber connection.<\/p>\n
<\/p>\n
These inconsiderate aspects of the physical universe being pretty much insurmountable, graphics are typically stored with data compression to reduce the amount of space they occupy. In its simplest sense, data compression as it\u2019s applied to a picture would find areas of identically-colored pixels and replace them with a code that says, in effect \u201cthere used to be an area of identically-colored pixels here.\u201d When it comes time to unpack the graphic, the software that does so would interpret the codes for the areas of identically-colored pixels and correctly recreate the original picture.<\/p>\n
![\"picture\"](\"https:\/\/blog.mindworkshop.com\/image\/webp001.webp\")
<\/p>\n
This is called \u201clossless\u201d compression. That which gets written to a lossless graphic document comes out of that document unchanged. Lossless compression is the basis of the PNG still image format used in web pages, among others.<\/p>\n
In dealing with photorealistic images \u2013 to wit, pictures from a digital camera \u2013 lossless compression usually finds itself in a bit of a box. Zoom in on a digital camera image and you\u2019ll probably find that most of the areas therein that look like they consist of identically-colored pixels actually don\u2019t. They\u2019ll exhibit minor variations in color due to shading and light effect. This would pretty much stop lossless compression in its tracks.<\/p>\n
“Lossy” compression cheats around this limitation, and it cheats quite effectively. In practice, there\u2019s more detail and color information in most digital images than our eyes actually require to perceive them as being photorealistic and reasonably attractive. This is even more the case when pictures appear at a web page, or in other on-line media, wherein we don\u2019t pay them much more than passing attention. It\u2019s possible to lose a bit of detail and color fidelity, making formerly almost identical pixels in fact identical, and in so doing allowing image compression to have something to work with.<\/p>\n
If the degree of color and detail degradation is chosen reasonably carefully, the result will be pictures that look like they haven\u2019t been meddled with, but which reside in way smaller files.<\/p>\n
![\"picture\"](\"https:\/\/blog.mindworkshop.com\/image\/webp002.webp\")
<\/p>\n
The most commonly-encountered implementation of lossy compression is in what drives the JPEG still-image format. You can adjust the \u201cquality factor\u201d of whatever creates your JPEG graphics to store almost flawless reproductions of your pictures in somewhat huge files, horribly degraded versions of your graphics in very tiny files or \u2013 as is usually the case \u2013 a compromise between these two extremes, reasonably faithful pictures in files of a size you can get along with.<\/p>\n
The downsides to JPEG are:<\/p>\n
The WebP graphic document format was designed from scratch for use on web pages and comparable media. It can store lossless still images, like PNG does, lossy still images like JPEG, and animations like GIF, but with way better color and more accurate timing.<\/p>\n
Because it uses more modern compression logic than its dusty ancestors, your graphics and animations will be smaller and yet more attractive if they\u2019re stored as WebP documents.<\/p>\n
![\"picture\"](\"https:\/\/blog.mindworkshop.com\/image\/webp003.webp\")
<\/p>\n
You can use .webp files in a web page in precisely the same way as you would .jpg, .png or .gif files. Here\u2019s an example of the HTML coding for a .webp graphic or animation:<\/p>\n
<img src=\u201dmygraphic.webp\u201d><\/p>\n
As of this writing, all the popular web browsers support WebP graphics and animations. If you\u2019re seeing four animations in this posting, yours is among them.<\/p>\n
The example animations in this posting illustrate some of the capabilities of .webp files. The first one is actually a GIF animation, resplendent in its patina of antiquity and its circa 1987 color space. GIF animations support a maximum of 256 unique colors, so some very crafty software has adjusted the colors in the first of these animations to get along with this limitation.<\/p>\n
If you look closely at the GIF animation, you\u2019ll notice that the shadow below the bear and behind the cube is a bit rough. The bear\u2019s nose has been rendered as a sequence of colored horizontal bands, rather than as a smooth color gradient.<\/p>\n
We hasten to add that this GIF animation was created using color remapping, rather than color dithering. Had the latter been used, the colored bands would have been less noticeable, but the whole animation would have been decidedly less sharp.<\/p>\n
The GIF animation occupies 208,493 bytes.<\/p>\n
The second animation is a lossless WebP document. If you plant your face directly in front of your monitor, you\u2019ll notice that the shadow detail is much more distinct and lifelike, and the bear\u2019s nose suffers from no banding or compression artifacts.<\/p>\n
The lossless WebP animation occupies 388,972 bytes \u2013 it\u2019s larger than the GIF animation, but arguably worth the hit.<\/p>\n
The third animation is a lossy WebP document in which the quality factor has been set to 75, this being the usual default for lossy compression. It will require a keen eye and a modest degree of imagination to distinguish it from the lossless animation.<\/p>\n
The lossy WebP animation of reasonable quality occupies a mere 110,788 bytes, just over half of what the GIF file needed, and it looks substantially better.<\/p>\n
The final animation is a lossy WebP document with a quality factor of 10\u2026 which is somewhere you probably never want to go. It exhibits lots of color and detail loss, and noticeable compression artefacts in the moving cube and the shadow thereof, which periodically deteriorate into solid rectangles.<\/p>\n
The extremely lossy WebP animation occupies 51,934 bytes.<\/p>\n
In practice \u2013 should you find your web pages choked for storage space or bandwidth \u2013 most animations can be squeezed into lossy WebP documents with quality factors slightly lower than 75 with no obvious loss of quality. Some experimentation may be called for.<\/p>\n","protected":false},"excerpt":{"rendered":"
The WebP format was developed by Google as a twenty-first century replacement for the aging hoard of mutant armadillos which has previously served the web as graphic standards. It can be used in place of still image formats, such as JPEG and PNG, and it really gets up and dances when it’s used to replace […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-667","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=\/wp\/v2\/posts\/667","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=667"}],"version-history":[{"count":0,"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=\/wp\/v2\/posts\/667\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=667"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=667"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}