有些照片，值得多留住一秒。

风吹过树梢，水面泛起涟漪，或者一个人刚好转过头。静态照片留下了构图，短短的动态则补回一点当时的气氛。个人博客如果能容纳这样的瞬间，生活记录会更有温度。

读到张洪 Heo 关于网页展示 Live Photo 的文章后，我想整理一个适合个人博客的使用思路：把动态留给需要它的画面，让阅读本身保持安静。

先想清楚：这张照片为什么要动

我更愿意把实况照片放在有细微变化的地方：一杯刚冒出热气的咖啡、一段被风吹动的窗帘、一次短暂的回眸。动态能补充画面没有交代完的信息，这样的素材才值得保留。

如果一张图承担的是文字说明、步骤指引或界面展示，清晰的静态图片往往已经足够。读者需要停下来辨认信息，反复运动的画面反而会增加负担。

对博客来说，我希望读者先看见照片，感兴趣时再主动查看动态。页面效果应该服务内容，不能让每一段文字都在和动图争夺注意力。

决定怎样保存素材？

洪绘 Live 图提供合成、在线播放和网站嵌入入口。按其当前说明，网页展示可通过 heolivephoto.js 配合图片标签实现；桌面端悬浮实况徽标触发，触屏设备长按触发。

整理素材时，可以把文件分成三类：

  • 原始素材：照片和对应的视频。先完整备份，后续重新制作时还有来源可找。

  • 合成结果：工具导出的 PVT 或 Live JPEG。输出以工具实际支持的格式为准，不靠修改扩展名转换。

  • 网页展示资源：博客使用的图片、视频及脚本地址。它们还涉及存储、加载和浏览器兼容问题。

“文件合成成功”和“网页可以播放”是两件需要分别检查的事。一个文件便于整理，也不能据此判断它一定比另一种方式节省流量。

放进博客，要检查哪些地方

在 Halo 里写入图片地址只是接入的一部分。文章编辑器是否保留所需属性、主题如何加载脚本、图片灯箱如何处理点击，以及资源地址能否稳定访问，都可能影响最终效果。

工具首页提供的接入方式可以作为起点。下面采用封面与视频分开的示例，便于明确静态图片的地址：

<!-- 以下路径均为占位示例，需替换为本站实际资源地址 -->
<script src="/assets/heolivephoto.js" defer></script>

<img
  src="/upload/photo-cover.jpg"
  data-live-video="/upload/photo-motion.mp4"
  alt="风吹过窗边的树叶"
  style="max-width:100%;height:auto;"
>

脚本应按主题支持的方式加载，避免每张图片重复引入。涉及主题的调整，先在测试页面验证。上面的代码用于说明资源之间的关系，本站尚未完成 Live Photo 播放接入测试。

如果使用云盘直链保存博客图片，要把注意力放在长期可用性上：地址是否会过期、匿名访问是否正常、有没有防盗链限制，以及流量规则是否适合公开页面。能在自己的登录状态下打开文件，还不足以说明所有读者都能看到。

延伸阅读：本文选题受到张洪 Heo 的《如何在网页插入 livephoto？》启发。工具功能与接入方式参考洪绘 Live 图官方页面（查阅日期：2026 年 10 月 24 日）。本文重新组织使用思路并补充个人博客维护建议。