MiniPx: Client‑Side Image Compression and PDF Conversion Tool
Use Canvas API to compress images client‑side, implement quality fallbacks, strip EXIF, downgrade pdfjs to v3.11.174, set webpack canvas:false, lazy‑load heavy libs.
Implement Canvas API compression with quality fallbacks, strip EXIF, downgrade pdfjs to v3.11.174, set webpack canvas:false, lazy‑load heavy libs.
Summary
MiniPx is a static Next.js export on Netlify that compresses images entirely in the browser using the Canvas API. The core logic is only about 40 lines and attempts the requested quality first, then falls back through quality levels 0.6, 0.45, 0.3, and 0.2 if the output is larger than the original. If WebP still produces a larger file, the algorithm falls back to JPEG, ensuring a smaller result. The Canvas API automatically strips all EXIF metadata, which the author intentionally keeps as a feature for privacy‑sensitive uploads. PDF‑to‑image conversion uses pdfjs‑dist v3.11.174 because v5 breaks client‑side rendering, and the webpack config disables the Node canvas module with canvas: false. Heavy libraries such as pdfjs, jspdf, and jszip are lazy‑loaded so they do not affect the initial page load, and the entire homepage is a single ~400‑line React component. MiniPx supports multi‑pass compression with format fallback, WebP/JPEG/PNG conversion, preset resizing, EXIF stripping, PDF conversion, and batch ZIP download. The tool demonstrates that for small‑scale user uploads, browser‑side compression can eliminate server costs entirely.
Key changes
- Canvas API compression logic with quality fallback array [0.6,0.45,0.3,0.2]
- Automatic EXIF stripping when exporting from canvas
- pdfjs‑dist downgrade to v3.11.174 due to v5 breaking client‑side rendering
- webpack config set canvas:false to avoid Node canvas import
- Lazy‑loading of pdfjs, jspdf, jszip to keep initial load small
- Multi‑pass compression with format fallback (WebP/JPEG/PNG)
- Batch ZIP download via jszip
- Static Next.js export on Netlify with zero server cost