JPG vs PNG vs WebP vs HEIC: which image format to use, and when

Four formats cover almost every picture you will handle. JPG is the safe choice for photographs: it is lossy, small and opens on everything. PNG is lossless and supports transparency, so it suits screenshots, text, diagrams and logos. WebP does both jobs in smaller files and is the sensible default for a web page. HEIC is the space-saving format iPhone and iPad cameras store photos in; it works well inside the Apple world and is awkward outside it, so convert it to JPG before you upload it to a form. The rest of this guide explains why, using the format specifications themselves, and shows how to switch between formats with our image converter.

How each format compresses a picture

JPEG (.jpg). The JPEG standard (ISO/IEC 10918-1, also published as ITU-T T.81) splits each colour component into 8 × 8 pixel blocks, runs a discrete cosine transform on every block, and then quantises the result. Quantising is where detail is thrown away, and it is the step the quality slider controls. What survives is usually packed with Huffman coding. The baseline process uses 8 bits per sample and has no alpha channel, so a JPG cannot be transparent. Because the loss happens block by block, hard edges such as text and line art pick up smudges and coloured fringes, and every re-save quantises the picture again.

PNG (.png). PNG is lossless: the decoded pixels are identical to what was saved. The encoder filters each row of pixels to make it more repetitive, then compresses it with deflate, a member of the LZ77 family. The W3C specification allows greyscale, palette and truecolour images with sample depths from 1 to 16 bits, plus a full alpha channel. Its third edition (June 2025) also brings animated PNG into the standard. Lossless compression works well on flat colour and repeated patterns and poorly on camera noise, which is why a PNG of a photograph is usually far larger than a JPG of it.

WebP (.webp). WebP is two codecs in one container. Lossy WebP is based on VP8 key-frame coding: it predicts each block from its already-coded neighbours, transforms only the difference, and uses arithmetic coding where JPEG uses Huffman. Lossless WebP is a separate design that applies spatial prediction, a colour transform and local palettes, then a variant of LZ77-Huffman coding. Both modes can carry transparency, and both can be animated. Lossy WebP stores 8-bit Y’CbCr 4:2:0 and lossless WebP stores 8-bit RGBA; the largest possible image is 16,383 × 16,383 pixels.

HEIC (.heic). HEIC is not a codec but a pairing: the HEIF container (ISO/IEC 23008-12, built on the same base file format as MP4) holding pictures coded with HEVC, the H.265 video codec. One file can hold several images, such as a burst or a short sequence, along with an alpha plane and depth data. Apple introduced it with iOS 11 and macOS High Sierra; an iPhone 7 or later can capture in it, under the camera setting called High Efficiency.

AVIF and SVG, briefly. AVIF uses the same HEIF container with the royalty-free AV1 codec in place of HEVC, and supports lossy and lossless coding, transparency and animation. SVG is a different kind of thing: an XML text file of drawing commands, so it stays sharp at any size and is the natural format for logos and icons that exist as vector artwork.

What each format supports

	JPG	PNG	WebP	HEIC	AVIF	SVG
Compression	Lossy (8 × 8 DCT)	Lossless (filter + deflate)	Lossy (VP8) or lossless	Lossy or lossless (HEVC)	Lossy or lossless (AV1)	Vector, not pixels
Transparency	No	Yes	Yes	Yes	Yes	Yes
Animation	No	Yes (animated PNG)	Yes	Image sequences	Yes	Yes
Colour depth	8 bits per sample (baseline)	1 to 16 bits per sample	8 bits per channel	Up to 16 bits per sample	Higher depths and HDR	Any CSS colour
Opens in browsers	All	All	All current ones	Safari 17 and later	Chrome 85, Firefox 93, Safari 16.1, Edge 121	All

Browser support is from MDN’s image format guide, apart from HEIC, which that guide does not list as a web format at all; Safari 17.0 added it according to WebKit’s release notes. On a Mac, WebP needs Safari 14 on macOS Big Sur or later. Treat HEIC as a storage format, not something to put in a web page.

How much smaller are the newer formats?

It depends on the picture, so be wary of any single figure. The published numbers come from the format’s own authors. Google’s WebP study compressed standard test images to the same SSIM quality score in both formats and found the WebP files 25% to 34% smaller than the JPEGs. Google also states that lossless WebP is 26% smaller than PNG. Apple says only that HEIF offers better compression than JPEG at the same visual quality; its WebKit team puts a HEIC photo at about half the space of an equivalent JPEG.

