PNG to JPG is a trade, and the alpha channel is what you hand over
A PNG keeps every pixel exactly as the encoder received it and carries a per pixel alpha channel alongside the color. JPEG keeps neither. The format throws away detail your eye is bad at noticing, and its bitstream has no place to record transparency at all. So the question is never whether a PNG converts. Every PNG converts. The question is what fills the transparent regions and how much detail you are willing to trade for a file a fifth of the size.
This page answers both out loud. The matte color is a control instead of a hidden default, and each file reports the byte count before and after so the saving is a measured number rather than a promise. Batch a folder of screenshots and you will watch some rows shrink by eighty percent while others barely move. Those stubborn rows are telling you something worth reading, and the section on line art below explains what.
Pick the matte before you touch the quality slider
Transparent pixels have to become something. Most converters silently pick white, which works for a product shot heading onto a white page and looks broken the moment the same logo lands on a dark header. The matte you choose is baked in permanently, so it pays to match the background the image will sit on.
Anti aliased edges are not fully transparent or fully solid. A logo edge holds a ring of pixels at partial alpha, and each one blends toward your matte. Choose white for an icon destined for a dark page and you get a pale halo tracing every curve, visible on the final page and impossible to remove afterward. Set the matte to the page background color and the halo disappears, because the blend now matches what sits behind the image anyway.
What each quality number does to a photograph
| Setting | Good for | What appears first |
|---|---|---|
| 100 | An intermediate you will re-edit | Files balloon with almost no visible gain over 95 |
| 95 | Print, archive, client delivery | Nothing at ordinary zoom, faint noise in flat sky at 400% |
| 90 | The default here, general web use | Slight softening where fine texture meets a flat area |
| 80 | Blog images, product grids | Ringing along hard edges, mild banding in gradients |
| 65 | Thumbnails and previews | Visible 8 by 8 blocks in shadows and open sky |
| Below 50 | Little worth doing | Color bleeding, blocking, muddy skin tones |
Percentages are not a standard. A quality of 80 in one encoder is not the same as 80 in another, because the number maps onto a quantization table the specification never fixed. Treat the slider as a dial for this page and read the byte counts under each row rather than trusting the number to travel between programs.
Where the saving comes from
PNG compresses losslessly with DEFLATE, so a photograph with a million distinct colors gives the algorithm almost no repetition to work with. JPEG works the other way around. It converts the image to a brightness channel plus two color channels, samples the color channels at half resolution because human vision is far sharper for brightness than for hue, splits the result into 8 by 8 blocks, and rounds the high frequency detail in each block toward zero. The rounding is the compression. Detail you rarely notice gets thrown away first, and the file drops from megabytes to kilobytes.
That design is why the same slider position produces wildly different results on different images. Photographs are mostly gradual change, which fits the model. Screenshots are mostly hard edges between flat areas, which is the worst case for it.
Files you should leave as PNG
- Screenshots with text. Every letter is a hard black on white edge, and hard edges produce the ringing artifact JPEG is worst at. The text goes fuzzy while the file often grows larger than the PNG it came from.
- Logos, icons and line art. Few colors and sharp boundaries are exactly what PNG compresses well and JPEG handles badly. Converting usually costs quality and saves nothing.
- Anything that needs a transparent background. There is no way around this. If the image sits on a variable background, keep the PNG or move to WebP.
- Source files you will edit again. JPEG loss compounds on every save. Edit the PNG, export to JPG once at the end.
- Images with a narrow palette. A chart with eight flat colors is tiny as a PNG. JPEG will invent noise inside each flat region and charge you bytes for it.
Photographs, textures, scans, screenshots without small text and any large image already full of natural color variation are where the conversion pays. If a row in the batch reports a saving under thirty percent, look at the image again. Most of the time it belongs on the list above.
Three steps, all inside your browser tab
- Each file is read through FileReader and decoded into an offscreen image. Nothing is posted anywhere. Cut your network connection after the page loads and every feature keeps working.
- A canvas the size of the source is filled with your matte color, then the PNG is drawn on top. Partial alpha blends against the matte during that draw, which is where soft edges get their final color.
- The canvas is handed to the browser JPEG encoder at your chosen quality. The resulting blob is measured, compared against the original byte count, and held in memory until you download it or clear the batch.
Where this converter stops
- Metadata does not survive. A canvas holds pixels and nothing else, so any EXIF, ICC profile, copyright field or color space tag in the source is gone from the output. For photography where the color profile matters, use a desktop encoder.
- No chroma subsampling control. The browser encoder decides, and most choose 4:2:0. Red text on a dark background suffers most under that choice, and there is no switch here to change it.
- No progressive JPEG option. Output is baseline. Progressive files render in passes and are often slightly smaller, but the canvas API exposes no way to ask for one.
- No resizing. Output dimensions match the input exactly. Scale first with the image resizer if you need smaller pixels as well as smaller bytes.
- No ZIP download. Download all fires one save per file, so a large batch may prompt your browser about multiple downloads.
- Memory is the real ceiling. A decoded image occupies width by height by four bytes regardless of file size, so a 12000 by 8000 pixel PNG needs around 384 MB of canvas memory before encoding starts. Mobile browsers will fail on those.
- Animated content is not a case here. APNG files decode to their first frame only.
