Z-Blog 主题里的图片处理：缩略图、懒加载和别踩的坑

2026-10-04 · zblog · 阅读 12

摘要

主题里图片这块，做对了省一半流量，做错了整页拖慢。缩略图别自己裁Z-Blog 有内置的缩略图机制。附件上传后按配置生成不同尺寸，主题里调现成的就行。自己用 CSS 把大图压小，图还是那个大图，用户照样得下载完。列表页只该加载缩略图。正文里才

主题里图片这块，做对了省一半流量，做错了整页拖慢。

缩略图别自己裁

Z-Blog 有内置的缩略图机制。附件上传后按配置生成不同尺寸，主题里调现成的就行。

自己用 CSS 把大图压小，图还是那个大图，用户照样得下载完。

列表页只该加载缩略图。正文里才用原图。

现代浏览器原生支持。给 img 加 loading="lazy" 一个属性就够了，不用引 JS 库。

但首屏第一张图别加。首屏图要立刻出来，加了 lazy 反而闪一下白。

首屏图加 loading="eager" 或者干脆不写。

img 标签漏掉 width 和 height，浏览器不知道占多大地方，图片加载完页面会跳一下。

这个跳动很影响体验，也算进核心网页指标。

写死宽高比例，或者用 CSS 的 aspect-ratio 给容器定比例。

alt 写清楚图是什么内容。搜图引擎靠它，读屏软件也靠它。

写“图片1”等于没写。写“Z-Blog 后台主题管理页面”才有用。

照片用 webp 或 jpg，图标和截图用 png，纯色小图标用 svg。

svg 是文本，体积最小还能随便缩放。但上传前记得清掉编辑器里的冗余属性。

打开文章页，开发者工具网络面板看图片请求。

首屏之外的图应该还没加载。滚动后才出来。

如果一进页面全下完了，说明 lazy 没生效，回去查那段。

标签

2026年10月04日 07:27 前后30天 · 点日期看归档

9月4日 9月5日 9月6日 9月7日 9月8日 9月9日 9月10日 9月11日 9月12日 9月13日 9月14日 9月15日 9月16日 9月17日 9月18日 9月19日 9月20日 9月21日 9月22日 9月23日 9月24日 9月25日 9月26日 9月27日 9月28日 9月29日 9月30日 10月1日 10月2日 10月3日 10月4日 10月5日 10月6日 10月7日 10月8日 10月9日 10月10日 10月11日 10月12日 10月13日 10月14日 10月15日 10月16日 10月17日 10月18日 10月19日 10月20日 10月21日 10月22日 10月23日 10月24日 10月25日 10月26日 10月27日 10月28日 10月29日 10月30日 10月31日 11月1日 11月2日 11月3日