Developer builds browser-native PNG compressor in vanilla JS, no libraries needed

A developer set out to build a fully client-side image compressor after noticing that most online tools upload sensitive files, such as passport scans, to remote servers. The project revealed that browsers can natively encode only three formats via canvas.toBlob() — PNG, JPEG, and WebP — and silently fall back to PNG when an unsupported format is requested, without throwing any error. Real PNG compression, the developer found, requires manually writing the file byte by byte, including building an optimised colour palette of up to 256 entries to replace full 24-bit colour data. Key implementation pitfalls included forgetting the per-scanline filter byte, which causes images to render diagonally skewed, and correctly packing bit depth to avoid wasting storage on images with few colours. The developer documented four such traps encountered during the build, aiming to save others the time lost debugging each one.