网页图片的最佳尺寸与质量(按用途分类)

"图片该做多大?"是网页设计中最常见的问题之一,答案永远是"取决于显示在哪里"。错误的尺寸要么拖慢页面,要么牺牲画质;掌握按用途的基准,两个坑都能避开。本指南给出尺寸、体积和质量的实用起点,让你不再靠猜。

两个关键数字

每张网页图片都有两个尺寸:像素尺寸(如 1600×900)和以 KB 计的文件体积。像素尺寸应大致匹配图片在屏幕上占据的空间,体积则在保持清晰的前提下越小越好。两者都优化才是目标。

面向大屏幕,宽度取 1600–2000px 左右,用 WebP 或 AVIF 控制在约 200KB 以内。首屏大图通常就是 LCP 元素,它的体积对体感速度影响极大。

多数文章栏宽 700–900px,所以 1200–1600px 的图片足以覆盖 Retina 屏。目标是远低于 150KB;WebP 质量 75 几乎总是够用。

缩略图在屏幕上很小,400–600px 绰绰有余。通常能压到 30–50KB 以下——当一页要展示几十张时,差别非常可观。

有损格式下,照片取质量 70–80 是安全区间。AVIF 在更低的值就能有同样观感。始终前后对比,选出看不出差别的最低值。

为每种用途定一个目标宽度,先缩放到位,再用 WebP 或 AVIF、质量 75 转换。在 Scrunch 里可以整批一次转换,并在下载前逐张与原图对比——让每张图都恰到好处地轻。

为 Retina 屏保留约 2 倍显示尺寸是有用的。再大就只是浪费带宽、拖慢页面——把 2 倍当作上限。

压得太狠画质会明显受损。目标是在看起来干净的前提下尽量小。前后对比找到平衡点。

质量 75 是可靠的默认值,但大幅首屏图可以更谨慎,小缩略图可以更激进。按用途微调效果最好。

影响。描述性文件名和 alt 文本有助于图片搜索和无障碍访问。red-running-shoes.webp 远好于 img12345.jpg。配合尺寸与体积优化,图片 SEO 效果更佳。