image-compression
Use when reviewing image assets, markup, and CDN or build transforms related to Compress images without quality loss. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.
소스 정보
- 저장소
- thedaviddias/Front-End-Checklist
- 최근 소스 활동
- 2026년 5월 29일 21:54
- 감지된 SKILL.md 언어
- 영어
- 스타
- 74,155
- 포크
- 6,739
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
파일 탐색기
2 개 파일SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- image-compression
- description
- Use when reviewing image assets, markup, and CDN or build transforms related to Compress images without quality loss. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.
- metadata
- {"category":"images","priority":"high","difficulty":"beginner","estimatedTime":"15","source":"frontendchecklist.io","url":"https://frontendchecklist.io/en/rules/images/image-compression"}
# Compress images without quality loss
Uncompressed images are often 5-10x larger than needed—proper compression dramatically reduces page weight and load times with minimal visual impact.
## Quick Reference
- Compress JPEG to 70-85% quality (often visually identical)
- Use lossy compression for photos, lossless for graphics
- Automate compression in build process
- Can reduce file sizes by 60-80% without visible quality loss
## Check
Analyze if images are properly compressed without significant quality loss.
## Fix
Compress images using tools like ImageOptim, TinyPNG, or automated build processes.
## Explain
Explain how proper compression can reduce image sizes by 60-80% with minimal quality impact.
## Code Review
Review image assets, markup, and delivery configuration related to Compress images without quality loss. Flag exact files or components where format choice, sizing, or loading behavior violates the rule, and describe how to confirm the fix in DevTools.
---
For full implementation details, code examples, and framework-specific guidance,
see `references/rule.md`.
Rule page: https://frontendchecklist.io/en/rules/images/image-compression
GitHub에서 보기