{"id":2411,"date":"2020-09-16T13:51:08","date_gmt":"2020-09-16T13:51:08","guid":{"rendered":"http:\/\/galhano.com\/blog\/?p=2411"},"modified":"2026-01-20T10:39:17","modified_gmt":"2026-01-20T10:39:17","slug":"a-new-image-format-for-the-web","status":"publish","type":"post","link":"http:\/\/galhano.com\/blog\/?p=2411","title":{"rendered":"A new image format for the Web"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"alignright\"><img decoding=\"async\" src=\"https:\/\/developers.google.com\/speed\/webp\/images\/webplogo.png\" alt=\"webp_logo\"\/><\/figure><\/div>\n\n\n\n<p>\nWebP is a modern <strong>image format<\/strong> that provides superior <strong>lossless and\nlossy<\/strong> compression for images on the web. Using WebP, webmasters and web\ndevelopers can create smaller, richer images that make the web faster.<\/p>\n\n\n\n<p>WebP lossless images are <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/webp_lossless_alpha_study#results\">26% smaller<\/a> in size compared to PNGs. WebP\nlossy images are <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/webp_study\">25-34% smaller<\/a> than comparable JPEG images at equivalent\n<a href=\"https:\/\/en.wikipedia.org\/wiki\/Structural_similarity\">SSIM<\/a> quality index.<\/p>\n\n\n\n<p>Lossless WebP <strong>supports transparency<\/strong> (also known as alpha channel) at a\ncost of just <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/webp_lossless_alpha_study#results\">22% additional bytes<\/a>. For cases when lossy RGB compression\nis acceptable, <strong>lossy WebP also supports transparency<\/strong>, typically providing\n3\u00d7 smaller file sizes compared to PNG.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><a href=\"https:\/\/developers.google.com\/speed\/webp\/faq#how_can_i_detect_browser_support_for_webp\">More Info for Webmasters<\/a><\/strong><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how_webp_works\">How WebP Works<\/h2>\n\n\n\n<p>Lossy WebP compression uses predictive coding to encode an image, the same\nmethod used by the VP8 video codec to compress keyframes in videos. Predictive\ncoding uses the values in neighboring blocks of pixels to predict the values\nin a block, and then encodes only the difference.<\/p>\n\n\n\n<p>Lossless WebP compression uses already seen image fragments in order to\nexactly reconstruct new pixels. It can also use a local palette if no\ninteresting match is found.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/compression\">WebP Compression Techniques in Detail<\/a><\/strong><\/li><\/ul>\n\n\n\n<p>A WebP file consists of <a href=\"http:\/\/datatracker.ietf.org\/doc\/rfc6386\/\">VP8<\/a> or <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/webp_lossless_bitstream_specification\">VP8L<\/a> image data, and a container\nbased on <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/riff_container\">RIFF<\/a>. The standalone <code>libwebp<\/code> library serves as a reference\nimplementation for the WebP specification, and is available from\n<a href=\"http:\/\/www.webmproject.org\/code\/#libwebp-webp-image-library\">our git repository<\/a> or as a <a href=\"https:\/\/developers.google.com\/speed\/webp\/download\">tarball<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"webp_support\">WebP Support<\/h2>\n\n\n\n<p>WebP is natively supported in Google Chrome, Firefox, Edge, the Opera browser,\nand by <a href=\"https:\/\/developers.google.com\/speed\/webp\/faq#which_web_browsers_natively_support_webp\">many other<\/a> tools and software libraries. Developers have also added\nsupport to a variety of image editing tools.<\/p>\n\n\n\n<p>WebP includes the lightweight encoding and decoding library <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/api\"><code>libwebp<\/code><\/a>\nand the command line tools <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/cwebp\"><code>cwebp<\/code><\/a> and <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/dwebp\"><code>dwebp<\/code><\/a> for converting\nimages to and from the WebP format, as well as tools for viewing, muxing and\nanimating WebP images. The full source code is available on the\n<a href=\"https:\/\/developers.google.com\/speed\/webp\/download\">download<\/a> page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"webp_converter_download\">WebP Converter Download<\/h2>\n\n\n\n<p>Convert your favorite collection from PNG and JPEG to WebP by downloading the\nprecompiled <code>cwebp<\/code> conversion tool for <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/precompiled\">Linux, Windows or Mac OS X<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WebP is a modern image format that provides superior lossless and lossy compression for images on the web. 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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[118],"tags":[],"class_list":["post-2411","post","type-post","status-publish","format-standard","hentry","category-web","author-admin"],"_links":{"self":[{"href":"http:\/\/galhano.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/galhano.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/galhano.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/galhano.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/galhano.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2411"}],"version-history":[{"count":1,"href":"http:\/\/galhano.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2411\/revisions"}],"predecessor-version":[{"id":2412,"href":"http:\/\/galhano.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2411\/revisions\/2412"}],"wp:attachment":[{"href":"http:\/\/galhano.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/galhano.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2411"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/galhano.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}