CINXE.COM
An image format for the Web | WebP | Google for Developers
<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="721724668570-nbkv1cfusk7kk4eni4pjvepaus73b13t.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Google for Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#1e8e3e"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/developers/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/developers/css/app.css"> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/developers/images/favicon-new.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/developers/images/touchicon-180-new.png"><link rel="canonical" href="https://developers.google.com/speed/webp"><link rel="search" type="application/opensearchdescription+xml" title="Google for Developers" href="https://developers.google.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://developers.google.com/speed/webp" /><link rel="alternate" hreflang="x-default" href="https://developers.google.com/speed/webp" /><link rel="alternate" hreflang="ar" href="https://developers.google.com/speed/webp?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developers.google.com/speed/webp?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developers.google.com/speed/webp?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developers.google.com/speed/webp?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://developers.google.com/speed/webp?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developers.google.com/speed/webp?hl=fr" /><link rel="alternate" hreflang="de" href="https://developers.google.com/speed/webp?hl=de" /><link rel="alternate" hreflang="he" href="https://developers.google.com/speed/webp?hl=he" /><link rel="alternate" hreflang="hi" href="https://developers.google.com/speed/webp?hl=hi" /><link rel="alternate" hreflang="id" href="https://developers.google.com/speed/webp?hl=id" /><link rel="alternate" hreflang="it" href="https://developers.google.com/speed/webp?hl=it" /><link rel="alternate" hreflang="ja" href="https://developers.google.com/speed/webp?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developers.google.com/speed/webp?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developers.google.com/speed/webp?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developers.google.com/speed/webp?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developers.google.com/speed/webp?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developers.google.com/speed/webp?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developers.google.com/speed/webp?hl=th" /><link rel="alternate" hreflang="tr" href="https://developers.google.com/speed/webp?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developers.google.com/speed/webp?hl=vi" /><title>An image format for the Web | WebP | Google for Developers</title> <meta property="og:title" content="An image format for the Web | WebP | Google for Developers"><meta name="description" content="Learn about this image format that creates smaller images for the web and get links for converter downloads and support."> <meta property="og:description" content="Learn about this image format that creates smaller images for the web and get links for converter downloads and support."><meta property="og:url" content="https://developers.google.com/speed/webp"><meta property="og:image" content="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/developers/images/opengraph/google-green.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary_large_image"> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="google-green" type="product" layout="docs" concierge='closed' display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <a href="#main-content" class="skip-link button"> Skip to main content </a> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner" data-nosnippet> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="https://developers.google.com/speed/webp"> <div class="devsite-product-logo-container" size="medium" > <picture> <img class="devsite-product-logo" alt="WebP" src="https://developers.google.com/static/speed/webp/images/webp-devsite-icon.png" srcset="https://developers.google.com/static/speed/webp/images/webp-devsite-icon_36.png 36w, https://developers.google.com/static/speed/webp/images/webp-devsite-icon_48.png 48w, https://developers.google.com/static/speed/webp/images/webp-devsite-icon_72.png 72w, https://developers.google.com/static/speed/webp/images/webp-devsite-icon_96.png 96w, https://developers.google.com/static/speed/webp/images/webp-devsite-icon_480.png 480w, https://developers.google.com/static/speed/webp/images/webp-devsite-icon_720.png 720w, https://developers.google.com/static/speed/webp/images/webp-devsite-icon_856.png 856w, https://developers.google.com/static/speed/webp/images/webp-devsite-icon_960.png 960w, https://developers.google.com/static/speed/webp/images/webp-devsite-icon_1440.png 1440w, https://developers.google.com/static/speed/webp/images/webp-devsite-icon_1920.png 1920w, https://developers.google.com/static/speed/webp/images/webp-devsite-icon_2880.png 2880w" sizes="64px" loading="lazy" > </picture> </div> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://developers.google.com/speed/webp" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Upper Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="WebP" > WebP </a> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="WebP" tenant-name="Google for Developers" project-scope="/speed/webp" url-scoped="https://developers.google.com/s/results/speed/webp" > <form class="devsite-search-form" action="https://developers.google.com/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles fp-auth id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab class="devsite-active"> <a href="https://developers.google.com/speed/webp" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developers.google.com/speed/webp" track-type="nav" track-metadata-position="nav - home" track-metadata-module="primary nav" aria-label="Home, selected" data-category="Site-Wide Custom Events" data-label="Tab: Home" track-name="home" > Home </a> </tab> <tab > <a href="https://developers.google.com/speed/webp/docs/using" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developers.google.com/speed/webp/docs/using" track-type="nav" track-metadata-position="nav - guides" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Guides" track-name="guides" > Guides </a> </tab> <tab > <a href="https://developers.google.com/speed/webp/faq" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developers.google.com/speed/webp/faq" track-type="nav" track-metadata-position="nav - reference" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" > Reference </a> </tab> <tab > <a href="https://developers.google.com/speed/webp/gallery" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developers.google.com/speed/webp/gallery" track-type="nav" track-metadata-position="nav - samples" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Samples" track-name="samples" > Samples </a> </tab> <tab > <a href="https://developers.google.com/speed/webp/community" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developers.google.com/speed/webp/community" track-type="nav" track-metadata-position="nav - support" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Support" track-name="support" > Support </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter" hidden> <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="https://developers.google.com/speed/webp"> <div class="devsite-product-logo-container" size="medium" > <picture> <img class="devsite-product-logo" alt="WebP" src="https://developers.google.com/static/speed/webp/images/webp-devsite-icon.png" srcset="https://developers.google.com/static/speed/webp/images/webp-devsite-icon_36.png 36w, https://developers.google.com/static/speed/webp/images/webp-devsite-icon_48.png 48w, https://developers.google.com/static/speed/webp/images/webp-devsite-icon_72.png 72w, https://developers.google.com/static/speed/webp/images/webp-devsite-icon_96.png 96w, https://developers.google.com/static/speed/webp/images/webp-devsite-icon_480.png 480w, https://developers.google.com/static/speed/webp/images/webp-devsite-icon_720.png 720w, https://developers.google.com/static/speed/webp/images/webp-devsite-icon_856.png 856w, https://developers.google.com/static/speed/webp/images/webp-devsite-icon_960.png 960w, https://developers.google.com/static/speed/webp/images/webp-devsite-icon_1440.png 1440w, https://developers.google.com/static/speed/webp/images/webp-devsite-icon_1920.png 1920w, https://developers.google.com/static/speed/webp/images/webp-devsite-icon_2880.png 2880w" sizes="64px" loading="lazy" > </picture> </div> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://developers.google.com/speed/webp" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Upper Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="WebP" > WebP </a> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/speed/webp" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Home" track-name="home" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Home" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Home </span> </a> </li> <li class="devsite-nav-item"> <a href="/speed/webp/docs/using" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Guides" track-name="guides" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Guides" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Guides </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/speed/webp/faq" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Reference" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Reference </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/speed/webp/gallery" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Samples" track-name="samples" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Samples" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Samples </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/speed/webp/community" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Support" track-name="support" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Support" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Support </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" id="main-content" class="devsite-main-content" > <devsite-content> <article class="devsite-article"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developers.google.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/products" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="" > Products </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/speed" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail="Make the Web Faster" > Make the Web Faster </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/speed/webp" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="4" track-type="globalNav" track-name="breadcrumb" track-metadata-position="4" track-metadata-eventdetail="WebP" > WebP </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> An image format for the Web <div class="devsite-actions" data-nosnippet><devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip><devsite-key-takeaways></devsite-key-takeaways></div> </h1> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <p><picture style="float: right; margin: 0 0 .5em 1em"> <source srcset="https://developers.google.com/static/speed/webp/images/webplogo.webp"> <img src="/static/speed/webp/images/webplogo.png" alt="" style="float: right; margin: 0 0 .5em 1em"> </picture> WebP is a modern <strong>image format</strong> that provides superior <strong>lossless and lossy</strong> compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.</p> <p>WebP lossless images are <a href="/speed/webp/docs/webp_lossless_alpha_study#results">26% smaller</a> in size compared to PNGs. WebP lossy images are <a href="/speed/webp/docs/webp_study">25-34% smaller</a> than comparable JPEG images at equivalent <a href="https://en.wikipedia.org/wiki/Structural_similarity">SSIM</a> quality index.</p> <p>Lossless WebP <strong>supports transparency</strong> (also known as alpha channel) at a cost of just <a href="/speed/webp/docs/webp_lossless_alpha_study#results">22% additional bytes</a>. For cases when lossy RGB compression is acceptable, <strong>lossy WebP also supports transparency</strong>, typically providing 3× smaller file sizes compared to PNG.</p> <p>Lossy, lossless and transparency are all supported in <strong>animated WebP images</strong>, which can provide reduced sizes compared to GIF and APNG.</p> <ul> <li><strong><a href="/speed/webp/faq#how_can_i_detect_browser_support_for_webp">More Info for Webmasters</a></strong></li> </ul> <h2 style="font-weight: bold;" id="how_webp_works" data-text="How WebP Works" tabindex="-1">How WebP Works</h2> <p>Lossy WebP compression uses predictive coding to encode an image, the same method used by the VP8 video codec to compress keyframes in videos. Predictive coding uses the values in neighboring blocks of pixels to predict the values in a block, and then encodes only the difference.</p> <p>Lossless WebP compression uses already seen image fragments in order to exactly reconstruct new pixels. It can also use a local palette if no interesting match is found.</p> <ul> <li><strong><a href="/speed/webp/docs/compression">WebP Compression Techniques in Detail</a></strong></li> </ul> <p>A WebP file consists of <a href="https://datatracker.ietf.org/doc/rfc6386/">VP8</a> or <a href="/speed/webp/docs/webp_lossless_bitstream_specification">VP8L</a> image data, and a container based on <a href="/speed/webp/docs/riff_container">RIFF</a>. The standalone <code translate="no" dir="ltr">libwebp</code> library serves as a reference implementation for the WebP specification, and is available from <a href="https://www.webmproject.org/code/#libwebp-webp-image-library">our git repository</a> or as a <a href="/speed/webp/download">tarball</a>.</p> <h2 style="font-weight: bold;" id="webp_support" data-text="WebP Support" tabindex="-1">WebP Support</h2> <p>WebP is natively supported in Google Chrome, Safari, Firefox, Edge, the Opera browser, and by <a href="/speed/webp/faq#which_web_browsers_natively_support_webp">many other</a> tools and software libraries. Developers have also added support to a variety of image editing tools.</p> <p>WebP includes the lightweight encoding and decoding library <a href="/speed/webp/docs/api"><code translate="no" dir="ltr">libwebp</code></a> and the command line tools <a href="/speed/webp/docs/cwebp"><code translate="no" dir="ltr">cwebp</code></a> and <a href="/speed/webp/docs/dwebp"><code translate="no" dir="ltr">dwebp</code></a> for converting images to and from the WebP format, as well as tools for viewing, muxing and animating WebP images. The full source code is available on the <a href="/speed/webp/download">download</a> page.</p> <h2 style="font-weight: bold;" id="webp_converter_download" data-text="WebP Converter Download" tabindex="-1">WebP Converter Download</h2> <p>Convert your favorite collection from PNG and JPEG to WebP by downloading the precompiled <code translate="no" dir="ltr">cwebp</code> conversion tool for <a href="/speed/webp/docs/precompiled">Linux, Windows or macOS</a>.</p> <p>Tell us your experience on the project's <a href="https://groups.google.com/a/webmproject.org/group/webp-discuss">mailing list</a>.</p> </div> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2025-04-08 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-04-08 UTC."],[[["WebP is a modern image format that offers superior lossless and lossy compression for images on the web, resulting in smaller and richer images."],["WebP lossless images are 26% smaller than PNGs and lossy images are 25-34% smaller than comparable JPEGs at equivalent quality."],["WebP supports transparency in both lossless and lossy modes, providing significant size reductions compared to PNGs."],["Animated WebP images offer reduced file sizes compared to GIFs and APNGs while supporting lossy, lossless, and transparency."],["WebP is natively supported in major web browsers like Chrome, Safari, Firefox, Edge, and Opera, as well as many other tools and software libraries."]]],["WebP, a modern image format, offers superior lossless and lossy compression compared to PNGs and JPEGs. Lossless WebP images are 26% smaller than PNGs, and lossy WebP images are 25-34% smaller than JPEGs. WebP supports transparency, even in lossy formats, and animated WebP images. It employs predictive coding for lossy compression and utilizes existing image fragments for lossless compression. Supported by major browsers and tools, WebP includes the `libwebp` library and `cwebp`/`dwebp` conversion tools.\n"]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Learn</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://www.webmproject.org/code/#webp-repositories" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Code Repositories </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.webmproject.org/code/contribute/submitting-patches/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Submitting Patches </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Connect</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://groups.google.com/a/webmproject.org/group/webp-discuss" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Mailing List </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://issues.webmproject.org" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Issue Tracker </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Downloads</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/speed/webp/download" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Source and Binaries </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-sites" aria-label="Other Google Developers websites"> <a href="https://developers.google.com/" class="devsite-footer-sites-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Developers Link"> <picture> <img class="devsite-footer-sites-logo" src="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/developers/images/lockup-google-for-developers.svg" loading="lazy" alt="Google Developers"> </picture> </a> <ul class="devsite-footer-sites-list"> <li class="devsite-footer-sites-item"> <a href="//developer.android.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Android Link" > Android </a> </li> <li class="devsite-footer-sites-item"> <a href="//developer.chrome.com/home" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Chrome Link" > Chrome </a> </li> <li class="devsite-footer-sites-item"> <a href="//firebase.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Firebase Link" > Firebase </a> </li> <li class="devsite-footer-sites-item"> <a href="//cloud.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Cloud Platform Link" > Google Cloud Platform </a> </li> <li class="devsite-footer-sites-item"> <a href="//ai.google.dev/" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google AI Link" > Google AI </a> </li> <li class="devsite-footer-sites-item"> <a href="/products" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer All products Link" > All products </a> </li> </ul> </nav> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="/terms/site-terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> <li class="devsite-footer-utility-item devsite-footer-utility-button"> <span class="devsite-footer-utility-description">Sign up for the Google for Developers newsletter</span> <a class="devsite-footer-utility-link gc-analytics-event" href="/newsletter/subscribe" data-category="Site-Wide Custom Events" data-label="Footer Subscribe link" > Subscribe </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> <devsite-concierge data-info-panel data-ai-panel data-api-explorer-panel > </devsite-concierge> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[{"dimensions": {"dimension4": "WebP", "dimension11": false, "dimension3": false, "dimension5": "en", "dimension6": "en", "dimension1": "Signed out"}, "gaid": "UA-24532603-1", "metrics": {"ratings_count": "metric2", "ratings_value": "metric1"}, "purpose": 1}]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [{"id": "G-272J68FCRF", "purpose": 1}], "ga4p": [{"id": "G-272J68FCRF", "purpose": 1}], "gtm": [], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "product", "projectName": "WebP", "signedIn": "False", "tenant": "developers", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="98bceqL3Zl0xsgWB9fe7+pWTd3BnX4"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/developers/js/app_loader.js', '[1,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9","https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/developers","https://developers-dot-devsite-v2-prod.appspot.com",1,null,["/_pwa/developers/manifest.json","https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/developers/images/favicon-new.png","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,116,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyAP-jjEJBzmIyKR4F-3XITp8yM9T1gEEI8","AIzaSyB6xiKGDR5O3Ak2okS4rLkauxGUG7XP0hg","developers.google.com","AIzaSyAQk0fBONSGUqCNznf6Krs82Ap1-NV6J4o","AIzaSyCCxcqdrZ_7QMeLCRY20bh_SXdAYqy70KY",null,null,null,["Analytics__enable_clearcut_logging","MiscFeatureFlags__enable_firebase_utm","MiscFeatureFlags__enable_explain_this_code","Cloud__enable_legacy_calculator_redirect","MiscFeatureFlags__developers_footer_image","Profiles__enable_dashboard_curated_recommendations","Cloud__enable_cloudx_experiment_ids","Cloud__enable_free_trial_server_call","TpcFeatures__enable_unmirrored_page_left_nav","Profiles__enable_page_saving","Experiments__reqs_query_experiments","MiscFeatureFlags__enable_variable_operator","Profiles__enable_recognition_badges","Profiles__enable_profile_collections","DevPro__enable_devpro_offers","DevPro__enable_firebase_workspaces_card","Cloud__enable_cloud_facet_chat","Search__enable_ai_eligibility_checks","Profiles__enable_purchase_prompts","CloudShell__cloud_code_overflow_menu","Search__enable_dynamic_content_confidential_banner","DevPro__enable_cloud_innovators_plus","Profiles__require_profile_eligibility_for_signin","Concierge__enable_key_takeaways","MiscFeatureFlags__enable_view_transitions","Profiles__enable_completecodelab_endpoint","Profiles__enable_stripe_subscription_management","Profiles__enable_release_notes_notifications","Search__enable_ai_search_summaries_restricted","MiscFeatureFlags__emergency_css","Significatio__enable_by_tenant","DevPro__enable_enterprise","Profiles__enable_awarding_url","TpcFeatures__enable_mirror_tenant_redirects","Concierge__enable_actions_menu","Profiles__enable_complete_playlist_endpoint","DevPro__enable_developer_subscriptions","MiscFeatureFlags__developers_footer_dark_image","MiscFeatureFlags__enable_variable_operator_index_yaml","MiscFeatureFlags__gdp_dashboard_reskin_enabled","CloudShell__cloud_shell_button","Cloud__enable_cloud_shell","DevPro__enable_google_one_card","Profiles__enable_developer_profiles_callout","Concierge__enable_concierge_restricted","Cloud__enable_llm_concierge_chat","Cloud__enable_cloud_dlp_service","Cloud__enable_cloud_shell_fte_user_flow","EngEduTelemetry__enable_engedu_telemetry","MiscFeatureFlags__enable_framebox_badge_methods","Profiles__enable_public_developer_profiles","BookNav__enable_tenant_cache_key","Search__enable_suggestions_from_borg","MiscFeatureFlags__enable_project_variables","Search__enable_ai_search_summaries","Profiles__enable_join_program_group_endpoint","DevPro__enable_vertex_credit_card","Cloud__enable_cloudx_ping","Search__enable_page_map","Concierge__enable_pushui","Profiles__enable_completequiz_endpoint","DevPro__enable_code_assist","Concierge__enable_concierge"],null,null,"AIzaSyBLEMok-5suZ67qRPzx0qUtbnLmyT_kCVE","https://developerscontentserving-pa.clients6.google.com","AIzaSyCM4QpTRSqP5qI4Dvjt4OAScIN8sOUlO-k","https://developerscontentsearch-pa.clients6.google.com",1,4,null,"https://developerprofiles-pa.clients6.google.com",[1,"developers","Google for Developers","developers.google.com",null,"developers-dot-devsite-v2-prod.appspot.com",null,null,[1,1,[1],null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],[1,null,null,[1,20],"/recommendations/information"],null,null,null,[1,1,1],[1,1,null,1,1]],null,[null,null,null,null,null,null,"/images/lockup-new.svg","/images/touchicon-180-new.png",null,null,null,null,1,null,null,null,null,null,null,null,null,1,null,null,null,"/images/lockup-dark-theme-new.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[6,1,14,15,20,22,23,29,32,36],null,[[null,null,null,[3,7,10,2,39,17,4,32,24,11,12,13,34,15,25],null,null,[1,[["docType","Choose a content type",[["Tutorial",null,null,null,null,null,null,null,null,"Tutorial"],["Guide",null,null,null,null,null,null,null,null,"Guide"],["Sample",null,null,null,null,null,null,null,null,"Sample"]]],["product","Choose a product",[["Android",null,null,null,null,null,null,null,null,"Android"],["ARCore",null,null,null,null,null,null,null,null,"ARCore"],["ChromeOS",null,null,null,null,null,null,null,null,"ChromeOS"],["Firebase",null,null,null,null,null,null,null,null,"Firebase"],["Flutter",null,null,null,null,null,null,null,null,"Flutter"],["Assistant",null,null,null,null,null,null,null,null,"Google Assistant"],["GoogleCloud",null,null,null,null,null,null,null,null,"Google Cloud"],["GoogleMapsPlatform",null,null,null,null,null,null,null,null,"Google Maps Platform"],["GooglePay",null,null,null,null,null,null,null,null,"Google Pay & Google Wallet"],["GooglePlay",null,null,null,null,null,null,null,null,"Google Play"],["Tensorflow",null,null,null,null,null,null,null,null,"TensorFlow"]]],["category","Choose a topic",[["AiAndMachineLearning",null,null,null,null,null,null,null,null,"AI and Machine Learning"],["Data",null,null,null,null,null,null,null,null,"Data"],["Enterprise",null,null,null,null,null,null,null,null,"Enterprise"],["Gaming",null,null,null,null,null,null,null,null,"Gaming"],["Mobile",null,null,null,null,null,null,null,null,"Mobile"],["Web",null,null,null,null,null,null,null,null,"Web"]]]]]],[1,1],null,1],[[["UA-24532603-1"],["UA-22084204-5"],null,null,["UA-24532603-5"],null,null,[["G-272J68FCRF"],null,null,[["G-272J68FCRF",2]]],[["UA-24532603-1",2]],null,[["UA-24532603-5",2]],null,1],[[13,10],[12,9],[15,12],[11,8],[3,2],[5,4],[16,13],[4,3],[1,1],[14,11],[6,5]],[[1,1],[2,2]]],null,4,null,null,null,null,null,null,null,null,null,null,null,null,null,"developers.devsite.google"],null,"pk_live_5170syrHvgGVmSx9sBrnWtA5luvk9BwnVcvIi7HizpwauFG96WedXsuXh790rtij9AmGllqPtMLfhe2RSwD6Pn38V00uBCydV4m",1,null,"https://developerscontentinsights-pa.clients6.google.com","AIzaSyCg-ZUslalsEbXMfIo9ZP8qufZgo3LSBDU","AIzaSyDxT0vkxnY_KeINtA4LSePJO-4MAZPMRsE"]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>