科普｜网页图片有讲究，分辨率、格式基础知识点

打开任意一家企业官网，图片都是页面信息传递的核心载体。产品实拍图、首页主视觉 banner、工厂场景图、3D 建模渲染图、品牌 logo 图标、客户案例配图，几乎每一个板块都离不开图片素材。在上海雍熙服务超过一百二十家上市公司的网站建设项目实践当中，包含宁德时代、宇通客车、科大讯飞、正泰电器、博世、固德威等众多 B 端品牌，我们发现绝大多数非专业的企业需求方，甚至部分刚入行的设计人员，都容易低估网页图片的重要程度。

很多人简单认为网页图片只需要 “看着清晰好看” 就足够，直接把相机原图、设计软件导出的超大源文件上传网站，不去区分不同图片格式的适用场景，混淆像素尺寸与分辨率概念，忽略图片体积对网站加载速度、移动端体验、搜索引擎表现带来的连锁影响。最后出现电脑端浏览图片精致，手机打开网站加载缓慢卡顿；部分图片出现黑边、模糊、锯齿；有的图片在部分浏览器当中无法正常显示；产品列表页面打开等待时间过长，访客直接关闭页面流失等各类现实问题。

网页图片并不是简单把一张图片放到网页当中，它背后包含像素尺寸、PPI 分辨率、图片格式、压缩逻辑、多端适配、素材裁剪等一整套完整的基础知识。这些知识点不属于高深的开发技术，却是做好企业官网视觉效果与访问性能的底层基础。不管你是网页设计师、企业市场运营人员，还是需要审核网站改版、验收官网项目的甲方负责人，读懂网页图片的基础逻辑，都可以帮助你分辨素材优劣，避开大量实际项目当中高频出现的图片类坑点。本文结合雍熙大量 B 端商业官网真实项目经验，抛开晦涩专业术语，通俗拆解网页图片分辨率、图片格式，同时讲解配套的裁剪、压缩、多端适配实操知识，完整梳理网页图片的基础科普内容。

一、先搞懂核心概念：网页图片的分辨率与像素尺寸

1.1 分清两个极易混淆概念：像素尺寸和 PPI 分辨率

在网页图片相关沟通当中，最常见的认知误区就是混淆像素尺寸和 PPI 分辨率。很多人会说 “这张图片分辨率很高，放到网页一定清晰”，这句话本身就存在概念混淆，我们需要把两个名词拆开理解。

像素尺寸，代表一张图片横向、纵向一共有多少像素点，单位是 px，例如 1920px×1080px，1200px×800px。像素点的数量，才是决定网页图片显示清晰度的核心。网页浏览器只读取像素数量，不会读取图片的 PPI 参数。

PPI，也叫每英寸像素数，也就是大家常说的分辨率，它原本是印刷行业的参数，用来控制图片打印输出的精细程度，印刷物料通常要求 300PPI。但是对于网页展示场景，无论图片源文件是 72PPI，还是 300PPI，放到浏览器里面展示效果不会发生任何变化。很多企业把用于宣传画册印刷的 300PPI 大图直接上传网页，以为清晰度会更高，实际上网页完全不会利用这个印刷属性，只会继承图片庞大的文件体积，拖慢网站加载。

这里就产生网页图片第一个基础常识：网页只关心像素尺寸，不关心 PPI 数值。我们做网页素材处理的时候，不需要刻意追求 300PPI，网页行业通用标准 72PPI 就已经完全够用，不需要为网页输出印刷级高 PPI 文件。一张 300PPI 的 4000 像素原图，放到网页并不会比 72PPI 的 1920 像素图片更加清晰，只会文件体积成倍增大。

很多新手会在这里踩坑，拿到印刷厂给到的产品印刷大图，不加处理直接上传官网，图片像素巨大，PPI 数值很高，网页打开缓慢，但是肉眼看清晰度并没有提升。雍熙在处理正泰电器低压电器产品实拍素材、博世工业元器件渲染图的时候，就经常遇到客户直接交付印刷版本原图，项目团队都需要重新调整像素尺寸再投入网页使用。

1.2 Retina 高清屏幕：网页图片的 2 倍像素逻辑

现在绝大多数电脑显示器、手机屏幕都属于 Retina 高清屏幕，屏幕物理像素密度很高。如果网页容器只给到 600px 的展示空间，我们只上传一张 600 像素宽的图片，在高清屏幕下图片就会出现发虚、轻微锯齿、细节模糊的现象。

