Day14 - Astro Series: Image Optimization

Astro 系列文第十四日：图片优化

@ Astro

一个漂亮的渐变背景上面有一句标题：「图片优化」

前言

通常文档会伴随图片，图片可能占据页面大部分的计算资源和流量！你希望图片被妥善处理，避免它们拖垮整个网站的体验，Astro 默认自带相关组件和方法来帮助你处理这些事务。

存放图片位置 src/ vs public/

有两个地方可以放置项目的图片： src 或 public 文件夹，区别在于 Astro 只会对来自 src 的图片进行转换或优化，因此只要希望图片经过处理，建议放在 src 文件夹内，反之可放在 public/ 文件夹内。

转换与优化图片

通过提供合适的图片尺寸、加载策略、格式或质量可以有效提高页面加载效率，Astro 内建 <Image /> 组件就是为帮助我们实现这个目的。首先可以从 astro:assets 来引入该组件，并且应用在模板中。

---
import { Image } from 'astro:assets'
import myImage from '../assets/image.png'
---


<Image src={myImage} alt="圖片的 alt 註解" />

通过 <Image /> 组件将会产生以下结果，可以看到图片默认自动添加了不少属性：

<img src="/_astro/image.hash.webp" width="1600" height="900" decoding="async" loading="lazy" alt="圖片的 alt 註解" />

这些属性的默认值并不能更改，但仍然可以自建组件来封装并设置它们🔗，具体来说有以下几点属性：

  • src (必需)：来源。该属性根据图片存放的位置也会有所不同。
    • 本地图片在 src/ 文件夹：你需要 import 图片并通过定义好的名称在 src 属性当中。
    ---
    import { Image } from 'astro:assets';
    import myImportedImage from `../assets/my-local-image.png`
    ---
    <Image src={myImportedImage} alt="descriptive text" />
    • 本地图片在 public/ 文件夹
    ---
    import { Image } from 'astro:assets';
    ---
    <Image
      src="/images/my-public-image.png"
      alt="descriptive text"
      width="200"
      height="150"
    />
    • 远程图片
    ---
    import { Image } from 'astro:assets';
    ---
    <Image
      src="https://example.com/remote-image.jpg"
      alt="descriptive text"
      width="200"
      height="150" />
  • alt (必需)：替代文字。提供具描述性的图片替代文字🔗是必需的，如果图片纯为装饰用途可传入空字符串，这样屏幕阅读器或其他网页辅助软件便知道该图片可以略过。
  • width 和 height：宽和高。当图片来源来自 public/ 或远程图片时，Astro 无法分析这些图片的详细属性，因此需要额外补充以避免布局偏移🔗问题。
  • format：图片格式，默认将会产生并使用 .webp 格式的图片。
  • quality
    • 程度 low、mid、high、max（用于在不同格式间标准化质量程度）
    • 一个从 0 到 100 的数字（不同格式之间有不同的解释）
  • 额外属性（所有 <img> 接受的属性）

总结

通过对图片一连串的处理像是：撰写替代文字、描述宽高、懒加载、提供合适的尺寸与格式、大小，正确地处理图片绝对是优化网页体验性价比最高的选择。

延伸阅读