Google's WebP image format

in web •  4 years ago 

What is WebP ?

WebP is a new image format for the web employing both lossy and lossless compression. It is currently developed by Google, based on technology acquired with the purchase of On2 Technologies.

Google acquired On2 Technologies and its video products and technology in February 2010. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

##How does WebP work ?

WebP's lossy compression uses the same methodology as VP8 for predicting (video) frames. VP8 is based on block prediction & like any block-based codec, VP8 divides the frame into smaller segments called macroblocks.

Within each macroblock, the encoder can predict redundant motion and color information based on previously processed blocks. The image frame is "key" in the sense that it only uses the pixels already decoded in the immediate spatial neighborhood of each of the macroblocks, and tries to inpaint the unknown part of them. This is called predictive coding (see intra-frame coding of the VP8 video).

Four common intra-prediction modes are shared by these macroblocks:
 
    1. H_PRED (horizontal prediction). Fills each column of the block with a copy of the left column, L.

    2. V_PRED (vertical prediction). Fills each row of the block with a copy of the above row, A.

    3. DC_PRED (DC prediction). Fills the block with a single value using the average of the pixels in the row above A and  
    the column to the left of L.
    
    4. TM_PRED (TrueMotion prediction). A mode that gets its name from a compression technique developed by On2 Technologies. 
    In addition to the row A and column L, TM_PRED uses the pixel P above and to the left of the block. Horizontal differences  
    between pixels in A (starting from P) are propagated using the pixels from L to start each row.

##Browsers that support WebP image format :

  • Google Chrome and all Chromium-based browsers,
  • Firefox (and its forks Pale Moon and Waterfox),
  • GNOME Web,
    Midori,
  • Falkon natively support WebP.
  1. EdgeHTML based versions of Microsoft Edge support WebP through a platform extension (installed by default).
  2. Safari added support for WebP with iOS 14 and macOS Big Sur.

NOTE : WebP can also be displayed in all major browsers using the WebPJS JavaScript library, although support in Internet Explorer 6 and above is achieved using Flash.

##How to use cwebP and vwebP tools ?

cwebP compresses an image using the WebP format. Input format can be either PNG, JPEG, TIFF, WebP or raw Y'CbCr samples.

Note: Animated PNG and WebP files are not supported.

###Using cwebP to Convert Images to the WebP Format

Use cwebp on the command line to convert PNG or JPEG image files to WebP format.

You can convert a PNG image file to a WebP image with a quality range of 80 with the command:

cwebp -q 80 image.png -o image.webp

vwebp decompresses a WebP file and displays it in a window using OpenGL.

###Using vwebP to decompress a WebP file

Use vwebP on the command line to decompress webP file.

decompressing webP file using no options :

vwebp picture.webp

  • decompressing webP file using mt & dither option :

             - -mt : to use multi-threading for decoding, if possible.
    
             - -dither : Specify a dithering strength between 0 and 100. Dithering is a post-processing effect applied to chroma components in lossy compression.
    
               It helps by smoothing gradients and avoiding banding artifacts. Default: 50.
    
    vwebp picture.webp -mt -dither 0
  • decompressing webP file using - ( string ) :

             - -- : Explicitly specify the input file. This option is useful if the input file starts with an '-' for instance. This option must appear last. Any other options afterward will be ignored. If the input file is "-", the                       data will be read from stdin instead of a file.
    
              *Here file name is " ---picture.webp ".*
    
    vwebp -- ---picture.webp
Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!