于是网页行业衍生出 2 倍图的基础规则：网页当中图片实际展示容器宽度如果是 600px，我们准备的素材像素宽度建议给到 1200px，也就是 2 倍的容器尺寸，保证在高清屏幕上面也足够锐利清晰。但这里有边界条件，并不是所有图片都无脑做 2 倍像素。如果是铺满全屏的首页 banner，容器最大 1920px，2 倍图就需要 3840px，文件体积会变得非常庞大，这种场景就需要平衡清晰度和加载性能，不需要机械套用 2 倍规则。

我们可以结合雍熙项目当中的实际经验来理解。科大讯飞智慧教育官网当中大量人物角色卡片，卡片容器宽度是 420px，设计师输出的素材给到 840px，采用标准 2 倍像素，人物面部、服饰细节在笔记本、手机高清屏幕上面都足够干净锐利；而宁德时代官网首页 1920 宽度的 3D 全景 banner，没有强行输出 3840px 的超大 2 倍图，而是输出 1920px 主版本，配合适度的压缩，兼顾视觉质感和加载速度。

1.3 B 端企业官网不同板块，对应的合理像素尺寸参考

很多企业遇到图片模糊或者加载慢，本质是像素尺寸和网页展示容器不匹配：图片像素远小于容器就会模糊，像素远远大于容器就产生大量冗余数据，浪费访问带宽。结合雍熙服务制造业、新能源、科技类上百家官网的落地实践，不同页面场景，网页图片有相对成熟的像素参考区间，可供设计师和需求方作为判断标尺。

首页首屏主视觉 banner，PC 端容器最大宽度 1920px，图片长边设置 1920px 就已经足够，不需要制作 2500px、3000px 的超宽图片。同时要单独裁切移动端版本，给到 750px 宽度素材，手机端直接加载小尺寸图片，而不是把 PC 端 1920 大图强制缩小显示。宁德时代官网首页储能 3D 可视化大图，就分别制作两套尺寸，移动端流量消耗可以降低六成左右。

产品详情页面的主产品实拍图，长边建议控制 1200px，这个尺寸足够支撑网页局部放大查看产品细节；产品列表页面的缩略卡片图，长边 600px 即可，如果直接上传 1200px 大图，一个列表页面多张卡片叠加，页面整体体积会急剧膨胀。宇通客车官网产品板块的客车实拍图，固德威逆变器产品图片，全部区分详情大图与列表缩略图两套像素规格，避免素材尺寸混用带来性能损耗。

新闻资讯、案例详情的正文配图，页面阅读内容容器宽度大多在 800px 以内，图片长边设置 800px 就可以，再大的像素在正文区域也不会完整展示。

图标、logo 类位图素材，最长边不建议超过 300px，如果可以，优先选择矢量 SVG 格式，就不再受像素尺寸限制，可以无限放大不会模糊。

这里需要重点提醒一个细节，很多产品实拍图四周保留大量空白，例如断路器、光伏设备实拍照片，画面一半都是空白背景。即便像素尺寸合理，如果没有裁剪多余空白，图片实际有效画面很小，却保留巨大画布，同样会造成文件体积虚高。上传网页之前裁剪掉无效空白，图片体积可以直接缩减接近四成，这个细节很多企业运营人员很容易忽略。

二、网页主流图片格式深度科普，各自适用场景

2.1 JPG（JPEG）格式：网页最通用的照片格式

JPG 是网页当中使用历史最久，兼容性最好的图片格式，采用有损压缩逻辑。简单来说，它会舍弃一部分人眼不容易分辨的图像细节，以此换取更小的文件体积，压缩程度越高，文件体积越小，图片会慢慢出现色块、噪点、模糊痕迹。

JPG 的核心特点是不支持透明背景。如果把一张带有透明区域的素材另存为 JPG，透明部分会自动填充白色底色。所以它适合色彩层次丰富的实拍照片、场景摄影图、实景 banner，例如工厂实拍、人物照片、户外实景 banner、产品实物摄影图。宇通客车官网首页公路大巴实景大图，正泰电器充电场景实拍配图，全部采用 JPG 作为基础源格式。

它的短板同样明确，不适合线条、logo、文字截图类素材。这类画面大面积是纯色，细节以锐利线条为主，使用 JPG 压缩之后，边缘很容易出现噪点、模糊的伪色，视觉质感变差。

很多人会疑惑，JPG 的压缩质量参数调到多少适合网页。企业官网实拍类图片，质量参数设置 70‑80 区间，在肉眼几乎看不出画质损失的前提下，可以得到很理想的文件大小。不建议直接导出 100 质量的 JPG，100 质量会保留全部原始信息，文件体积成倍上涨，网页当中收益很低。

