Idiot Note: WebP

09 September 2018

 

Intro to Idiot Note

Idiot Note is a new kind of writing I want to try. I've been neglecting my computer science shits for a considerable amount of time now. And I want to try delving to this realm once again. I want to enjoy doing these shits again. Idiot Note is not intended for like tutorials or whatever, but it's just for my study personally. The style of writing might be annoying and incomprehensible. You've been warned!
 
While writing this first writing, it's actually a lot harder than I thought. I probably won't be able to finish them in a week because there's so much to learn and update them every once in a while. 
 

What is .webp?

I've been using Internet for years. And one thing I always do on the Internet is saving images. Recently, I noticed something. The images that I saved were not .jpg or .png. Instead, they were .webp. What the fuck is .webp? Why it's everywhere? And why can't I preview it on my PC?
 
Let's find out.

Before We Begin

The following paragraphs can be a little tedious and random. This list might help navigate things a bit. It consists of some interesting (and probably important) terms I encounter while writing this:
  1. Color Depth
  2. Alpha Channel
  3. Lossless and Lossy Compression

 

Point 1: WebP versus GIF

Apparently, there are 2 kinds of WebP: static WebP and animated WebP. While static WebP is replacing PNG and JPEG format, animated WebP is coming for GIF format. Cited from Google's FAQs, there are multiple advantages of using WebP instead of GIF. Let's breakdown all of them.
 
  1. WebP supports 24-bit RGB color with an 8-bit alpha channel, compared to GIF's 8-bit color and 1-bit alpha.
    There's a couple of things here:
    1. n-bit RGB color represents the image's color depth (or pixel depth or bit depth). Color depth is the number of bits used to represent image's colors (red, green, and blue). The more bit used, the more colors can be used. 24-bit RGB color can hold 2^24 (16,777,216) different colors, while 8-bit RGB color can only hold 2^8 (256) colors. The improved number of bits is great for creating a photorealistic animated images (24-bit color is also called True Color because it's the minimum number of bits needed to achieve photorealism).
    2. Alpha channel is bits used to represent image's transparency. For GIF, the values range only from 0 to 1 (because it's only using 1 bit). But, for WebP, the values range from 0 to 255 (2^8). So, while GIF can only be fully transparent (alpha bit = 0) or fully opaque (alpha bit = 1), WebP can have 256 different transparency levels.

  2. WebP supports both lossy and lossless compression; in fact, a single animation can combine lossy and lossless frames. GIF only supports lossless compression. WebP's lossy compression techniques are well-suited to animated images created from real-world videos, an increasingly popular source of animated images.
    Now, if you don't know what lossy and lossless are (like me): lossless compression basically means compressing data while making it possible to restore the compressed data to its original state without a defect; and lossy compression is compressing data but only possible to restore the approximation of the original data (worse reconstruction, but better compressed data size).
    So basically, WebP enables lossy compression. And lossy compression is good for converting videos to animated images, which basically means richer and more photorealistic animated images.

  3. WebP requires fewer bytes than GIF. Animated GIFs converted to lossy WebPs are 64% smaller, while lossless WebPs are 19% smaller. This is especially important on mobile networks.
    This point is already very clear. The interesting thing to know here is that these numbers are based on an experiment of a corpus of 7000 randomly scrapped GIF images on the Internet. Nice info, I guess.

  4. WebP takes less time to decode in the presence of seeking. In Blink (Chromium rendering engine), scrolling or changing tabs can hide and show images, resulting in animations being paused and then skipped forward to a different point. Excessive CPU usage that results in animations dropping frames can also require the decoder to seek forward in the animation. In these scenarios, animated WebP takes 0.57x as much total decode time as GIF, resulting in less jank (poor quality) during scrolling and faster recovery from CPU utilization spikes. This is due to two advantages of WebP over GIF:
    1. WebP images store metadata about whether each frame contains alpha, eliminating the need to decode the frame to make this determination. This leads to more accurate inference of which previous frames a given frame depends on, thereby reducing unnecessary decoding of previous frames.
    2. Much like a modern video encoder, the WebP encoder heuristically adds key-frames at regular intervals (which most GIF encoders do not do). This dramatically improves seeking in long animations. To facilitate inserting such frames without significantly increasing image size, WebP adds a 'blending method' flag for each frame in addition to the frame disposal method that GIF uses. This allows a keyframe to draw as if the entire image had been cleared to the background color without forcing the previous frame to be full-size.
      Some things I don't understand:
      1. Blending method flag
      2. Frame disposal method
 
In conclusion, WebP advantages over GIF are:
  1. Higher color depth -> photorealism
  2. Higher alpha channel
  3. Supports lossy compression -> photorealism
  4. Smaller size (in average)
  5. Has metadata whether a frame has alpha channel -> reducing unnecessary operations
  6. Adds key-frames -> seek animation
 
To be continued...

 

Idiot Note
· Similar posts ·