# WebP vs PNG and JPG: modern formats for the web [Canonical HTML page](https://gradiently.design/guide/webp-images) Your website does not have to serve the same files you post to Instagram. WebP and AVIF do the same job as PNG and JPG in fewer bytes, if you set them up properly. ## The short version - WebP is an image format that can be lossy like JPG or lossless like PNG, and supports transparency and animation. - At similar visual quality, WebP files are usually noticeably smaller than JPG and PNG equivalents. - Every current version of Chrome, Safari, Firefox and Edge supports WebP, so a fallback is only needed for very old browsers. - AVIF compresses further than WebP and is now widely supported, but it encodes more slowly. - Keep PNG and JPG for uploads to social platforms and for files you send to people; use WebP or AVIF on your own website. In the **WebP vs PNG** and JPG question, WebP wins on your own website: it can compress like a JPG or losslessly like a PNG, supports transparency, and produces smaller files at the same visual quality. Every current browser supports it. Where PNG and JPG still win is everywhere outside your site: uploads to Instagram and LinkedIn, email attachments, files for clients and printers. So the practical rule is simple. Make and keep masters in PNG, serve WebP (or AVIF) to visitors. ## What WebP is WebP is an image format developed by Google and documented on [web.dev](https://web.dev/articles/serve-images-webp). One format covers what used to need three: lossy photos like JPG, lossless graphics with transparency like PNG, and short animations like GIF. The saving comes from smarter compression, which predicts each block of pixels from its neighbours and stores only the difference. | Feature | JPG | PNG | WebP | AVIF | | --- | --- | --- | --- | --- | | Lossy | Yes | No | Yes | Yes | | Lossless | No | Yes | Yes | Yes | | Transparency | No | Yes | Yes | Yes | | Animation | No | Limited (APNG) | Yes | Yes | | Browser support | Universal | Universal | All current browsers | All current browsers | | Accepted by social platforms | Yes | Yes | Inconsistently | Rarely | Check current support on [caniuse.com](https://caniuse.com/webp) if your audience uses old devices. ## WebP vs PNG for graphics and transparency For logos, interface images and cutouts, lossless WebP keeps every pixel like PNG and is usually smaller. Lossy WebP with transparency is the bigger win: a product cutout that needs a soft, see through edge can be a fraction of the PNG size with no visible difference. Gradients are the exception that needs care. A smooth dark blend can band in lossy WebP just as it does in JPG. If your hero image is mostly gradient, compare lossy at a high quality against lossless, and consider whether it should be an image at all: a [CSS gradient](https://gradiently.design/guide/css-linear-gradient) costs no download. - Dark navy: test lossless: `linear-gradient(160deg, #0c1222 0%, #13294b 50%, #1e3a8a 100%)` - Pale pink: lossy at high quality: `radial-gradient(circle at 70% 30%, #f9a8d4 0%, #fbcfe8 35%, #fdf2f8 80%)` - Bright three stop: lossy is fine: `linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%)` Dark, subtle blends show compression first; bright, busy ones hide it. Choose WebP settings by the content, not by habit. ## WebP vs JPG for photos For photographs, lossy WebP at a quality around 75 to 80 usually matches a JPG at 85 while being smaller. The difference adds up on pages with many images: product grids, portfolios, blogs. On a single hero photo the gain is real but less dramatic, and getting the pixel dimensions right matters more than the format. 1. **Size first** Export the photo at the largest size it actually displays. A 1920×1080 [website hero](https://gradiently.design/guide/website-hero-background) never needs a 6000 pixel original. 2. **Pick a quality** Start lossy WebP at 80. Look at skin, skies and dark corners at 100% zoom, then step down until something changes, and go back one step. 3. **Make smaller versions** Export 640, 1280 and 1920 pixel widths so phones download the small one. 4. **Serve with srcset** Let the browser choose the right width with `srcset` and `sizes`, as in the code below. ## AVIF vs WebP AVIF is newer and usually compresses further than WebP, especially on photographs and smooth tones. It is supported in all current major browsers. Its costs are slower encoding, which matters if you convert images on the fly, and fewer tools that open it. Many sites serve AVIF first, WebP second and JPG last, and let the browser take the first it understands. ```html Evening light over the harbour ``` The browser uses the first `source` it supports and falls back to the `img`. The width and height stop the layout jumping as it loads. If you use a framework or an image CDN, it may do all of this automatically from one uploaded original. Check what it outputs before you hand convert anything. > **Animated WebP and GIF** Animated WebP is far lighter than GIF and keeps full colour, so it suits small looping graphics on a page. For anything longer than a few seconds, a muted MP4 or WebM video is lighter still. [GIF vs MP4](https://gradiently.design/guide/gif-vs-mp4) compares them in detail. ## Where PNG and JPG still win ### Use WebP or AVIF - Images on your own website - Product grids and galleries - Blog and article images - Transparent cutouts on the web ### Use PNG or JPG - Uploads to Instagram, LinkedIn, X and Facebook - Open Graph link preview images - Files you email or send to clients - Masters you will edit again Social platforms convert uploads themselves, and some reject or mishandle WebP. Link preview crawlers vary too, so keep your [Open Graph image](https://gradiently.design/guide/open-graph-image-size) as a 1200×630 PNG or JPG. And a WebP sent to a client often opens in the wrong app or not at all. A wide link preview image announcing a spring collection on a gradient background A link preview at 1200×630. Keep this one as PNG so every platform's crawler can read it. ## How to convert PNG to WebP Google's free `cwebp` command line tool converts one file or a whole folder, and most image editors and design tools now export WebP directly. ```bash # lossy, good for photos cwebp -q 80 photo.png -o photo.webp # lossless, good for logos and interface graphics cwebp -lossless logo.png -o logo.webp # a whole folder for f in *.png; do cwebp -q 80 "$f" -o "${f%.png}.webp"; done ``` Keep the PNG originals. Converting WebP back to PNG does not restore detail lost to lossy compression. Your master design files can stay in PNG: Gradiently exports designs as PNG and JPG, which are the right inputs for this step and the right files for every social upload. For the reasoning behind quality settings, read [image compression without ruining gradients](https://gradiently.design/guide/image-compression); for the older pair, [PNG vs JPG](https://gradiently.design/guide/png-vs-jpeg); and for the full speed checklist, [optimising images for the web](https://gradiently.design/guide/lighthouse-image-performance). ## FAQ ### Is WebP better than PNG? On a website, usually yes: lossless WebP keeps the same pixels in a smaller file and supports transparency. For social uploads and files you send to people, PNG is safer because it opens everywhere. ### Do all browsers support WebP? All current versions of Chrome, Safari, Firefox and Edge support WebP. Use a `picture` element with a JPG or PNG fallback if you need to reach very old browsers. ### Should I use AVIF or WebP? AVIF is usually smaller, WebP encodes faster and is supported by more tools. Serving AVIF first with a WebP fallback gives most visitors the smallest file. ### Can I upload WebP to Instagram? Support is inconsistent, so upload PNG or JPG at the exact size instead, such as 1080×1350 for a portrait post. ### Does WebP support transparency? Yes, in both lossy and lossless modes, which makes it a good replacement for transparent PNGs on the web.