メニュー
Optimizes images for web by converting to WebP format with optional resizing. Use when user needs to optimize images, generate favicons, create icon sets, make social media cards (og:image, twitter), or create thumbnails.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/nc9/skills --skill optimize-image-webコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Create blog posts, articles, and content pieces with research, humanization, and thumbnail generation. Use when user asks to write content, blog posts, articles, or needs help with content creation.
Generate or edit images using OpenAI gpt-image-2 (default) or Google Gemini 3.1 Flash via OpenRouter. Use for general-purpose image generation — photos, illustrations, artwork, logos, icons, mascots, concept art. For flowcharts, circuits, pathways, and technical diagrams, use the scientific-schematics skill instead.
Pre-commit workflow - test, lint, format, type-check, atomic commits. Use when user says "commit", "/commit", or wants to commit changes.
SOC 職業分類に基づく
SKILL.md を表示中
| name | optimize-image-web |
| description | Optimizes images for web by converting to WebP format with optional resizing. Use when user needs to optimize images, generate favicons, create icon sets, make social media cards (og:image, twitter), or create thumbnails. |
| allowed-tools | Bash, Read |
Convert images to optimized WebP format with size presets for icons, social cards, and thumbnails.
No API keys required. Uses Pillow for image processing.
./scripts/optimize_image convert image.png -w 800 -q 85
./scripts/optimize_image preset image.png favicon
./scripts/optimize_image preset logo.png icon-set
./scripts/optimize_image preset hero.jpg og
./scripts/optimize_image info image.png
./scripts/optimize_image presets
| Option | Description |
|---|---|
-o, --output | Output path (default: same name .webp) |
-w, --width | Target width in pixels |
-h, --height | Target height in pixels |
-q, --quality | WebP quality 1-100 (default: 85) |
-f, --format | Output: json (default) or files |
| Option | Description |
|---|---|
-o, --output-dir | Output directory |
-p, --prefix | Filename prefix |
-q, --quality | WebP quality 1-100 (default: 85) |
-f, --format | Output: json (default) or files |
| Preset | Sizes | Use Case |
|---|---|---|
favicon | 16, 32, 48 | Browser favicons |
icon-set | 16-512 | Full icon set for PWA/apps |
og | 1200x630 | Open Graph (Facebook, LinkedIn) |
twitter | 1200x675 | Twitter cards |
social | og + twitter | All social platforms |
thumb | 150x150 | Small thumbnails |
thumb-lg | 300x300 | Large thumbnails |
Default JSON for LLM parsing:
{
"input": "logo.png",
"preset": "icon-set",
"original": {"width": 1024, "height": 1024},
"outputs": [
{"path": "logo-16x16.webp", "width": 16, "height": 16, "size_kb": 0.5},
{"path": "logo-32x32.webp", "width": 32, "height": 32, "size_kb": 1.2}
]
Optimize hero image for web:
./scripts/optimize_image convert hero.jpg -w 1920 -q 80
Generate favicons from logo:
./scripts/optimize_image preset logo.png favicon -o ./public
Generate social media cards:
./scripts/optimize_image preset banner.png social -o ./assets
Generate icon set for PWA:
./scripts/optimize_image preset icon.png icon-set -o ./public/icons -p app
Check original image details:
./scripts/optimize_image info photo.jpg