image-compression

Compress client-side images with Squoosh, Canvas fallback, and Sharp validation.

23|7|Updated Jan 23, 2026

Search Tags:#performance #canvas #sharp #image-compression #web-upload #squoosh

Ready to run

npx skills add https://github.com/peterbamuhigire/skills-web-dev --skill image-compression

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: image-compression
Source: https://github.com/peterbamuhigire/skills-web-dev/tree/main/image-compression
Command: npx skills add https://github.com/peterbamuhigire/skills-web-dev --skill image-compression

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Web apps that allow image uploads often suffer from large file sizes, slow uploads, and wasted bandwidth. This Skill provides a robust image-optimization workflow that compresses client-side images before upload while validating results on the server to ensure consistent limits are met.

Core Features & Use Cases

Client-first compression: Use Squoosh (WASM) with a Canvas fallback to shrink images while preserving aspect ratio.
Server validation: Always re-checks and enforces max dimensions and size with Sharp on the backend.
Real-world use case: A social app allows users to upload avatars and photos without impacting performance or bandwidth, with predictable image sizes.
Defaults: Max width 1920px, max size 512KB, initial quality 75.
Stats logging: Records compression ratio, saved bytes, and processing time for observability.

Quick Start

Upload an image to see it compress to under 512KB while preserving aspect ratio.

Frequently Asked Questions about image-compression

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I compress images client-side before upload to reduce bandwidth?▼

Compress images client-side before upload using Squoosh (WASM) to shrink files, with a Canvas fallback preserving aspect ratio. This reduces bandwidth and ensures predictable sizes with a transparent UX across browsers.

What's the best way to enforce a maximum image file size like 512KB on web uploads?▼

Enforce a maximum image file size of 512KB by applying client-side compression with Squoosh and validating results on the server with Sharp. This dual-layer approach guarantees consistent limits are met.

Does client-side image compression work if the browser lacks WebAssembly support?▼

Client-side image compression works without WebAssembly support by falling back to a Canvas-based compression method. This ensures images are still resized and optimized before upload across all browsers.

How do I validate compressed image dimensions and file size on the server?▼

Validate compressed image dimensions and file size on the server using Sharp to re-check and enforce maximum limits. This backend validation ensures consistent size constraints after client-side processing.

Can I track compression ratio and saved bytes during web image uploads?▼

Track compression ratio and saved bytes by logging compression stats during the image upload process. The workflow records saved bytes, compression ratio, and processing time for observability.

What are the default limits for image dimensions and quality during web compression?▼

Default limits for image compression are a max width of 1920px, a max size of 512KB, and an initial quality of 75. These defaults ensure predictable image sizes without impacting performance.