PNG to JPG Converter

About PNG to JPG Converter

How PNG to JPG Conversion Works

The tool decodes each PNG into a canvas, fills the canvas with your chosen background colour (because JPEG has no alpha channel), draws the image on top, then calls canvas.toBlob('image/jpeg', quality) to encode the result. JPEG compression uses the standard defined in ISO/IEC 10918-1 (published in 1992 by the Joint Photographic Experts Group). It splits the image into 8x8 blocks, converts each block to frequency coefficients using a Discrete Cosine Transform, then quantises those coefficients - higher quantisation steps discard more high-frequency detail and produce smaller files.

Worked example: A 1920x1080 PNG screenshot of a dashboard weighs 2.1 MB. Converted at quality 85, the JPEG comes out at around 280 KB - an 87% reduction. At quality 60, it drops to roughly 140 KB but you start seeing blockiness around text edges. At quality 95, it climbs back to about 550 KB with no visible compression artefacts.

Why Convert PNG to JPG?

Reason	Explanation
Smaller file size	JPEG lossy compression produces files 5-10x smaller than PNG for photographs
Faster page loads	Smaller images mean faster website loading and better performance scores
Email and upload limits	Many platforms have file size limits that PNGs of photos can exceed
Platform requirements	Some services only accept JPEG uploads
Storage savings	A folder of 1,000 PNG photos might take 5 GB vs 800 MB as JPEG

Handling Transparency

JPEG does not support transparency. When converting a PNG with transparent areas, the tool composites the image onto a background colour of your choice:

PNG Has Transparency?	What Happens	Background Colour Recommendation
No transparency	Direct conversion, no background needed	Does not matter
Transparent background	Transparent areas filled with your chosen colour	White for documents, match your page colour for web use
Semi-transparent overlays	Alpha blended onto the background colour	Check the preview to make sure it looks right

The default background is white, but you can pick any colour using the built-in colour picker. This is useful when placing logos on coloured backgrounds or dark-themed pages.

Quality Slider Guide

Quality	File Size Reduction	Visual Quality	Best For
95-100%	30-50% smaller than PNG	Virtually identical to original	Print, archival, when quality is critical
80-94%	60-80% smaller than PNG	No visible difference at normal viewing	Web images, blog posts, product photos
60-79%	80-90% smaller than PNG	Slight softness in fine details	Thumbnails, social media, email
40-59%	90-95% smaller than PNG	Noticeable artefacts around edges and text	Quick previews, low-bandwidth situations
Below 40%	95%+ smaller than PNG	Heavy artefacts, blocky appearance	Not recommended for most uses

For most web use, 80-85% quality gives the best balance between file size and visual quality.

File Size Expectations

Image Type	Typical PNG Size	JPG at 85% Quality	Savings
Photograph (1920x1080)	3-6 MB	200-400 KB	~90%
Screenshot with text	300-800 KB	100-200 KB	~70%
Simple graphic (few colours)	20-80 KB	30-100 KB	May actually increase - keep as PNG
Illustration (many colours)	500 KB - 2 MB	100-300 KB	~75%

Important: for simple graphics with few colours and sharp edges (logos, icons, diagrams), PNG is often smaller than JPEG. Converting these to JPEG saves nothing and adds artefacts. Only convert to JPEG when dealing with photographs or complex images with many colours.

Batch Conversion

Select multiple PNG files at once or drag them into the drop zone. All images are converted with the same quality setting and background colour, each with its own preview and download link. This is useful for processing folders of screenshots or product photos in one go. If you change the quality slider or background colour after converting, the "Re-convert all with current settings" button re-runs every file through the new settings without re-uploading. There is a 100 MB per-file size cap to keep browser memory use predictable - most PNG files, even high-resolution photos, sit well below that limit.

What Gets Lost in Conversion

Feature	In PNG	In JPEG
Transparency	Full alpha channel (256 levels)	Not supported - replaced with background colour
Lossless quality	Every pixel preserved exactly	Lossy compression - some detail lost
Colour depth	Up to 16-bit per channel	8-bit per channel only
Metadata	Preserved through Canvas	Stripped during Canvas export

PNG vs JPEG: When Each Format Wins

PNG is better for screenshots, UI graphics, logos, diagrams, and anything with sharp edges, text, or flat colour. JPEG wins for photographs and continuous-tone images with gradients. The reason comes down to how each format encodes information.

