SVG, PNG, JPEG, WebP or AVIF: Choose the Right Image Format Every Time

SVG, PNG, JPEG, WebP or AVIF: Choose the Right Image Format Every Time

Pick the wrong image format and you pay twice: the file is heavier than it needs to be, and it still looks worse than it should. The mistake runs in both directions. A photograph exported as PNG ships several times the bytes for zero visible gain. A logo saved as JPEG picks up fuzzy halos the moment it sits on a colored background.

There are only five formats a designer needs to decide between in 2026: SVG, PNG, JPEG, WebP, and AVIF. Each is excellent at one job and wrong for the others. This guide gives you the decision rules, measured file sizes from a controlled test run at the same dimensions on the same images, the current state of browser support, and the traps that keep producing heavy, soft, or broken images.

The Short Answer

• The image is made of shapes (logo, icon, diagram, simple illustration): use SVG. It scales to any size, stays sharp, and is usually the smallest file on the page.
• The image has hard edges, flat color, text, or transparency but cannot be vector: use PNG, sized to the exact pixels it will display at.
• The image is a photograph and the safest possible compatibility matters most (email, some third-party embeds): use JPEG.
• The image is a photograph or a rich graphic that only needs to render in a browser: use WebP, with JPEG or PNG as the fallback where you still need one.
• Your delivery pipeline already encodes and serves multiple formats automatically and you want the smallest photographic files: add AVIF, keeping WebP as the fallback. AVIF compresses beautifully and encodes slowly, so it earns its place in automated pipelines, not in hand exports.

Everything else in this guide is the reasoning behind those five lines, and the exceptions that matter.

The Two Families: Vector and Raster

Every format decision starts with one question: is this image shapes, or is it pixels?

Vector images (SVG) are instructions: draw this circle here, fill this path with this color. The file does not store pixels, so it renders at any size with hard edges and usually weighs very little. Logos, icons, simple illustrations, charts, and diagrams are vector-shaped jobs.

Raster images (PNG, JPEG, WebP, AVIF) are grids of pixels. When you display them larger than the grid, the browser invents intermediate values and the image goes soft. Photographs are rasters by nature: no one can redraw a gradient sky or a face as a handful of paths.

Two corollaries follow. A photograph saved in an SVG wrapper is still a photograph: the SVG merely carries an embedded raster, usually at PNG weight, and fools no one. And a logo saved as a giant PNG is a vector job forced into pixels; it will weigh more than the SVG and still blur at some size. Match the format family to the image's nature first, then fight about compression.

Meet the Five Formats

SVG stores XML drawing instructions, compressed by gzip or brotli in transit like any text. It has real transparency, exact color, and resolution independence. Its limits: photographs and complex gradients/blurs can make SVG files balloon or look wrong, and SVG from an untrusted source can carry embedded scripts, so sanitize files you did not make before putting them on a site.

PNG is a lossless raster format. Every pixel you save is the pixel that renders. That fidelity is why PNG is right for screenshots, interface graphics, line art, and flat-color work with transparency, and why it is the wrong default for photographs: photographic detail is exactly the data lossless compression cannot discard.

JPEG is a lossy photographic format from the early web. It discards visual information cleverly, using how eyes notice detail, and produces small photographic files almost everywhere on earth. It has no transparency, it degrades with every re-save, and its blocky compression artifacts show first exactly where designers look: on sharp edges, text, and flat color.

WebP, from Google, does both jobs: lossy like JPEG for photographs, lossless mode, transparency in both, and animation. Its published study found lossy WebP 25 to 34 percent smaller than comparable JPEG and lossless WebP 26 percent smaller than PNG. Browser support is now broad: current Chrome, Edge, Firefox, and Safari (16.0 and later, with iOS Safari support since version 14) all render WebP.

AVIF is built on the AV1 video codec and often squeezes photographs smaller than WebP at the same perceived quality, with support for transparency, wide color, and high dynamic range. Current versions of Chrome, Edge, Firefox, Safari, and Opera render it. Its costs are real: encoding is much slower than WebP, and a minority of tools and environments still cannot open or edit the files. It is a delivery format, not a working format.

Measured: The Same Images, Five Ways

Format advice usually quotes percentages from nowhere. These are measurements: two test images generated programmatically, encoded locally at 2026 settings, with bytes counted from the actual files. The photo-like image is a 1200 by 800 pixel continuous-tone test scene with gradients, fine noise simulating photographic detail, and a sharp shape with text. The logo-like image is a 900 by 360 flat-color mark with transparency. Encoder quality settings were held sensible rather than extreme; absolute numbers would shift with other settings, but the ordering is the point.

Photographic test image (1200 x 800):

