DEV Community: zepubo-code

JPG to PNG: Why Transparency Matters (And How to Convert in the Browser)

zepubo-code — Sun, 08 Mar 2026 21:20:04 +0000

You've got a logo saved as a JPG. You drop it onto a colored background in your design tool — and suddenly there's an ugly white box around it.

That's the JPG transparency problem. And the fix is simple: convert it to PNG.

But there's more to it than just changing the file extension. Let's break down why transparency works the way it does, and how to handle JPG → PNG conversion entirely in the browser.

Why JPG Doesn't Support Transparency

JPG (JPEG) uses lossy compression designed for photographs. Every pixel in a JPG has three values: Red, Green, Blue. That's it — no fourth channel for transparency.

PNG, on the other hand, supports an alpha channel — a fourth value per pixel that controls opacity from 0 (fully transparent) to 255 (fully opaque).

JPG pixel:  R, G, B          (3 channels)
PNG pixel:  R, G, B, A       (4 channels — A = alpha/transparency)

When you open a JPG in an editor and "remove the background," what actually happens is the editor replaces those pixels with transparency — but if you save back to JPG, that transparency is lost and replaced with white (or whatever background color the encoder uses).

The only way to preserve transparency is to save as PNG (or WebP, or GIF for simple cases).

What Gets Lost When Converting JPG → PNG

Here's something most tutorials skip: converting JPG to PNG doesn't recover transparency. It just gives you a format that supports it.

If your JPG has a white background, converting to PNG gives you a PNG with a white background — not a transparent one. To get actual transparency, you need background removal (a separate step).

What the conversion does give you:

A lossless format — no further quality loss on re-save
Support for transparency if you then edit the image
Larger file size (PNG is uncompressed or lossless-compressed)
Better quality for screenshots, UI elements, and text-heavy images

Converting JPG to PNG in JavaScript

Since both formats are supported natively by the browser's Canvas API, conversion is straightforward:

async function jpgToPng(file) {
  return new Promise((resolve, reject) => {
    const img = new Image();

    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;

      const ctx = canvas.getContext('2d');

      // Draw the JPG onto the canvas
      // Note: we do NOT fill a white background here
      // This preserves any semi-transparent edges if present
      ctx.drawImage(img, 0, 0);

      // Export as PNG — lossless, supports alpha
      canvas.toBlob((blob) => {
        if (!blob) return reject(new Error('Canvas toBlob failed'));

        const pngFile = new File(
          [blob],
          file.name.replace(/\.jpe?g$/i, '.png'),
          { type: 'image/png' }
        );
        resolve(pngFile);
      }, 'image/png');
      // No quality parameter for PNG — it's always lossless
    };

    img.onerror = () => reject(new Error('Failed to load image'));
    img.src = URL.createObjectURL(file);
  });
}

Key difference from JPG export: Notice there's no ctx.fillStyle = '#ffffff' before drawing. For JPG export you need to fill white (because JPG can't represent transparency). For PNG, skip the fill — let the canvas default to transparent.

Handling Batch Conversion

async function batchJpgToPng(files) {
  const pngFiles = [];

  for (const file of files) {
    // Only process JPG files
    if (!/\.jpe?g$/i.test(file.name) && file.type !== 'image/jpeg') {
      continue;
    }

    try {
      const png = await jpgToPng(file);
      pngFiles.push(png);
    } catch (err) {
      console.error(`Failed to convert ${file.name}:`, err);
    }
  }

  return pngFiles;
}

// Trigger downloads
function downloadAll(files) {
  files.forEach((file, index) => {
    // Stagger downloads to avoid browser blocking
    setTimeout(() => {
      const url = URL.createObjectURL(file);
      const a = document.createElement('a');
      a.href = url;
      a.download = file.name;
      a.click();
      URL.revokeObjectURL(url);
    }, index * 200);
  });
}

File Size: What to Expect

PNG files are almost always larger than the original JPG. Here's why:

Format	Compression	Typical size
JPG	Lossy (DCT)	Small
PNG	Lossless (DEFLATE)	2–5x larger than JPG
WebP	Lossy or Lossless	Smallest overall

For a 500KB JPG photo, expect a 1.5–3MB PNG. That's normal — PNG is preserving every pixel exactly.

Exception: Screenshots, diagrams, and images with large flat-color areas often compress well in PNG. A 200KB JPG screenshot might be 150KB as PNG because DEFLATE handles repetitive pixels efficiently.

When to Use JPG vs PNG

Is it a photograph?
  → JPG. Smaller file, barely noticeable quality loss.

Does it need transparency?
  → PNG (or WebP).

Is it a screenshot, diagram, or has text?
  → PNG. Sharper edges, no compression artifacts.

Is it a logo or icon?
  → PNG or SVG. Never JPG.

Do you need the smallest possible file for web?
  → WebP with PNG fallback.

The `convert jpg to png transparent background` Problem

This is one of the most Googled image questions — and it's a source of confusion.

Converting JPG to PNG does not remove the background.

If you want a transparent background PNG from a JPG:

