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,290
分支
6,752

安装方式

默认使用会先检查来源的 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 查看