2.2 PNG 格式：无损，支持透明，适合图形类素材

PNG 采用无损压缩，保存图片的时候不会丢失图像细节，同时完整支持透明通道，这是它最核心的优势。PNG 细分为 PNG‑8 和 PNG‑24 两种，PNG‑8 色彩数量有限，适合简单图标；PNG‑24 支持千万级色彩加完整透明，适合免抠产品图、logo、UI 图形素材。

PNG 适合的场景：需要透明背景的免抠产品渲染图、logo 图形、界面截图、带文字的 UI 示意图、线性图标。博世官网部分元器件免抠效果图，大量使用 PNG 格式，产品主体完整保留，背景透明，可以直接叠加在网页不同底色板块之上。

但是 PNG 有一个致命短板：面对色彩丰富的大尺寸实拍照片，文件体积会变得非常巨大。一张 1920 宽度的实景 banner，如果保存成 PNG 格式，体积往往会数倍大于同等画质的 JPG，会严重拖累页面加载速度。很多新手不区分场景，把实景照片全部导出 PNG，造成网站性能灾难，这是实践当中高频踩坑点。简单总结：实拍照片尽量不用 PNG；需要透明背景、锐利线条图形优先选择 PNG。

2.3 WebP 格式：现代网页的轻量化优选格式

WebP 是谷歌推出的现代网页图片格式，它同时支持有损压缩和无损压缩，也完整支持透明通道。在人眼观感接近的前提下，WebP 对比 JPG 可以减少百分之五十以上的文件体积，对比 PNG 无损模式，体积缩减优势同样明显，是现在高端定制企业官网优先采用的图片格式。

雍熙在很多上市公司官网项目当中，会启用 WebP 格式作为优先输出，同时保留 JPG、PNG 作为兼容兜底版本。浏览器如果支持 WebP，就加载体积更小的 WebP 素材；老旧不支持 WebP 的浏览器，自动降级加载传统格式，兼顾性能和兼容性。宁德时代、固德威官网都采用这套图片降级方案，大量产品渲染图、场景 banner 转换 WebP 之后，页面整体加载速度得到明显提升。

但很多甲方运营人员会遇到一个问题：WebP 格式在部分旧版图片查看软件、Office 办公软件里面无法预览打开。所以我们需要分清，WebP 是网页展示格式，不建议把 WebP 文件给到印刷、PPT 汇报使用。企业原始素材库，依旧要保存 JPG 或者 PNG 源文件，网站后台自动转换生成 WebP 用于线上网页访问，原始素材不要直接保存为 WebP 格式，避免后续其他业务场景无法调用。

2.4 SVG 矢量格式：图标 logo 的最优解，不适合照片

前面讲的 JPG、PNG、WebP 全部属于位图，由一个个像素点构成，放大到一定程度就会模糊。SVG 完全不同，它属于矢量图形，记录点、线、面数学描述，不存在像素概念，无论放大多少倍，线条、色块永远锐利清晰，文件体积通常很小，并且支持透明。

SVG 最适合单色、少色彩的 logo、导航图标、功能符号、简单 2D 线稿插画。博世官网的工业线稿插画，导航栏功能图标，全部采用 SVG 格式。不管用户使用多大的显示器，图标都不会出现锯齿。

但是 SVG 绝对不适合实拍照片、3D 渲染效果图，复杂照片转换成 SVG 会生成极其庞大的文件，完全失去使用价值。很多人望文生义，想要把产品实拍照片转 SVG，得到的结果体积巨大，画质还会失真，这是很典型的认知误区。

2.5 GIF 格式，什么场景才真正需要

GIF 只支持最多 256 种颜色，色彩表现能力弱，主要价值是实现简单循环小动画。色彩丰富的实拍照片不要使用 GIF，会出现严重色彩断层，画面观感粗糙。企业官网当中 GIF 只适合少量简单小动画，不适合做大面积的页面配图。现在如果需要网页动画效果，更多会使用视频、动效 WebP 替代传统 GIF，文件更小画面质量更好。

三、网页图片的压缩逻辑，分清 “放大缩小图片” 和 “压缩图片”

3.1 修改像素尺寸与画质压缩，是两件不一样的事情

在日常处理网页素材的时候，有两个操作，很多人混为一谈：修改像素尺寸，画质压缩。修改像素尺寸，是改变图片宽高总像素点的数量；画质压缩，是像素宽高不变，改变图片内部的压缩算法，减少文件字节大小。