Convert JPG → PNG (to get a lossless, alpha-capable format)
Use background removal (AI tools, manual selection, or chroma key)
Save the result as PNG

The conversion step just enables transparency — it doesn't create it.

In code, if you want to make white pixels transparent (a naive but sometimes useful trick for logos on pure white):

function makeWhiteTransparent(canvas, threshold = 240) {
  const ctx = canvas.getContext('2d');
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  for (let i = 0; i < data.length; i += 4) {
    const r = data[i];
    const g = data[i + 1];
    const b = data[i + 2];

    // If pixel is close to white, make it transparent
    if (r > threshold && g > threshold && b > threshold) {
      data[i + 3] = 0; // Set alpha to 0 (transparent)
    }
  }

  ctx.putImageData(imageData, 0, 0);
}

This works well for simple logos on pure white. For photos or complex edges, you'd need a proper segmentation algorithm.

Real-World Tool

If you want to convert JPG to PNG without writing code, I built a free browser-based converter at OneWeeb — handles batch conversion, runs entirely in your browser, and your files never leave your device.

TL;DR

JPG has no alpha channel — transparency is impossible in JPG
Converting to PNG gives you a lossless format that supports transparency
It does not automatically remove backgrounds — that's a separate step
PNG files are larger than JPG — that's expected and normal
For web: use WebP where possible, PNG as fallback for transparency needs
In Canvas API: skip the white fill when exporting PNG (unlike JPG)

Building something with image conversion in the browser? Drop a question in the comments.

JPEG vs JPG: What's the Difference? (And How to Convert Between Them)

zepubo-code — Wed, 04 Mar 2026 22:20:34 +0000

Here's a question I get asked surprisingly often: "What's the difference between JPEG and JPG?"
The answer is going to feel anticlimactic: there is no difference. They are literally the same format.
But that raises an interesting follow-up: why do two identical formats have different names? And more practically: how do you convert between them when software requires one specific extension?
Let's dig in.
Why Do JPEG and JPG Both Exist?
It goes back to the early days of Windows.
When the JPEG format was standardized in 1992 by the Joint Photographic Experts Group (hence "JPEG"), file extensions were supposed to match. But MS-DOS and early Windows had a hard limit of 3 characters for file extensions — the infamous 8.3 filename format.
So Windows truncated .jpeg to .jpg.
Mac and Unix systems didn't have this restriction, so they kept .jpeg.
The result: the same format, two extensions, depending on what OS created the file. Modern Windows supports both, but the legacy lives on in software, scripts, and APIs that were written expecting one specific extension.
JPEGJPGFull nameJoint Photographic Experts GroupJoint Photographic Experts GroupImage qualityIdenticalIdenticalFile sizeIdenticalIdenticalCompressionLossyLossyTransparencyNoNoOriginMac/Unix/modernWindows legacy
Are They Really 100% Identical?
Yes. Open a .jpeg file in a hex editor and compare it to the same image saved as .jpg — the binary content is identical. The extension is purely a label.
You can verify this yourself:
bash# Rename a .jpeg to .jpg — no conversion needed
mv photo.jpeg photo.jpg

Or on Windows

ren photo.jpeg photo.jpg
That's it. No re-encoding, no quality loss, no file size change.
So Why Would You Need to "Convert" JPEG to JPG?
Good question. A few real-world scenarios:

APIs and scripts that check extensions Some upload systems, form validators, or image processing scripts do a naive extension check: javascript// Bad validation — rejects .jpeg even though it's valid if (!file.name.endsWith('.jpg')) { throw new Error('Only JPG files are accepted'); } You'd encounter this in older codebases, some CMS platforms, and certain cloud storage APIs.
Batch processing pipelines If you're feeding files into a pipeline that expects .jpg, having .jpeg files breaks the glob pattern: bash# This won't match .jpeg files for f in *.jpg; do process "$f"; done
Some platforms and e-commerce systems Certain product image uploaders, real estate listing systems, and marketplace platforms still only accept .jpg explicitly.
Personal organization
Some people just prefer consistent naming across their library.
How to Convert JPEG to JPG in JavaScript (Browser-Side)
Since the files are identical, "conversion" is really just re-exporting with a different extension. Here's the most reliable browser-based approach:
javascriptasync function convertJpegToJpg(file) {
return new Promise((resolve) => {
// Read the file
const img = new Image();

img.onload = () => {
// Draw to canvas
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;

const ctx = canvas.getContext('2d');

// Fill white background (important for JPEG export)
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);

// Export as JPEG with .jpg extension
canvas.toBlob((blob) => {
// Create a new File object with .jpg extension
const jpgFile = new File(
[blob],
file.name.replace(/.jpe?g$/i, '.jpg'),
{ type: 'image/jpeg' }
);
resolve(jpgFile);
}, 'image/jpeg', 0.95); // 0.95 quality preserves detail
};

img.src = URL.createObjectURL(file);
});
}

// Trigger download
function downloadFile(file) {
const url = URL.createObjectURL(file);
const link = document.createElement('a');
link.href = url;
link.download = file.name;
link.click();
URL.revokeObjectURL(url);
}