JPEG at quality 85 lands at roughly one seventh of the PNG, and lossy WebP shaves the JPEG further. Lossless modes, PNG or WebP, preserve every pixel of photographic noise, and noise is the most expensive thing in an image. That is the whole reason "save photos as PNG to keep quality" backfires: you keep data your reader cannot see, at five to seven times the bytes.

Flat graphic with transparency (900 x 360):

The flat graphic flips the photo ranking. The vector original is the lightest file in the table, because five rectangles and a circle compress to almost nothing as instructions. Lossless raster modes beat lossy ones here, which surprises people until they see why: lossy encoders spend bytes trying to reproduce perfect flatness and crisp edges, and edges are where their approximations are most visible too. JPEG ends up biggest and worst, its smoothing smeared across color boundaries and the transparency thrown away.

Where AVIF Fits, Honestly

AVIF is deliberately missing from the measured tables: the local imaging build used for these tests had no AVIF encoder available, so there were no honest local numbers to publish, and quoting another site's percentages would say more about their test images than yours. The qualitative picture is consistent across the tooling that does support it: AVIF tends to produce the smallest photographic files at a given perceived quality, costs the longest encode times, and stores transparency and wide color gamut for pipelines that need them.

Treat that as a direction, not a specification. If photographic weight is a real cost on your site, run your own top twenty photographs through your own encoder at your own quality targets and compare the bytes, the way the tables above were built. Five minutes of measurement on your images beats any general claim, including this one.

Support Realities in 2026

WebP and AVIF both render in all current major browsers, which removes the historic reason to avoid them. WebP arrived in Safari in version 16 (macOS Ventura era) with iOS Safari support since version 14; AVIF followed and is present in current Safari, Chrome, Edge, and Firefox releases. For live percentage-of-users figures, check Can I Use on the day you decide, since those numbers keep moving, but the practical conclusion for a website in 2026 is that WebP is safe as the primary web format, and AVIF is safe where a fallback exists.

Support off the web is patchier. Older design tools, office suites, email clients, printers, and some social platforms still stumble on WebP or AVIF uploads, and stock libraries and marketplaces often demand JPEG, PNG, or TIFF by rule. The formats answer different questions: AVIF and WebP are delivery formats for browsers; JPEG and PNG remain the exchange formats for everything else.

The Decision Rules, by Job

Logos: SVG as the master and first choice, exported at exactly the artwork. PNG at several sizes as the fallback for platforms that reject SVG. Never JPEG: the halos on colored backgrounds are the visible signature of an amateur handoff. Our icon design principles guide covers the grid discipline that makes SVG marks stay crisp.

Icons: SVG, shipped inline or as symbols, styled with currentColor. Raster icons at one pixel density pixelate on modern displays; the free icons guide covers the licensing side of icon sets while the format answer here stays simply SVG.

Photographs on your own website: WebP as the primary, JPEG fallback if your stack needs one, AVIF added when your pipeline encodes variants automatically. Export from the original, at display size, never from a previously compressed copy.

Screenshots and UI captures: PNG. Text and window edges are exactly what lossy formats damage, and most support or sales pages zoom these images.

Graphics with text in them: SVG if it is vector-born, PNG if it is not. JPEG turns letterforms to mush at any quality a sane person would ship.

Animation: animated WebP or a muted, looping MP4. GIF survives on compatibility alone; its 256-color frames and heavy bytes are a last resort. The web animation performance guide covers the motion side of the same budget.

Print and merchandise: PNG or the vector file, at print resolution, in the color space the printer asks for. Print is a different contract from web delivery, and the lightest file is rarely the goal.

Five Mistakes That Keep Happening

1. Uploading the camera-sized original and letting the browser shrink it. The browser downloads every byte regardless. Export at the rendered size, and serve responsive variants for the rest.
2. Re-saving a JPEG repeatedly. Every save recompresses what survived the last one. Work from the master file, export delivery copies once.
3. Photographs as PNG "for quality." The measured table above is the rebuttal: same visual result, roughly seven times the weight.
4. JPEG for anything with transparency or flat color. The format cannot hold alpha and punishes edges. The logo row in the measured table costs five times the PNG and looks worse.
5. Designing in AVIF or WebP as the master. Delivery formats are one-way doors. Keep editable masters and lossless originals in your project files; encode WebP or AVIF at the end. Where these images came from matters too: license your sources properly with the stock photo license guide.

What a Quality Number Actually Means

Designers trade settings like folklore: "export JPEG at 80." The number deserves a footnote. JPEG quality is not a standard; each encoder (Photoshop, libjpeg, mozjpeg, a browser canvas, an image CDN) maps the same number to different actual compression, so quality 80 in one tool is not quality 80 in another. WebP and AVIF quality settings are similarly encoder-specific. The number is a dial position on one machine, not a promise about the file.

