JPG vs PNG vs WebP: Which Image Format Should You Use?

Short answer: use WebP for images on your website, JPG for photos you need to email or open in any app, and PNG for screenshots, logos and graphics with sharp edges or transparency. If you just want to convert a file right now, my free JPG, PNG and WebP image converter does it in your browser — your images never leave your device.

The rest of this post explains why those rules work, when to break them, and what image format actually does to your page speed.

Why image format matters more than people think

On most of the sites I audit, images are the heaviest thing on the page. The code has been minified, the fonts are subset, and then there's a 3 MB hero photo straight off a phone.

Picking the right format — and the right size — is usually the cheapest performance win available. It doesn't need a redesign, a new framework or a developer on retainer. It needs the right file.

JPG vs PNG vs WebP at a glance

JPG: the universal photo format

JPG (or JPEG) throws away detail the eye is unlikely to notice, which makes photos small. That's why every camera and phone uses it.

The trade-off shows up on hard edges. Text, icons and flat-colour graphics get soft, smudgy halos around them. JPG also has no transparency, so a logo with a transparent background ends up on a solid colour.

Use JPG when compatibility matters more than size: sending photos to a client, uploading to a print shop, or attaching to an email.

PNG: sharp, lossless, and heavy

PNG keeps every pixel exactly as it was. For a screenshot of an app, a chart or a logo, that's what you want — edges stay crisp and transparency is preserved.

The cost is size. A photo saved as PNG is often several times larger than the same photo as JPG, with no visible benefit. If you've ever wondered why a website's "small" banner image is huge, a photo saved as PNG is a common culprit.

WebP: built for the web

WebP was created by Google specifically for web images. It can be lossy like JPG or lossless like PNG, and it supports transparency in both modes.

According to Google's WebP documentation, lossless WebP images are 26% smaller than PNGs, and lossy WebP images are 25–34% smaller than comparable JPEGs. Your own results will vary with the image, but in my experience WebP is often the smallest of the three at similar quality.

Every current major browser displays WebP, and MDN's image file type guide recommends WebP or AVIF for photos on the web, with JPEG as the fallback.

What about AVIF?

AVIF is newer and can compress even further, but encoding it is slower and support in tools and upload forms is still patchier. For most sites I build, WebP is the practical default today, with AVIF as an optional extra served through a framework like Next.js.

How image format affects page speed and Core Web Vitals

This is the section for both developers and business owners, because it's where format stops being a technical detail and starts affecting search rankings and sales.

Images are often your LCP element

Google's Core Web Vitals include Largest Contentful Paint (LCP) — how long it takes for the biggest visible thing on the page to render. As web.dev's LCP guide explains, images are among the elements LCP measures, and a good score is 2.5 seconds or less for at least 75% of page loads.

On a typical landing page, that biggest element is the hero image. So the size of one file can decide whether your page passes or fails.

Smaller files load sooner

The maths is simple: fewer bytes means less time downloading, especially on mobile data. Switching a hero image from PNG or a heavy JPG to a well-compressed WebP is one of the quickest ways I know to pull LCP down.

Resizing matters as much as format

Format is only half the job. If a photo is 4000 pixels wide but displayed in an 800-pixel column, the browser downloads five times the width it needs — in any format.

Before converting, resize images to roughly the largest size they'll actually be displayed at (allowing extra for high-density screens). The resize option in the free image converter does exactly this while keeping the aspect ratio.

What developers should do on top

If you're on a framework like Next.js, use its image component to serve modern formats and responsive sizes automatically. Otherwise, a <picture> element with a WebP source and a JPG fallback covers every browser.

For hand-uploaded content — blog covers, CMS images, product photos — converting to WebP before upload still pays off, because not every CMS optimises images for you.

How to convert images for free (without uploading them)

Most online converters upload your files to a server. For client photos, ID scans or unreleased product images, that's a privacy risk you don't need to take.

I built the converter on this site to run entirely in the browser using the built-in canvas API. Here's how to use it:

Open the Image Converter.

Drag one or more images onto the drop zone, or click it to choose files. JPG, PNG, WebP, GIF, BMP, SVG and (in most browsers) AVIF all work.

Choose the output format: JPG, PNG or WebP.

For JPG or WebP, set the quality. Start at 0.85 and lower it only if you need a smaller file.

Optionally turn on Resize and set a maximum width or height.

If you're converting a transparent PNG to JPG, pick a background colour — white by default.

Compare the original and new file sizes, then download each image or use Download all.

Changing any setting re-converts everything automatically, so you can try a few quality levels and see the size change before downloading.

Common mistakes I see

Converting a JPG to PNG to "improve quality"

This makes the file much bigger and doesn't bring back any detail. Once JPG compression has thrown information away, no format can restore it.

Re-saving the same JPG again and again

Each lossy save degrades the image a little more. Keep an original master copy and export from that.

Using JPG for logos and screenshots

You'll get fuzzy text and lose transparency. Use PNG, or lossless WebP for the web.

Skipping resize

A perfectly compressed WebP that's four times too wide is still too heavy. Resize first, then compress.

Which format should you pick? A quick decision guide

It's going on a website → WebP.

It's a photo for email, print or an older app → JPG.

It's a screenshot, logo or diagram that needs to be pixel-perfect or transparent → PNG (or lossless WebP if it's for the web).

The converted file is bigger than the original → lower the quality, resize, or keep the original.

If you work with images in other ways, the Base64 encoder is handy for turning a small icon into a data URI, and the full set of free developer tools runs in the browser the same way.

And if image weight is just one symptom of a slow site, that's the kind of performance work I do for clients — see my web development services.

FAQ