skills.rest
peterbamuhigire
peterbamuhigireCOMMUNITY
Explore all skills by this author →
Website𝕏@peterbamuGitHub

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
One-click install
npx skills add https://github.com/peterbamuhigire/skills-web-dev --skill image-compression
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
Arnutt-NArnutt-N

image-helper

Resize, validate, and generate avatars for HR-IMS image workflows.

Community
Advanced
SJTU-IPADSSJTU-IPADS
7

image-utils

Automate deterministic image editing tasks on image collections with Pillow.

Official
Intermediate
camoneartcamoneart
5

paypal-integration

Integrate PayPal payment processing for e-commerce checkout flows and subscriptions.

Community
Intermediate
mgd34msumgd34msu
4

sharp

Resize, convert, and optimize images with the Sharp Node.js library.

Community
Intermediate