Last updated
PNG to JPG: What Changes
Converting PNG to JPG applies lossy compression to a lossless image. The most important thing to understand: if the PNG has a transparent background, that transparency will be lost — JPG does not support an alpha channel. Transparent pixels are typically replaced with white or black depending on the converter.
Handling Transparency
function pngToJpg(pngFile, quality = 0.92, bgColor = '#ffffff') {
return new Promise((resolve) => {
const img = new Image();
const url = URL.createObjectURL(pngFile);
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
const ctx = canvas.getContext('2d');
// Fill background (handles PNG transparency)
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);
canvas.toBlob(blob => {
URL.revokeObjectURL(url);
resolve(blob);
}, 'image/jpeg', quality);
};
img.src = url;
});
}
JPG Quality Settings
| Quality | Value | Use Case |
|---|---|---|
| Maximum | 0.95–1.0 | Print, archival |
| High | 0.85–0.95 | Web photos, product images |
| Medium | 0.70–0.85 | Thumbnails, previews |
| Low | 0.50–0.70 | Email attachments, low-bandwidth |
Quality 0.85 (85%) is the sweet spot for web images — visually indistinguishable from the original at roughly 1/3 the file size of a lossless PNG.