Image formats explained: JPG, PNG, WEBP, SVG, HEIC

JPG (JPEG)

JPG uses lossy compression: it discards image data to reduce file size. The compression is tunable — at quality 95 it's nearly indistinguishable from the original; at quality 60 the artifacts become visible. For photographs published on the web, quality 75–85 is the standard range. It produces files 5–10× smaller than PNG with no perceptible quality difference for photos.

JPG does not support transparency. Text, sharp edges, and flat-color graphics compress poorly in JPG (blocky "ringing" artifacts appear around contrast edges).

Use JPG for: photos, hero images, anything with continuous tone and gradients.

PNG

PNG uses lossless compression: every pixel is preserved exactly. Re-saving a PNG 100 times produces an identical file. PNG supports full transparency (alpha channel), making it the standard for logos, icons, and design assets that need to layer over different backgrounds.

PNG files are larger than JPG for photographs. A 2000px photo that's 300 KB as JPG might be 2–4 MB as PNG. For graphics with large areas of solid color (screenshots, diagrams, logos), PNG often compresses better than JPG because of how its compression algorithm handles repetition.

Use PNG for: logos, icons, screenshots, graphics with transparency, anything you'll edit repeatedly.

WEBP

Google developed WEBP as a modern replacement for both JPG and PNG. It supports both lossy and lossless compression, plus transparency and animation. At equivalent quality, WEBP files are 25–35% smaller than JPG (lossy) and up to 26% smaller than PNG (lossless).

Browser support reached 97%+ global coverage by 2023. Safari added full support in version 14 (macOS Big Sur, iOS 14). The main friction is older image editing tools that don't read or write WEBP natively.

Use WEBP for: web images where file size and load speed matter, any context where you'd use JPG or PNG on the web.

SVG

SVG is a vector format: images are stored as mathematical descriptions of shapes and paths, not pixels. This means an SVG scales to any size without quality loss. A 1 KB SVG logo looks identical at 16px and at 10,000px.

SVG files are text-based XML. You can open one in a text editor, edit colors and paths directly, or manipulate them with CSS and JavaScript. This makes SVG useful for interactive graphics, responsive icons, and anything that needs programmatic control.

SVG is not suitable for photographs or complex imagery. It's designed for shapes, lines, text, and illustrations with a limited number of distinct elements.

Use SVG for: logos, icons, illustrations, charts, maps, any graphic that needs to scale.

HEIC

HEIC (High Efficiency Image Container) is Apple's default photo format since iOS 11 (2017). It uses the HEVC compression algorithm, which typically produces files 40–50% smaller than JPG at the same quality. A photo that's 3 MB as JPG might be 1.5 MB as HEIC.

The limitation is compatibility. HEIC is not natively supported on Windows (without codecs), Android, or most web platforms. This causes frustration when sharing photos. Most people working with HEIC files eventually need to convert them to JPG for sharing.

Use HEIC for: storing photos on Apple devices. Convert to JPG when sharing with non-Apple users or uploading to platforms.

Quick reference

How to decide

Start with the question: is this a photograph or a graphic? Photos belong in JPG or WEBP. Graphics, logos, and icons belong in PNG or SVG (preferably SVG if the design is vector-based).

If you're publishing to the web and performance matters, prefer WEBP over JPG and PNG. If the image needs to scale to arbitrary sizes, SVG is the answer. If you're on an iPhone and keeping photos in high quality on-device, HEIC is fine — just convert before sharing.