企业官网图片素材怎么处理：尺寸、格式与压缩的 6 条规范

为什么要先定尺寸再压缩？

图片处理的第一步是确定输出尺寸，而不是压缩；尺寸一旦定错，无论用多好的压缩工具，结果不是模糊就是白占流量。常见做法是按展示位置反推尺寸，而不是按原图大小上传。

• 横幅大图：输出宽 1920px，高度按原图比例，足够覆盖常见桌面屏。
• 产品图、案例图：详情页输出宽 800 到 1200px，列表缩略图 400 到 600px。
• 头像、图标：实际显示多大就输出多大，常见区间是 80 到 200px。

根据百度搜索资源平台对页面体验的建议，图片尺寸应与展示区域匹配，避免用大图缩小显示。

该选 JPG、PNG 还是 WebP？

照片类一律输出 WebP，需要透明背景的 Logo 用 PNG，只有要印刷或二次编辑的原稿才保留 JPG 或 TIFF。

• WebP：同等画质下体积通常比 JPG 小 25% 到 35%（据我们项目经验，结合主流编码工具的公开说明，具体以官方最新公告为准）。
• PNG：适合 Logo、图标、需要透明底的图片，颜色数量少时体积更小。
• SVG：图标、图形类优先使用，放大不失真。

对中小企业官网来说，统一输出 WebP 并保留 JPG 兜底，是兼容性上比较稳妥的做法，实际支持情况以目标浏览器版本为准。

压缩到多大算合理？

单张图片控制在 200KB 以内，整页图片总量控制在 1MB 到 2MB，首屏加载通常能落在 2 到 3 秒内。

• 有损压缩质量参数设在 75 到 85，肉眼基本看不出差别。
• 先压缩再上传，不要依赖后台程序自动压缩。
• 用 squoosh、tinypng 这类工具批量处理，处理完逐张检查文字边缘。

原图一定要另存一份。我们在交付时会把原始像素素材单独归档，只输出压缩后的展示版本，方便后续改版直接复用。

文件名、alt 与加载方式怎么写？

图片文件名用拼音或英文短横线，alt 写清图片内容，这两项直接影响图片搜索的收录效果。

• 文件名：anqing-guanwang-anli-01.webp，不要用 IMG_2381.jpg。
• alt：写"安庆某机械公司官网首页截图"这类描述，而不是堆砌关键词。
• 加载：非首屏图片加 loading="lazy"，首屏图不要懒加载，否则可能拖慢渲染。

上线前要检查的 3 个常见错误

1. 直接把手机原图（宽 4000px 以上、单张 5MB 以上）传到后台。
2. 为了"更清晰"把小图放大输出，结果文字发虚、边缘出现锯齿。
3. 全站只保留一份尺寸，列表页和详情页共用同一张大图。

图片处理属于上线前一次性投入、长期受益的工作，改版时尤其要重新过一遍。

玉晗网络（安徽安庆）在承接企业网站建设、微信小程序开发时，会把素材规范一并写进交付清单，涵盖原图归档、输出尺寸、压缩参数与 alt 写法，中小企业拿到后可以照着复用。