// Usage
document.getElementById('fileInput').addEventListener('change', async (e) => {
for (const file of e.target.files) {
const converted = await convertJpegToJpg(file);
downloadFile(converted);
}
});
Why use Canvas instead of just renaming?
For a simple rename, you don't need Canvas — just change the filename. But Canvas-based conversion is useful when you also want to:

Normalize image dimensions
Strip EXIF metadata (Canvas export removes it by default)
Apply quality settings
Ensure consistent output across different source formats

The Simple Version — Just Rename
If all you need is the extension change with zero quality loss:
javascriptfunction renameJpegToJpg(file) {
const newName = file.name.replace(/.jpe?g$/i, '.jpg');

// Create new File with same content, new name
return new File([file], newName, { type: 'image/jpeg' });
}
This creates a new File object with the .jpg extension but the exact same binary content. No re-encoding, zero quality loss.
Handling Both Extensions in Your Own Code
If you're writing code that accepts image uploads, here's how to handle both correctly:
javascript// ✅ Accept both .jpg and .jpeg
function isJpeg(file) {
return /.jpe?g$/i.test(file.name) || file.type === 'image/jpeg';
}

// ✅ Normalize to .jpg on upload
function normalizeJpgExtension(file) {
if (/.jpeg$/i.test(file.name)) {
return new File([file], file.name.replace(/.jpeg$/i, '.jpg'), {
type: file.type
});
}
return file;
}

// ✅ Validate by MIME type, not extension
function validateImage(file) {
const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
if (!allowedTypes.includes(file.type)) {
throw new Error(Unsupported type: ${file.type});
}
}
Key principle: Always validate by file.type (MIME type), never by extension alone. Extensions can be renamed to anything — MIME type is determined by the actual file content.
JPEG vs PNG vs WebP — When to Use Which
While we're on the topic of image formats:
FormatBest ForTransparencyFile SizeJPEG/JPGPhotos, complex images❌ NoSmallPNGScreenshots, logos, UI✅ YesMedium-LargeWebPEverything (modern browsers)✅ YesSmallestSVGLogos, icons, illustrations✅ YesTiny (for vectors)
Rule of thumb:

Photo? → JPEG
Need transparency? → PNG
Want best compression? → WebP
Logo/icon that needs to scale? → SVG

Batch Conversion — JPEG to JPG for Multiple Files
javascriptasync function batchConvertToJpg(files) {
const results = [];

for (const file of files) {
if (/.jpe?g$/i.test(file.name)) {
const converted = renameJpegToJpg(file);
results.push(converted);
}
}

return results;
}

