网站如何控制图像尺寸：一份给网站设计者的科普

日期 : 2026-11-02 23:38:46

打开一家企业官网，首屏 Banner 还在转圈，产品介绍图糊成一团，新闻列表里的缩略图比正文还大——这通常不是设计师审美问题，而是图像尺寸没控住。对企业网站而言，图片往往占了整个页面七成以上的体积，尺寸是否合理，直接决定页面打开速度、手机端体验和搜索引擎排名。这篇文章把"图像尺寸"这件事拆成设计者能落地的几步。

01 先分清三个"尺寸"

很多人一谈图像尺寸就只看一个数字，其实在网页语境里它是三件事。

像素尺寸，也就是图片本身宽高多少像素，例如 1920×1080。这是图片的"原始分辨率"。

文件体积，即这张图在硬盘上占多少 KB 或 MB，由分辨率、压缩率和格式共同决定。一张 2000px 宽的 PNG 可能有 4MB，同画面压成 WebP 后可能只有 200KB。

显示尺寸，即浏览器里这张图实际渲染成多宽，通常受容器和屏幕 DPR（设备像素比）控制。手机上常显示成 375px 宽，但如果图片是给 Retina 屏准备的，实际文件得有 750px 宽才清晰。

控制图像尺寸，本质上就是让这三者刚好匹配显示需求，既不浪费带宽，也不糊。

02 给企业网站定一份尺寸基线

不要每次新图都临时拍脑袋，先在项目里定一份"图片规格表"。常见做法如下：

首屏 Banner：桌面端 1920px 宽，移动端单独出一张 1080px 或 1200px 宽的竖版，文件体积控制在 200–300KB 以内。
正文配图：最大宽度不超过 1200px，因为大多数正文容器也就 800–1000px；体积压到 150KB 以内。
产品图 / 团队头像：以展示容器的 2 倍出图，例如列表里显示 300px，就准备 600px 的图，保证 Retina 屏清晰。
缩略图 / 列表图：宽 400–600px 足够，体积 30–80KB 即可。
图标：优先用 SVG；实在要用位图，给 2x、3x 两档 PNG。

规格表一旦定下，设计、前端和运营按同一份图工作，就不会再出现"运营上传了 5MB 的原图"这种事故。

03 网站设计上传前：把图压到"刚好"

设计稿导出后，不要把 PSD 或原图直接塞进网站。三步处理最划算：

第一步，缩到目标像素尺寸。用 Photoshop、Figma 或 Squoosh 把图缩到规格表里的宽度，而不是让浏览器去缩放——浏览器缩放不省流量，画质也更差。

第二步，选对格式。照片类用 JPEG 或 WebP，带透明底的 logo、图标用 PNG 或 SVG，色彩简单的插画优先 WebP 或 AVIF。现代浏览器对 WebP 支持已经超过 95%，同等画质下 WebP 比 JPEG 小 25%–35%。

第三步，做有损压缩。Squoosh、TinyPNG、ImageOptim 这类工具可以在肉眼几乎看不出差别的前提下再砍一档体积。一张 400KB 的产品图，常常能压到 120KB 以内。

企业网站常见的做法是在 CMS 或图床里挂一条自动压缩流水线：上传即缩图、即转 WebP、即生成多尺寸版本。前端只需要引用文件名，不必关心原图。

04 加载时：让浏览器按需取图

光把图做小还不够，还要让浏览器在对的时机取对的图。

用 srcset 做响应式出图。同一张产品图准备 400px、800px、1200px 三个版本，写在 srcset 里，浏览器会根据屏幕宽度和 DPR 自动选最合适的一张。手机用户不会再被塞一张 1920px 的大图。

用 picture 元素切换横竖版。首屏 Banner 在桌面是横图、在手机是竖图，用 <picture> 加媒体查询直接换图，比把横图硬裁成竖图美观得多。

非首屏图片懒加载。给正文配图、列表图加 loading="lazy"，用户滑到再请求，首屏体积能立刻下来一截。

写清楚宽高。给 <img> 加上 width 和 height 属性，浏览器在图还没下载完时就能预留布局空间，避免页面抖动。

05 最容易踩的四个坑

为了"高清"拼命出大图。显示 300px 的位置放 2000px 的图，除了拖慢页面没有任何好处。
一张图走天下。桌面 Banner 直接塞进手机，不是糊就是被裁掉关键信息。
只用 PNG 存照片。PNG 是为透明图设计的，存照片体积比 JPEG 大几倍。
忽略懒加载和宽高。结果是首屏慢、页面跳，用户在图加载完之前已经划走了。

06 写在最后

控制图像尺寸，听起来是琐碎的体力活，其实是企业网站性能优化里性价比最高的一件事：不需要换服务器、不需要重写架构，只要在规格表、压缩流水线和 srcset 这三件事上各花半天，首屏体积通常能砍掉一半以上。对访问者来说，这意味着页面秒开、滑动顺滑；对企业来说，这意味着更少的跳出、更高的转化，以及更舒服的每一次品牌展示。

上一篇：企业网站设计：如何让整个网页既有个性，又是一个整体？下一篇：没有了