image-optimization

SKILL.md

| Photos | AVIF | WebP → JPEG | | Graphics/logos with transparency | SVG | WebP → PNG | | Photos with transparency | WebP | PNG | | Animations | WebP | GIF (or MP4 for long animations) | | Icons | SVG | WebP → PNG | | Screenshots | WebP | PNG |

| JPEG | 75-85 | 80 is sweet spot for photos | | WebP | 75-85 | More efficient than JPEG at same quality | | AVIF | 60-75 | Much more efficient, use lower numbers | | PNG | N/A | Lossless, optimize with tools like oxipng |

Standard widths: 320, 480, 768, 1024, 1366, 1600, 1920, 2560

웹 성능을 위한 이미지 최적화에 대한 전문가 지침. 이미지 형식(WebP, AVIF, JPEG, PNG, GIF, SVG, HEIC, JPEG XL), 압축 설정, 반응형 이미지, 지연 로딩, CDN, Core Web Vitals 또는 기타 이미지 관련 웹 개발 작업을 수행할 때 사용합니다. 형식 선택, 품질 설정, 소스 세트/크기, 그림 요소, 아트 디렉션, 가져오기 우선순위, 자리 표시자 전략(LQIP, 블러업, 블러해시), 컨테이너 쿼리, HDR/광역 색 영역, AI 기반 이미지 도구, 엣지/서버리스 처리 및 성능 최적화를 다룹니다. 출처: igorvaryvoda/image-optimization-skill.

원본 보기