PNG, JPG or WebP: Which Should You Use?

You have an image file open. It needs to be smaller. The question is not which format is technically best. The question is what that image actually is. A photograph of a sunset, a screenshot of a dashboard, a logo with a transparent background, a chart from a report. Each of those has a correct answer and the wrong answer costs you file size or quality. The debate of png vs jpg vs webp only makes sense when you start from the image itself.

Here is the rule. Photographs belong in JPEG. Screenshots, logos, charts and anything with sharp edges or flat colour belong in PNG. WebP is a modern alternative to both but carries one genuine drawback outside the browser: some older desktop applications still cannot open it. If your image goes to a program that does not handle WebP, stick with PNG or JPEG.

When to Use PNG Instead of JPG

Use PNG when the image has sharp edges, flat colour, text, or transparency. JPEG handles sharp edges badly. It produces visible ringing around text and lines. On flat artwork JPEG often produces a larger file than PNG. A photograph as PNG is roughly ten times the size of the same photo as JPEG at a quality difference invisible at normal viewing distance. That is the whole reason photos are huge as PNG. Photographic sensor noise makes the prediction wrong nearly every time, giving small random differences that are close to incompressible.

If your image is a screenshot, a logo, a chart, a diagram, or line art, PNG is the right choice. Those images contain exactly the repetition that PNG compression feeds on. Flat colour, sharp edges and repeated patterns make the prediction correct, so the differences are mostly zero and zeros compress to almost nothing.

What About Screenshots

Screenshots belong in PNG. A UI screenshot with a palette reduction tool saves 70 to 85 per cent off the file size with no visible change. JPEG would destroy the text edges and button borders.

What About Photographs Stored as PNG

If you have a photograph saved as PNG, change the format to JPEG. That single step saves more than any other compression trick. Paint on Windows can Save as JPEG. Preview on macOS can export to JPEG with a Quality slider. The honest answer for a photograph below about 50 KB is to change format.

Is WebP Better Than PNG?

WebP supports a full alpha channel like PNG. Google's published figure for WebP lossless is about 26 per cent smaller than PNG. For many images that is a real saving. If your image has transparency and you control the environment where it will be displayed, WebP is better than PNG on file size alone.

WebP is supported by all current browsers. That is the good news. The drawback is outside the browser. Some older desktop applications still cannot open it. Image editors, email clients, document software, and legacy systems may reject the file. If your workflow involves sending the image to someone else or opening it in a program that is not a web browser, PNG is safer.

So is WebP better than PNG? For file size, yes. For compatibility, no. Choose based on where the image actually goes.

When WebP Is the Right Call

If you are serving images to a modern website, WebP is the best format. The browser handles it, the user never sees the extension, and the file is smaller. Use it for photographs and transparent images alike.

Best Image Format for Transparency

JPEG has no alpha channel at all. Converting a transparent PNG to JPEG flattens transparency onto a solid colour, usually white. If your image needs to show what is behind it, you need a format that supports an alpha channel.

PNG is the best image format for transparency when compatibility matters. PNG 32 carries an 8 bit alpha channel. Palette PNGs carry transparency in a tRNS chunk, one alpha value per palette entry. That works everywhere. WebP also supports a full alpha channel and gives a smaller file, but not every application can open it.

If the transparent image is a logo or icon, PNG with palette reduction is the practical winner. A logo with a soft alpha band around a rounded edge needs enough palette entries or it snaps into discrete steps. That is the second failure mode of palette reduction. A gentler setting fixes it. Keep the original and compress a copy because palette reduction cannot be undone.

What About SVG

SVG is a vector format, not a raster format. For logos and icons that are purely geometric shapes, SVG is smaller and resolution independent. But SVG cannot represent a photograph or a screenshot. For raster transparency, use PNG.

Format Decision Guide by Image Type

The Real Savings Are in Palette Reduction

Lossless optimisation of a PNG saves 5 to 15 per cent. That is useful but modest. The large saving comes from palette reduction. This rebuilds the image from an adaptive palette of typically 256, 128 or 64 colours chosen from the colours actually present. Two compounding effects happen. Each pixel needs 7 or 8 bits instead of 24 or 32. Thousands of near identical shades collapse into one entry, creating exactly the repetition DEFLATE feeds on.

A UI screenshot loses 70 to 85 per cent of its file size. A logo or icon loses 60 to 80 per cent. A chart or diagram loses 70 to 80 per cent. A photograph stored as PNG loses 40 to 70 per cent, though the honest answer there is to change format to JPEG. Lossless only savings for the same types are 5 to 15 per cent, and 0 to 5 per cent for a photograph.

Photoshop can do palette reduction. File > Export > Export As has a checkbox labelled Smaller File (8 bit). That switches to a 256 colour indexed palette. File > Export > Save for Web (Legacy) gives finer control with a Colors dropdown and a Dither slider. GIMP can do it through Image > Mode > Indexed with Generate optimum palette. macOS and Windows have no built in palette reduction. You need an online tool, ImageOptim, or the command line with pngquant.

Visible PNG Palette Reduction Artefacts

Palette reduction can cause banding in smooth gradients. A soft fade needs many closely spaced colours to look continuous. The second failure mode is a stair step fringe on semi transparent edges. The soft alpha band around a rounded logo needs enough palette entries or it snaps into discrete steps. Worst on curves and diagonals. A gentler setting fixes it. Keep the original file and compress a copy.

Dimensions Matter More Than Format

File size scales with pixel count. Doubling the width quadruples the data. An image displayed at 800 pixels wide and stored at 3000 carries roughly fourteen times the pixel data anyone will see. Resize before compressing. Compressing pixels you are about to discard is wasted work and the compressor performs better on the smaller image.

For high density screens serve about twice the display width. Roughly 2560 pixels on the long edge covers full screen use. A blog image needs about 1600 pixels. Preview on macOS has Tools > Adjust Size to change pixel dimensions. That is the real saving available in Preview. Paint on Windows has Resize on the Home tab or Ctrl+W. Photoshop has Image Size in the Export As panel. GIMP has Image > Scale Image.

The Cheapest Order of Operations

Strip metadata losslessly. Then reduce the palette in steps. Then reduce dimensions. Then change format. That is the cheapest order. Metadata chunks like tEXt, iTXt, eXIf, and ICCP colour profiles can be stripped losslessly. GIMP has checkboxes in the PNG export dialog to omit background colour, gamma, layer offsets, resolution, creation time and comments. Unchecking those strips metadata.

Realistic outcomes for a screenshot or graphic: 500 KB easy with no visible change, 200 KB easy on most images, 100 KB achievable and may need slight downscaling, 50 KB needs downscaling on large images, 25 KB only for small or simple images. For a photograph stored as PNG, targets below about 100 KB mean downscaling, and below 50 KB the honest answer is to change format.