Why the format matters
Images are usually the heaviest part of a web page. Choosing the right format can cut a page's weight by half with no visible difference, which makes it load faster, use less mobile data and often rank better in search. When you extract images from a site, knowing the formats also tells you which file is the true original and which is a compressed copy.
There are two big families. Raster formats store a grid of pixels (JPEG, PNG, GIF, WebP, AVIF). Vector formats store shapes and paths (SVG). Raster images are made for photos. Vector images are made for logos, icons and illustrations that must stay sharp at any size.
JPEG: the photo veteran
JPEG (also written JPG) dates from 1992 and is still the most common format on the web. It uses lossy compression. It throws away detail the eye is unlikely to notice, especially fine colour variation, and gets much smaller files in return.
- Best for: photographs and images with smooth gradients.
- Avoid for: text, sharp lines, screenshots and logos. Compression creates visible “ringing” around edges.
- Transparency: not supported.
- Tip: a quality setting of 75–85 is usually indistinguishable from 100 at a third of the size.
PNG: lossless and transparent
PNG uses lossless compression: every pixel is kept exactly. It also supports full alpha transparency, so edges can blend smoothly into any background.
- Best for: screenshots, UI graphics, diagrams and images with text or transparency.
- Avoid for: photos. A photo saved as PNG can be 5–10 times larger than a good JPEG.
GIF: the animation survivor
GIF supports only 256 colours, so photos look grainy. It survives because it animates everywhere. For actual animations on the web, a short muted MP4 or WebM video is usually 80–90% smaller than the same GIF, and many “GIFs” on social sites are really videos.
WebP: the modern all-rounder
Google released WebP in 2010, and today every major browser supports it. It can be lossy or lossless, supports transparency and animation, and is typically 25–35% smaller than an equivalent JPEG or PNG.
- Best for: almost everything on a modern website, both photos and graphics.
- Watch out: some older desktop software still can't open WebP files you download. Convert them if you need to edit in an older program.
AVIF: maximum compression
AVIF is based on the AV1 video codec. It often produces files about 50% smaller than JPEG at the same visual quality, and it supports transparency, HDR and wide colour. Support is now widespread in current browsers. The main costs are slower encoding and slightly less mature tooling.
- Best for: large hero photos and image-heavy pages where every kilobyte counts.
SVG: sharp at any size
SVG is an XML text format that describes shapes. An SVG logo looks perfect on a phone and on a 4K screen, can be styled with CSS, and is often just a few kilobytes.
- Best for: logos, icons, charts and simple illustrations.
- Not for: photographs.
- Security note: because SVG can contain scripts, only upload SVGs from trusted sources to your own site.
Side-by-side comparison
| Format | Compression | Transparency | Animation | Typical use |
|---|---|---|---|---|
| JPEG | Lossy | No | No | Photos |
| PNG | Lossless | Yes | No* | Screenshots, UI |
| GIF | Lossless, 256 colours | 1-bit | Yes | Simple animations |
| WebP | Both | Yes | Yes | General web use |
| AVIF | Both | Yes | Yes | Smallest photos |
| SVG | Vector (text) | Yes | Via CSS/JS | Logos, icons |
*APNG adds animation to PNG but is rarely used.
Responsive images and srcset
Modern sites rarely serve one image to everyone. With the srcset attribute and the <picture> element, a page offers several sizes and formats (for example AVIF, then WebP, then JPEG as a fallback), and your browser picks the best one for your screen. That's why an extractor often finds the same picture several times at different widths. Sort by dimensions or file size to pick the largest original.
A simple decision guide
- Is it a logo, icon or flat illustration? → SVG.
- Is it a photo? → AVIF or WebP, with JPEG as a fallback.
- Does it need exact pixels or text clarity? → PNG or lossless WebP.
- Is it an animation? → A short MP4/WebM video, not GIF.
Want to see which formats a site uses? Paste its address into the extractor and type an extension such as png or webp into the filter box. It's a quick way to spot pages that still serve heavy PNG photos.