我的网站图片总是加载很慢，实在忍不了，之前还使用 PageSpeed Insights 工具检测时 70、80 多分的样子，现在 90 多分了，暂时已经满足了。 优化网站的图片-20240125182811661.webp

图片占位符

我的这个需求比较简单，刷文章封面的时候，在等图片还没出来前不要白花花一片就行，因此在图片的容器加了个背景色。

.entry-cover {
	background-color: var(--content);
	/* 图片圆角加下面两句，不能直接给图片加，不然背景色会漏出来*/
	border-radius: var(--radius);
	overflow: hidden;
}

如果你想根据图片的尺寸显示对应大小的占位，推荐其它朋友写的 这篇。

CDN

jsdelivr 提供免费的 CDN，用于给 Github 上的图片提速。 配置：

https://cdn.jsdelivr.net/gh/用户名/仓库名@版本号/文件路径

@版本号 可自定义，省略的话表示使用最新的图片。

不过我准备使用前，刷到过说 jsdelivr 有过崩的情况，所以就不敢贸然动手。 于是保险起见我改了 Hugo 模板增加了配置，方便有问题时关闭：

params:
	ImageCDN: "https://cdn.jsdelivr.net/gh/miaogaolin/workspace-obsidian-publisher/static"

修改模板（我使用的是 PaperMod 主题）。

先创建 layouts/partials/image_cdn.html，粘贴内容：

{{ $imgDest := . }}
{{- with site.Params.ImageCDN }}
<!-- 文件不以 http 开头 -->
{{ if not (hasPrefix $imgDest "http") }}
<!-- ImageCDN + /path/image.png -->
{{ $imgDest = (print . (path.Join $imgDest)) }}
{{ end }}
{{- end }}
{{ return $imgDest}}

下来就在你想加 CDN 前缀的地方调用这个模板，调用方式：{{partial image_cdn.html "之前的图片地址" }}。

我的网站有三处需要改：

  1. layouts/_default/_markup/render-image.html markdown 中的 !()[] 图片格式；
  2. layouts/shortcodes/figure.html markdown 中的 {{< figure ... >}} 格式；
  3. layouts/partials/cover.html 文章封面图片。

可以参考 我的目录。

WebP 格式

WebP 的格式能减小图片的大小，原因在这不深究了，我也不知道，我就说说我的使用过程。

引用 Unplash 图片

图片链接上增加参数 fm=webp 即可。

https://images.unsplash.com/photo-1653402438643-b230db019d27?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNjAwOTd8MHwxfHNlYXJjaHw0NHx8aHVnb3xlbnwwfDB8fHwxNzA1MjI3MjkzfDA&ixlib=rb-4.0.3&q=80&w=720

根据自己的网站使用情况也尽可能挑选适合的图片大小。

其它我知道的参数：

  • q：质量, 100 最大值，也就是最好
  • w: 宽度
  • h: 高度

Obsidian 的使用

为啥提到这个工具呢，因为 我的网站 就是使用了 Obsidian 发布网站的，推荐阅读《使用 Obsidian 免费建个人博客》。

所以在上传的网站之前自然而然的要优化好图片格式。 推荐 Image Converter 插件，自动转化你的图片格式。

Unplash 图片可以用 Image Inserter 插件自动导入。

图片变形

我的文章封面图都按照 4:3 的图片比例显示，但是提供的图片可不是所有都按照这个比例,所以会出现图片拉伸情况。

解决办法：

<figure class="entry-cover">
	<img loading="lazy" src="https://images.unsplash.com/photo-1609549389631-a9edc6138b6a?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=webp&amp;ixid=M3wzNjAwOTd8MHwxfHNlYXJjaHw2fHxodWFzaGFufGVufDB8MHx8fDE3MDUxMjAxMjJ8MA&amp;ixlib=rb-4.0.3&amp;q=80&amp;w=720" alt="">
</figure>

重点熟悉 css 的 object-fit 属性，该处的 cover 表示按照比例去填充父级容器，如果溢出了就会裁切掉。

.entry-cover {
	aspect-ratio: 4 / 3;
}

.entry-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

注意：需要设置图片的宽高，object-fit 属性才起效果。