// With JSZip — download all as a ZIP
async function downloadAsZip(files) {
const JSZip = window.JSZip;
const zip = new JSZip();

for (const file of files) {
const buffer = await file.arrayBuffer();
zip.file(file.name, buffer);
}

const blob = await zip.generateAsync({ type: 'blob' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'converted-images.zip';
link.click();
}
Real-World Tool
If you want to do this without writing code, I built a free browser-based JPEG to JPG converter at OneWeeb — handles batch conversion, ZIP download, and your files never leave your device.

TL;DR

JPEG and JPG are identical formats — different extensions, same file
The split happened because Windows limited extensions to 3 characters in the DOS era
"Converting" is really just renaming or re-exporting
Always validate images by MIME type, not extension
If writing upload handlers, accept both .jpg and .jpeg

Got a question about image formats or browser-based file processing? Drop it in the comments.

JPG to SVG: How Vectorization Works in the Browser (No Server Required)

zepubo-code — Fri, 27 Feb 2026 23:35:18 +0000

When designers ask "can I convert this JPG to SVG?", they usually mean one of two things:

Embed the JPG inside an SVG wrapper (fast, lossless, but not truly vector)
Trace the JPG into actual vector paths (slow, lossy, but infinitely scalable)

Both are valid. They serve completely different use cases. In this post I'll show you how to implement both entirely in the browser — no server, no Illustrator, no backend.

Why SVG?

SVG (Scalable Vector Graphics) is resolution-independent. A 100-byte SVG can render crisply on a 4K billboard or a smartwatch — because it's math, not pixels.

JPG is the opposite: a fixed grid of pixels. Zoom in enough and it falls apart.

Use cases where you need SVG from a JPG:

Logos that need to scale to any size
Icons for UI frameworks
Print designs (banners, merchandise)
Laser cutting / CNC files
CSS/HTML animations on vector shapes

Method 1: Embed JPG Inside SVG (Simple)

This wraps your JPG in an SVG container. It's not "true" vectorization — the image is still raster underneath — but it gives you an .svg file that works in vector workflows and scales without pixelation at the container level.

async function jpgToSvgEmbed(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.onload = (e) => {
      const base64 = e.target.result; // data:image/jpeg;base64,...

      // Get image dimensions
      const img = new Image();
      img.onload = () => {
        const svg = `<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="${img.width}"
     height="${img.height}"
     viewBox="0 0 ${img.width} ${img.height}">
  <image href="${base64}"
         width="${img.width}"
         height="${img.height}"
         x="0"
         y="0"/>
</svg>`;

        const blob = new Blob([svg], { type: 'image/svg+xml' });
        resolve(blob);
      };

      img.src = base64;
    };

    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

When to use this: Quick conversion, logos on white backgrounds, situations where you just need an .svg file extension and basic scalability.

Limitation: Not editable in Illustrator/Figma as vector paths. Still a raster image inside an SVG wrapper.

Method 2: True Vectorization via Canvas Tracing

This is where it gets interesting. Real vectorization converts pixel regions into mathematical path descriptions. The classic algorithm for this is potrace — originally a C library, now ported to JavaScript.

The Algorithm (Simplified)

1. Convert image to grayscale
2. Apply threshold → binary (black/white) image  
3. Trace boundaries between black/white regions
4. Approximate boundaries as Bezier curves
5. Output as SVG <path> elements

Implementation with Potrace.js

// Load from CDN
// <script src="https://cdn.jsdelivr.net/npm/potrace@2.1.8/potrace.js"></script>

async function jpgToSvgTrace(file, options = {}) {
  const {
    threshold = 128,    // 0-255, cutoff between black/white
    turdSize = 2,       // ignore features smaller than this (noise reduction)
    alphaMax = 1,       // corner threshold (0=all corners, 1.33=all curves)
    optCurve = true,    // optimize curves
    optTolerance = 0.2  // curve optimization tolerance
  } = options;

  // Step 1: Load image onto canvas
  const canvas = await loadImageToCanvas(file);
  const ctx = canvas.getContext('2d');
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

  // Step 2: Convert to grayscale + threshold
  const binaryData = toBinary(imageData, threshold);

  // Step 3: Run potrace
  return new Promise((resolve, reject) => {
    Potrace.loadImageData(binaryData, canvas.width, canvas.height);
    Potrace.process({
      turnpolicy: Potrace.TURNPOLICY_MINORITY,
      turdsize: turdSize,
      alphamax: alphaMax,
      opticurve: optCurve,
      opttolerance: optTolerance,
    });

    const svg = Potrace.getSVG(1); // scale factor
    const blob = new Blob([svg], { type: 'image/svg+xml' });
    resolve(blob);
  });
}

function loadImageToCanvas(file) {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      canvas.getContext('2d').drawImage(img, 0, 0);
      resolve(canvas);
    };
    img.src = URL.createObjectURL(file);
  });
}

function toBinary(imageData, threshold) {
  const data = imageData.data;
  const binary = new Uint8ClampedArray(imageData.width * imageData.height);

  for (let i = 0; i < binary.length; i++) {
    const r = data[i * 4];
    const g = data[i * 4 + 1];
    const b = data[i * 4 + 2];
    // Luminance formula
    const gray = 0.299 * r + 0.587 * g + 0.114 * b;
    binary[i] = gray < threshold ? 1 : 0; // 1 = black, 0 = white
  }

  return binary;
}

The Threshold Parameter — Most Important Setting

The threshold value is what determines the output quality most dramatically. It decides which pixels become "black" (traced as vector) and which become "white" (background).

// Low threshold (50) — only very dark pixels become vector
// Result: sparse, loses detail
const svgLight = await jpgToSvgTrace(file, { threshold: 50 });

// Medium threshold (128) — balanced (usually best for logos)
const svgMedium = await jpgToSvgTrace(file, { threshold: 128 });

// High threshold (200) — most pixels become vector
// Result: dense, filled-in, can look solid black
const svgDark = await jpgToSvgTrace(file, { threshold: 200 });

Pro tip: For logos on white backgrounds, start at threshold 128. For photos, you usually want lower (80-100) to pick up only the dominant subject.

