网页图片尺寸怎么定：像素、分辨率与压缩的实用指南

“这张图该做多大？”是很多人处理图片时最纠结的问题。尺寸太大，网页加载慢、上传被拒；太小又会发虚。这篇文章把像素尺寸、分辨率、DPI 和文件体积几个容易混淆的概念讲清楚，并给出常见场景的推荐尺寸和实操步骤。

先分清：像素尺寸 ≠ 文件体积 ≠ DPI

这三者经常被混为一谈，其实完全是不同维度：

• 像素尺寸（如 1920×1080）：图片有多少个像素点，决定了它能显示多大、多清晰。
• 文件体积（如 350 KB）：文件占多少存储空间，由像素数量、格式和压缩程度共同决定。
• DPI / PPI：每英寸多少像素，只在打印时有意义；在屏幕上显示时，DPI 数值几乎不影响效果，真正起作用的是像素尺寸。

换句话说，做网页或社交平台用的图，你只需要关心像素尺寸和文件体积，不用纠结 DPI。很多人把 72 DPI 当成“网页标准”，其实屏幕根本不看这个数字。

屏幕分辨率与“2 倍图”

现在手机和笔记本大多是高清屏（Retina 等），一个 CSS 像素对应 2 个甚至 3 个物理像素。所以如果一张图在页面上显示为 400px 宽，为了在高清屏上不发虚，实际图片最好准备到 800px（2 倍）。但也不必无限加大——超过 2–3 倍收益递减，只会白白增加体积。

常见场景推荐尺寸

• 网站正文配图：宽 1200–1600 px 足够清晰，体积可控。
• 全屏 Banner / 首图：宽 1920–2560 px。
• 头像：400×400 或 512×512 px 的正方形即可。
• 缩略图：200–400 px 宽。
• 邮件附件：长边控制在 1500 px 内，避免附件过大。

社交平台各有推荐尺寸且时常调整，发布前最好查一下当前规范；但通用原则不变：先定像素尺寸，再压缩体积。

缩放的两个原则

一是尽量只缩小、别放大。缩小是丢弃多余像素，画质基本不受影响；放大是让软件“猜”出不存在的像素，只会越放越糊，无法凭空增加细节。

二是保持宽高比。随意改宽高会让图片被拉伸变形。缩放时锁定宽高比，只改一个维度、让另一个按比例自动计算，是最安全的做法。

实操：先缩放，再压缩

推荐的顺序是先把像素尺寸调到目标大小，再压缩体积：

1. 用 图片缩放工具 把长边缩到目标像素（如 1600 px），保持锁定宽高比。
2. 再用 图片压缩 / 格式转换工具 压缩体积，或转成更省的 WebP / AVIF 格式。
3. 对比处理前后的清晰度与体积，满意后下载。

两个工具都在浏览器本地运行，图片不上传服务器，处理完直接下载，快速又保护隐私。想进一步了解格式怎么选，可以读 《WebP vs AVIF》。