Progressive JPEG Converter

Workflow & Usage

1. Add images. Drag & drop PNG, JPG/JPEG, or WebP - any mix is fine.
2. Set options.
   • Max width (px): Leave blank to keep original size, or set a cap (e.g., 1600) to resize proportionally.
   • Quality: Use the slider (5–100%) to balance size and clarity.
3. Convert. Click Convert on any card, or Download all as ZIP to process the entire batch.
4. Save. Download single files or one tidy ZIP of progressive JPEGs.

Each card shows the source type and confirms the output as image/jpeg (progressive).

Use Cases

• Faster Above-the-Fold Images
  Convert hero images to progressive JPEG so content appears instantly while sharpening.

• Blog & Editorial
  Make post images feel snappier on slower connections without changing your CMS.

• E-commerce Galleries
  Improve perceived speed for product carousels with progressive rendering.

• Email & Landing Pages
  Keep JPEGs small and pleasant to load when you can’t rely on modern formats.

• Client Handoffs
  Deliver a clean ZIP of progressive JPEGs ready for any CMS or builder.

• Legacy Browser Support
  Use a format that works almost everywhere, with a better loading experience than baseline JPEG.

Tips for Best Results

• Resize first, then encode. Setting a Max width yields the biggest savings before compression.
• Start at 80–85% quality. Nudge down until you notice artifacts, then step back up.
• Prefer 4:2:0 subsampling for photos. It’s already used here for a good size/quality balance.
• Keep PNG for logos/line art. Progressive JPEG shines on photos and gradients; crisp graphics may suit PNG or WebP.
• Measure, don’t guess. Check before/after file sizes and try a few qualities on representative images.

How It Works

This tool uses modern browser graphics - no uploads:

• Inputs are decoded with createImageBitmap for speed.
• Images are drawn to an OffscreenCanvas (with high-quality downscaling), then read as ImageData.
• Encoding is handled in a Web Worker via jSquash JPEG with:
  • progressive: true (multi-scan output)
  • optimizeCoding, trellisQuant, and optimizeScans for smaller files
  • chromaSubsampling: '420' for photo-friendly compression
• A small worker pool parallelizes encoding while keeping the UI responsive.
• If something isn’t supported, it gracefully falls back - still fully local.
• Batch results are zipped with JSZip for one-click download.