Practical habits that survive the folklore: export from the original at the intended display size; step quality down in small increments while viewing at 100 percent (never judge a zoomed-out preview, which hides the artifacts); look first at the worst place, text, faces, smooth gradients where banding starts; and save the setting you used with the file, because "q82, WebP, 6 method" in a project note is reproducible and "looked fine" is not.

Quality also interacts with resizing. A photograph exported slightly larger than its display slot and downscaled by the browser hides mild compression noise; one exported smaller and stretched amplifies it. When the slot varies by device, the responsive answer is variants, not one heroic file.

Responsive Delivery, Without the Tears

Most pages no longer show one image at one size, so the format decision travels with a delivery decision:

• srcset with width descriptors lets the browser pick a file near the rendered size for its screen density. Prepare the widths your layout actually uses: typically the slot size at 1x and 2x, plus one larger step for full-bleed heroes.
• The picture element switches formats as well as sizes: AVIF source first, then WebP, then JPEG or PNG, each with its own srcset. That order is the whole compatibility strategy, and it costs one export per format in an automated pipeline.
• CDN auto-format moves the same choice to the server, which inspects the browser's Accept header and returns AVIF or WebP where supported. This is where AVIF earns its keep: the slow encode happens once, in the pipeline, not at your desk.
• Art direction is the other switch picture offers: a different crop for narrow screens rather than the same image squeezed. Format cannot fix a composition that dies on mobile; a crop can.

Whichever mechanism you choose, the discipline is the same: masters archived losslessly, delivery files encoded once from the master, and one explicit fallback at the end of the chain for whatever the modern formats cannot reach.

The Privacy Line in Every Photo: Metadata

Raster files carry metadata, and photographs carry the most. EXIF data in camera and phone photos can include the capture time, the device, and GPS coordinates precise enough to name a house. Sharing services strip much of this; websites, email attachments, and direct downloads often do not.

Delivery encodes from most tools can strip metadata automatically, which is usually what you want for performance as well, since metadata is dead weight in the file. Keep the metadata in your archived master, where it is genuinely useful for rights records and provenance, and ship clean files to the public. A stock photo's license (see the free stock photos guide) covers the image; the metadata your own photos carry is your responsibility to the people in them.

Before You Ship: Image Format Checklist

• Family chosen correctly: vector-shaped images ship as SVG, photographs ship as a photographic format.
• Size exported to display: the file's pixel dimensions match its rendered size (or its responsive variants do).
• Quality set once, from the master: no re-saved JPEGs, no screenshots of screenshots.
• Transparency where needed: PNG, WebP, or AVIF; never a flattened JPEG standing in.
• Fallback exists where support demands it: picture elements or server negotiation for WebP or AVIF outside modern-browser-only contexts.
• Third-party SVGs sanitized: no scripts or external references ride along in uploaded files.
• Masters archived: the editable original and a lossless copy stay in the project; delivery encodes can be regenerated.

FAQ

Is WebP always smaller than JPEG?

No. At matched perceived quality, WebP beats JPEG on photographic content by a useful margin, and Google's published measurements put the saving at 25 to 34 percent. On flat graphics with hard edges, lossy WebP can be larger than PNG or SVG and carry visible edge artifacts. "Always" is the word to avoid; content decides.

Should I convert my whole library to AVIF?

If your pipeline encodes multiple variants automatically and keeps a WebP or JPEG fallback, AVIF will usually cut photographic bytes further. As a hand-export habit, its slow encoding costs more time than the bytes are worth for most sites. Keep masters in a lossless format and let the delivery layer do the work.

Why does my PNG photograph weigh megabytes?

Because lossless compression preserves photographic noise pixel for pixel, and noise does not compress. Export photographs as JPEG or lossy WebP from the original and reserve PNG for images whose sharp edges or transparency need it.

Can I put a raster photo inside an SVG?

Technically yes; the SVG wraps an embedded raster. It gains no vector benefits, usually weighs as much as the PNG would, and complicates sanitization. Serve the photo as a photo.

What format should I send a client or a printer?

Whatever their spec asks, which is usually PNG, PDF from the vector master, or high-quality JPEG for photographs. Ask before assuming; re-exporting from your archived master is cheap, and guessing wrong starts the re-save quality spiral.

Do these formats affect accessibility?

In file terms, no; in delivery terms, smaller images that arrive fast and at correct sizes help everyone, including readers on slow connections. Keep alt text honest and contrast compliant, and check pairs with the contrast checker.

What to Read Next

• Free stock photos for commercial use - where to get photographs legally, with the license traps spelled out.
• Icon design principles for modern interfaces - grids and stroke systems for the SVG side of this guide.
• Web animation performance guide - format choices for motion, budgets, and smooth rendering.
• Chart color accessibility checklist - making exported charts and graphics readable for every reader.

This guide is maintained by the Lucky Graphics editorial team. The measured results were produced from locally generated test images at the settings stated in the tables; your images will vary in absolute size, and the ordering by content type is the durable lesson.