Image formats explained (JPG, PNG, WebP, SVG)

When you save or export an image, you choose a file format. The format determines how the image is stored, how big the file is, and how it looks on screen. Using the wrong format leads to blurry images, huge file sizes, or visual problems.

This guide explains the four formats you'll encounter on the web — and which to use when.

The four formats at a glance

JPG (or JPEG)

JPG is the most common format for photographs on the web. It uses compression to keep file sizes small — which makes pages load faster.

Use JPG for:

• Photos of people, places, products
• Hero banners and background images
• Any image where you don't need a transparent background

Downsides:

• Does not support transparency (the background will be white or whatever color you set)
• Quality degrades slightly each time you save it — so save your original file and only export as JPG when needed

PNG

PNG keeps perfect quality — it doesn't compress the way JPG does. It also supports transparency (a transparent background lets the image blend into any background color).

Use PNG for:

• Logos on a non-white background (though SVG is usually better — see below)
• Screenshots where sharp text matters
• Images with text, sharp edges, or flat colors

Downsides:

• File sizes are usually larger than JPG
• Not ideal for large photographs — use JPG instead

WebP

WebP (pronounced "web-P") is a modern format developed by Google. It produces much smaller file sizes than JPG or PNG with the same visual quality — often 25–35% smaller.

Use WebP for:

• Any photograph or image where file size matters (which is almost all of them)
• If your site platform supports it (most modern ones do)

WebP supports both transparency and animation. It has replaced JPG and PNG for many uses on modern websites.

Downsides:

• Very old browsers don't support it (but this is rarely an issue in 2026)

SVG

SVG (Scalable Vector Graphic) is not a photograph — it's a drawing described in code. An SVG can be scaled to any size without losing quality. A logo saved as SVG looks perfect on a small business card and on a giant billboard.

Use SVG for:

• Your logo
• Icons and simple graphics
• Illustrations that need to look sharp at any size

Downsides:

• Not suitable for photographs
• Complex SVGs with many paths can have large file sizes

GIF

GIF is an older format mainly used for simple animations. You may encounter it but rarely need to create one. Animated GIFs have very large file sizes compared to modern alternatives. If you need animation on your site, video (MP4) or CSS animation is almost always a better choice.

Common questions

Related guides

• Image basics for your website
• Image sizes for the web
• How to compress images
• Organizing your brand assets
• File formats reference

Learn more

• Google — WebP overview
• MDN Web Docs — image file types and formats