图片加载优化：清晰度、尺寸与懒加载

尚品优品技术编辑 · 原创教程 · 更新于2026年10月23日 · 约6分钟阅读

网站图片看起来清楚，却可能让页面等待很久；把文件压得很小，又可能让产品图失去细节。优化的目标是让当前画框拿到足够清晰、大小合理的图片。本文从实际素材流程开始，介绍一套适合企业官网与作品站的检查方法。

一、先量画框，再决定导出尺寸

记录图片在电脑和手机上的显示宽度、比例与用途。Logo、产品图、场景横幅和正文插图需要不同处理。产品图应保留关键细节，背景照片则更关注构图。不要把一张很大的原稿不加区分地发送给所有设备。

例如一个宽约 600 CSS 像素的卡片，可以准备适合普通屏幕与高像素密度屏幕的几个版本。真正选择多大，还要看画面细节和文件体积。先在实际页面比较，再确定导出方案，而不是把某个固定像素数当成所有网站的标准。

二、用合适的文件格式保存内容

标志与简单图形可以优先查找原始矢量素材；需要透明背景的位图应保留透明通道；摄影素材可以比较现代格式与常规格式的清晰度和体积。编码后检查文字边缘、渐变、细线和产品纹理，确认压缩没有破坏需要表达的内容。

保留原稿，同时给输出文件使用清晰名称，例如 project-cover-desktop.webp。项目截图与生成展示场景应分开归档。压缩是一种交付处理，不能把压缩后的素材标成新的真实现场照片。

三、让浏览器选择合适的资源

同一构图有多个尺寸时，可以使用 srcset 与 sizes 告诉浏览器有哪些候选资源，以及图片大致占多宽。候选项中的宽度要与真实文件宽度对应。下面是一个两栏卡片的起点，需要根据自己的布局调整。

<img
  src="project-1200.webp"
  srcset="project-600.webp 600w,
          project-1200.webp 1200w,
          project-1800.webp 1800w"
  sizes="(max-width: 48rem) calc(100vw - 2rem), 50vw"
  width="1200" height="800"
  alt="产品展示网站的完整页面效果">

四、给图片预留空间

在图片加载前就让页面知道宽高比例，可以减少内容突然上下移动。使用宽高属性或明确的比例容器，保持资源到达前后的布局一致。图片本身再按容器等比显示。不要依赖图片加载完成之后才把整个区块撑开。

如果横幅与手机图的构图不同，使用 picture 为不同条件提供资源，并检查每种资源的比例。换一张手机图之后，也要验证周围标题和按钮有没有被挤走。浏览器开发工具中的网络面板可以帮助确认实际请求了哪张文件。

五、把懒加载用在合适的位置

位于页面下方、暂时不会进入视口的内容图片，通常可以考虑 loading=lazy。用户一打开页面就需要看到的关键图片，应单独检查加载策略，不要机械地给所有图片都加懒加载。图片少发一个不需要的请求，往往比继续微调压缩参数更直接。

<img src="detail.webp" width="1200" height="800"
  loading="lazy" decoding="async"
  alt="产品详情中的结构与参数说明">

六、最后在页面里确认结果

打开网络面板，在不同窗口宽度下刷新，检查请求尺寸和文件体积。再用较慢网络条件查看首屏是否及时出现、正文是否跳动、滚动到下方时是否出现空白。清晰度检查必须在接近实际显示大小时完成，只看文件管理器缩略图不够。

练习任务：选一张原始照片，导出三个尺寸和两档质量，把文件体积、实际画框和肉眼看到的差异写进表格。然后接入 srcset，再用手机宽度和电脑宽度分别刷新，核对浏览器选择。完成这一步，你就有了一套可以带到下一个项目的图片交付方法。