JPEG vs PNG: which to use for photos, graphics and transparency

In the JPEG vs PNG choice, the picture decides: use JPEG for photographs and anything with smooth gradients, and PNG for graphics with sharp edges, text, flat colours or transparency. JPEG throws away detail the eye barely notices, which makes photos small; PNG keeps every pixel exactly, which keeps screenshots and logos crisp but makes photos huge. This guide explains how the two formats differ, when each one wins, the mistakes that cost the most bytes, and why on a website today the better answer is often a third format. It is part of our guide to image optimization for the web, which covers size, format, compression and loading together.

Quick answer

• Photo, product shot, hero image, anything from a camera: JPEG (or better, WebP or AVIF on a website).
• Screenshot, chart, diagram, image with text: PNG (or lossless WebP).
• Needs a transparent background: PNG. JPEG has no transparency at all.
• Logo or icon: SVG if you have it; PNG if you only have a raster version.
• You will edit and save it again and again: keep a PNG (or the original) as the master, export JPEG at the end.
• For email, Open Graph images and uploads to other platforms: JPEG or PNG, which everything can open.

How JPEG and PNG differ

Both formats store a grid of pixels, but they compress it in opposite ways.

JPEG (named after the Joint Photographic Experts Group, standardised in 1992) uses lossy compression. It splits the image into 8×8-pixel blocks, keeps the broad changes of colour and brightness and discards fine detail, more of it at lower quality settings. It also stores colour at lower resolution than brightness, because our eyes are less sensitive to colour detail. On a photo those losses are invisible at a sensible quality. On a sharp edge, such as black text on white, they show as a faint haze or "ringing" around the letters and as blocks in flat areas.

PNG (Portable Network Graphics, a W3C Recommendation since 1996) uses lossless compression. It predicts each pixel from its neighbours and packs the differences with the same DEFLATE method ZIP files use. Nothing is thrown away, so the file you open is pixel-for-pixel the one you saved. That works brilliantly on large areas of flat colour and repeated patterns, and badly on photos, where every pixel is slightly different and there is little to pack.

.jpg and .jpeg are the same format. The three-letter version comes from old Windows file systems that allowed only three characters after the dot.

PNG got its first major update in two decades in June 2025, when the W3C published the PNG Specification Third Edition. It formally adds animated PNG, HDR colour and EXIF metadata to the standard. None of that changes the everyday choice below.

When to use JPEG

JPEG wins whenever the image is a photograph or looks like one:

• Product photos, team photos, hero banners, blog lead images.
• Images with soft gradients, such as skies, skin or blurred backgrounds.
• Any case where file size matters and a tiny loss of detail does not.

At a quality around 75–85, most photos look the same as the original at the size they are displayed, and the file is a fraction of the PNG equivalent. JPEG also opens everywhere: every browser, every email client, every phone, every office program and every social platform.

JPEG is the wrong choice when:

• You need transparency. A JPEG always has a solid background, usually white. A logo saved as JPEG on a coloured header sits in a white box.
• The image contains text or hard edges. Screenshots of software, charts and diagrams get fuzzy halos around lines and letters.
• You will keep editing it. Each time a JPEG is opened, changed and saved as JPEG again, it loses a little more detail. Keep the original and export a fresh JPEG from it.

When to use PNG

PNG wins when every pixel must stay exactly as it is, or when you need a transparent background:

• Screenshots of apps and websites, especially with small text.
• Charts, diagrams, line drawings and illustrations with flat colours.
• Logos and icons when you have no SVG version.
• Any image that must sit on different backgrounds, which needs transparency.
• Master copies you will edit again later.

PNG is the wrong choice for photographs. Because nothing is thrown away, a photo saved as PNG is usually much larger than the same photo as a JPEG, often several times larger, with no difference anyone can see at normal size. A camera photo exported as PNG is one of the most common reasons a page carries a multi-megabyte image.

PNG-8 and PNG-24

Image editors often offer two kinds of PNG. PNG-8 stores a palette of at most 256 colours, like a GIF, and is very small for simple graphics with few colours. PNG-24 (or PNG-32 with transparency) stores full colour for every pixel. A logo with three colours is fine as PNG-8; a screenshot with gradients needs PNG-24. Tools such as pngquant reduce a full-colour PNG to a palette automatically, which is a lossy step but often invisible on graphics.

JPEG vs PNG on a website

For a site, the JPEG vs PNG rule still decides the kind of compression you want, lossy for photos and lossless for graphics, but there are better containers for both now.

• Photos: WebP or AVIF instead of JPEG. Google's WebP documentation reports lossy WebP files 25–34 % smaller than comparable JPEGs, and AVIF often goes further. Our explainer on what a WebP file is covers the format itself.
• Graphics: lossless WebP instead of PNG. Google reports lossless WebP files 26 % smaller than PNGs, with transparency kept.
• Logos and icons: SVG, which stays sharp at any size and is usually a few kilobytes.

