image-optimization
Next.js 15 이미지, AVIF/WebP 형식, 흐림 자리 표시자, 반응형 크기 및 CDN 로더를 사용한 이미지 최적화. 이미지 성능, 반응형 크기 조정 또는 Next.js 이미지 파이프라인을 개선할 때 사용합니다.
SKILL.md
| Optimization | LCP Impact | CLS Impact | Bandwidth |
| AVIF format | -20-30% load | None | -50% size | | Responsive sizes | -30-50% load | None | -40% size | | Blur placeholder | Perceived faster | Prevents shift | +1kb | | Priority loading | -500ms+ | None | None | | Lazy loading | None (below fold) | None | Deferred |
| No width/height | CLS from layout shift | Always set dimensions | | Eager load all | Slow initial load | Use lazy loading | | No priority on LCP | Slow LCP | Add priority prop | | PNG for photos | Large file size | Use AVIF/WebP | | Single image size | Wasted bandwidth | Use responsive sizes |
인용 가능한 정보
AI/검색 인용용 안정적인 필드와 명령어.
- 설치 명령어
npx skills add https://github.com/yonatangross/skillforge-claude-plugin --skill image-optimization- 카테고리
- </>개발 도구
- 인증됨
- —
- 최초 등록
- 2026-02-01
- 업데이트
- 2026-02-18
빠른 답변
image-optimization이란?
Next.js 15 이미지, AVIF/WebP 형식, 흐림 자리 표시자, 반응형 크기 및 CDN 로더를 사용한 이미지 최적화. 이미지 성능, 반응형 크기 조정 또는 Next.js 이미지 파이프라인을 개선할 때 사용합니다. 출처: yonatangross/skillforge-claude-plugin.
image-optimization 설치 방법은?
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/yonatangross/skillforge-claude-plugin --skill image-optimization 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다
소스 저장소는 어디인가요?
https://github.com/yonatangross/skillforge-claude-plugin
상세
- 카테고리
- </>개발 도구
- 출처
- user
- 최초 등록
- 2026-02-01