Putting It All Together — With a Live Preview

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JPG to SVG Converter</title>
</head>
<body>
  <h1>JPG to SVG Converter</h1>

  <input type="file" id="fileInput" accept=".jpg,.jpeg" />

  <div>
    <label>Mode:</label>
    <select id="mode">
      <option value="embed">Embed (fast, any image)</option>
      <option value="trace">Trace (true vector, best for logos)</option>
    </select>
  </div>

  <div id="traceOptions" style="display:none">
    <label>Threshold: <span id="thresholdVal">128</span></label>
    <input type="range" id="threshold" min="1" max="254" value="128">
  </div>

  <button id="convertBtn" disabled>Convert to SVG</button>
  <div id="preview"></div>

  <script src="https://cdn.jsdelivr.net/npm/potrace@2.1.8/potrace.js"></script>
  <script>
    const modeSelect = document.getElementById('mode');
    const traceOptions = document.getElementById('traceOptions');
    const thresholdInput = document.getElementById('threshold');
    const thresholdVal = document.getElementById('thresholdVal');
    const convertBtn = document.getElementById('convertBtn');
    const preview = document.getElementById('preview');
    let currentFile = null;

    modeSelect.addEventListener('change', () => {
      traceOptions.style.display = modeSelect.value === 'trace' ? 'block' : 'none';
    });

    thresholdInput.addEventListener('input', () => {
      thresholdVal.textContent = thresholdInput.value;
    });

    document.getElementById('fileInput').addEventListener('change', (e) => {
      currentFile = e.target.files[0];
      convertBtn.disabled = !currentFile;
    });

    convertBtn.addEventListener('click', async () => {
      if (!currentFile) return;
      convertBtn.textContent = 'Converting...';
      convertBtn.disabled = true;

      try {
        let blob;
        if (modeSelect.value === 'embed') {
          blob = await jpgToSvgEmbed(currentFile);
        } else {
          blob = await jpgToSvgTrace(currentFile, {
            threshold: parseInt(thresholdInput.value)
          });
        }

        // Preview
        const url = URL.createObjectURL(blob);
        preview.innerHTML = `<img src="${url}" style="max-width:400px">`;

        // Download
        const link = document.createElement('a');
        link.href = url;
        link.download = currentFile.name.replace(/\.[^.]+$/, '.svg');
        link.click();

      } catch (err) {
        console.error(err);
        preview.textContent = 'Error: ' + err.message;
      }

      convertBtn.textContent = 'Convert to SVG';
      convertBtn.disabled = false;
    });

    // (jpgToSvgEmbed and jpgToSvgTrace functions from above go here)
  </script>
</body>
</html>

Performance & Browser Limits

Canvas size limits apply here too. Safari caps canvas at ~16,384px on one axis. For large images, scale down before tracing:

function scaleCanvas(canvas, maxSize = 2000) {
  if (canvas.width <= maxSize && canvas.height <= maxSize) return canvas;

  const scale = maxSize / Math.max(canvas.width, canvas.height);
  const scaled = document.createElement('canvas');
  scaled.width = Math.round(canvas.width * scale);
  scaled.height = Math.round(canvas.height * scale);
  scaled.getContext('2d').drawImage(canvas, 0, 0, scaled.width, scaled.height);
  return scaled;
}

Processing time scales with image complexity and resolution. A 500x500 logo traces in ~200ms. A 2000x2000 photo can take 3-5 seconds. Consider using a Web Worker for large files to avoid blocking the UI:

// worker.js
self.onmessage = async (e) => {
  const { binaryData, width, height, options } = e.data;
  // Run potrace here
  self.postMessage({ svg: result });
};

When Client-Side Vectorization Falls Short

Browser-based tracing works well for:

Logos and icons on clean backgrounds
Line art and illustrations
QR codes and barcodes
Simple shapes

It struggles with:

Complex photographs (too many color regions)
Very detailed illustrations
Images with gradients

For these, server-side tools like Inkscape's autotrace or Adobe's vectorization engine produce much better results — but at the cost of privacy and server infrastructure.

Real-World Tool

If you want to try this without building it yourself, I built a free browser-based JPG to SVG converter at OneWeeb. Both embed and trace modes, threshold slider, live preview, and your files never leave your device.

Wrapping Up

Client-side vectorization is genuinely useful for a large class of images — especially logos, icons, and simple graphics. The key is understanding that you're doing threshold-based tracing, not magic AI upscaling.

The threshold parameter is everything. Spend 30 seconds tuning it and you'll get dramatically better results than the default.

For complex photos, accept the limitations and either use a server-side tool or embrace the "artistic" look that heavy vectorization produces.

Building anything interesting with SVG or the Canvas API? Drop it in the comments — always curious what people are making.

How to Build a Client-Side PDF to JPG Converter (No Server Required)

zepubo-code — Fri, 27 Feb 2026 23:16:32 +0000

Most online PDF converters work the same way: you upload your file, their server processes it, and you download the result. Simple — but it means your document passes through someone else's infrastructure. For sensitive files like contracts, invoices, or ID scans, that's a real concern.

In this post, I'll show you how to build a PDF to JPG converter that runs entirely in the browser using PDF.js. No server, no uploads, no backend — just JavaScript.

Why Client-Side?

When you process files in the browser:

The file never leaves the user's device
No storage costs or server infrastructure needed
Works offline once the page loads
Faster for the user (no upload/download round trip)

The tradeoff is that client-side processing is limited by the user's device CPU and RAM. For most use cases — converting a few PDF pages to images — this is completely fine.

What We'll Use

PDF.js — Mozilla's open-source PDF rendering library
Canvas API — built into every modern browser
File API — for reading the user's local file

No npm, no build tools. Just vanilla JS.

The Core Concept

PDF.js renders PDF pages onto an HTML <canvas> element. Once a page is on a canvas, you can export it as a JPG using canvas.toDataURL('image/jpeg'). That's it — the whole trick.

PDF File → PDF.js renders to Canvas → Canvas exports as JPG → User downloads

Step 1: Load PDF.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>
  pdfjsLib.GlobalWorkerOptions.workerSrc =
    'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
</script>

Step 2: Read the PDF File

