Use progressive JPEG encoding
SkillMediaProgressive JPEG encoding is a skill for reviewing image assets, markup, and CDN or build transforms. It checks whether images use progressive JPEG encoding by looking at encoded size, rendered size, loading strategy, and above-the-fold impact together.
Available today. Use it from your connected AI after setup.
No other account needed.
Have the image assets, markup, or CDN and build transforms you want reviewed available.
Then ask your AI: use the Use progressive JPEG encoding skill
What your AI can do with it
- Review image assets for progressive JPEG encoding
- Check markup and CDN or build transforms related to progressive JPEG
- Compare encoded size and rendered size of images
- Evaluate loading strategy for image assets
- Assess above-the-fold impact of image encoding choices
Getting started
- Have the image assets, markup, or CDN and build transforms you want reviewed available.
- Ask the agent to review the assets for progressive JPEG encoding.
- Review the findings on encoded size, rendered size, loading strategy, and above-the-fold impact.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/progressive-jpeg/SKILL.md and read by ahel’s review.
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
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- When should this skill be used?
- Use it when reviewing image assets, markup, and CDN or build transforms related to progressive JPEG encoding.
- What does it check?
- It checks encoded size, rendered size, loading strategy, and above-the-fold impact together.
Advanced
- Item type
- skill
- Key
progressive-jpeg- Source
- github.com/thedaviddias/front-end-checklist