illegalCreed

中文

English

中文

English

Appearance

参考 ​

基于 MDN 官方文档（developer.mozilla.org）+ web.dev/articles 编写，对照 2026-07 AVIF Baseline 状态

速查 ​

  • 格式优先级：AVIF → WebP → JPEG/PNG → SVG（矢量优先）
  • 压缩率：AVIF 比 JPEG 小约 50%、比 WebP 小 20–30%；WebP 比 JPEG 省 25–35%
  • AVIF 支持：Chrome 85+ / Edge 90+ / Firefox 93+ / Safari 16+；Baseline 2026 newly available
  • WebP 支持：Chrome 32+ / Firefox 65+ / Safari 14+ / Edge 18+
  • srcset 两类描述符：w（须配 sizes）vs x（无需 sizes），不可混用
  • sizes 媒体条件描述视口，槽宽禁止百分比
  • 回退链：<source type=image/avif> → <source type=image/webp> → <img src=x.jpg>
  • decoding 三值：async（不阻塞绘制）/ sync（与 DOM 一起渲染）/ auto（默认）
  • 压缩 quality 常用区间：50–70
  • 图片 CDN URL 四要素：origin / image / security-key / transformations
  • 本叶边界：懒加载归【用户体验优化】章

格式对比表 ​

格式类型压缩透明动画典型节省浏览器支持
AVIF光栅有损/无损✓✓比 JPEG −50% / 比 WebP −20~30%Chrome 85+ / Edge 90+ / Firefox 93+ / Safari 16+
WebP光栅有损/无损✓✓比 JPEG −25~35%Chrome 32+ / Firefox 65+ / Safari 14+ / Edge 18+
JPEG光栅有损✗✗基准全浏览器（兜底首选）
PNG光栅无损✓✗基准（偏大）全浏览器
GIF光栅无损（256 色）✓✓字节远大于 <video>全浏览器（建议弃用动画）
SVG矢量—✓✓（SMIL/CSS）SVGO 后可省 58%全浏览器（除老 IE 局限）

优先用矢量格式（SVG）——与分辨率无关、HiDPI 屏永远清晰；光栅图首选 AVIF/WebP，老格式 JPEG/PNG 仅作 <picture> 兜底。

srcset 语法速查 ​

宽度描述符（w，须配 sizes） ​

html
<img
  src="hero-800.jpg"
  srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="hero"
>
段含义
URL 宽度w候选项，数字后必须带 w
src用 w 描述符时被当作 1x 候选
sizes必须存在，否则 srcset 被忽略

像素密度描述符（x，无需 sizes） ​

html
<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="logo"
>
段含义
URL 密度x候选项，数字后必须带 x（1x 可省略）
sizes无需

合法性规则 ​

规则说明
不可混用 w 和 xa.jpg 480w, b.jpg 2x 非法，浏览器行为未定义
同描述符不可重复两个 2x 也无效
用 w 必须有 sizes否则整个 srcset 被忽略、退回 src

sizes 语法速查 ​

text
sizes="media-condition slot, media-condition slot, default-slot"
段含义
media-condition媒体条件，描述视口不是图片（如 (max-width: 600px)）
slot槽宽；禁止百分比；可用 px / vw / calc / em
取值逻辑取第一个为真的条件、其后全忽略
默认最后一项省略媒体条件

sizes 必须贴近真实 CSS 显示宽度——偏大选浪费带宽、偏小选模糊图。

picture 语法速查 ​

Art direction（media） ​

html
<picture>
  <source media="(max-width: 600px)" srcset="hero-mobile.jpg">
  <source media="(min-width: 601px)" srcset="hero-desktop.jpg">
  <img src="hero.jpg" alt="hero">
</picture>

格式协商（type） ​

html
<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="hero">
</picture>

<source> 通用属性 ​

属性作用
srcset候选图（同 <img> 的 srcset 语法）
media媒体条件（art direction 用）
typeMIME 类型（格式协商用，如 image/avif）
sizes同 <img> 的 sizes（与 srcset w 描述符配合）

铁律 ​

  • <img> 必须放在最后——缺失则不渲染任何图
  • <img> 必须用通用格式（JPEG/PNG）兜底——否则老浏览器显示破图
  • 回退链顺序：AVIF → WebP → JPEG（从最优到最兼容）