const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file || file.type !== 'application/pdf') return;

  const arrayBuffer = await file.arrayBuffer();
  const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;

  console.log(`PDF loaded: ${pdf.numPages} pages`);
  convertAllPages(pdf);
});

Step 3: Render Each Page to Canvas

async function convertAllPages(pdf) {
  for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
    const page = await pdf.getPage(pageNum);
    const jpgDataUrl = await renderPageToJPG(page, 2.0); // scale = quality
    downloadImage(jpgDataUrl, `page-${pageNum}.jpg`);
  }
}

async function renderPageToJPG(page, scale = 1.5) {
  const viewport = page.getViewport({ scale });

  const canvas = document.createElement('canvas');
  canvas.width = viewport.width;
  canvas.height = viewport.height;

  const ctx = canvas.getContext('2d');

  await page.render({
    canvasContext: ctx,
    viewport: viewport
  }).promise;

  // White background (JPG doesn't support transparency)
  const finalCanvas = document.createElement('canvas');
  finalCanvas.width = canvas.width;
  finalCanvas.height = canvas.height;
  const finalCtx = finalCanvas.getContext('2d');
  finalCtx.fillStyle = '#ffffff';
  finalCtx.fillRect(0, 0, finalCanvas.width, finalCanvas.height);
  finalCtx.drawImage(canvas, 0, 0);

  return finalCanvas.toDataURL('image/jpeg', 0.92); // 0.92 = quality
}

Note the white background step. Canvas is transparent by default. If you export directly to JPG without filling the background first, transparent areas become black. Always fill white before exporting as JPG.

Step 4: Trigger the Download

function downloadImage(dataUrl, filename) {
  const link = document.createElement('a');
  link.href = dataUrl;
  link.download = filename;
  link.click();
}

Putting It All Together

Here's the minimal full implementation:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PDF to JPG Converter</title>
</head>
<body>
  <h1>PDF to JPG Converter</h1>
  <input type="file" id="fileInput" accept=".pdf" />
  <p id="status"></p>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
  <script>
    pdfjsLib.GlobalWorkerOptions.workerSrc =
      'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

    document.getElementById('fileInput').addEventListener('change', async (e) => {
      const file = e.target.files[0];
      if (!file) return;

      const status = document.getElementById('status');
      status.textContent = 'Loading PDF...';

      const arrayBuffer = await file.arrayBuffer();
      const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;

      status.textContent = `Converting ${pdf.numPages} page(s)...`;

      for (let i = 1; i <= pdf.numPages; i++) {
        const page = await pdf.getPage(i);
        const viewport = page.getViewport({ scale: 2.0 });

        const canvas = document.createElement('canvas');
        canvas.width = viewport.width;
        canvas.height = viewport.height;
        await page.render({ canvasContext: canvas.getContext('2d'), viewport }).promise;

        // Add white background
        const out = document.createElement('canvas');
        out.width = canvas.width;
        out.height = canvas.height;
        const ctx = out.getContext('2d');
        ctx.fillStyle = '#fff';
        ctx.fillRect(0, 0, out.width, out.height);
        ctx.drawImage(canvas, 0, 0);

        const link = document.createElement('a');
        link.href = out.toDataURL('image/jpeg', 0.92);
        link.download = `page-${i}.jpg`;
        link.click();
      }

      status.textContent = 'Done!';
    });
  </script>
</body>
</html>

Quality vs File Size

The scale parameter controls output resolution:

Scale	Output Quality	Use Case
1.0	Screen quality	Quick preview
1.5	Good quality	Web use
2.0	High quality	Print/archive
3.0	Very high	Large format print

The second argument to toDataURL('image/jpeg', quality) controls JPEG compression, from 0.0 (lowest) to 1.0 (highest). 0.92 is a good balance.

Limitations to Be Aware Of

Large PDFs: Converting a 100-page PDF will trigger 100 downloads. You'd want to zip them first using something like JSZip.

Password-protected PDFs: PDF.js supports these — pass the password in getDocument({ data, password }).

Complex PDFs: Some PDFs with unusual fonts or vector graphics may not render perfectly. PDF.js handles the vast majority correctly but it's not 100% identical to Acrobat.

Memory: Very large pages at high scale can consume significant RAM. Consider adding a max scale cap for large documents.

Real-World Implementation

If you want to see this in action without building it yourself, I built a free browser-based PDF to JPG converter at OneWeeb that handles all the edge cases above — multiple page download as ZIP, quality selection, and mobile support. Your files never leave your device.

Wrapping Up

Client-side file conversion is underused. Most developers reach for a backend or a third-party API because that's the familiar pattern — but for many conversion tasks, the browser has everything you need.

PDF.js is mature, well-maintained by Mozilla, and handles the hard parts of PDF parsing. The Canvas API handles rendering. You just need to wire them together.

Give it a try — your users will appreciate not having their files uploaded to a random server.

Have you built any other client-side file processing tools? I'd love to hear what you've made in the comments.

I Built a File Converter That Never Uploads Your Files — Here's How

zepubo-code — Mon, 23 Feb 2026 22:01:47 +0000

