responsive-images
✓srcset, 크기, 지연 로딩 및 최신 형식(WebP, AVIF)을 사용하여 고성능 반응형 이미지를 구현합니다. CLS 예방을 위한 종횡비, 아트 디렉션을 위한 그림 요소, LCP 최적화를 위한 가져오기 우선순위를 다룹니다. 사용 시기: 페이지에 이미지 추가, 핵심 웹 바이탈 최적화, 레이아웃 변경 방지, 아트 디렉션 구현 또는 최신 형식으로 변환.
SKILL.md
Status: Production Ready ✅ Last Updated: 2026-01-14 Standards: Web Performance Best Practices, Core Web Vitals
| Use Case | Widths to Generate | Sizes Attribute |
| Full-width hero | 800w, 1200w, 1600w, 2400w | 100vw | | Content width | 400w, 800w, 1200w | (max-width: 768px) 100vw, 800px | | Grid cards (3-col) | 300w, 600w, 900w | (max-width: 768px) 100vw, 33vw | | Sidebar thumbnail | 150w, 300w | 150px |
srcset, 크기, 지연 로딩 및 최신 형식(WebP, AVIF)을 사용하여 고성능 반응형 이미지를 구현합니다. CLS 예방을 위한 종횡비, 아트 디렉션을 위한 그림 요소, LCP 최적화를 위한 가져오기 우선순위를 다룹니다. 사용 시기: 페이지에 이미지 추가, 핵심 웹 바이탈 최적화, 레이아웃 변경 방지, 아트 디렉션 구현 또는 최신 형식으로 변환. 출처: jezweb/claude-skills.
인용 가능한 정보
AI/검색 인용용 안정적인 필드와 명령어.
- 설치 명령어
npx skills add https://github.com/jezweb/claude-skills --skill responsive-images- 카테고리
- </>개발 도구
- 인증됨
- ✓
- 최초 등록
- 2026-02-01
- 업데이트
- 2026-02-18
빠른 답변
responsive-images이란?
srcset, 크기, 지연 로딩 및 최신 형식(WebP, AVIF)을 사용하여 고성능 반응형 이미지를 구현합니다. CLS 예방을 위한 종횡비, 아트 디렉션을 위한 그림 요소, LCP 최적화를 위한 가져오기 우선순위를 다룹니다. 사용 시기: 페이지에 이미지 추가, 핵심 웹 바이탈 최적화, 레이아웃 변경 방지, 아트 디렉션 구현 또는 최신 형식으로 변환. 출처: jezweb/claude-skills.
responsive-images 설치 방법은?
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/jezweb/claude-skills --skill responsive-images 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다
소스 저장소는 어디인가요?
https://github.com/jezweb/claude-skills
상세
- 카테고리
- </>개발 도구
- 출처
- skills.sh
- 최초 등록
- 2026-02-01