A user uploads a photo shot on an iPhone. The file is HEIC, about 1.8 MB. Your <img> tag cannot rely on it: HEIC has no native support in Chrome, Firefox, or Edge. So the image either becomes a JPG at 3.4 MB or a WebP at around 1.2 MB with no visible difference. That gap is why WebP is the answer for photos that arrive as HEIC.
This guide covers converting HEIC to WebP, what the size comparison looks like across formats, and the options from a browser tool to a shell command you can drop into a build.
Why WebP and not HEIC
HEIC is excellent at storing photos, roughly half the size of JPEG at equal quality. It is also useless on the web as a delivery format. Chrome, Firefox, Edge, and Safari have all supported WebP for years, while HEIC support exists only in Safari and a few vendor-specific places. You cannot depend on HEIC for user-uploaded images, which is exactly why conversion pipelines exist.
WebP covers the same ground as HEIC: it is a lossy format built on modern compression, with a lossless mode and alpha transparency. For a photo, the practical difference between WebP and JPG at the same visual quality is a file roughly 25 to 35 percent smaller. That is a meaningful saving on an image-heavy page.
The size comparison
Same 12 MP photo, same visual quality:
| Format | Size | Browsers | Notes |
|---|---|---|---|
| HEIC | ~1.8 MB | Safari only | source format from iPhones |
| JPG | ~3.4 MB | all | baseline |
| WebP | ~1.2 MB | all | lossy, with alpha support |
| PNG | ~24 MB | all | lossless, not for photos |
The web image formats guide has the full comparison if you need the background on where WebP sits against JPG and PNG.
Option 1: convert in a browser
The simplest path is a tool that runs entirely on the device. The HEIC to WebP converter decodes HEIC locally with WebAssembly and writes WebP files, so the photos never leave the machine. You can set the quality, convert a whole folder, and download the results as a ZIP. That works for one-off conversions and for a designer or editor who is not comfortable on the command line.
Option 2: convert on the command line
For a pipeline, the classic stack is libheif plus libwebp. On macOS with Homebrew:
brew install libheif webp
Then convert with heif-convert and cwebp:
heif-convert input.heic output.png
cwebp -q 82 output.png -o output.webp
Or skip the intermediate file with ffmpeg:
ffmpeg -i input.heic -c:v libwebp -quality 82 output.webp
Both commands honor a quality argument, and cwebp has the widest set of controls, including lossless mode and -m 6 for the slowest, smallest output. For a folder, loop it:
for f in *.heic; do heif-convert "$f" "${f%.heic}.png"; cwebp -q 82 "${f%.heic}.png" -o "${f%.heic}.webp"; done
That is enough to wire into a shell script or a CI job that processes uploads on the server side.
Choosing quality and format in WebP
Two decisions affect the output more than anything else:
- Lossy vs lossless.
cwebp -losslessor-q 100with the lossless flag keeps every pixel but produces larger files. Use it for screenshots, logos, and anything with flat color and text. Use lossy for photos. - The quality number.
-q 82is a sane default for photos: visibly clean and much smaller than JPG. For high-quality targets,-q 90costs more bytes but is closer to the source. The same tradeoff as JPG quality settings, which HEIC to JPG without losing quality explains in detail.
WebP also handles alpha, so a HEIC image with a transparency channel survives the trip, which JPG would drop.
A note on newer formats
AVIF, the AV1-based successor, generally beats WebP on size, and it is supported in all major browsers now. If you are building a fresh pipeline and can pick your decoder, AVIF is worth testing against WebP for your specific images. The tradeoff is encoder speed and tooling maturity, which is why WebP remains the safe default for most teams. The web-image-formats-guide has more on where each format fits.
The bottom line
Convert HEIC to WebP for anything that ends up on a website. It is supported everywhere, smaller than the JPG alternative at equal quality, and convertible with a browser tool or a two-command shell pipeline. Keep the original HEIC as the source of truth, convert at upload time or in a batch job, and let the format do the loading-time math for you.