Most online file converters have a dirty secret: they upload your files to their servers, process them, and send them back. Even the ones that promise "files are deleted after 1 hour" — you're still trusting a third party with your passport photos, medical records, and personal documents.

I wanted to fix this. So I built OneWeeb — a file converter that runs 100% in your browser. Your files never leave your device. Ever.

Here's how it works under the hood.

The Problem With Server-Side Converters

When you use a typical online converter:

Your Device → Upload → Their Server → Process → Download → Your Device

Your file travels across the internet twice. It sits on someone else's server. You have no control over what happens to it.

With client-side processing:

Your Device → Process → Your Device

That's it. No network requests. No server. No trust required.

The Tech Stack

Everything runs on vanilla JavaScript and browser APIs. No frameworks, no build tools. Here's what powers each conversion type:

Image Conversion (JPG ↔ PNG ↔ WebP)

The Canvas API is the backbone of all image conversions:

function convertImage(file, outputFormat, quality = 0.92) {
  return new Promise((resolve) => {
    const img = new Image();
    const canvas = document.createElement('canvas');

    img.onload = () => {
      canvas.width = img.width;
      canvas.height = img.height;

      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);

      canvas.toBlob(
        (blob) => resolve(blob),
        `image/${outputFormat}`,
        quality
      );
    };

    img.src = URL.createObjectURL(file);
  });
}

The magic is canvas.toBlob(). It takes whatever is drawn on the canvas and exports it in any format the browser supports: JPEG, PNG, WebP, even AVIF in newer browsers.

Key insight: The browser already has built-in encoders/decoders for all major image formats. We're just leveraging what's already there.

Image Compression

Compression is just conversion with a lower quality parameter:

async function compressToTargetSize(file, targetKB) {
  let quality = 0.9;
  let blob = await convertImage(file, 'jpeg', quality);

  // Binary search for optimal quality
  let min = 0.1, max = 0.95;

  while (max - min > 0.02) {
    quality = (min + max) / 2;
    blob = await convertImage(file, 'jpeg', quality);

    if (blob.size / 1024 > targetKB) {
      max = quality;
    } else {
      min = quality;
    }
  }

  return blob;
}

This is how the "Compress to 50KB" and "Compress to 100KB" tools work. Binary search finds the optimal quality level to hit the target file size. Usually converges in 6-8 iterations.

JPG to PDF

For PDF generation, I use jsPDF loaded from CDN:

async function imagesToPDF(files, pageSize = 'a4') {
  const { jsPDF } = window.jspdf;
  const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: pageSize });

  for (let i = 0; i < files.length; i++) {
    if (i > 0) pdf.addPage();

    const imgData = await readFileAsDataURL(files[i]);
    const dims = await getImageDimensions(imgData);

    const pageWidth = pdf.internal.pageSize.getWidth();
    const pageHeight = pdf.internal.pageSize.getHeight();
    const margin = 10; // mm

    // Scale image to fit page while maintaining aspect ratio
    const { width, height } = fitToPage(
      dims.width, dims.height,
      pageWidth - margin * 2, pageHeight - margin * 2
    );

    // Center on page
    const x = margin + (pageWidth - margin * 2 - width) / 2;
    const y = margin + (pageHeight - margin * 2 - height) / 2;

    pdf.addImage(imgData, 'JPEG', x, y, width, height);
  }

  return pdf.output('blob');
}

The entire PDF is generated in memory and offered as a download via URL.createObjectURL(). No server involved.

PDF to JPG

