AstroTK
Astro.js

Astro.js 画像最適化について

#Astro.js

Astroでは、画像表示の際に通常通りにimgタグでの表示と、Astro専用のを使って画像表示することで画像を最適化が可能。

ここでは、後者のを使って画像表示する方法について説明・考察をする

使用方法

src/pages/blog/MyImages.astro

---
import { Image } from 'astro:assets';
import localBirdImage from '../../images/subfolder/localBirdImage.png';
---
<Image src={localBirdImage} alt="巣の中の卵を温めている鳥。"/>
<Image src="/images/bird-in-public-folder.jpg" alt="鳥。" width="50" height="50"/>
<Image src="https://example.com/remote-bird.jpg" alt="鳥。" width="50" height="50"/>

<img src={localBirdImage.src} alt="巣の中の卵を温めている鳥。">
<img src="/images/bird-in-public-folder.jpg" alt="鳥。">
<img src="https://example.com/remote-bird.jpg" alt="鳥。">

imgタグでもインポートした画像表示は可能だが、画像処理はスキップされます。

Cumulative Layout Shift（CLS）の最適化
↑はhttps://pagespeed.web.dev/?hl=jaでのページパフォーマンスの点数の１つであるが、
そちらの最適化もしてくれます。

src/components/MyComponent.astro
---
// Imageコンポーネントと画像をインポートする
import { Image } from 'astro:assets';
import myImage from "../assets/my_image.png"; // 画像は1600x900
---

<!-- `alt`はImageコンポーネントでは必須です -->
<Image src={myImage} alt="画像の説明。" />

<!-- 出力 -->
<!-- 画像は最適化され、適切な属性が必ず付与されます -->
<img
  src="/_astro/my_image.hash.webp"
  width="1600"
  height="900"
  decoding="async"
  loading="lazy"
  alt="画像の説明。"
/>

上記のことから、自分はこの形で画像を導入して表示までおこなっている。
説明文

もちろんインポートせずに画像表示できる
その場合、srcフォルダではなくpublicフォルダに入れてそちらを参照する

公式サイトを参考に
https://docs.astro.build/ja/guides/images/

← Back to Blog