사이트 이미지 용량을 용도별 기준으로 점검해 큰 이미지와 감축 목표를 정리합니다. 압축, 형식 변환, 기기별 전송을 검토하고 용량과 표시 크기 문제를 구분합니다.
Use when auditing the image pipeline, static assets in `public/`, CMS-managed media, or image CDN transforms. Separate file-size problems from dimension mismatches so you can tell whether the issue is compression, format choice, or responsive delivery.
image-file-size는 사이트 이미지 용량을 조사해 용도별 기준을 넘는 이미지를 경로, 현재 용량, 감축 목표와 함께 보고합니다. 사진 200KB, 대표 이미지나 전체 너비 이미지 400KB, 너비 200px 미만 썸네일 30KB 등을 기준으로 사용합니다. 용량 문제와 표시 크기 불일치를 구분하고 압축, 형식 변환, 화면 크기별 전송 중 무엇을 수정할지 정리합니다.
public/의 정적 이미지, CMS 관리 이미지, 이미지 CDN의 변환 처리를 함께 검토할 때 적합합니다. 업로드 원본이 그대로 제공되는지, 모바일에도 큰 이미지를 보내는지 확인할 때도 활용합니다.
srcset을 확인하고 모바일에 작은 이미지를 제공하도록 구성해 주세요.”변환·압축 도구로 Squoosh, Sharp, ImageOptim, oxipng, pngquant, SVGO를 제시합니다. 도형 이미지와 아이콘은 권장 목표가 50KB 미만이지만 점검 시 지적 기준은 100KB 초과이므로 용도와 기준을 확인해 판단합니다.
이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.
AI가 SKILL.md의 내용만을 근거로 4가지 관점에서 판정했습니다. 스타 수나 인기도는 판정에 넣지 않았습니다.
총점은 각 항목을 A=25점, B=15점, C=5점으로 더한 값입니다. 2026년 10월 23일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Images account for over 50% of average page weight according to HTTP Archive data. Oversized images waste user bandwidth (costly on mobile data plans), delay Largest Contentful Paint (LCP), and increase bounce rates. A 1-second delay in mobile page load can reduce conversions by up to 20% according to Google research.
Audit all image assets in this project. For each image: 1) Check the file size in bytes. 2) Flag any photo (JPEG/WebP/AVIF) over 200KB. 3) Flag any graphic/icon (PNG/SVG) over 100KB. 4) Flag any hero or full-width image over 400KB. 5) Flag any thumbnail (under 200px wide) over 30KB. Also check if Lighthouse reports 'Properly size images' or 'Efficiently encode images' as opportunities. Report each oversized image with its path, current size, and an estimated target size.
For each oversized image: 1) Convert JPEG/PNG to WebP at 80% quality using Squoosh, Sharp, or ImageOptim—this typically yields 25-35% size reduction over optimised JPEG. 2) Try AVIF at 60% quality for further reduction (often 40-50% smaller than JPEG). 3) Strip metadata (EXIF/IPTC) from images served on the web. 4) For PNGs, run through oxipng or pngquant for lossless or near-lossless compression. 5) For SVGs, run through SVGO. 6) Implement multiple srcset sizes so mobile users download smaller files.
Explain how oversized images impact web performance. Images are typically the largest assets on a page—HTTP Archive data consistently shows images account for 40-60% of total page weight. Each KB saved reduces transfer time, especially on mobile networks (4G averages 20Mbps, with significant latency). Large images also delay Largest Contentful Paint (LCP), the primary Core Web Vitals metric. Google's Lighthouse flags images that could be reduced by more than 4KB as an opportunity.
Inspect image assets, build transforms, CMS output, and rendered markup. Flag photos above the documented file-size thresholds, hero images that exceed budget without justification, and image pipelines that ship original uploads instead of compressed responsive variants.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/rules/images/image-file-size
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Create and review custom 404 pages that help visitors recover from broken or moved links through search and navigation. Check the rendered page and HTTP response so missing content returns a proper 404 status.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Audit or create a dedicated About page that explains a website’s purpose and identifies its people or organization. Review the rendered output and supporting information, including expertise and contact details, to find gaps.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
페이지와 공통 컴포넌트에 자동 접근성 테스트를 추가하고 검사 누락을 찾습니다. 지속적 통합에 검사를 연결해 구조·속성 문제와 변경으로 생긴 오류를 확인합니다.
로그인부터 다단계 인증과 계정 복구까지 점검하고, 붙여넣기 차단이나 인증 코드 수동 입력처럼 이용을 방해하는 인증 절차의 개선을 돕습니다.
Review form errors, success messages, and live updates so screen reader users receive important notifications. Check the HTML delivered to the browser, announcement settings, display duration, and dismissal controls, then identify specific elements that need changes.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Review HTML tables so screen reader users can understand how headers and data relate. Check header markup, table descriptions, and merged cells, then identify specific fixes and ways to verify them.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.