Every current browser supports WebP and AVIF, so on a website JPEG and PNG are mostly the fallback. The guide to modern image formats: WebP, AVIF and when JPEG is still fine explains the quality settings and the <picture> fallback.

JPEG and PNG remain the right choice in a few places on a site:

• The Open Graph image that appears when someone shares your page. Keep it a 1200×630 JPEG or PNG, because not every platform shows WebP previews.
• Images in email templates, where many mail clients still do not display WebP or AVIF.
• Downloads such as press photos and printable files, where people expect a format every program opens.

Google Images indexes both JPEG and PNG, along with WebP, AVIF, SVG, GIF and BMP, so the choice has no direct effect on image search.

How to check which format your images use

On a live page, the format is rarely what the file name suggests: a theme may serve a .png product photo, or a CDN may already convert .jpg files to WebP.

The image size checker lists every image on the page with its real format, file size, pixel dimensions and displayed size, and flags files over 300 KB. Sort by size: a PNG near the top of the list that is a photo is the quickest win on the page.

The full getReport report runs Lighthouse's "Serve images in next-gen formats" audit, which estimates how much each JPEG and PNG would shrink in a modern format.

How to convert between JPEG and PNG

PNG photo to JPEG (or WebP): this is the conversion that saves bytes.

The image compressor converts PNG, JPEG and WebP files to a smaller JPEG, WebP or AVIF, up to 50 at a time, in your browser. Nothing is uploaded. Transparent areas turn white in JPEG and stay transparent in WebP and AVIF. The step-by-step guide on how to reduce image file size covers resizing and quality settings as well.

On a computer without extra tools:

• Windows: open the image in Paint, then File → Save as → JPEG picture.
• Mac: open it in Preview, then File → Export, choose JPEG and set the quality slider.

JPEG to PNG: only when you need to edit the image losslessly from here on, or a system insists on PNG. Converting does not bring back the detail JPEG discarded, and the file gets bigger. It does not add transparency either; the background has to be removed in an editor.

Common mistakes

• Photos saved as PNG. A screenshot tool or a design app exports everything as PNG, including product photos. Re-export photos as JPEG or WebP.
• Logos saved as JPEG. The logo gets a white box and fuzzy edges. Use SVG, or PNG with transparency.
• Screenshots saved as low-quality JPEG. Text becomes hard to read. Use PNG or lossless WebP, or JPEG at a high quality if the file must be small.
• Converting JPEG to PNG "to improve quality". The lost detail does not come back; you only get a larger file.
• Re-saving the same JPEG after every edit. Keep an untouched original or a PNG master and export once.
• Choosing the format but not the size. A 4000-pixel PNG shown at 400 pixels is wasteful in any format. Resize first.

Questions people ask

Is JPEG or PNG better quality?

PNG keeps the exact original pixels, so it is technically higher quality, but for photos the difference is invisible at a JPEG quality of about 80 or above. For screenshots, text and sharp graphics PNG looks visibly cleaner, because JPEG blurs hard edges. Judge by the image type, not a general rule: photos lose nothing you can see as JPEG, graphics do.

Why are PNG files so much bigger than JPEGs?

PNG is lossless, so it must store every pixel exactly, while JPEG discards fine detail the eye barely notices. On photos, where every pixel differs slightly from its neighbour, lossless packing saves little, so a photo as PNG is usually several times the size of the JPEG. On flat graphics PNG packs well and can be smaller than a JPEG.

Is JPG the same as JPEG?

Yes. JPG and JPEG are the same image format; only the file extension differs. Early Windows file systems allowed three-letter extensions, so .jpg became common, while other systems used .jpeg. Browsers, editors and websites treat both the same, and renaming one to the other changes nothing about the file.

Should I use JPEG or PNG for a logo?

Neither, if you can avoid it: SVG is best for logos because it stays sharp at every size and is usually tiny. If you only have a raster file, use PNG, which supports a transparent background and keeps edges crisp. JPEG gives a logo a solid background box and soft, blocky edges around text.

Does converting PNG to JPEG lose quality?

Yes, a little, because JPEG compression is lossy. For photos the loss is invisible at a quality of 80 or more, and the file becomes much smaller. For screenshots and text the loss shows as fuzzy edges. Transparent areas also become a solid colour, usually white. Keep the PNG as your master copy in case you need it later.

Which is better for printing, JPEG or PNG?

Both print well if the image has enough pixels for the print size, roughly 300 pixels per inch for close viewing. Use a high-quality JPEG for photos and PNG for graphics and text. Many print shops prefer PDF or TIFF with a CMYK colour profile, so check their requirements before sending files.