You've finished editing an image, and now your export menu is asking a question you didn't expect: JPG, PNG, or WebP? The good news is that this is a small decision with a simple rule behind it. Pick based on what the image is — a photo, a flat graphic, or something that needs transparency — and you'll be right almost every time.
This post gives you that rule, explains the tradeoffs in plain language, and shows where format choice fits into the rest of getting an image page-ready. If you're newer to all of this, it's one step in the beginner's guide to using images on your website.
The three formats most websites actually use
Image formats go deep, but you only need three for a normal business website: JPG (sometimes written JPEG), PNG, and WebP. Each one is built to handle a different kind of image well.
Here's the short version before the detail:
- JPG is built for photographs — lots of colors and gradients.
- PNG is built for flat graphics and anything that needs a transparent background.
- WebP is a newer format that handles both jobs and usually produces a smaller file.
You don't need to memorize the engineering behind them. You need to know which one to reach for when you're staring at an export dialog.
JPG: best for photographs
JPG is the workhorse for photos. A product shot, a team-style portrait, a hero photo of a workspace, a background scene — these are full of subtle color shifts, and JPG compresses that kind of detail efficiently. The file stays reasonably small without the photo looking obviously degraded at normal sizes.
The one thing JPG cannot do is transparency. A JPG always has a solid rectangular background. If you save a logo or an icon as a JPG, you'll get a white (or whatever-color) box around it instead of a clean cutout.
JPG also uses "lossy" compression, meaning it throws away some data to shrink the file. For photographs that's fine and usually invisible. For sharp-edged graphics and text it can look smeary, which is exactly why graphics belong in a different format.
Reach for JPG when: the image is a photograph and it sits on a solid background or fills the whole space.
PNG: best for graphics, flat designs, and transparency
PNG shines at two things JPG struggles with.
First, flat graphics with crisp edges: logos, simple illustrations, icons, diagrams, screenshots of interface elements, anything with hard lines or text baked in. PNG keeps those edges sharp instead of fuzzing them.
Second, transparency. PNG supports a transparent background, so a logo can sit cleanly over any color section without a visible box around it. If you need your mark to float over a colored band or a photo, PNG is the safe default.
The tradeoff: PNG files of detailed photographs get large. A full-color photo saved as PNG is often much heavier than the same photo as JPG, with no visible benefit. So PNG is the wrong tool for a photo and the right tool for a graphic.
Reach for PNG when: the image is a flat graphic or logo, or it needs a transparent background.
WebP: smaller files, modern support, and fallbacks
WebP is the newer option, and it's genuinely useful because it does both jobs. It can compress photographs like JPG and it can handle flat graphics and transparency like PNG — often at a smaller file size than either. Smaller files load faster, which matters most for big images like heroes.
Two honest caveats:
- WebP can produce smaller files than JPG or PNG, but the result varies by image, encoder, and quality setting. Compare actual exports rather than relying on a universal percentage.
- Check compatibility for your audience. WebP works in current mainstream browsers, but use your analytics and a live compatibility reference if older clients matter.
Do you need a fallback?
A fallback means serving a JPG or PNG version to any browser that can't read WebP, so nobody sees a broken image. Whether you need to set one up depends on how you publish:
- Site builders, no-code platforms, and most CMS image handling typically deal with format delivery and fallbacks for you. You upload one image; the platform serves the right format. In that case, you can often just upload a JPG or PNG and let the platform optimize.
- Hand-coded sites can serve WebP with a JPG/PNG fallback using the HTML
<picture>element, which provides alternative sources plus a fallback<img>.
If your platform handles delivery, the practical move is to focus on choosing the right source format (photo vs. graphic) and let the tooling worry about WebP.
A one-line rule for picking a format
Here's the whole decision in one place.
| Your image is... | Needs transparency? | Use this | Notes |
|---|---|---|---|
| A photograph | No | JPG (or WebP) | WebP if your setup supports it and you want a smaller file |
| A photograph | Yes (rare) | PNG (or WebP) | Transparency rules out JPG |
| A flat graphic, logo, or icon | No | PNG (or WebP) | Keeps edges sharp |
| A flat graphic, logo, or icon | Yes | PNG (or WebP) | Clean cutout over any background |
| Anything, smallest file, modern setup | Either | WebP | Falls back to JPG/PNG where needed |
Said as two short rules:
- Photo → JPG or WebP.
- Flat graphic or transparency → PNG or WebP.
WebP is the modern "smaller file" choice for both columns when your publishing setup supports it, which most now do.
How format fits into sizing and compression
Format is one step in a short, repeatable flow: choose → size → ship.
- Choose the format using the rule above — the image's type decides it.
- Size the image so its dimensions match where it goes. A hero, a thumbnail, and an inline graphic need very different pixel sizes. Exporting at the right size is also the main reason images stay sharp instead of going soft — see why a hero image looks blurry and how to fix it and the image sizes and aspect ratios cheat sheet for the numbers. Read the export size off the section row before you choose a format.
- Compress the file so it loads fast without going blurry. Format and compression work together: the right format gives compression a head start. The how-to lives in compress images without making them blurry — we won't repeat the quality-loss detail here.
Format alone won't hand you a particular page-speed score; speed depends on size, compression, and how your page loads overall. But choosing well is the easy first win.
If your images come from the Picdrome library, you'll typically download a standard photo format and can convert or re-export as needed. Picdrome images are AI-generated and free to use for personal and commercial website projects, subject to the Picdrome Image License — choosing JPG, PNG, or WebP doesn't change that.
Next step: pair your format choice with compression so files stay small and sharp, then ship using the cheat-sheet sizes. The tools for getting images page-ready walk you through it.
FAQ
Is WebP safe to use now, or will some visitors see a broken image?
Check your builder's current output rather than assuming it creates a fallback. If you hand-code the site, the HTML <picture> element can provide WebP plus a JPG or PNG fallback.
Should I convert all my existing JPGs and PNGs to WebP? Only if it's easy and your platform supports it. The bigger wins usually come from sizing images correctly and compressing them, not from converting formats one by one. Start with your largest images, like heroes.
My logo has a white box around it. What went wrong? It was almost certainly saved as a JPG, which can't store transparency. Re-export the logo as a PNG (or WebP with transparency) to get a clean, background-free version.
In Plain English
Three formats cover almost every website image. Use JPG for photographs, PNG for flat graphics, logos, and anything that needs a transparent background, and WebP when you want a smaller file and your publishing setup supports it (most now do, with automatic fallbacks). The one-line rule: photo → JPG/WebP, flat graphic or transparency → PNG/WebP. This helps any non-designer founder or builder who's stuck at the export menu. Decide the format first, then size the image for where it goes, then compress it. Format is step one of three; do all three and your images load fast and look sharp.