举个例子，一张原图 4000px 宽，5MB。第一种操作，修改像素尺寸，把宽调整为 1920px，图片像素总量下降，文件体积自然变小。第二种操作，像素依旧保持 4000px 不变，调整 JPG 质量参数，压缩画质，文件体积同样会缩小，但是图片像素数量没有改变。

网页素材处理的正确顺序是：第一步，先裁剪掉画面多余空白；第二步，修改像素尺寸，匹配网页实际最大展示需要的像素；第三步，再做画质压缩，控制单张图片最终文件体积。

很多企业只做其中一步，要么直接压缩 4000px 原图，像素依旧巨大，只是画质变差；要么只缩小像素，不做压缩，文件体积依旧偏大。两种操作需要配合完成，才可以得到兼顾清晰度和体积的网页图片。雍熙项目的图片处理规范当中，产品大图单张尽量控制在 200KB 以内，banner 主视觉图尽量控制在 350KB 以内，在企业官网场景是比较合理的参考标准。

3.2 绝对不要做的操作：把小像素图片强行放大

很多企业手上只有一张 600px 宽度的产品图，想要放到 1200px 宽度的网页容器，直接使用修图软件把图片强行放大到 1200px。图片没有新增任何真实细节，只是软件插值模拟像素，画面会变得模糊、充满锯齿，细节丢失严重。网页图片处理有一条铁律：只可以把大像素图片缩小使用，不要把小像素图片强行放大来用。如果原始素材像素不足，需要重新拍摄、重新渲染获取高清源文件，而不是依靠软件放大弥补清晰度。

3.3 网页图片常见的错误压缩方式

第一种错误，无限度压低压缩质量，一味追求小体积。把 JPG 质量压到 40 以下，文件很小，但是画面出现大量色块，产品表面纹理、文字细节糊掉，B 端企业官网传递专业感的能力直接受损。B 端网站优先保证品牌视觉质感，不能为了追求加载速度牺牲基础画面品质，需要寻找平衡点。

第二种错误，反复多次保存压缩同一张图片。JPG 属于有损格式，每一次另存压缩，都会丢失一部分细节。一张 JPG 图片反复编辑、反复导出，多次压缩迭代之后，画质会越来越差。正确做法是保存原始高质量源文件，每次需要网页版本的时候，从原始文件重新导出网页版本，不要反复修改已经压缩好的网页图片。

四、企业官网项目当中网页图片高频踩坑点解析

结合上海雍熙大量 B 端官网定制项目的实际交付经验，我们梳理在项目对接、素材交付、上线运维阶段，企业方最容易遇到的图片相关问题，理解底层知识点之后，就可以规避这些隐患。

4.1 坑点一：直接交付相机原图、印刷源文件作为网页素材

很多企业给到建站服务商的素材，直接是相机拍摄的四五千像素原图，或者用于画册印刷的 300PPI 大图。这类图片细节充足，但是体积巨大，单张图片几 MB 甚至十几 MB。如果没有二次处理直接上传网站，首页放置几张大图，首页加载体积直接飙升，网络一般的环境下，网站打开会非常缓慢，搜索引擎也会因为页面加载性能差，间接影响网站自然搜索表现。

这里需要厘清一个角色分工，正规定制建站项目，设计师会完成图片二次处理，但企业交付原始素材的时候，最好不要把印刷、相机原始大图直接当作网页成品素材。可以提前和设计团队确认每一类图片需要的像素规格，从源头减少无效的超大素材输入。

4.2 坑点二：一套图片同时兼顾 PC 端与移动端，没有独立裁切

不少网站不管 PC 大屏还是手机小屏，共用同一套图片素材。PC 端 1920px 宽的 banner 直接在手机端缩小展示，不仅仅是加载多余像素浪费流量，更严重的问题是画面构图失效。电脑宽屏的横幅 banner，主体人物、产品居中排布，缩小到手机竖屏，主体内容被左右裁切掉，核心产品、slogan 文字跑到屏幕可视区域之外，手机端看不到完整的重点信息。

高端企业官网的处理方案，就是 PC 端、移动端分别裁切构图，不只是缩小尺寸，画面构图也重新适配竖屏。雍熙在宇通客车、宁德时代的官网项目中，首屏主视觉全部提供 PC 与移动端两套裁切版本，保证在不同设备上面核心视觉主体完整可见。很多模板建站不会做独立裁切，直接缩放图片，就很容易出现移动端 banner 主体缺失的问题。

