这几天给博客做了很多优化，由于原博客作者给这个主题留了一些坑。所以我必须要修改下主题参数和代码。其中图片优化是必须的,图片我都是存储在腾讯云COS存储桶，具体流程是：

Markdown文章图片 → PicGo 上传原图到 COS → Hugo 渲染时自动加参数以博客html呈现

不过，现在随着我写博客文章越来越多。博客网页加载图片越来越慢、越来越卡。picgo上传图片已快达到100张，而且各种格式的图片（比如jpg|png|svg等）都有，导致markdown图片加载拖慢文章进度。这里我必须考虑图片懒加载和统一图片为webp格式。图片优化可以做到图片懒加载和转换各图片格式为webp，而这二者的介绍为：

图片懒加载又称为延迟加载，滚动内容到具体内容下方时，才会加载图片。而webp是由谷歌于2010年发布的，具体是可以通过转换其它例如jpg、png、svg为webp,从而压缩图片内容，但是又和jpg、png、svg的图片质量相当，减少图片档在网络上的发送时间。

1.在_markup创建图片渲染

在layouts/_default/_markup/render-image.html中，把render-image的原代码：

{{if .Page.Site.Params.fancybox }}
<div class="post-img-view">
<a data-fancybox="gallery" href="{{ .Destination | safeURL }}">
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
</a>
</div>
{{ end }}

直接添加懒加载和webp格式，取消fancybox的参数，修改为：

<img 
  src="{{ .Destination | safeURL }}?imageMogr2/format/webp" 
  alt="{{ .Text }}" 
  {{ with .Title}} title="{{ . }}"{{ end }} 
  loading="lazy" 
  decoding="async" 
/>

当然，这个只能渲染markdown格式的图片，如果是和裸链接：

<img src="https://xxx.com/photo.jpg"/>
https://xxx.com/photo.jpg

就必须考虑在其后辍手动加上?imageMogr2/format/webp和loading="lazy"（裸连不需要添加loading="lazy"），记得在储存桶列表>数据处理>图片处理，打开图片极智压缩。如果用于博客，一年也才几块钱而已。而且免费一个月：

当然，担心费用。也可以考虑只用懒加载。懒加载不依赖任何云服务，直接改 render-image.html 只加 loading="lazy" 就行，简单安全。像这样：

<img src="https://xxx.myqcloud.com/photo.jpg loading="lazy" />

如果添加了转换为webp压缩图片格式,<img>就可以写成：

<img src="https://xxx.myqcloud.com/photo.jpg?imageMogr2/format/webp" loading="lazy" />

2.观看是否生效

有没有生效，直接看图片链接后面有没有转换为<img src="https://xxx.myqcloud.com/photo.jpg?imageMogr2/format/webp" loading="lazy" />（假如是.jpg格式），或者直接博客的下载一张图片，基本上会发现与原图片相比，图片内容大小压缩到几乎三分之一，显示图片格式为webp就代表设置成功了。