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)
• It's "lossy": it throws away some detail to make the file smaller — so keep your original file and only export as JPG when needed

PNG

PNG keeps perfect quality — its compression is "lossless", so unlike JPG it doesn't throw any detail away. 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 is a modern format originally developed by Google. It produces smaller files than JPG or PNG at comparable quality. Google's own figures put lossy WebP files at roughly a quarter to a third smaller than comparable JPGs, and lossless WebP files about 26% smaller than PNGs.

Use WebP for:

• Any photograph or image where file size matters (which is almost all of them)
• If your site platform accepts WebP uploads (check before you convert everything)

WebP supports both transparency and animation. MDN (Mozilla's web developer documentation) says to prefer WebP (or the newer AVIF format) over PNG, JPG and GIF, because it generally compresses better.

Downsides:

• Very old browsers don't support it, though current versions of Chrome, Safari, Firefox, Edge and Opera all do

SVG

SVG (Scalable Vector Graphics) 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 large file sizes compared to modern alternatives: Google says animated WebP files come out smaller, and MDN suggests WebP, AVIF or APNG instead for animation. For anything more than a couple of seconds, a short video file (MP4 or WebM) is usually the better choice.

Common questions

How do I tell what format an image is in?

Look at the file extension at the end of the filename: photo.jpg, logo.png, icon.svg. On a Mac, you can also select the file and press Command-I to open its Get Info window, which shows the file type.

Can I convert one format to another?

Yes. Free tools like Squoosh (squoosh.app) let you convert and resize images in a browser. For converting a logo from PNG to SVG, you need a designer — automatic conversion of photos to SVG doesn't work well.

What format should I send images to Chykalophia?

Send originals where possible — the highest-quality version you have. For photos, JPG is fine. For logos and brand assets, SVG or a high-resolution PNG. We will prepare them for the web ourselves if needed.

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 for Developers — WebP, an image format for the web
• MDN Web Docs — image file type and format guide