Astro画像最適化の完全ガイド：読み込み速度を50%改善する5つの実践テクニック

はじめに

先月、意気揚々とAstroで技術ブログを立ち上げました。しかし、スマホで開いてみて愕然としました。
画像の表示に6秒もかかる…
高解像度のカバー画像やスクリーンショットをそのまま貼っていたため、1ページで数MBもの巨大な通信が発生していたのです。

そこから2日間、Astroの画像最適化にとことん向き合いました。Imageコンポーネントの深堀り、フォーマット比較、遅延読み込み、CDN設定…。
結果、初期ロード時間は1.8秒まで短縮され、Google Lighthouseのスコアは62点から95点へ爆上がりしました。95点の緑色のリングを見た時の達成感と言ったら！

この記事では、私が実践して効果があった最適化テクニックを全て公開します。「なんとなく <img /> タグを使っている」あなた、必見です。

Railway - モダンなデプロイプラットフォーム、煩わしい運用から解放、数分で公開

今すぐ始める →広告

なぜ画像の最適化が最重要なのか

多くの開発者がコードのバンドルサイズを気にして数KBを削ろうと努力しますが、実は画像1枚のサイズ削減の方が遥かに効果的です。
Webページのデータ量の60〜70%は画像が占めています。

Googleの厳しい基準

GoogleのCore Web Vitalsには LCP (Largest Contentful Paint) という指標があります。これは「メインコンテンツ（多くの場合、メイン画像）が表示されるまでの時間」です。
2.5秒以内が合格ラインですが、最適化していない画像を使うと、このラインを軽々と超えてしまいます。LCPが悪いと、検索順位（SEO）に直結します。

実測データ：驚異の改善効果

私のブログでの最適化前後の比較です。

Astro Imageコンポーネント完全ガイド

Astroには <Image /> と <Picture /> という2つの強力なコンポーネントが組み込まれています。これらを使うだけで、面倒な処理を自動化できます。

基本：Image vs Picture

最もよく使うのは <Image /> です。

---
import { Image } from 'astro:assets';
import coverImage from '../assets/blog-cover.jpg';
---

<Image
  src={coverImage}
  alt="ブログカバー画像"
  width={1200}
  height={630}
/>

これだけでAstroは以下の処理を自動で行います：

1. 画像の圧縮
2. WebP形式への変換（デフォルト）
3. サイズ情報の付与（CLS防止）
4. 遅延読み込みの設定

一方、<Picture /> はより高度な制御が必要な場合に使います。

---
import { Picture } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
---

<Picture
  src={heroImage}
  formats={['avif', 'webp', 'jpeg']}
  alt="ヒーロー画像"
  width={1920}
  height={1080}
/>

これは <picture> タグと複数の <source> タグを生成し、ブラウザが対応している中で「最も軽量なフォーマット（AVIFなど）」を自動選択させることができます。

Alibaba Cloud - 開発者向けクラウドの第一候補、ライトサーバー15%OFF、プロジェクトの迅速な立ち上げを支援

15%割引を入手 →広告

知っておくべき重要プロパティ

widths & sizes - レスポンシブ対応

<Image
  src={image}
  widths={[400, 800, 1200]}
  sizes="(max-width: 768px) 400px, (max-width: 1024px) 800px, 1200px"
  alt="レスポンシブ画像"
/>

スマホには400pxの画像を、PCには1200pxの画像を提供します。無駄な通信を劇的に減らせます。

quality - 画質設定
low, mid, high もしくは 0-100 の数値で指定。
私は通常 quality={80} または mid を推奨します。人間の目には見分けがつかないレベルで、容量を30-40%削減できます。

inferSize - リモート画像の救世主
外部URLの画像を使う場合、サイズが不明だとレイアウトシフト（CLS）の原因になります。

<Image
  src="https://example.com/image.jpg"
  inferSize={true}
  alt="リモート画像"
/>

これを付けると、Astroがビルド時に画像を取得してサイズを計算してくれます。

ローカル画像 vs リモート画像

ローカル画像（推奨）:
src/assets/ に置き、import して使います。Astroのビルドプロセスで完全に最適化されます。

リモート画像:
CMSや外部ストレージから取得する場合、astro.config.mjs でドメインを許可する必要があります。

Vultr - 高性能NVMeクラウドサーバー、世界32拠点、Dockerワンクリック展開対応

価格を見る →広告

// astro.config.mjs
export default defineConfig({
  image: {
    domains: ['images.unsplash.com', 'cdn.my-site.com']
  }
});

public/ フォルダの画像:
最適化されません。そのままコピーされるだけです。ロゴやファビコン以外では使わないようにしましょう。

画像フォーマットの選び方

JPEG, PNG, WebP, AVIF… どれを使えばいいのでしょうか？

私の結論:
迷ったら WebP です。互換性と性能のバランスが最高です。Astroの <Image /> はデフォルトでWebPを出力するので、特に設定はいりません。

遅延読み込み（Lazy Loading）戦略

ページの読み込み速度を上げる一番の近道は、「今見えていない画像を読み込まない」ことです。

loading=“lazy” vs “eager”

• lazy (デフォルト): 画面に近づくまで読み込まない。
• eager: ページを開いた瞬間に読み込む。

戦略:

1. ファーストビュー（首屏）にある画像（ヒーロー画像、ロゴ）は eager にする。
   • これを lazy にすると、LCPが悪化し、画像がパッと表示されずチラつく原因になります。
2. それ以外の全ての画像は lazy にする。

<!-- ヒーロー画像: 即時読み込み -->
<Image src={hero} loading="eager" alt="Hero" />

<!-- 記事内の画像: 遅延読み込み -->
<Image src={content} loading="lazy" alt="Content" />

これだけで初期ロードの通信量を半分以下にできます。

CDN統合：Cloudflare Image Resizing

グローバルに展開するならCDNは必須です。CloudflareのImage Resizing機能を使えば、エッジサーバーで画像をリアルタイムにリサイズ・変換して配信できます。

設定手順:

1. Cloudflare Dashboardで、ドメインの「Speed」→「Optimization」→「Image Resizing」をONにする（無料枠あり）。
2. astro.config.mjs を設定。

import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'server', // SSRまたはHybridモードが必要
  adapter: cloudflare({
    imageService: 'cloudflare' // Cloudflareの画像サービスを使用
  }),
});

これで、Astroは画像の加工処理を自前のサーバー（Node.js）ではなく、Cloudflareの強力なエッジネットワークにオフロードします。サーバー負荷が下がり、配信速度が上がります。

トラブルシューティング

• 画像が表示されない: パスを確認してください。./ ではなく ../ が必要な場合があります。リモート画像ならドメイン許可をチェック。
• ビルドエラー Could not load "sharp": 画像処理ライブラリ sharp が入っていないか、環境に合っていません。npm install sharp を試すか、CI環境のNodeバージョンを確認してください。
• 画像がぼやける: quality を上げてください。また、元の画像サイズが小さすぎないか確認を。

まとめ

画像最適化は、地味ですが効果絶大です。

1. <img> タグをやめて <Image /> コンポーネントを使う。
2. フォーマットはWebPを標準にする。
3. ファーストビュー以外は遅延読み込み（Lazy Loading）。
4. 可能ならCDNを使う。

これらを実践するだけで、あなたのAstroサイトは「重くて遅いサイト」から「爆速サイト」へと生まれ変わります。ぜひ、Lighthouse 95点の世界を体験してください！

4 min read · 公開日: 2025年12月3日 · 更新日: 2026年1月22日

Easton

技術開発