网站图片应该是多大尺寸？

目标尺寸

这些是导出时该用的宽度。背后的规则很简单：永远不要提供比图片将被显示的最大容器明显更宽的图。

• 全宽首屏图或横幅：1920 px 宽
• 内容区特色图：1200–1600 px
• 文章内图片：800–1200 px
• 卡片或预览缩略图：400–600 px
• 头像或图标：100–200 px
• Open Graph 社交预览图：精确 1200 × 630 px

目标文件大小

尺寸正确加上质量 75 左右，这些目标都能轻松达到。如果远远超标，原因几乎总是尺寸而不是质量档位。

• 首屏图：200 KB 以内
• 文章图：100 KB 以内
• 缩略图：30 KB 以内
• 整页所有图片合计：1 MB 以内

为什么这影响搜索排名

Google 度量 Largest Contentful Paint——最大的可见元素完成渲染所需的时间——并将其作为排名信号。多数页面上，那个最大元素就是一张图片。

在移动端影响会放大。办公室宽带上秒开的 4 MB 首屏图，在信号弱的手机上可能要等好几秒，访客等不到它出现就走了。访问和排名信号一起丢掉。

视网膜屏，但别过头

高密度屏幕在每个 CSS 像素里塞进两个以上物理像素，因此按 800 px 显示的图片如果不提供更多数据会显得发软。标准建议是按显示尺寸的两倍导出。

实践中，2× 配质量 60 通常在锐度和文件大小上同时胜过 1× 配质量 90——因为像素小到那个程度后压缩瑕疵就看不见了。用 srcset 让浏览器自行选择，而不是把最大的图发给所有人。

用哪种格式

所有现行浏览器都支持 WebP，同等质量下通常比 JPEG 省 25–35%。对图片密集的页面，这往往是可获得的最大单项提速。

• 照片：WebP，需要支持很老的浏览器时以 JPEG 作后备。
• 标志、图标、示意图：能用 SVG 就用 SVG，否则 PNG。
• 截图：PNG，或对它们同样在行的 WebP。
• 需要透明的一切：PNG 或 WebP，绝不是 JPEG。

两分钟工作流

1. 确定图片将被显示的最大宽度。
2. 缩放到该宽度——高密度屏幕可以翻倍。
3. 以质量 75 转成 WebP。
4. 对照上面的目标检查文件大小。
5. 还太大就先降到质量 60，再考虑进一步缩小尺寸。