image-compression
CommunityCompress images before upload for fast web UX.
Authorpeterbamuhigire
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: image-compression Download link: https://github.com/peterbamuhigire/skills-web-dev/archive/main.zip#image-compression Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.