img 关键属性速查 ​

属性作用取值 / 备注
src主图 URL必填
srcset候选图列表w 或 x 描述符，不可混用
sizes真实 CSS 显示宽度与 w 描述符配合；禁百分比
width / height固有宽高防 CLS（浏览器算 aspect-ratio）
alt替代文本无障碍必填；装饰图给 alt=""
decoding解码提示async / sync / auto（默认）
loading懒加载lazy / eager（默认）；归懒加载章
fetchpriority优先级提示high / low / auto；LCP 图设 high

压缩工具速查 ​

工具用途典型命令
cwebpJPEG/PNG → WebPcwebp -q 65 in.jpg -o out.webp
avifencJPEG/PNG → AVIFavifenc --min 30 --max 50 in.jpg out.avif
sharp（Node）resize / 转 WebP/AVIFsharp('in.jpg').resize(800).webp({quality:65}).toFile('out.webp')
imagemin批处理 pipelineimagemin(['*.jpg'], {plugins: [imageminWebp({quality:65})]})
ImageMagickresize / 格式转换convert in.jpg -resize 300x200 out.jpg
SVGOSVG 压缩svgo icon.svg -o icon.min.svg

quality 常用区间 50–70；人眼不敏感，调低收益大；用 Butteraugli / SSIM 防过度压缩。

图片 CDN URL 形态 ​

text
https://cdn.example.com/image/secure-key/hero.jpg?width=800&quality=65&format=auto

        origin          /image/security-key/file   ?transformations
段作用
origin自有域名（避免换 CDN 改 URL）
image源图路径
security-key防他人生成新变体
transformationssize / quality / format；auto 由 CDN 按信号自动选

auto 模式依据的信号 ​

信号来源
Client HintsSec-CH-Viewport-Width / Sec-CH-DPR
Save-Data 头Save-Data: on
User-Agent浏览器能力
Network Information APInavigator.connection.effectiveType（4g/3g/2g）

HTTP Accept 头协商 ​

apache
# Apache mod_rewrite 示例（web.dev）
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{HTTP_ACCEPT} !image/avif
RewriteRule (.*)\.(jpg|png)$ $1.webp [L]
Header append Vary Accept
头作用
Accept客户端告知支持哪些图片格式（image/webp,image/avif）
Vary: Accept必须——否则缓存把 WebP 给到不支持 AVIF/WebP 的浏览器（串味）

浏览器支持状态（2026-07） ​

特性状态备注
AVIFBaseline 2026 newly available（约 96%）Chrome 85+ / Edge 90+ / Firefox 93+ / Safari 16+
WebP全浏览器稳定Chrome 32+ / Firefox 65+ / Safari 14+ / Edge 18+
srcset / sizes / <picture>modern desktop & mobile 全支持已多年稳定
<img decoding>Baseline「Widely available」自 2020-01 起跨浏览器可用
HTMLImageElement.decode()Widely available返回 Promise
sizes="auto"较新须配 loading="lazy"；旧浏览器需跟回退值

本文涉及的所有 HTML 属性均为稳定规范、无即将废弃项。

反模式速查表 ​

反模式后果正解
srcset 混用 w 和 x浏览器行为未定义同一 srcset 只用一种
用 w 漏写 sizessrcset 被忽略、退回 src必须配 sizes
sizes 用百分比规范禁止用 px / vw / calc / em
<picture> 漏 <img> 或顺序错不渲染任何图<img> 必须放最后
<img> 用 WebP 兜底老浏览器显示破图用 JPEG/PNG 兜底
JS 检测视口改 src多下一次原图用 srcset / sizes
用 GIF 做动画体积远大于 <video>改用 <video> 或 MP4/WebM
文字烘进图片不可选 / 不可搜 / 不可缩放用 web font
构建期压一次就不管未剥 EXIF / 无按需变体自动化管线 + CDN 按需生成
滥用 decoding="async"首屏静态图几乎无收益仅给 JS 动态插入的图
跨源 CDN 不 preconnect拖慢 LCPpreconnect + fetchpriority="high"
只生成 1 张超大图靠 CSS 缩放桌面图喂手机 2–4x 流量多尺寸 + srcset/sizes

官方资源 ​