Image Formats Explained: JPG, PNG, WebP, AVIF, GIF

The five image file formats you will meet most online are JPG (photos, works everywhere), PNG (screenshots, logos and transparency), WebP (smaller files for both photos and graphics), AVIF (often smallest, newest) and GIF (simple animations). For the web, WebP is a strong default because every current major browser supports it. Use JPG when you need maximum compatibility for photos, PNG when every pixel must stay exact, and an animated WebP or a video instead of a large GIF.

Lossy vs lossless in one paragraph

Every image format compresses pixels to save space, in one of two ways. Lossless compression shrinks the file but keeps every pixel exactly as it was, which is ideal for text, logos and screenshots. Lossy compression throws away detail people are unlikely to notice, which makes photos far smaller but slowly degrades them if you re-save again and again. Some formats are only one or the other, and the newer ones can do both. Our explainer on lossy vs lossless compression has side-by-side measurements.

JPG / JPEG

JPEG (the file extension is usually .jpg, sometimes .jpeg; they are the same format) has been the standard photo format for decades. The MDN image format guide describes it as "currently the most widely used lossy compression format for still images."

Strengths

• Opens everywhere: every browser, phone, computer, printer and email client.
• Excellent for photos and other images with smooth gradients and natural texture.
• Adjustable quality, so you can trade size against detail.

Weaknesses

• Lossy only. Each re-save loses a little more detail.
• No transparency. Transparent areas become a solid background.
• Poor for text and sharp edges, which pick up halos and blocky artifacts.

Use it for: photos you need to send anywhere, upload to forms, print or attach to emails.

There is no difference between .jpg and .jpeg beyond the name. Our guide to JPG vs PNG covers the most common format decision in more depth.

PNG

PNG (Portable Network Graphics) is a lossless format with full transparency support. MDN notes that it is preferred over JPEG "for more precise reproduction of source images, or when transparency is needed."

Strengths

• Lossless: what you save is exactly what you get back.
• Full alpha transparency, including soft edges and semi-transparent shadows.
• Crisp text, lines and flat colours.

Weaknesses

• Large files for photos, often several times the size of a JPEG of the same picture.
• No lossy option within the format itself. Tools can shrink PNGs by reducing them to a palette of fewer colours first, which is a lossy step.

Use it for: screenshots of text and interfaces, logos, icons, diagrams, and anything that needs a transparent background when WebP is not an option.

PNG can also be animated (APNG), which MDN lists as supported in Chrome, Edge, Firefox, Opera and Safari, though animated WebP is usually smaller.

WebP

WebP was developed by Google as a single format for the web that can do almost everything: lossy and lossless compression, transparency and animation. MDN calls it an "excellent choice for both images and animated images" and lists support in Chrome, Edge, Firefox, Opera and Safari. On a Mac, WebP in Safari needs Safari 14 or later and macOS Big Sur or later.

Strengths

• Usually smaller than JPEG for photos and much smaller than PNG for graphics.
• Supports transparency in both lossy and lossless modes.
• Supports animation, making it a better replacement for GIF.

Weaknesses

• Not every desktop app, older photo editor or online form accepts it yet.
• The maximum image size is 16,383 × 16,383 pixels, smaller than JPEG's limit, according to MDN. This only matters for very large panoramas and scans.
• Lossy WebP, like JPEG, should not be re-saved over and over.

In our own tests, the size advantage varied a lot from image to image. Converting our test images to WebP at quality 80 with our upload pipeline gave:

Screenshots and graphics saved as PNG gain the most. Photos that are already well-compressed JPEGs gain less, so it is worth checking the result.

Use it for: images on websites and blogs, screenshots you share by link, and short animations. Our explainer What is WebP? covers how to open and convert WebP files.

AVIF

AVIF (AV1 Image File Format) is the newest widely supported format. It stores images using the AV1 video codec inside a HEIF container. MDN describes it as offering "much better compression than PNG or JPEG with support for higher color depths, animated frames, transparency," and lists browser support from Chrome 85, Edge 121, Opera 71, Firefox 93 and Safari 16.1.

Strengths

• Often the smallest files at a given visual quality, especially for photos.
• Supports transparency, animation, high bit depth and HDR.
• Royalty-free.

Weaknesses

• Newer than WebP, so support in desktop software, older devices and upload forms is patchier.
• Slower to encode, which matters when converting large batches.
• No progressive rendering: MDN notes that AVIF files must be fully downloaded before they are displayed, although their small size usually makes up for it.

MDN recommends including a fallback format when you use AVIF on a website (for example with the HTML picture element). We compare the two newer formats in detail in AVIF vs WebP.

Use it for: websites where you control the HTML and can provide a fallback, and photo-heavy pages where every kilobyte counts.

PictureToLink accepts AVIF uploads and keeps them as AVIF unless you choose to convert to WebP or JPG. Animated AVIF files are stored as a still image, so use GIF or animated WebP for animations.

GIF and animated images

GIF dates from 1987 and is still everywhere because of animated reactions and memes. Technically it is lossless, but MDN explains that each pixel is an index into a palette of at most 256 colours. Full-colour images have to be squeezed into that palette, which is why GIFs of video clips look grainy or banded.

Strengths

• Plays everywhere, including email clients and old software.
• Simple animation with no player needed.

Weaknesses

• Limited to 256 colours per frame (fewer looks worse).
• Transparency is on or off for each pixel, with no soft edges.
• Animations are very large for what they show.

Better alternatives: MDN suggests preferring PNG for still images and "WebP, AVIF or APNG for animation sequences." On sites that allow it, a short MP4 video is often far smaller still.

In our tests, converting a small sample GIF (480 × 270) to animated WebP with our upload pipeline cut it from 52 KB to 23 KB, a 55.9% saving, with the animation intact. If you need to share a GIF as a link, our GIF to URL tool keeps animations animated.