None of those figures predicts your file. A noisy night photo, a flat-colour chart and a scanned form behave very differently. The practical test is to convert your own image and read the size before and after, which the converter and the compressor print with each result.

Which format for which job

Job	Use	Why
Photo for a web page	Lossy WebP, with JPG as the fallback	Smaller than JPG at similar quality, and every current browser shows it
Logo with transparency	SVG if you have the vector file; otherwise PNG or WebP	JPG has no alpha channel, and lossy blocks show on flat colour
Screenshot with text	PNG	Lossless keeps letter edges sharp; flat areas compress well
iPhone photo to share outside Apple	JPG	HEIC is not reliably readable on other devices, sites and older software
Form upload that demands JPG	JPG at the stated pixel size and file size	The form’s checker decides, not the picture quality
Picture you will edit again	PNG, or the camera original	Each lossy re-save discards more detail

Two notes on the iPhone row. Apple’s support page says that when you share by AirDrop, Messages or email and the receiving device does not support the newer formats, the photo may be sent as a JPG automatically. You can also make the camera save JPG from the start: Settings, then Camera, then Formats, then Most Compatible. Neither helps with HEIC files you already have in a folder, which is what a converter is for.

Worked examples with the tools

A HEIC photo for an application form. Open HEIC to JPG, leave “Convert to” on JPEG and “JPEG quality” at 90%, and convert. The first run downloads the HEIC decoder, libheif-js (1,989,119 bytes, about 1.9 MB), as a separate module; the photo itself is decoded on your device. If the form also sets a size window, pass the JPG to Resize Image in KB and Pixels and fill in “Width”, “Height”, “Minimum size” and “Maximum size”. If a target cannot be met at that pixel size, the tool says so and reports the closest result.

A PNG screenshot that is too heavy for a blog post. In the image converter set “Convert to” to WebP and leave “Quality” at 90%. This is lossy WebP, so zoom in on small text before you publish. If it must stay pixel-exact, tick “Lossless WebP (exact pixels, quality ignored, larger file)” in the same tool, or keep PNG and run it through the image compressor with “Save as” set to “PNG (lossless, optimised)”, which re-packs the same pixels more tightly.

A transparent logo that a site insists on as JPG. Convert it and read the notice: the tool fills the transparent areas with white, because JPEG cannot store transparency, and tells you it has done so. If the logo sits on a coloured page, that white box will show.

An SVG icon for an app store listing. SVG to PNG renders the vector at the size you ask for. At the default “Scale” of 4×, a 120 px icon becomes a 480 px PNG, and “Transparent background” is ticked by default. Fonts and images that the SVG pulls in by URL are not loaded.

What the converters cannot do

• They work on 8-bit pixels. A 16-bit PNG or a 10-bit HEIC is reduced to 8 bits per channel on the way through, which matters for editing and HDR, not for a form upload.
• They do not keep animation. An animated GIF, WebP or PNG comes out as a single still frame.
• Converting a JPG to PNG does not restore anything. The detail lost when the JPG was made is gone; the PNG is only a larger, exact copy of what remains.
• Metadata is not carried across. The HEIC converter tells you that EXIF data (date, location) is not copied to the new file. If you want to strip it from a JPG without re-compressing the picture, use the EXIF remover.
• The general converter cannot open a HEIC in browsers that do not decode it; it points you to the HEIC tool instead.

How to check this yourself

Every technical statement above comes from a specification or the format’s own vendor, listed under Sources: the JPEG standard for the 8 × 8 transform, the W3C PNG Recommendation for bit depths and deflate, Google’s WebP documentation for the VP8 and lossless designs, and Apple’s and Nokia’s HEIF pages for HEIC. The percentages are Google’s and Apple’s published claims and are quoted as such.

For your own images, measure instead of trusting a rule. Save the same picture as JPG, WebP and PNG, and compare the before and after sizes that the converter and compressor report. Then view each result at 100% and look at the hardest part of the image: small text, hair, a sharp diagonal edge. The smallest file that still looks right there is your answer.

Related tools

• Image converter: PNG, JPEG, WebP (lossy or lossless) and AVIF output with a quality slider.
• HEIC to JPG: iPhone photos to JPEG or PNG, several files at once.
• Image compressor: compress by quality or to a target size in KB, with an optional longest-side limit.
• SVG to PNG: rasterise a vector at a chosen scale or exact width.
• Resize Image in KB and Pixels: exact pixel dimensions inside a minimum and maximum file size.
• EXIF remover: strip camera, date and location data without touching the pixels.