When you go to save an image and your hand freezes at “JPG or PNG?”—choosing between image formats for the web is actually settled by a single table. Let’s give the answer first, then explain the reasons.
Conclusion: choose according to this table
| What you want to post | Format to use | Reason |
|---|---|---|
| Photo | WebP (or JPG) | Light. Strong with a photo’s amount of information |
| Illustration / diagram | WebP (or PNG) | Outlines don’t blur |
| Screenshot | PNG (or WebP) | Text stays crisp |
| Logo / icon | SVG | No degradation when enlarged |
| Image with a transparent background | PNG or WebP | JPG can’t do transparency |
| Moving image | Video (MP4) | Overwhelmingly lighter than GIF |
If you’re unsure, “photos and diagrams in WebP, logos only in SVG.” That alone is almost always right.
The true nature of each format
JPG—the go-to for photos
JPG (JPEG) is a format that makes images with many colors, like photos, smaller by “thinning out information to a degree the human eye can’t tell.” It’s the standard for digital cameras and phones, and for photos its balance of file size and quality is excellent.
It has two weaknesses. It can’t do a transparent background, and as a side effect of the thinning-out, the outlines of text and illustrations blur. Use JPG for a screenshot or logo and you get a hazy quality.
PNG—for crisp images and transparency
PNG is a format that saves without thinning out information. Text, lines, and solid fills stay crisp, which makes it the go-to for screenshots and illustrations. Being able to make the background transparent is also a big strength, and it’s been used for placing cut-out characters and logos.
Its weakness is that it gets heavy when used for photos. Save a landscape photo as PNG and it can be several times the size of a JPG.
WebP—the top choice for today
WebP is a newish format made for the web. Whether in JPG’s strong area (photos) or PNG’s strong area (transparency and crispness), it comes out roughly 20–30% lighter. All the current major browsers support it, and it has become the safe default for when you’re unsure.
Its strength is that it has both lossy and lossless modes. You can use one format for both—lossy for photos, lossless for transparent illustrations (these two words are explained at the end of this article).
It has almost no weaknesses, other than that older image editing software may not be able to open it.
SVG—for logos and icons that don’t degrade when enlarged
Whereas the three above are “collections of dots,” SVG is made of “a set of instructions for how to draw lines and shapes.” So no matter how much you enlarge it, it doesn’t go jagged, and the file is tiny. It’s ideal for logos, icons, and simple diagrams.
Conversely, complex images like photos can’t be made into SVG. Even among illustrations, ones with complex fills like watercolor paintings are a weak spot.
GIF—the originator of moving images (little use today)
GIF is a format that can make images that move like a flip book, but it maxes out at 256 colors, so the quality is coarse, and the file is very heavy. To post something “moving” today, video (MP4) or animated WebP is lighter and cleaner.
A mini glossary: raster and vector, lossless and lossy
Let’s briefly organize the words that come up in choosing a format, in a table.
| Term | Meaning | Formats it applies to |
|---|---|---|
| Raster image | An image made of a collection of colored dots (pixels). Goes jagged when enlarged | JPG, PNG, WebP, GIF |
| Vector image | An image that holds “how to draw” lines and shapes as formulas. Doesn’t go jagged when enlarged | SVG |
| Lossy compression | Makes it light by thinning out information. Loses a little quality each time you re-save | JPG, WebP (lossy mode) |
| Lossless compression | Makes it light without thinning out information. Quality doesn’t change no matter how many times you re-save | PNG, GIF, WebP (lossless mode) |
Remember “photos and diagrams are raster, logos only are vector” and “PNG while editing, export to WebP just before publishing,” and you’ll find it easier to decide when you’re unsure.
The same photo, saved in each format
“Lighter” is hard to picture from words alone, so here’s roughly how one 1600px-wide landscape photo compares across formats (it shifts with the photo’s content, so read it as a sense of ratios).
| Format | Rough size | How it looks |
|---|---|---|
| PNG | Heaviest (5–8× the baseline) | Perfect, but overkill for a photo |
| JPG (quality 80) | The baseline | Practically unnoticeable |
| WebP (quality 80) | 70–80% of the baseline | Indistinguishable from JPG |
| AVIF (quality 80) | 50–60% of the baseline | Much the same |
If you’ve been saving photos as PNG, that alone may be making your pages several times heavier. It’s the single most effective thing to change.
What width should you prepare?
What matters even before the format is the pixel width. Having rules of thumb per use removes the guesswork.
| Use | Rough width to prepare |
|---|---|
| A photo inside an article | 1200px |
| A large full-width photo | 1600–2000px |
| A card thumbnail | 600–800px |
| A round profile photo | 400px |
| Logos and icons | SVG (no pixel size needed) |
The idea is “twice the width you display it at.” High-resolution screens draw one px with two, so twice the displayed width is enough. Three times and up only adds weight without changing the look.
Watch out when using transparency
Images with a transparent background (transparent PNG or WebP) are handy, but there are two traps.
- Converting to JPG turns the transparent area black or white—JPG can’t hold transparency at all. To keep it, stay on PNG or WebP
- A white fringe is left around the cut-out—this happens when the original was cut out against a white background. It only shows on a dark background, so check it on the background colour you plan to use
Newer formats alongside older environments
“AVIF is lighter, but what if someone can’t display it?”—the picture tag settles that worry. The browser tries them top to bottom and loads only the first one it can display.
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="The sea at dusk">
</picture>The img at the bottom is the last resort (the fallback). Put a JPG there and a photo will appear in any environment. WebP alone is plenty to start with, so keep this in your back pocket for when you want to go lighter.
Favicons are a special case
The little icon on a browser tab (the favicon) has historically used a dedicated .ico format. PNG and SVG work these days too, but given the breadth of support, making one with a converter site is the safe route.
One bit of prep before posting to a site
Even if you choose the format correctly, a photo taken on a phone is 4000px wide and far too heavy as is. One bit of prep—resize (to around 1200–1600px wide) → compress—transforms your page’s display speed.
TipsMake images lighter to speed up your pageHow to compress, and handy sites for it, are gathered in this articleSummary
- If you’re unsure, “photos and diagrams in WebP, logos only in SVG”—PNG or WebP if you need transparency, video for moving things
- The difference between formats is “how they thin out information”—JPG thins out for photos, PNG doesn’t thin out, SVG is an instruction sheet
- Pair format choice with resizing and compression—only once you do all of this do you get an image that’s truly web-friendly
- Don’t save photos as PNG. That alone can make pages several times heavier
- Prepare twice the width you display at—around 1200px covers an article photo
Images make up the majority of a page’s weight—the prime culprit behind “heaviness.” Once you can choose formats, your site gets visibly faster.