메뉴
Optimize images to web-ready webp (downscale + compress) and report before/after sizes. Use whenever an image is added to the site or a raw photo/PNG/JPG shows up; never ship an unoptimized image.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | optimize-images |
| description | Optimize images to web-ready webp (downscale + compress) and report before/after sizes. Use whenever an image is added to the site or a raw photo/PNG/JPG shows up; never ship an unoptimized image. |
| allowed-tools | Read, Glob, Bash(bash scripts/optimize-image.sh:*), Bash(scripts/optimize-image.sh:*), Bash(wc:*), Bash(webpinfo:*) |
| argument-hint | <image-path...> [--slot cover|middle|footer] [--width N] [--quality Q] |
Convert heavy source images (phone JPGs, PNGs) into web-ready .webp: downscale to a sane width and compress.
scripts/optimize-image.sh (one call per file). It only downscales, never upscales.1600, quality 80.cover = 1600, middle/footer = 1200, quality 85.
templates/blog/post.html) generates a 1440w retina hero variant via resize_image (16:9 op="fill"); a smaller master gets upscaled and looks soft on 2x screens. For an ultra-wide source that lands under 820px tall at 1600, bump the width until height ≥820 (e.g. 1800).middle/footer are inline body images shipped as-is; 1200px keeps them sharp on 2x at the ~700px content column..webp, within the target width, and under 300 KB is skipped (the script says so). Pass --force to re-encode anyway.--slot, --width, --quality). Expand a directory with Glob.--width/--quality if given, else the slot values (blog slots use quality 85), else the defaults (width 1600, quality 80).bash scripts/optimize-image.sh <src> [dest] --width N --quality Q for each file.cwebp/webpinfo (brew install webp).static/images/blog/YYYY-MM-DD/{cover,middle,footer}.webp. Keep source originals out of the repo (e.g. under gitignored local/imgs/).Find content files missing their Spanish (.es.md) translation. Use when asked about translation coverage or after adding new English content.
List blog posts with title, date, tags, and draft status. Optional argument: [tag or year] to filter
Add an image to a blog post (cover, middle, or footer). Arguments: <image-path> [post-date] [cover|middle|footer]
Create a new blog post from the project template. Argument: <topic>
Create a new reading note from the project template. Argument: <book-title> by <author>
Create a new talk page (EN + ES) and optionally scaffold a Marp slide deck. Argument: <talk-title> [--deck]