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

Four image formats cover almost everything that appears on a screen or a web page: JPG, PNG, WebP and SVG. They were designed for different jobs, and using the wrong one costs you either quality (a logo that looks fuzzy) or size (a photo that takes ten times longer to load than it should). This guide explains each one in practical terms and gives a simple rule for choosing.

The one question that decides most cases

Is the image a photograph, or is it made of flat colours and sharp edges?

Photographs and anything with smooth gradients (a sunset, a portrait, a product shot) compress well with lossy algorithms that throw away detail the eye does not notice. Logos, icons, screenshots, charts and text-heavy images have hard edges and large uniform areas; they need lossless storage, and the lossy algorithms make them look smudged.

Photographs → JPG or WebP. Flat graphics → PNG, WebP (lossless) or SVG.

JPG (JPEG)

Created in 1992 by the Joint Photographic Experts Group. Lossy, 8 bits per colour channel, no transparency, no animation. Every camera, phone, browser, printer and application understands it, which is its real strength.

Use it for: photos on the web, email attachments, anything that has to open everywhere.

Avoid it for: logos, screenshots with text, images that will be edited and re-saved repeatedly (each save loses a little more), anything needing transparency.

Quality setting: 80–90 is the sweet spot. Above 92 the file grows quickly for no visible gain; below 70 artefacts become visible around edges.

PNG

Portable Network Graphics, from 1996, designed as a patent-free replacement for GIF. Lossless, up to 16 bits per channel, full alpha transparency, no animation (APNG exists but is rare).

Use it for: logos and icons when SVG is not an option, screenshots, charts, diagrams, images with transparent backgrounds, any image you will edit again.

Avoid it for: photographs. A PNG of a photo is typically 3–10 times larger than the JPG and looks the same.

Tip: "PNG-8" (256-colour palette) files are much smaller than full 24-bit PNG and fine for flat graphics with few colours.

WebP

Released by Google in 2010, supported by every major browser since Safari 14 in 2020. Offers both lossy and lossless modes, transparency in both, and animation. Lossy WebP is roughly 25–35 percent smaller than JPG at matching quality; lossless WebP is about 25 percent smaller than PNG.

Use it for: images on websites, where smaller files mean faster pages and better search rankings.

Avoid it for: sending to people who will open the file in older desktop software, uploading to systems that only list JPG/PNG, printing workflows, and archiving masters (keep the original). Some older image editors and some email clients still do not display it.

Related: AVIF, newer still, compresses better than WebP but encodes slowly and support is less universal. For most sites today, WebP is the practical choice, with JPG/PNG fallbacks where needed.

SVG

Scalable Vector Graphics is not a pixel format at all. An SVG file is text (XML) describing shapes: a circle here, a path there, this text in this font. The browser or viewer draws it at whatever size is needed, so it is perfectly sharp at any zoom and usually tiny.

Use it for: logos, icons, simple illustrations, charts generated from data, anything that needs to look sharp on both a phone and a 4K display.

Avoid it for: photographs (vectors cannot represent them) and complex artwork with thousands of shapes, where the file can become larger and slower than a PNG. SVG files can also contain scripts, so sites that accept uploads usually convert or sanitise them; if a site refuses your SVG, convert it to PNG.

Side by side

	JPG	PNG	WebP	SVG
Compression	Lossy	Lossless	Both	Vector (text)
Transparency	No	Yes	Yes	Yes
Animation	No	No (APNG rare)	Yes	Yes (CSS/SMIL)
Best for	Photos	Graphics, screenshots	Web images	Logos, icons
Typical size, photo	1×	3–10×	0.7×	n/a
Typical size, logo	poor quality	1×	0.75×	often 0.1×
Opens everywhere	Yes	Yes	Modern software	Browsers, design tools

Conversions that make sense

• PNG → WebP and JPG → WebP for website images: PNG to WebP, JPG to WebP. Keep the originals.
• SVG → PNG when a platform rejects SVG or you need a fixed-size raster (for example a social media avatar): SVG to PNG. Choose a size at least twice the display size for sharpness on high-density screens.
• JPG → PNG when you need to edit an image further without compounding JPG artefacts, or when a system demands PNG: JPG to PNG. This does not restore detail already lost; it just stops further loss.
• WebP → JPG/PNG when sending to people on older software.
• HEIC → JPG for iPhone photos; see converting HEIC photos.

Conversions that do not do what people hope

• JPG → SVG. Tracing a photo into vectors produces either a huge file or a poster-like approximation. It works acceptably for simple, high-contrast logos; it does not work for photos.
• Upscaling a small PNG or JPG to a bigger size adds pixels but not detail. If you need a large version, find the original or recreate it as SVG.
• PNG → JPG to "save space" on a screenshot with text makes the text fuzzy; use PNG-8 or lossless WebP instead.

A practical default

For a website: SVG for the logo and icons, WebP for photos and content images (with JPG fallbacks if your platform needs them), PNG for screenshots. For sending files to other people: JPG for photos, PNG for everything else. For archiving your own work: keep the original format the image was created in, and convert copies as needed.