4.3 坑点三：格式选错，该透明用 JPG，该用照片用 PNG

部分企业运营人员分不清格式差异，把需要透明背景的免抠产品图存成 JPG，结果产品四周多出难看的白色方块，放到深色网页板块上面，出现一圈白边，破坏页面视觉效果。反过来，把实景工厂摄影图全部保存为 PNG 格式，图片体积膨胀数倍，拖慢整个页面访问速度。

简单的快速判断口诀可以记住：实拍照片、实景 banner 优先 JPG/WebP；需要透明背景的产品免抠图、logo 图形优先 PNG/WebP；图标 logo 优先 SVG；照片不要用 PNG，透明素材不要用普通 JPG。

4.4 坑点四：图片比例混乱，网页网格布局下图片拉伸变形

前面我们讲解过网格系统，企业官网大量卡片、分栏模块，是建立在网格系统之上。产品列表卡片、案例卡片，都有预设好的图片容器比例。但是很多企业交付的产品图片长宽比例五花八门，有的 1:1 正方形，有的 3:2，有的 4:3。如果网站后台没有做统一裁剪处理，就会出现两种结果：要么图片被强行拉伸，产品实物变形扭曲；要么图片上下出现大量空白黑边，整套列表卡片高低错落，破坏网格带来的整齐版式。

正泰电器、固德威产品官网，项目前期就会给到客户图片比例规范，产品列表缩略图统一固定比例。企业提供素材的时候尽量按照比例准备，避免后期网站出现卡片高度参差不齐的问题。如果原始素材比例无法修改，就需要设计师统一裁切构图，适配网页容器，保障整套页面版式秩序。

4.5 坑点五：忽略图片版权，直接从网络下载图片用于官网

网页图片除了技术参数，还有容易被忽视的版权问题。很多企业直接从搜索引擎下载网络图片放到官网，没有获取商用授权，上线之后有图片版权侵权风险。B 端官网作为对外商业传播载体，所有实拍图、渲染图、配图，都要保证具备合法商用权限。雍熙在项目当中，会提醒合作客户优先使用自有工厂实拍、自有 3D 渲染图，或者采购正版商业图库素材，规避版权隐患。

五、面向不同角色的网页图片落地实操建议

读完前面的知识点，针对网页设计师、企业市场运营人员、甲方项目负责人三类不同角色，结合 B 端企业官网的业务特点，给到可落地实操建议。

• 如果你是网页设计师，在 B 端官网项目处理图片，首先明确每一个页面板块图片的最大容器像素，确定 2 倍图是否需要启用；区分素材类型选择图片格式，图标 logo 尽量输出 SVG；实拍摄影图以 JPG/WebP 为主，透明免抠图形素材使用 PNG/WebP；项目前期输出图片素材规范给到客户，明确 banner、产品主图、列表缩略图、正文配图分别需要的像素、比例要求，提前规避客户交付素材五花八门的情况；PC 和移动端重要主视觉分开裁切构图，而不是单纯缩小尺寸；同时保留传统 JPG、PNG 作为 WebP 的兼容兜底版本，照顾老旧浏览器访问场景；原始源文件妥善留存，网页输出版本不要覆盖原始素材。

• 如果你是企业市场运营人员，日常负责官网素材更新上传。不要直接把相机原图、印刷大图直接上传网站后台，上传之前裁剪掉图片四周无效空白；分清图片用途，照片类不要存 PNG 格式；WebP 格式尽量不要保存为本地素材库源文件，源文件保留 JPG/PNG；不要强行把小图片放大之后上传网站；更新产品、案例图片的时候，尽量遵循网站已有的图片比例，避免卡片列表出现高低不一的混乱效果；不要直接下载网络无版权图片上线官网。

• 如果你是甲方项目负责人，本身不做图片处理，但是需要审核网站设计稿、验收上线官网。不需要精通软件操作，但是可以掌握几个简单判断维度。第一，观察网页在电脑、手机打开速度，如果简单页面加载很久，就要留意是否存在大量超大未优化图片；第二，观察产品卡片、案例列表图片，看是否存在大量拉伸变形、卡片高度参差不齐；第三，手机端重点查看首屏 banner，确认核心产品、文字没有被画面裁切丢失；第四，看透明免抠产品图放到深色板块上，是否出现多余白边；第五，确认网站素材都具备商用版权。掌握这些简单判断点，就可以识别大部分图片带来的质量缺陷。