The Ultimate Guide to Image File Formats: PNG, JPG, WebP, AVIF and More

Image file formats are the difference between a web page that loads in two seconds and one that takes eight. A 4.2 MB hero image can add six seconds on mobile data, and the fix is rarely a faster server, it is usually a different format. The format you pick decides three things at once: how large the file is, how sharp it looks, and where it will open. This guide explains the main image file formats, when to use each one, how to identify what you already have, and how to convert between them without losing quality.

Lossy vs lossless: the core idea

Every image format is either lossy or lossless, and that single property predicts most of its behaviour.

Lossy formats throw away data to shrink the file. JPG is the classic example. Each time you save a JPG, the format discards detail the human eye is unlikely to notice. The file gets small, but the loss is permanent. Save the same JPG ten times and you can watch it degrade.

Lossless formats keep every pixel exactly. PNG is the common example. A screenshot saved as PNG looks identical to the original, and you can edit and resave it without decay. The trade is size: lossless files are usually larger.

The practical rule: photographs tolerate lossy compression well, because their detail is noisy and irregular. Graphics with flat colour, sharp edges, or text (logos, screenshots, charts) suffer visibly under lossy compression, so they want lossless.

JPG: built for photographs

JPG (also written JPEG) has been the default photo format since the 1990s. It compresses photographs efficiently and opens on every device, browser, and printer made in the last 25 years.

Reach for JPG when the image is a photograph and you do not need transparency. A travel photo, a product shot on a white background, a portrait: all of these are good JPG candidates. A typical 12-megapixel photo that is 6 MB as a camera file drops to roughly 1.5 MB as a quality-80 JPG with no obvious difference.

Avoid JPG for screenshots, logos, line art, or anything with text. The lossy compression smears the sharp edges and leaves grey fuzz around letters. Avoid it too for any image that needs a transparent background, because JPG cannot store transparency at all.

PNG: graphics and transparency

PNG is lossless, so it keeps sharp edges crisp and supports a transparent background. That makes it the right choice for logos, icons, screenshots, charts, and any graphic you plan to place on top of another image or a coloured page.

If a designer hands you a logo that must sit on both a white header and a dark footer, it needs a transparent background, and PNG delivers that. Not sure whether a file actually has transparency? The image transparency checker tells you in one step, which saves the surprise of a white box appearing behind your logo.

The cost of PNG is size. A full-screen photograph saved as PNG can be five to ten times larger than the same photo as JPG. Use PNG for graphics, not for photos.

WebP: the modern web default

WebP is a format Google released specifically to make web pages lighter. It does something the older formats cannot: it offers both a lossy mode and a lossless mode, and it supports transparency and animation. In practice a WebP file is usually 25 to 35 percent smaller than the equivalent JPG, and smaller than PNG for the same graphic.

For a website, WebP is now the sensible default. A 4.2 MB PNG hero image re-saved as WebP would land near 600 KB with no visible loss, turning a six-second mobile load into well under two seconds. Every current browser supports WebP, so the old compatibility worry no longer applies.

The site has a dedicated WebP tools category for working with the format, and you can confirm whether a file is already WebP with the WebP format checker.

GIF: animation and its limits

GIF is old, and it shows. Its headline feature is animation, short looping clips with no sound. Its hard limit is colour: a GIF can hold only 256 colours total. That is fine for a simple animated icon or a flat-colour loop, but a photographic animation turns blotchy and the file balloons in size.

For a short animation today, an animated WebP or a small MP4 video will look better and weigh far less than a GIF. GIF still matters because some platforms and chat apps expect it. If you need to pull the individual frames out of a GIF, for example to edit one frame, the GIF frame capture tool separates them for you.

BMP: uncompressed and oversized

BMP stores an image with little or no compression. Every pixel is written out in full, so a BMP of a photo can be 20 to 50 times larger than the same photo as JPG. A simple desktop wallpaper can reach 25 MB as a BMP.

You almost never want to publish a BMP. It exists mostly because older Windows software, some scanners, and certain industrial and medical devices still produce it. When a BMP lands on your desk, the job is usually to convert it into something smaller and more portable:

