基于.NetCore开发博客项目 StarBlog – (20) 图片显示优化

前言

我的服务器带宽比较高，博客部署在上面访问的时候几乎没感觉有加载延迟，就没做图片这块的优化，不过最近有小伙伴说博客的图片加载比较慢，那就来把图片优化完善一下吧~

目前有两个地方需要完善

• 图片瀑布流
• 图片缩略图

图片瀑布流

关于瀑布流之前的文章有介绍： 基于.NetCore开发博客项目 StarBlog – (10) 图片瀑布流

不过当时直接套用的 Bootstrap5 例子代码，有偶尔显示错位的bug

我又去看了一下 masonry-layout 的官网，找到这个bug的原因：瀑布流在图片还没加载完成就渲染好了，而图片的大小不一，造成了最终显示错位。

解决方法也很简单，用 imagesLoaded 这个库，它有个事件，在全部图片加载完成后触发，在事件响应里面再渲染一次瀑布流，就搞定了~

masonry-layout 这个库里面不附带 imagesLoaded ，要用必须自己安装。

我用的版本是 5.0.0

yarn add imagesloaded

在 StarBlog.Web 的 gulpfile.js 里配置一下路径

// 使用 npm 下载的前端组件，自定义存放位置
const customLibs = [
  // ...
  {name: 'imagesloaded', dist: './node_modules/imagesloaded/*.js'},
]

然后执行 gulp move

接着，修改一下图片页面 StarBlog.Web/Views/Photography/Index.cshtml