This one uses PDF.js (Mozilla's PDF rendering library):

async function pdfToImages(file, scale = 2, quality = 0.9) {
  const arrayBuffer = await file.arrayBuffer();
  const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
  const images = [];

  for (let i = 1; i <= pdf.numPages; i++) {
    const page = await pdf.getPage(i);
    const viewport = page.getViewport({ scale });

    const canvas = document.createElement('canvas');
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    const ctx = canvas.getContext('2d');
    ctx.fillStyle = '#FFFFFF';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    await page.render({ canvasContext: ctx, viewport }).promise;

    const blob = await new Promise(
      resolve => canvas.toBlob(resolve, 'image/jpeg', quality)
    );
    images.push(blob);
  }

  return images;
}

PDF.js renders each page onto a canvas, then we export the canvas as JPEG. The scale parameter controls resolution — 2x is great for most uses, 3x for print quality.

💡 Deep dive: I wrote a full step-by-step tutorial on this specifically — How to Build a Client-Side PDF to JPG Converter (No Server Required) — covers canvas size limits, white background fix, quality vs scale tradeoffs, and password-protected PDFs.

Audio Extraction (MP4 → WAV/MP3)

This uses the Web Audio API:

async function extractAudio(videoFile) {
  const audioContext = new AudioContext();
  const arrayBuffer = await videoFile.arrayBuffer();
  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

  // Convert to WAV
  const wavBlob = audioBufferToWav(audioBuffer);
  return wavBlob;
}

function audioBufferToWav(buffer) {
  const numChannels = buffer.numberOfChannels;
  const sampleRate = buffer.sampleRate;
  const format = 1; // PCM
  const bitDepth = 16;

  // Interleave channels
  const length = buffer.length * numChannels * (bitDepth / 8);
  const wavBuffer = new ArrayBuffer(44 + length);
  const view = new DataView(wavBuffer);

  // Write WAV header
  writeString(view, 0, 'RIFF');
  view.setUint32(4, 36 + length, true);
  writeString(view, 8, 'WAVE');
  writeString(view, 12, 'fmt ');
  view.setUint32(16, 16, true);
  view.setUint16(20, format, true);
  view.setUint16(22, numChannels, true);
  view.setUint32(24, sampleRate, true);
  view.setUint32(28, sampleRate * numChannels * (bitDepth / 8), true);
  view.setUint16(32, numChannels * (bitDepth / 8), true);
  view.setUint16(34, bitDepth, true);
  writeString(view, 36, 'data');
  view.setUint32(40, length, true);

  // Write audio data
  // ... (interleave channels and write samples)

  return new Blob([wavBuffer], { type: 'audio/wav' });
}

The browser decodes the video's audio track, and we manually construct a WAV file by writing the binary header + PCM data. Pure JavaScript, no FFmpeg, no server.

The "Offline Test" — Proving It's Really Client-Side

Here's my favorite party trick: disconnect from the internet after the page loads, and everything still works.

Try it yourself:

Go to oneweeb.com
Wait for the page to fully load
Turn off WiFi / enable airplane mode
Convert a file

It works. Because there's nothing to "phone home" to.

You can also verify this by opening DevTools → Network tab and watching during conversion. Zero network requests.

Performance Considerations

Client-side processing has trade-offs:

Advantages:

Instant conversion (no upload/download wait)
Works offline
No server costs
Unlimited conversions
True privacy

Limitations:

Large files consume browser memory
No access to server-side libraries (FFmpeg, ImageMagick)
Processing speed depends on user's device
Some conversions aren't possible client-side (e.g., DOC to PDF)

For the conversions that ARE possible client-side (images, basic PDF, audio extraction), the user experience is dramatically better. No progress bars waiting for uploads. No "your file will be ready in 30 seconds." Just instant results.

What I Learned

Browsers are incredibly powerful. Canvas API, Web Audio API, FileReader, Blob, ArrayBuffer — these APIs can handle most common file conversions without any server.
CDN libraries fill the gaps. jsPDF for PDF creation, PDF.js for PDF reading, JSZip for ZIP files. All run client-side.
Privacy is a feature, not a constraint. When I tell people "your files never leave your device," their reaction is always: "Wait, that's possible?" It's a genuine differentiator.
SEO matters more than I expected. Building the tool is 30% of the work. Getting people to find it is the other 70%.

Try It Out

🔗 OneWeeb.com — Free, private, browser-based file converter

Tools include:

Image conversion (JPG, PNG, WebP, SVG, GIF)
Image compression (to specific KB targets)
JPG to PDF / PDF to JPG
Audio extraction from video
Temporary email service

Everything is free, no signup required, no daily limits.

If you have questions about the implementation or want to discuss client-side file processing, drop a comment below!

Have you built anything using browser APIs that surprised you with what's possible? I'd love to hear about it.

DEV Community: zepubo-code

JPG to PNG: Why Transparency Matters (And How to Convert in the Browser)

Why JPG Doesn't Support Transparency

What Gets Lost When Converting JPG → PNG

Converting JPG to PNG in JavaScript

Handling Batch Conversion

File Size: What to Expect

When to Use JPG vs PNG

The convert jpg to png transparent background Problem

Real-World Tool

TL;DR

JPEG vs JPG: What's the Difference? (And How to Convert Between Them)

Or on Windows

JPG to SVG: How Vectorization Works in the Browser (No Server Required)

Why SVG?

Method 1: Embed JPG Inside SVG (Simple)

Method 2: True Vectorization via Canvas Tracing

The Algorithm (Simplified)

Implementation with Potrace.js

The Threshold Parameter — Most Important Setting

Putting It All Together — With a Live Preview

Performance & Browser Limits

When Client-Side Vectorization Falls Short

Real-World Tool

Wrapping Up

How to Build a Client-Side PDF to JPG Converter (No Server Required)

Why Client-Side?

What We'll Use

The Core Concept

Step 1: Load PDF.js

Step 2: Read the PDF File

Step 3: Render Each Page to Canvas

Step 4: Trigger the Download

Putting It All Together

Quality vs File Size

Limitations to Be Aware Of

Real-World Implementation

Wrapping Up

I Built a File Converter That Never Uploads Your Files — Here's How

The Problem With Server-Side Converters

The Tech Stack

Image Conversion (JPG ↔ PNG ↔ WebP)

Image Compression

JPG to PDF

PDF to JPG

Audio Extraction (MP4 → WAV/MP3)

The "Offline Test" — Proving It's Really Client-Side

Performance Considerations

What I Learned

Try It Out

The `convert jpg to png transparent background` Problem