为网页调整图片尺寸

最后更新： 2026-10-11

用像素思考，不要用 DPI

屏幕是以像素来度量的。一张以 800 CSS 像素宽度显示的图片，在标准密度下大约需要 800 个设备像素，在高密度屏幕上则需要 1600 个。DPI（或 PPI）描述的是打印机如何把墨铺在纸上；它不影响浏览器如何绘制一张图片。把图片设为 300 DPI 却仍留着 6000 像素的宽度，对网页来说毫无意义。

所以请忽略 DPI 那一栏，改为回答一个问题：这张图片最终会以多宽来显示？按这个数值来调整尺寸即可；如果图片很重要，再为高密度屏幕多留一些余量。

常见的目标尺寸

这些是起点，不是规则。原则是：文件的尺寸只需大到它会被展示的最大处那么大即可。

要缩小，不要拉伸

放大一张图片并不会增加细节——它只是在插值。一张 400 像素的照片被拉伸到 1600 像素，会显得模糊、发块，而且文件体积变成四倍，效果反而更差。因为这几乎从来不是人们想要的，所以缩放工具默认关闭放大：如果你的数值会把图片放大，输出会保持原始尺寸不变。

放大确实有正当的用途——比如准备印刷文件——所以它是一个开关，而不是硬性限制。只是它并非默认值。

保持宽高比锁定

宽高比是宽度除以高度：一张 3:2 的照片就是 3000×2000。如果在锁定比例的情况下输入新的宽度，高度会被推导出来，图片保持原有形状。解锁之后，你可以自由设置两个数值——这在需要把输出压进固定位置时很有用，但如果新的比例与原比例不一致，它就会拉伸图片。

当你想要某个特定的形状时，正确的工具是裁剪，而不是拉伸。裁剪从边缘移除像素以得到目标比例；随后缩放再对结果进行等比例调整。按这个顺序来做，就不会变形。

百分比还是像素

百分比适合一批尺寸混杂的图片，此时固定的像素宽度会毁掉小图、却几乎撼不动大图。“50%”是一条对每张文件都公平适用的规则。而当输出需要匹配固定版式时，明确的像素值更好。两者都可以一次性作用于整批图片。

批量处理中的先后顺序

1. 裁剪成你需要的形状——这会改变图片里包含的内容。
2. 缩放到你需要的像素尺寸——这会改变它的大小。
3. 压缩或转换格式，以控制文件体积和格式。

如果你先裁掉宽度方向的 20%，再缩放到 1600 像素宽，那么这 1600 像素指的是裁剪后的图片，而不是原图。顺序弄错，通常表现为图片尺寸略微不对，在一大批图片里很容易被忽略。

关于质量的一点说明

缩小本身就已经丢弃了细节，这也意味着它让图片更容易被压缩。一张缩小过的照片在质量 0.85 时，通常比原图在质量 0.85 时更小，原因是两个而不是一个。如果你在追求某个体积目标，请先缩放，再去降低质量——质量降低对可见效果伤害更大。

打开批量图片缩放工具，拿你自己的文件试试这些数值。

继续阅读

• 如何在不把图片传到网上的前提下完成压缩 — 浏览器压缩图片时到底做了什么、如何选择质量档位，以及为什么 PNG 永远不会因为质量滑块而变小。
• JPEG、PNG、WebP 与 AVIF：如何选择正确的格式 — 各种格式分别在什么场景下最合适、透明通道需要付出什么代价，以及 EXIF 方向信息如何悄悄影响每一张旋转过的照片。