Property	PNG	JPEG
Compression	Lossless (DEFLATE/zlib)	Lossy (DCT-based per ISO 10918-1)
Transparency	8-bit alpha channel (256 levels)	None
Colour depth	Up to 16-bit per channel (48-bit colour)	8-bit per channel only (24-bit colour)
Typical chroma sampling	Full 4:4:4	4:2:0 below quality 90, 4:4:4 at 90+
Best for photographs	Large files, no gain	Small files, minimal visible loss
Best for text/line art	Crisp edges preserved	Ringing artefacts around edges
Animation	APNG variant	No (use MJPEG video instead)
Released	1996 (W3C/ISO 15948)	1992 (ISO/IEC 10918-1)

JPEG is so efficient for photos because the human visual system is far more sensitive to luminance (brightness) than chrominance (colour). Below quality 90 most JPEG encoders, including the browser's built-in encoder, apply 4:2:0 chroma subsampling, storing colour information at half the horizontal and vertical resolution of brightness. At quality 90 and above, most encoders switch to 4:4:4 (no subsampling), which is why file size jumps noticeably when crossing that threshold.

How the Quality Setting Maps to File Size

Lower quality means coarser quantisation of the DCT coefficients - the encoder throws away more high-frequency detail, so the file is smaller but edges look softer and flat areas develop 8x8 blocking. The relationship is not linear. Going from quality 100 to 90 cuts file size roughly in half with no visible change on a normal monitor. Going from 90 to 80 cuts another 30-40%. Below 70, artefacts become visible on any content with text or sharp edges. Below 50, even smooth photographs start to look bad.

For most web use, 80-85% gives the best size/quality trade-off. If the image is going to be viewed at full resolution (retina-quality product photography, photography portfolios), stay at 90 or above. For thumbnails or social media previews, 70-75 is usually acceptable because the viewer is small.

Browser Canvas Encoding vs Dedicated Encoders

Browser JPEG encoding (what this tool uses) is fast and produces acceptable files, but it is not as efficient as dedicated encoders like MozJPEG or Guetzli. For the same visual quality, MozJPEG typically produces files 5-15% smaller than the default libjpeg encoder most browsers ship with. The trade-off is speed: MozJPEG can be 3-5x slower. For a browser tool that needs to process dozens of images instantly, the native Canvas encoder is the right choice. If you are preparing production assets for a high-traffic site, consider running the output through a build-time tool like Sharp, ImageOptim, or Squoosh for an extra few percent of savings.

Another factor is progressive vs baseline encoding. Baseline JPEGs load top-to-bottom as bytes arrive. Progressive JPEGs load in passes, showing a blurry version first then sharpening. Progressive files are typically 2-8% smaller and feel faster on slow connections. The browser Canvas API always produces baseline JPEGs. If progressive loading matters, a build-time tool is again required.

Common Mistakes When Converting PNG to JPG

• Converting screenshots or logos to JPEG. PNG's lossless compression handles flat colour and sharp edges efficiently. Running a UI screenshot through JPEG adds ringing around text and may increase the file size.
• Re-saving an existing JPEG as a new JPEG at lower quality. Every JPEG save is destructive. Artefacts compound. Keep an archival PNG or high-quality JPEG, and export fresh JPEGs at the target quality from that master.
• Picking the wrong background colour for transparency. If your logo will sit on a dark website, exporting with a white background creates an ugly rectangle. Match the background colour to the page where the image will be used.
• Using quality 100. Quality 100 does not mean lossless - JPEG is always lossy. It just minimises quantisation, producing a huge file for almost no visible benefit over quality 95. If you need lossless, stay with PNG.
• Ignoring the preview. Semi-transparent PNG overlays (drop shadows, glows, anti-aliased text) can composite onto the background colour in surprising ways. Always check the side-by-side preview before downloading.

Need the opposite conversion? Use the JPG to PNG converter. You can also reduce file sizes further with the image compressor, or resize first with the image resizer for extra savings. All processing happens client-side using the Canvas API, so your images never leave your device.

Sources

• ISO/IEC 10918-1:1994 - JPEG Standard
• W3C - Portable Network Graphics (PNG) Specification
• MDN - HTMLCanvasElement.toBlob()
• Joint Photographic Experts Group - JPEG
• MDN - Image file type and format guide
• web.dev - Use Imagemin to compress images