Skip to main content

progressive-jpeg

Use when reviewing image assets, markup, and CDN or build transforms related to Use progressive JPEG encoding. 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
progressive-jpeg
description
Use when reviewing image assets, markup, and CDN or build transforms related to Use progressive JPEG encoding. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.
metadata
{"category":"images","priority":"low","difficulty":"beginner","estimatedTime":"10","source":"frontendchecklist.io","url":"https://frontendchecklist.io/en/rules/images/progressive-jpeg"}
# Use progressive JPEG encoding Progressive JPEGs display a low-quality preview immediately rather than loading line-by-line—users see something faster, improving perceived performance even if total load time is similar. ## Quick Reference - Progressive JPEGs show blurry preview immediately, then sharpen - Better perceived performance than baseline JPEGs that load top-to-bottom - Similar file size to baseline JPEG (sometimes slightly smaller) - Less relevant with modern formats (WebP, AVIF) but still useful for fallbacks ## Check Check if JPEG images are saved in progressive format for better perceived performance. ## Fix Convert baseline JPEGs to progressive format for improved loading experience. ## Explain Explain how progressive JPEGs show a low-quality preview that improves perceived performance. ## Code Review Review image assets, markup, and delivery configuration related to Use progressive JPEG encoding. 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/progressive-jpeg
GitHub에서 보기