PNG vs JPG vs WebP, Explained
PNG vs JPG vs WebP: lossy and lossless compression, transparency, file sizes for the same photo, and the best image format for the web, photos and logos.
By Udit Agarwal · Updated October 17, 2026
JPG, PNG and WebP differ in how they compress a picture: JPG is lossy and built for photos, PNG is lossless and keeps transparency, and WebP can work either way, usually in fewer bytes than both. For a photo, a lossy format gives a file a small fraction of the size of an equivalent PNG; for screenshots, logos and text, a lossless format keeps every edge crisp. AVIF is the newest option for small web images, and GIF survives mainly for short animations.
Lossless compression stores a picture so that every pixel comes back exactly as it was. PNG works this way: it finds repeated patterns, such as runs of the same colour, and writes them more compactly. Flat colours compress very well, while the fine, random detail of a photo hardly compresses at all.
Lossy compression throws away detail the eye is unlikely to miss. The JPEG standard (ISO/IEC 10918-1) cuts the image into blocks of 8 × 8 pixels, describes each block as a mix of smooth and fine patterns, and rounds the fine ones off; the quality setting decides how hard. Lossy WebP and AVIF use the same idea with newer techniques borrowed from video codecs, so they need fewer bytes for the same look.
Two consequences follow. Lost detail does not come back: converting a JPG to PNG stores the JPG's pixels, compression artefacts included, in a much bigger file. And each lossy save loses a little more, so keep a lossless original and export lossy copies from it.
| Format | Compression | Transparency | Animation | Best for |
|---|---|---|---|---|
| JPG | Lossy | No | No | Photos to email, print or upload anywhere |
| PNG | Lossless | Yes, with soft edges | Only in the APNG variant | Screenshots, logos, graphics, editing masters |
| WebP | Lossy or lossless | Yes | Yes | Almost any image on a web page |
| AVIF | Lossy or lossless | Yes | Yes | The smallest photos on a web page |
| GIF | Lossless, but only 256 colours | On or off only | Yes | Short, simple animations |
JPG dates from the early 1990s and opens practically everywhere. PNG was published by the W3C in 1996 as a patent-free replacement for GIF and is also an ISO standard (ISO/IEC 15948). Google released WebP in 2010, and it is now documented in RFC 9649. AVIF, from the Alliance for Open Media, stores AV1-compressed images in HEIF, the container iPhones use for HEIC photos. GIF dates from 1987 and holds only 256 colours per frame, which is why a photo saved as GIF looks grainy or banded.
After the pixel count, the format is the biggest factor in file size. Here is one photo, a 3840 × 2160 picture of a lake and mountains (8.3 megapixels), converted in Chrome with the same browser encoders ArrayKit's converter uses. Stored uncompressed at 3 bytes per pixel, it would take 24.9 MB.
| Format and setting | File size | Compared with JPG at 90% |
|---|---|---|
| PNG | 14.2 MB | 11.7 times larger |
| WebP at 100% (saved losslessly) | 8.0 MB | 6.5 times larger |
| JPG at 100% | 5.9 MB | 4.8 times larger |
| JPG at 90% | 1.22 MB | Baseline |
| WebP at 90% | 0.85 MB | 30% smaller |
| JPG at 75% | 0.71 MB | 42% smaller |
| WebP at 75% | 0.39 MB | 68% smaller |
PNG kept every pixel and still needed 57 percent of the raw size, which shows how little lossless compression can do with a photo. JPG at 90 percent brought it down to about a twentieth. WebP at 90 percent came out 30 percent smaller than JPG at the same setting, in line with Google's study, which found lossy WebP files 25 to 34 percent smaller than JPGs of equivalent quality. At 100 percent Chrome saves WebP losslessly, and JPG at 100 percent was larger than the 5.6 MB original without adding any detail.
An AVIF encoder at a middle setting turned the same photo into 0.38 MB, and a 256-colour GIF came out at 3.6 MB, because GIF must reduce the photo to 256 colours and then store it without loss. Grass, gravel and low-light grain need far more bytes than a clear sky, but the ranking of the formats usually holds.
For a web page, the best format is usually WebP, or AVIF for photos where every kilobyte counts, exported at the size the page displays. Pixel dimensions matter as much as the format: a 4000-pixel photo shown in a 700-pixel column wastes most of its bytes in any format, and the guide to image size, resolution and DPI explains how to pick the width.
Browser support is no longer the obstacle it was. Safari added WebP in version 14 in 2020, the last major browser to do so. AVIF arrived in Chrome in 2020, Firefox in 2021, Safari in 2022 and Edge in early 2024. For very old browsers, the HTML <picture> element lists several formats and lets each browser take the first one it supports. Outside the browser, some programs, upload forms and print services still accept only JPG and PNG.
The quality slider is not a percentage of anything. It is a scale, usually 0 to 100, that tells the encoder how coarsely to round fine detail, and each format maps it in its own way. JPG at 75 and WebP at 75 do not look the same, so compare results by eye rather than by the number.
For photos, roughly 75 to 90 is the useful range. In the test above, dropping from 90 to 75 saved 42 percent for JPG and 54 percent for WebP. At low settings JPG shows its 8 × 8 blocks in smooth areas such as sky, plus halos around edges. At the top end, 100 costs a lot for detail nobody sees: the JPG at 100 was almost five times the size of the one at 90.
PNG, WebP, AVIF and GIF can store transparency, and JPG cannot. When a transparent PNG is saved as JPG, every see-through pixel needs a colour, and most converters use white. That suits a logo on a white page and looks wrong on a dark header. PNG, WebP and AVIF also store partial transparency, so soft shadows and smoothed edges blend into any background. GIF has only on or off, which leaves jagged edges around curves on a coloured background.
The Image Format Converter changes one image at a time into PNG, JPEG or WebP. Drop a file on the page or click to choose one; it opens PNG, JPG, WebP, GIF and BMP files, and WebP is the output selected by default. For JPEG and WebP, a quality slider runs from 10 to 100 percent in steps of 5, starting at 90; PNG has no slider because it is lossless. The preview and the output size update as soon as you change the format or quality, with the original size beside the new one, so you can see at once whether a conversion paid off. The download keeps the file name with the new extension: holiday.png becomes holiday.webp.
The image keeps its exact pixel dimensions; to change them, use the Image Resizer, and to get under a limit such as 100 KB, use Compress Image to Size. Transparent areas turn white when you save as JPEG, and an animated GIF comes out as a still image of its first frame. Saving WebP needs a browser that can encode it, such as Chrome, Edge or Firefox, and at the 100 percent setting Chrome writes lossless WebP, which is much larger. A HEIC photo opens only in a browser that can display HEIC, so convert iPhone photos with the HEIC to JPG Converter.
The picture is decoded and re-encoded by your browser's canvas on your own device, and the file is not uploaded. The new file is written from the pixels alone, so camera metadata such as the date taken and the GPS location is not copied into it, which you can confirm with the EXIF Viewer & Remover.
Is PNG better quality than JPG? PNG is lossless, so it never loses detail, while JPG always discards some. For photos, a JPG at 85 to 90 percent is very hard to tell apart from the PNG at a fraction of the size. For screenshots, text and logos, PNG is clearly better.
Is WebP better than JPG? For the same visual quality, lossy WebP files are usually 25 to 34 percent smaller, according to Google's tests, and WebP also supports transparency and animation. JPG is still safer for email attachments, upload forms and print services.
What is the best image format for a website? WebP for most images, AVIF for photos when you want the smallest files, and SVG for logos and icons. Export each image at the size the page displays it.
Does converting a JPG to PNG improve its quality? No. The PNG stores the JPG's pixels exactly, compression artefacts included, and is usually several times larger.
Why did my image get bigger after converting? A lossless format such as PNG keeps every pixel of a photo, so the file grows, and a high quality setting can outgrow a file that was compressed harder. Lower the quality or choose a lossy format.
Should I use GIF or video for an animation? Video, when the destination allows it. An MP4 or WebM clip is usually far smaller than the same frames as a GIF and keeps full colour, while GIF is limited to 256 colours per frame.
Does converting an image remove its metadata? It depends on the converter. ArrayKit's Image Format Converter writes the new file from the pixels, so EXIF data such as camera settings and GPS location is not carried over. The original file keeps it.