If you want the smallest file, the format depends entirely on what the image contains; that one-sentence rule frames every png vs jpg file size comparison. The table below gives the quick answer, and the sections that follow explain why and how to act on it.
Quick Format Comparison
| Format | Best For | Typical Size Relative To JPEG | Alpha Channel |
|---|---|---|---|
| JPEG | Photographs, complex gradients | 1x (baseline) | No |
| PNG Lossless | Screenshots, UI, text, line art | 5x to 10x | Yes |
| PNG Palette (lossy) | Same as PNG lossless but smaller | 2x to 4x | Partial (tRNS) |
| WebP Lossless | Same use as PNG lossless | Roughly 26% smaller than PNG | Yes |
| WebP Lossy | Photos, graphics | 25% to 35% smaller than JPEG | Yes |
Is PNG or JPG Smaller?
For a photograph, JPEG is smaller. A photo stored as PNG is roughly ten times the size of the same photo as JPEG at a quality difference invisible at normal viewing distance. JPEG discards high frequency detail the eye barely notices. PNG promises exact pixels and cannot do that. The prediction stage inside PNG fails on photographic sensor noise because each pixel differs randomly from its neighbours. Those small random differences are nearly incompressible. That is why photos are huge as PNG.
For a screenshot, a logo, a chart or any image with flat colour, sharp edges and repeated patterns, PNG is usually smaller. JPEG handles sharp edges badly. It produces visible ringing around text and lines. On flat artwork JPEG can produce a larger file than PNG. Converting a screenshot to JPEG makes it worse and often bigger. Do not do it.
The question of which format is smallest has no single answer. It depends on the content. A photograph wants JPEG. A UI screenshot wants PNG. The next section covers the format that can replace both.
WebP vs PNG
WebP supports a full alpha channel like PNG. Google's published figure for WebP lossless is about 26 per cent smaller than PNG. That saving comes from better prediction and entropy coding. For a photograph, WebP lossy runs 25 to 35 per cent smaller than JPEG at equivalent quality. WebP supports a full alpha channel like PNG. JPEG has no alpha channel at all. Converting a transparent PNG to JPEG flattens transparency onto a solid colour, usually white. That alone makes JPEG a non starter for any image that needs transparency.
WebP is supported by all current browsers. Some older desktop applications still cannot open it. That is its one real drawback. If your audience includes users on legacy software, stick to PNG for lossless or JPEG for lossy. Otherwise WebP is the smallest option for nearly every image.
Which Image Format is Smallest?
The smallest image format for a given image is WebP lossy for photographs and WebP lossless for graphics, assuming the audience's software can open it. If WebP is off the table, JPEG wins for photos and PNG wins for screenshots, text and line art. Palette reduced PNG, often called PNG 8, can shrink a screenshot by 70 to 85 per cent and still look identical on screen.
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.
How to Pick the Right Format for a Given Image
Start with the image's content. A photograph with smooth gradients and no text: export as JPEG at quality 80 to 90. A screenshot, a logo, a chart or anything with sharp edges and flat colour: export as PNG. If the audience supports WebP, use WebP lossless for graphics and WebP lossy for photos.
For PNG files that must be smaller, palette reduction is the real lever. A UI screenshot can lose 70 to 85 per cent of its size with no visible change. A logo or icon saves 60 to 80 per cent. A chart or diagram saves 70 to 80 per cent. An illustration with gradients saves 40 to 65 per cent. A photograph stored as PNG saves 40 to 70 per cent. The visible failure mode is banding in smooth gradients and stair step fringes on semi transparent edges. A gentler palette setting fixes the fringes.
Palette Reduction Shrinks PNG File Size
Lossless optimisation of a PNG searches harder for the best filter per row, re runs DEFLATE at maximum effort and strips metadata chunks. Typical saving is 5 to 15 per cent. On an already optimised file it can be zero. Re encoding can produce a larger file than the original. A correct tool returns the original in that case.
Palette reduction, which rebuilds the image from an adaptive palette of typically 256, 128 or 64 colours, gives the huge savings. Two things 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. In Photoshop tick the Smaller File (8 bit) checkbox in File > Export > Export As. That switches to a 256 colour indexed palette. For finer control use File > Export > Save for Web (Legacy). You get a Colors dropdown from 2 to 256, a Dither slider and a live file size readout.
In GIMP use Image > Mode > Indexed. Choose Generate optimum palette and set the maximum number of colours. Then export as PNG. The PNG dialog has a Compression level slider from 0 to 9. Level 9 is slower and slightly smaller. It is entirely lossless. It does not reduce colours. Uncheck the metadata boxes. For real reduction you need the Indexed step.
macOS has no built in palette reduction. That needs an online tool, ImageOptim, or the command line. Preview can only change dimensions (Tools > Adjust Size) and re save. It has no PNG quality slider. Windows has no built in palette reduction either. Paint can resize (Ctrl+W) and re save. The Photos app has a resize option. Neither can reduce colours.
Palette reduction cannot be undone. Keep the original and compress a copy. Compressing an already palette reduced file again gives a worse result than going to the low colour count once. The second pass chooses from an already impoverished set. Lossless re compression is safe to repeat.
Practical File Size Targets
The cheapest order is: strip metadata losslessly, then reduce the palette in steps, then reduce dimensions, then change format. 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. Below 50 KB the honest answer is to change format.
Images are typically 50 to 70 per cent of a web page's total weight. Largest Contentful Paint is very often an image. The hero image is usually the most effective thing to shrink. Declaring width and height on an image prevents the layout shift measured by Cumulative Layout Shift. Print resolution is far higher than screen and exposes banding invisible on a monitor. Send print the untouched original.