/community/compress images
innernet
docsskillscommunitycompanydeveloperssecurityprivacytermscontact

a skill by rameerez, brought here by kt

compress images

paste this link into your ai. it will know what to do.

/skills/rameerez-compress-images

Compress images for web/SEO performance using cwebp. Use when optimizing images for faster page loads, reducing file sizes, or converting JPG/PNG to WebP format.

kindskill
last tended2026-09-22
written byrameerez
sourcegithub.com/rameerez/claude-code-startup-skills
kept currentwith its source · last read 2026-11-05
brought here bykt
reuseMIT
yours?it stays under your name. to change it or take it down, write to connect@innernet.live
reading3 min

Image Compression Skill

Compress all images in $ARGUMENTS (or app/assets/images/content/ if no path provided) to WebP format, optimized for SEO performance (target: under 100KB per image).

Process

  1. 1Create originals folder - Create originals/ subfolder inside the target directory and move source files there. Never destroy source files.
  2. 2Compress each image (JPG, PNG, GIF) from originals/ to the parent directory as .webp
  3. 3Iterate until all images are under 100KB - check sizes after each pass, re-compress any that exceed the target
  4. 4Report results with before/after sizes
  5. 5Update references in content files from old extensions to .webp

File Structure

target-directory/
├── originals/           # High-quality source files preserved here
│   ├── hero.jpg
│   └── feature.png
├── hero.webp            # Compressed, web-optimized
└── feature.webp

Iterative Compression Algorithm

IMPORTANT: Keep compressing until ALL images are under 100KB. Check sizes after each pass and re-compress any that exceed the target.

Step 1: Initial pass (q 70)

cwebp -q 70 -resize 1200 0 originals/image.jpg -o image.webp
ls -lh image.webp  # Check size

Step 2: If still over 100KB, reduce quality progressively

# Try these in order until under 100KB:
cwebp -q 60 -resize 1200 0 originals/image.jpg -o image.webp
cwebp -q 50 -resize 1200 0 originals/image.jpg -o image.webp
cwebp -q 45 -resize 1200 0 originals/image.jpg -o image.webp
cwebp -q 40 -resize 1200 0 originals/image.jpg -o image.webp
cwebp -q 35 -resize 1200 0 originals/image.jpg -o image.webp

Step 3: For stubborn images, also reduce dimensions

# If q 35 at 1200px is still over 100KB, reduce to 1000px:
cwebp -q 30 -resize 1000 0 originals/image.jpg -o image.webp
cwebp -q 25 -resize 1000 0 originals/image.jpg -o image.webp

Real-World Results (Reference)

From actual compression run on content images:

ImageOriginalFirst TryFinalSettings Used
waves.jpg198KB33KB33KBq 70, 1200px (1 pass)
calendar.jpg246KB42KB42KBq 70, 1200px (1 pass)
floating.jpg230KB43KB43KBq 70, 1200px (1 pass)
cash.jpg409KB88KB88KBq 70, 1200px (1 pass)
knot.jpg395KB96KB96KBq 70, 1200px (1 pass)
floating-dark.jpg414KB94KB94KBq 70, 1200px (1 pass)
keyboard2.jpg459KB102KB102KBq 70, 1200px (1 pass, acceptable)
perpetual.jpg565KB130KB96KBq 40, 1200px (3 passes)
keyboard.jpg718KB196KB98KBq 25, 1000px (5 passes)

Key Insights

  1. 1Most images (under 500KB source) compress fine with default settings (q 70, 1200px)
  2. 2Large detailed images (500KB+) often need multiple passes
  3. 3Very large images (700KB+) may need both lower quality AND smaller dimensions
  4. 4Keyboard/tech photos with fine detail are hardest to compress - expect 4-5 passes
  5. 5Soft/blurry images compress much better than sharp detailed ones

After Compression

  1. 1Verify ALL files under 100KB: ls -lh *.webp - re-run compression on any exceeding target
  2. 2Update content files referencing old extensions (.jpg, .png) to use .webp
  3. 3Test that images render correctly in the application
  4. 4Original files remain in originals/ folder for future reference or re-compression

keep it where your ai can reach it.

innernet is memory your ai tools read live — every skill, every project, every decision, in one place, connected once. save this skill to yours, or publish one of your own as a link like this.

save it to your innernetsee every skill