Responsive images in Hugo using Render Hooks
2 days ago
- #WebP
- #Responsive Images
- #Hugo
- 文章讨论了从2022年使用Hugo短代码处理响应式图像（JPEG和WebP格式），到2026年转为使用渲染钩子（Render Hooks）的演变过程，因为WebP如今已获得浏览器的广泛支持。
- 渲染钩子通过在layouts/_default/_markup/render-image.html文件中实现，它会生成调整大小的WebP和JPEG图像，使用srcset为WebP提供多种分辨率选项，并以JPEG作为后备方案，无需使用<picture>元素。
- 渲染钩子能自动处理Markdown文件中引用的图像，支持页面包（将图像放置在Markdown文件旁边），并允许通过Hugo配置设置WebP图像的质量参数。