引入 js 依赖，我这里还用了 environment tag helper，可以根据不同的环境引入不同的文件。在开发环境引入完整 js 文件，生产环境引入 “*.min` 文件。

@section bottom {
    <environment include="Development">
        <script src="https://www.cnblogs.com/deali/p/~/lib/jquery/dist/jquery.js"></script>
        <script src="https://www.cnblogs.com/deali/p/~/lib/masonry-layout/dist/masonry.pkgd.js"></script>
        <script src="https://www.cnblogs.com/deali/p/~/lib/imagesloaded/imagesloaded.pkgd.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://www.cnblogs.com/deali/p/~/lib/jquery/dist/jquery.min.js"></script>
        <script src="https://www.cnblogs.com/deali/p/~/lib/masonry-layout/dist/masonry.pkgd.min.js"></script>
        <script src="https://www.cnblogs.com/deali/p/~/lib/imagesloaded/imagesloaded.pkgd.min.js"></script>
    </environment>
    <script src="https://www.cnblogs.com/deali/p/~/js/photo.js"></script>
}

把图片列表部分的代码改一下

<div id="photo-grid" class="itdwcnwqseo row">
  @foreach (var photo in Model.Photos) {
    <div class="itdwcnwqseo col-sm-6 col-lg-4 mb-4 grid-item">
      <partial name="Widgets/PhotoCard" model="photo"/>
    </div>
  }
</div>

然后是 js/photo.js里的 js 代码

// init Masonry
let $grid = $('#photo-grid').masonry({
    itemSelector: '.grid-item',
    percentPosition: true,
})
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
});

搞定~

图片缩略图

一开始我用的是 SixLabors.ImageSharp.Web 这个库

挺方便的，以中间件的形式使用

通过 Nuget 安装之后，在 program.cs 里配置一下

// 注册服务
builder.Services.AddImageSharp();
// 添加中间件
app.UseImageSharp();

之后就可以在任意图片文件的地址后面加上 width=xxx&format=xxx 这样的参数来实现调整大小和转换格式了~

图片列表的每个图片我做成了一个 partial view 组件，在 StarBlog.Web/Views/Shared/Widgets/PhotoCard.cshtml 这个文件

要把这个改成缩略图，只需要修改一下 img 元素

现在每个图片缩略图宽度300（宽度自适应），格式转换成 webp

<img class="itdwcnwqseo bd-placeholder-img card-img-top" src="https://www.cnblogs.com/media/@Model.FilePath?width=300&format=webp" alt="">

这个中间件还有很多其他参数可以设置，我只用到两个，详情可以看文档： https://docs.sixlabors.com/articles/imagesharp.web/processingcommands.html

Progressive JPEG

本来用 ImageSharp.Web 中间件已经够好了

但还有一点美中不足，就是它不支持生成 progressive JPEG 图片，这样就没办法在加载图片的时候先显示一个模糊的轮廓，再逐渐变清晰，而是从上到下一行一行加载，不好看~

所以，我用了 Magick.NET 这个库来实现生成 progressive JPEG 格式的图片。

这个库有三种版本：Q8, Q16, Q16-HDRI

根据官网文档，我选择了它推荐的 Q8 版本，性能最好 （图片质量无所谓了）

使用 nuget 安装 Magick.NET-Q8-AnyCPU 这个库

修改 StarBlog.Web/Services/PhotoService.cs

现在我要来写一个生成缩略图的方法

/// <summary>
/// 生成Progressive JPEG缩略图 （使用 MagickImage）
/// </summary>
public async Task<byte[]> GetThumb(string id, int width=300) {
  var photo = await _photoRepo.Where(a => a.Id == id).FirstAsync();
  using (var image = new MagickImage(GetPhotoFilePath(photo))) {
    image.Format = MagickFormat.Pjpeg;
    image.Resize(width,0);
    return image.ToByteArray();
  }
}

接着再写个接口

编辑 StarBlog.Web/Apis/PhotoController.cs

[HttpGet("{id}/Thumb")]
public async Task<IActionResult> GetThumb(string id, [FromQuery] int width = 300) {
  var data = await _photoService.GetThumb(id, width);
  return new FileContentResult(data, "image/jpeg");
}

搞定。

现在只需要访问 /Api/Photo/{图片ID}/Thumb?width=300 这个地址，就可以生成 progressive JPEG 格式的缩略图了~

最后再来改造一下 StarBlog.Web/Views/Shared/Widgets/PhotoCard.cshtml 组件

<img class="itdwcnwqseo bd-placeholder-img card-img-top" alt=""
         src="https://www.cnblogs.com/deali/p/@Url.Action("GetThumb", "Photo", new {id = Model.Id, width = 300})">

okk~

小结

相比起 ImageSharp.Web 中间件自带缓存的特性，我这个自己写的缩略图方法是比较粗糙的，而且每次请求都是动态生成，会给服务器带来一定压力。

不过它没有 Progressive JPEG 呀，这个功能缺失真的太难受了，只能期待它早日实现这个功能吧~

不然就只能我自己来实现缓存功能提高性能了~

系列文章

• 基于.NetCore开发博客项目 StarBlog – (1) 为什么需要自己写一个博客？
• 基于.NetCore开发博客项目 StarBlog – (2) 环境准备和创建项目
• 基于.NetCore开发博客项目 StarBlog – (3) 模型设计
• 基于.NetCore开发博客项目 StarBlog – (4) markdown博客批量导入
• 基于.NetCore开发博客项目 StarBlog – (5) 开始搭建Web项目
• 基于.NetCore开发博客项目 StarBlog – (6) 页面开发之博客文章列表
• 基于.NetCore开发博客项目 StarBlog – (7) 页面开发之文章详情页面
• 基于.NetCore开发博客项目 StarBlog – (8) 分类层级结构展示
• 基于.NetCore开发博客项目 StarBlog – (9) 图片批量导入
• 基于.NetCore开发博客项目 StarBlog – (10) 图片瀑布流
• 基于.NetCore开发博客项目 StarBlog – (11) 实现访问统计
• 基于.NetCore开发博客项目 StarBlog – (12) Razor页面动态编译
• 基于.NetCore开发博客项目 StarBlog – (13) 加入友情链接功能
• 基于.NetCore开发博客项目 StarBlog – (14) 实现主题切换功能
• 基于.NetCore开发博客项目 StarBlog – (15) 生成随机尺寸图片
• 基于.NetCore开发博客项目 StarBlog – (16) 一些新功能 (监控/统计/配置/初始化)
• 基于.NetCore开发博客项目 StarBlog – (17) 自动下载文章里的外部图片
• 基于.NetCore开发博客项目 StarBlog – (18) 实现本地Typora文章打包上传
• 基于.NetCore开发博客项目 StarBlog – (19) Markdown渲染方案探索
• 基于.NetCore开发博客项目 StarBlog – (20) 图片显示优化

参考资料

• https://imagesloaded.desandro.com/
• https://docs.sixlabors.com/articles/imagesharp.web
• https://github.com/dlemstra/Magick.NET