Bitiful_toolkit

Intro

[!NOTE]

A very compact representation of an image placeholder. Store it inline with your data and show it while the real image is loading for a smoother loading experience. It's similar to BlurHash but with the following advantages:

• Encodes more detail in the same space
• Also encodes the aspect ratio
• Gives more accurate colors
• Supports images with alpha
• Despite doing all of these additional things, the code for ThumbHash is still similar in complexity to the code for BlurHash. One potential drawback compared to BlurHash is that the parameters of the algorithm are not configurable (everything is automatically configured).

The code for this is available at https://github.com/evanw/thumbhash and contains implementations for JavaScript, Rust, Swift, and Java. You can use npm install thumbhash to install the JavaScript package and cargo add thumbhash to install the Rust package.

progressive_image 会请求 bitiful server，拿到 thumbhash base64 text，多次运行可能会浪费请求次数，bitiful 计费参考计费概述 - 缤纷云文档 因此本地测试环境设置不启用；如需开启，设置$env.CI = true，CI/CD Pipeline 同理；

if (
  !hexo.config.bitiful_toolkit ||
  !hexo.config.bitiful_toolkit.enable ||
  process.env.CI !== "true"
) {
  //
  log.info("[BITIFUL] Skip Image Processing...");
  return;
}

本次测试时，可以直接运行bun run test，在浏览器打开/test/output/index.html查看效果。效果如图所示

README.webm

TODO-List

• [x] config.yaml 中 bitiful_toolkit 新增 env_name 选项，可自定义环境变量名
• [x] 缓存 img_url: data-url 键值对到本地文件(.thumbcache.json)
  • 每次 build 前，从 hexo 根目录加载缓存文件到内存。
  • 在获取 img url 对应的 data-url 前，先检查本地缓存是否存在 img_url 对应的 data-url
    • 如果存在，直接使用 data-url
    • 否则，请求 bitiful 服务获取 thumbhash base64 text，并转换为 data-url 后存储到本地缓存
  • build 完成后，将更新的缓存文件保存到 hexo 根目录，供下次使用

Setup

bun add git+https://github.com/Efterklang/Bitiful_Responsive_And_Progressive_Image

bitiful_toolkit:
  enable: true
  env_name: "CI" # 如果存在环境变量CI的值为true，才进行图片处理
  all: false
  srcset_widths: [200, 400, 600, 800, 1200, 2000, 3000]
  add_max_width: false
  max_widths: "(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  enable_lazy_loading: true
  supported_domains: ["assets.vluv.space", "s3.bitiful.net", "bitiful.com"]
  exclude_formats: ['svg', 'gif'],
  inject_css: true
  cache:
    enable: true
    cache_file: ".thumbcache.json" # 缓存文件名，存储在hexo根目录
    cache_key: "img_src" # 缓存键名选择，可选: "img_src" 或 "img_filename"

缓存功能说明

新增的缓存功能可以将图片 URL 到 data-url 的映射关系缓存到本地文件，避免重复请求 Bitiful 服务：

• 构建开始前：自动从 hexo 根目录加载缓存文件
• 图片处理时：优先检查缓存，命中则直接使用，未命中才请求 Bitiful API
• 构建结束后：将更新的缓存文件保存到 hexo 根目录

Ref

• ThumbHash: A very compact representation of an image placeholder
• 图像 BlurHash 与 ThumbHash 哈希占位技术： - 缤纷云文档