JPG, PNG, or WebP? A No-Jargon Guide

We saved the same 1600 pixel photo three ways while writing this post. As a PNG it weighed 2,828 KB. As a JPEG at quality 80 it weighed 464 KB. As a WebP at quality 80 it weighed 330 KB. On screen the three are indistinguishable. That is not a rounding error, it is an 8.5x difference in how long your visitor stares at a blank rectangle, and it is decided by nothing more than the format you picked in the save dialog.

If your site feels slow, oversized images are the most likely cause and the easiest fix. You do not need a developer or a plugin. You need twenty minutes and the five steps below.

Step 1: Learn what each format is for

There are really only four formats you need to care about, and each has one job. JPEG compresses photographs well by throwing away detail your eye barely notices. PNG stores every pixel exactly, which is perfect for screenshots and graphics but disastrous for photos. WebP is the modern all-rounder that does both jobs in a smaller file and is supported by every current browser. SVG is for logos and icons: it is a drawing recipe rather than a grid of pixels, so it stays razor sharp at any size.

One nuance worth knowing: the newer AVIF format compresses photos another 20 to 30 percent beyond WebP, but browser support in 2026 still sits around 93 percent versus effectively universal for WebP, and it is slower to create. WebP is the safe default; AVIF is an optimization for later.

Step 2: See the difference on a real photo

Numbers in a table are easy to shrug off, so here is the test we ran for this post. One stock photo of plated food, 1600 by 1067 pixels, saved three times with the same tool and nothing else changed:

The PNG is not higher quality in any way a human can see. It is simply the wrong tool: PNG refuses to throw away photographic detail, so it stores noise, grain, and gradients pixel by pixel. Every visitor to a page with that PNG downloads 2.5 MB of nothing.

Now the twist that surprises most people. We also saved a simple flat logo graphic both ways, and the result flipped: the PNG was 3.9 KB while the JPEG was 14.8 KB, nearly four times larger, and it added faint smudges around the sharp edges. Format is not about better or worse. It is about matching the tool to the image.

Step 3: Resize before you compress

Format is half the win. Dimensions are the other half. A blog column is rarely wider than 800 pixels and a full-bleed hero rarely needs more than 1600 to 2000. A photo straight off a phone is 4000+ pixels wide, which means you are shipping four times the width and up to sixteen times the pixels that will ever be displayed.

So the order of operations matters: resize down to the largest size the page will show, then save in the right format. Resizing a 4000 pixel photo to 1600 typically cuts the file by 70 to 80 percent before compression even starts.

Step 4: Pick your format in five seconds

When you are unsure, this is the whole decision:

Step 5: Convert, then verify it worked

You do not need Photoshop. Squoosh is a free tool from Google that runs entirely in your browser: drag an image in, pick WebP on the right side, set quality around 80, watch the live before and after preview, and download. It shows the exact file size as you move the slider, so you can find the point where the photo still looks right.

Then verify, because a fix you have not checked is a guess:

1. Right click the image on your live page and choose 'Open image in new tab'. The URL ending tells you what actually shipped.

2. Press F12, open the Network tab, filter by 'Img', and reload. Each image lists its real transferred size. Anything over 500 KB deserves a second look.

3. Run your page through PageSpeed Insights. If 'Serve images in next-gen formats' has disappeared from the suggestions, you are done.

The habits that keep it fixed

Two footnotes. First, some platforms do this work for you: StoryPress, for example, routes every image through Cloudflare's image pipeline with format set to auto, so a visitor whose browser speaks WebP or AVIF gets the smaller file automatically even if you uploaded a JPEG. Uploading sensible sizes still matters, but the format conversion is handled. Second, if you want the deeper technical background, Google's own guide to choosing the right image format covers the edge cases we skipped.

The best part of this fix is that it is permanent. A photo compressed once is compressed forever, no plugin to update, no subscription, no maintenance. Twenty minutes on your ten heaviest images this week will do more for your load time than any setting you could toggle.