• BMP to PNG, when you need to keep graphics and edges lossless
• BMP to JPG and BMP to JPEG, for photographs that should be small
• BMP to WebP, for the smallest web-ready result
• BMP to GIF, when a platform specifically expects a GIF

You can confirm a file really is a BMP first with the BMP format checker.

AVIF: next-generation compression

AVIF is the newest mainstream format. It compresses harder than WebP, often producing a file 50 percent smaller than JPG at the same visible quality, and it handles a wider range of colour. For a photo-heavy page where every kilobyte counts, AVIF is the strongest option available today.

The trade is maturity. Browser support is good but slightly behind WebP, and encoding an AVIF takes longer. A common professional approach is to serve AVIF to browsers that accept it and fall back to WebP for the rest. If you are choosing one safe format for a site right now, WebP is still the easier call. If you are optimising aggressively and can manage a fallback, AVIF wins on size.

SVG: graphics that never blur

Every format above stores an image as a grid of pixels. SVG does not. It stores a set of drawing instructions: lines, curves, and shapes described by maths. Because it is instructions rather than pixels, an SVG scales to any size with zero blur. The same logo file looks razor sharp on a phone icon and on a billboard.

SVG is the right choice for logos, icons, and simple illustrations with flat colour. It is the wrong choice for photographs, which have no clean shapes to describe and would produce a huge, useless file. The quick test: if you could draw it with a pen in clean lines, SVG suits it. If it is a photo, it does not.

HEIC: the iPhone format

Recent iPhones save photos as HEIC by default. HEIC compresses better than JPG, so the photo takes less space on the phone. The friction starts when you move that file somewhere else: many Windows programs, older software, and some websites will not open a HEIC file.

If someone emails you a HEIC photo and your software refuses it, the file is fine, it just needs converting to a format the receiving program understands, usually JPG for a photo or PNG if you need transparency.

How to tell what format you have

A file extension can lie. Someone renames photo.webp to photo.jpg and now the name says one thing while the actual data says another. That mismatch causes uploads to fail and editors to throw errors. The reliable way to know is to inspect the file data itself, not the name.

Each of these checkers reads the real file signature and tells you the truth:

• Check if an image is PNG
• Check if an image is JPG
• Check if an image is WebP
• Check if an image is GIF
• Check if an image is BMP

How to convert and shrink images

Once you know what you have and what you need, two jobs cover most cases: converting the format and reducing the size.

For converting, pick the tool that matches your starting format and target, such as the BMP converters listed above. For reducing size without changing format, the image compressor shrinks a file while keeping it usable, and the change image quality tool lets you trade a precise amount of quality for a smaller file. If you work with images embedded in code or data, the Base64 to image converter turns an encoded string back into a real file.

Every one of these runs in the browser. The image is processed on your own device, nothing is uploaded to a server, and there is no sign-up. The full set lives in the image tools category.

Quick reference table

Format	Type	Transparency	Animation	Best for
JPG	Lossy	No	No	Photographs
PNG	Lossless	Yes	No	Graphics, screenshots, logos
WebP	Both	Yes	Yes	The web, as a default
AVIF	Both	Yes	Yes	Aggressive web optimisation
GIF	Lossless	Yes	Yes	Simple flat-colour animation
BMP	Uncompressed	No	No	Legacy software output
SVG	Vector	Yes	Yes	Logos, icons, illustrations
HEIC	Lossy	No	No	iPhone photo storage

Frequently asked questions

Which image format is best for a website?

WebP, as a default. It is smaller than JPG and PNG, supports transparency and animation, and works in every current browser. Use AVIF if you are optimising hard and can set up a fallback.

Should I use JPG or PNG for a photo?

JPG. It compresses photographs far smaller with no visible loss. Keep PNG for graphics, screenshots, and anything that needs transparency.

Does converting between formats lose quality?

Converting into a lossless format (PNG, BMP) keeps everything. Converting into a lossy format (JPG, WebP lossy) discards some detail once. Converting a JPG to PNG will not restore detail the JPG already removed.

Why will my HEIC file not open?

The file is valid, but many non-Apple programs do not read HEIC. Convert it to JPG or PNG and it will open anywhere.

How do I know a file’s real format?

Do not trust the extension, since it can be renamed. Use a checker that reads the file data, such as the format checkers linked above.