image-optimizerlisted

# Image Optimizer 이미지 파일을 WebP 포맷으로 변환하여 화질 손실 없이 용량을 대폭 줄이는 스킬입니다. ## When to Use This Skill - "이미지 리사이즈해줘", "용량 줄여줘", "webp로 변환해줘" 등의 요청 - S3 업로드 전 이미지 최적화가 필요할 때 - 디렉토리 내 이미지 일괄 변환이 필요할 때 ## 필수 도구 - `cwebp` (libwebp) — macOS: `brew install webp` ## 워크플로우 ### 1. 원본 정보 확인 ```bash sips -g pixelWidth -g pixelHeight -g format "{파일경로}" && ls -lh "{파일경로}" | awk '{print "filesize:", $5}' ``` ### 2. WebP 변환 #### 단일 파일 ```bash cwebp -q 90 -m 6 "{입력파일}" -o "{출력파일.webp}" ``` #### 디렉토리 일괄 처리 ```bash for f in "{디렉토리}"/*.{png,jpg,jpeg}; do [ -f "$f" ] && cwebp -q 90 -m 6 "$f" -o "${f%.*}.webp" done ``` ### 3. 결과 확인 ```bash ls -lh "{출력파일.webp}" | awk '{print $5}' ``` ## 파라미터 가이드 | 옵션 | 값 | 설명 | |------|-----|------| | `-q` | `90` | 품질 (기본값). 화질 우선이면 `95`, 용량 우선이면 `80` | | `-m` | `6` | 압축 강도. 6이 최대 (가장 느리지만 가장 작은 용량) | | `-resize W H` | `1200 0` | 리사이즈. 높이 `0`은 비율 유지. 해상도 축소가 필요할 때만 사용 | | `-lossless` | — | 무손실 모드. PNG 대체용으로 화질 100% 유지하되, 용량 감소 효과는 적음 | ## 상황별 추천 설정 | 용도 | 명령 | |------|------| | **일반 (화질 우선)** | `cwebp -q 90 -m 6` | | **웹 썸네일** | `cwebp -q 85 -m 6 -resize 600 0` | | **상세페이지 이미지** | `cwebp -q 90 -m 6 -resize 1200 0` | | **무손실 (PNG 대체)** | `cwebp -lossless -m 6` | | **최대 압축 (용량 우선)** | `cwebp -q 75 -m 6` | ## 출력 규칙 - 출력 파일명: 원본과 동일한 이름에 `.webp` 확장자 - 출력 위치: 원본과 같은 디렉토리 (덮어쓰기 없음 — 확장자가 다르므로) - 변환 완료 후 원본/결과 용량 비교를 사용자에게 보고 ## 예시 ``` 입력: product-front.png (5.9MB, 1792x2400) 출력: product-front.webp (539KB, 1792x2400) 결과: 91% 용량 감소, 해상도 유지, q90 고품질 ```