{"id":"5811edf7-023c-4ca0-b81b-2517c4c5ba29","shortId":"KjzrFG","kind":"skill","title":"compress-images","tagline":"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.","description":"# Image Compression Skill\n\nCompress 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).\n\n## Process\n\n1. **Create originals folder** - Create `originals/` subfolder inside the target directory and move source files there. Never destroy source files.\n2. **Compress each image** (JPG, PNG, GIF) from `originals/` to the parent directory as `.webp`\n3. **Iterate until all images are under 100KB** - check sizes after each pass, re-compress any that exceed the target\n4. **Report results** with before/after sizes\n5. **Update references** in content files from old extensions to `.webp`\n\n## File Structure\n\n```\ntarget-directory/\n├── originals/           # High-quality source files preserved here\n│   ├── hero.jpg\n│   └── feature.png\n├── hero.webp            # Compressed, web-optimized\n└── feature.webp\n```\n\n## Iterative Compression Algorithm\n\n**IMPORTANT:** Keep compressing until ALL images are under 100KB. Check sizes after each pass and re-compress any that exceed the target.\n\n### Step 1: Initial pass (q 70)\n```bash\ncwebp -q 70 -resize 1200 0 originals/image.jpg -o image.webp\nls -lh image.webp  # Check size\n```\n\n### Step 2: If still over 100KB, reduce quality progressively\n```bash\n# Try these in order until under 100KB:\ncwebp -q 60 -resize 1200 0 originals/image.jpg -o image.webp\ncwebp -q 50 -resize 1200 0 originals/image.jpg -o image.webp\ncwebp -q 45 -resize 1200 0 originals/image.jpg -o image.webp\ncwebp -q 40 -resize 1200 0 originals/image.jpg -o image.webp\ncwebp -q 35 -resize 1200 0 originals/image.jpg -o image.webp\n```\n\n### Step 3: For stubborn images, also reduce dimensions\n```bash\n# If q 35 at 1200px is still over 100KB, reduce to 1000px:\ncwebp -q 30 -resize 1000 0 originals/image.jpg -o image.webp\ncwebp -q 25 -resize 1000 0 originals/image.jpg -o image.webp\n```\n\n## Real-World Results (Reference)\n\nFrom actual compression run on content images:\n\n| Image | Original | First Try | Final | Settings Used |\n|-------|----------|-----------|-------|---------------|\n| waves.jpg | 198KB | 33KB | 33KB | q 70, 1200px (1 pass) |\n| calendar.jpg | 246KB | 42KB | 42KB | q 70, 1200px (1 pass) |\n| floating.jpg | 230KB | 43KB | 43KB | q 70, 1200px (1 pass) |\n| cash.jpg | 409KB | 88KB | 88KB | q 70, 1200px (1 pass) |\n| knot.jpg | 395KB | 96KB | 96KB | q 70, 1200px (1 pass) |\n| floating-dark.jpg | 414KB | 94KB | 94KB | q 70, 1200px (1 pass) |\n| keyboard2.jpg | 459KB | 102KB | 102KB | q 70, 1200px (1 pass, acceptable) |\n| **perpetual.jpg** | 565KB | 130KB | **96KB** | q 40, 1200px (3 passes) |\n| **keyboard.jpg** | 718KB | 196KB | **98KB** | q 25, 1000px (5 passes) |\n\n### Key Insights\n\n1. **Most images** (under 500KB source) compress fine with default settings (q 70, 1200px)\n2. **Large detailed images** (500KB+) often need multiple passes\n3. **Very large images** (700KB+) may need both lower quality AND smaller dimensions\n4. **Keyboard/tech photos** with fine detail are hardest to compress - expect 4-5 passes\n5. **Soft/blurry images** compress much better than sharp detailed ones\n\n## After Compression\n\n1. **Verify ALL files under 100KB**: `ls -lh *.webp` - re-run compression on any exceeding target\n2. Update content files referencing old extensions (.jpg, .png) to use .webp\n3. Test that images render correctly in the application\n4. Original files remain in `originals/` folder for future reference or re-compression","tags":["compress","images","claude","code","startup","skills","rameerez","agent","agent-skills","agentic-ai","agentic-workflow","ai-agents"],"capabilities":["skill","source-rameerez","skill-compress-images","topic-agent","topic-agent-skills","topic-agentic-ai","topic-agentic-workflow","topic-ai-agents","topic-ai-tools","topic-anthropic","topic-anthropic-claude","topic-claude","topic-claude-ai","topic-claude-api","topic-claude-code"],"categories":["claude-code-startup-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/rameerez/claude-code-startup-skills/compress-images","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add rameerez/claude-code-startup-skills","source_repo":"https://github.com/rameerez/claude-code-startup-skills","install_from":"skills.sh"}},"qualityScore":"0.460","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 21 github stars · SKILL.md body (3,452 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-23T13:02:41.096Z","embedding":null,"createdAt":"2026-04-18T23:05:39.006Z","updatedAt":"2026-04-23T13:02:41.096Z","lastSeenAt":"2026-04-23T13:02:41.096Z","tsv":"'-5':448 '0':187,218,227,236,245,254,284,293 '1':55,176,323,332,341,350,359,368,377,400,462 '1000':283,292 '1000px':278,395 '100kb':51,97,160,201,212,275,467 '102kb':372,373 '1200':186,217,226,235,244,253 '1200px':271,322,331,340,349,358,367,376,386,413 '130kb':382 '196kb':391 '198kb':317 '2':75,197,414,479 '230kb':335 '246kb':326 '25':290,394 '3':90,259,387,423,491 '30':281 '33kb':318,319 '35':251,269 '395kb':353 '4':111,436,447,500 '40':242,385 '409kb':344 '414kb':362 '42kb':327,328 '43kb':336,337 '45':233 '459kb':371 '5':117,396,450 '50':224 '500kb':404,418 '565kb':381 '60':215 '70':180,184,321,330,339,348,357,366,375,412 '700kb':427 '718kb':390 '88kb':345,346 '94kb':363,364 '96kb':354,355,383 '98kb':392 'accept':379 'actual':303 'algorithm':151 'also':263 'app/assets/images/content':37 'applic':499 'argument':35 'bash':181,205,266 'before/after':115 'better':455 'calendar.jpg':325 'cash.jpg':343 'check':98,161,194 'compress':2,4,29,31,76,105,144,150,154,169,304,406,445,453,461,474,513 'compress-imag':1 'content':121,307,481 'convert':23 'correct':496 'creat':56,59 'cwebp':10,182,213,222,231,240,249,279,288 'default':409 'destroy':72 'detail':416,441,458 'dimens':265,435 'directori':65,87,132 'exceed':108,172,477 'expect':446 'extens':125,485 'faster':16 'feature.png':142 'feature.webp':148 'file':20,69,74,122,128,138,465,482,502 'final':313 'fine':407,440 'first':311 'floating-dark.jpg':361 'floating.jpg':334 'folder':58,506 'format':27,44 'futur':508 'gif':81 'hardest':443 'hero.jpg':141 'hero.webp':143 'high':135 'high-qual':134 'imag':3,5,14,28,33,53,78,94,157,262,308,309,402,417,426,452,494 'image.webp':190,193,221,230,239,248,257,287,296 'import':152 'initi':177 'insid':62 'insight':399 'iter':91,149 'jpg':79,486 'jpg/png':24 'keep':153 'key':398 'keyboard.jpg':389 'keyboard/tech':437 'keyboard2.jpg':370 'knot.jpg':352 'larg':415,425 'lh':192,469 'load':18 'lower':431 'ls':191,468 'may':428 'move':67 'much':454 'multipl':421 'need':420,429 'never':71 'o':189,220,229,238,247,256,286,295 'often':419 'old':124,484 'one':459 'optim':13,45,147 'order':209 'origin':57,60,83,133,310,501,505 'originals/image.jpg':188,219,228,237,246,255,285,294 'page':17 'parent':86 'pass':102,165,178,324,333,342,351,360,369,378,388,397,422,449 'path':40 'per':52 'perform':8,48 'perpetual.jpg':380 'photo':438 'png':80,487 'preserv':139 'process':54 'progress':204 'provid':41 'q':179,183,214,223,232,241,250,268,280,289,320,329,338,347,356,365,374,384,393,411 'qualiti':136,203,432 're':104,168,472,512 're-compress':103,167,511 're-run':471 'real':298 'real-world':297 'reduc':19,202,264,276 'refer':119,301,509 'referenc':483 'remain':503 'render':495 'report':112 'resiz':185,216,225,234,243,252,282,291 'result':113,300 'run':305,473 'seo':47 'set':314,410 'sharp':457 'size':21,99,116,162,195 'skill':30 'skill-compress-images' 'smaller':434 'soft/blurry':451 'sourc':68,73,137,405 'source-rameerez' 'step':175,196,258 'still':199,273 'structur':129 'stubborn':261 'subfold':61 'target':49,64,110,131,174,478 'target-directori':130 'test':492 'topic-agent' 'topic-agent-skills' 'topic-agentic-ai' 'topic-agentic-workflow' 'topic-ai-agents' 'topic-ai-tools' 'topic-anthropic' 'topic-anthropic-claude' 'topic-claude' 'topic-claude-ai' 'topic-claude-api' 'topic-claude-code' 'tri':206,312 'updat':118,480 'use':9,11,315,489 'verifi':463 'waves.jpg':316 'web':146 'web-optim':145 'web/seo':7 'webp':26,43,89,127,470,490 'world':299","prices":[{"id":"dd3e4c84-0bb3-4238-b9bd-3f39e75adecc","listingId":"5811edf7-023c-4ca0-b81b-2517c4c5ba29","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"rameerez","category":"claude-code-startup-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T23:05:39.006Z"}],"sources":[{"listingId":"5811edf7-023c-4ca0-b81b-2517c4c5ba29","source":"github","sourceId":"rameerez/claude-code-startup-skills/compress-images","sourceUrl":"https://github.com/rameerez/claude-code-startup-skills/tree/main/skills/compress-images","isPrimary":false,"firstSeenAt":"2026-04-18T23:05:39.006Z","lastSeenAt":"2026-04-23T13:02:41.096Z"}],"details":{"listingId":"5811edf7-023c-4ca0-b81b-2517c4c5ba29","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"rameerez","slug":"compress-images","github":{"repo":"rameerez/claude-code-startup-skills","stars":21,"topics":["agent","agent-skills","agentic-ai","agentic-workflow","ai","ai-agents","ai-tools","anthropic","anthropic-claude","claude","claude-ai","claude-api","claude-code","claude-skills","cursor","cursor-ai"],"license":"mit","html_url":"https://github.com/rameerez/claude-code-startup-skills","pushed_at":"2026-02-23T17:18:34Z","description":"Claude Code skills for building and running actual software startups, apps, SaaS, and businesses","skill_md_sha":"d52ff8b7b825e407dd0efd31c46fcd41917e40a4","skill_md_path":"skills/compress-images/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/rameerez/claude-code-startup-skills/tree/main/skills/compress-images"},"layout":"multi","source":"github","category":"claude-code-startup-skills","frontmatter":{"name":"compress-images","description":"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."},"skills_sh_url":"https://skills.sh/rameerez/claude-code-startup-skills/compress-images"},"updatedAt":"2026-04-23T13:02:41.096Z"}}