thecompressjpeg

Best image format for websites

There is no single best format — there is a right answer per image, and it is decided by content and by where the file is going.

The short answer

Photographs
WebP, with JPEG as the fallback.
Screenshots and UI captures
PNG or lossless WebP. Never JPEG.
Logos and icons
SVG if it is made of shapes. Otherwise PNG or WebP.
Anything transparent
WebP or PNG. JPEG has no alpha channel.
Short animation
Animated WebP, or a muted video for anything longer.
Absolute smallest files
AVIF, if your build can produce three formats.
Leaving the browser
JPEG or PNG. Email and desktop software are less forgiving.

Deciding per image

The one question that decides most cases

Does this image have large areas of flat colour and hard edges?

Yes — screenshots, logos, diagrams, charts, text as an image, line art. These need a lossless format. Lossy encoders put visible haloes around every hard edge and smear coloured text, at every quality setting. Use PNG or lossless WebP.

No — photographs, continuous gradients, complex artwork. These suit lossy encoding, which exploits the noise and irregularity that make them photographic. Use WebP or JPEG.

Almost every format mistake on the web is one of these two put in the other's container: a photograph in PNG, which is five to ten times larger than it needs to be, or a screenshot in JPEG, which is both dirty-looking and often larger than the PNG would have been.

The formats, ranked by what they are for

WebP
The default for the web in 2025. Lossy and lossless in one format, full alpha, supported by every current browser, 25–35% below JPEG at matched quality. If you change one thing, change to this.
JPEG
Still the safest choice for anything leaving the browser — email, downloads, print, files sent to a person. Universal support is worth real bytes.
PNG
Lossless with proper transparency. Correct for graphics, wrong for photographs, and often replaceable by lossless WebP for a further 25%.
SVG
Unbeatable for logos, icons and anything built from shapes. Vector, tiny, sharp at every size and every screen density.
AVIF
The smallest of the raster formats, roughly 20–30% below WebP. Worth it if your pipeline can emit multiple formats; encoding is slow and browsers cannot produce it.
GIF
Effectively obsolete. Animated WebP is smaller and full colour. GIF survives in email, where nothing modern is reliable.

By use case

Hero and banner images
WebP at quality 78, 2000–2560 px wide. AVIF first if you can generate it.
Article and content images
WebP at 75–80, around 1600 px wide.
Product photography
WebP at 80–85, 1500–2048 px so zoom holds up. Keep a JPEG master for shopping feeds.
Thumbnails
WebP at 70–75, 400–600 px.
Logos and site marks
SVG. Fall back to PNG only if the artwork is not vector.
Screenshots in documentation
PNG or lossless WebP, sized to the column rather than the screen.
Email newsletters
JPEG and PNG only. WebP support in email is not reliable.
Anything a person will download
JPEG. It opens everywhere, on everything.

Serving more than one format

You do not have to choose a single format when the <picture> element will pick for you:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description" width="1600" height="1067">
</picture>

Each browser takes the first source it understands and falls through to the JPEG otherwise. The cost is generating and storing three files instead of one, which a build pipeline makes trivial and hand-editing does not.

If you are working by hand, WebP alone with a JPEG fallback captures the large majority of the available saving.

What actually matters more than the format

Changing format buys you 25–35%. Sizing the image correctly frequently buys 80% or more, because file size scales with pixel count and most images on the web are several times larger than the space they are displayed in.

So: resize to the layout first, then pick a format, then set a quality. Choosing AVIF for an image that is three times too large is optimising the wrong thing.

Try it yourself

Everything below runs in your browser, so you can test any of this on your own files without uploading them.

  • JPG to WebP

    Typically 25–35% smaller at matched quality. The standard web win.

    Open the tool

  • Compress JPEG

    Shrink JPG and JPEG photographs with a quality slider or an exact target size.

    Open the tool

  • Compress PNG

    Lossless by default, with transparency carried through untouched.

    Open the tool

  • Resize image

    By pixels or percentage, aspect ratio locked, across a whole batch.

    Open the tool

Questions

Frequently asked questions

Every answer below is present in the page source, expanded, so it can be read without opening anything.

What is the best image format for a website?

WebP for most things — it covers both photographs and graphics, supports transparency, and is 25–35% smaller than the format it replaces. Keep SVG for logos and icons, and JPEG for anything a visitor will download or that goes into an email.

Should I use AVIF or WebP?

WebP if you are working by hand — universal support, instant encoding, and most of the available saving. AVIF as well if your build pipeline can generate multiple formats and fall back gracefully, since it is another 20–30% smaller again.

Is PNG or JPEG better for a website?

Neither universally — it depends on the content. PNG for screenshots, logos, diagrams and anything transparent. JPEG for photographs. Putting either one in the other's place is the most common and most expensive format mistake there is.

When should I use SVG?

For anything built from shapes rather than photographed: logos, icons, simple illustrations, charts. It is vector, so one small file is sharp at every size and every screen density, and it usually beats any bitmap on size.

Do I still need JPEG at all?

Yes, as a fallback and for anything leaving the browser. Email clients, older desktop software and print workflows are all far less forgiving than a browser, and JPEG is the only format all of them handle without question.

Does the format matter more than the file size?

No. Changing format typically saves 25–35%; sizing an image to its actual display size often saves 80% or more. Get the dimensions right first — the format choice is the smaller of the two decisions.

From the blog

Related reading

Longer, more practical guides from the blog.

  • Image Formats

    WebP vs JPEG: Which Should You Use, and When JPEG Still Wins

    WebP produced a 27.0 KB file against MozJPEG's 41.1 KB on the same photograph at slightly higher measured fidelity — 34% smaller. It also produced a larger file than JPEG on random noise. The advantage is real and content-dependent.

    9 min read

  • Image Formats

    PNG vs JPEG: When to Use Each, With the File Sizes to Prove It

    PNG stored the same photograph in 1274.1 KB where JPEG needed 67.5 KB — nineteen times larger. On a flat graphic PNG won. On a smooth gradient PNG lost to JPEG by a factor of two, which surprises most people.

    9 min read

  • Practical Guides

    How to Compress Images for a Website Without Wrecking Them

    Resize before you compress. Measured on one photograph: half the width at quality 80 produced a 16.4 KB file, while full width at quality 40 produced 20.6 KB and looked far worse. The order of operations matters more than the settings.

    8 min read