いつのまにかAWS AmplifyでWebP/AVIFがサポートされている…？

こちらは、Mavs Advent Calendar2023の7日目の記事です！🤶

ハコザキです。

JSフレームワークで開発した際、
ホスティングプロバイダの選定の際にAWS Amplifyは候補として挙げられれると思います。

1~2年前に弊社コーポレートサイトをNuxt.jsのSSGでデプロイした際、
WebP画像が表示されず、色々試してみたのですが諦めてPNG/JPGで対応しました。

WebPとは??

WebPとは米Googleが開発しているオープン標準の静止画像フォーマットです。
PNG/JPGに比べ、画質が劣化されずに軽量であることや、
透過書き出し可能といった特徴があります。
ウェブ用の画像形式 | WebP | Google for Developers

※よく次世代画像形式と言われますが、
2023年12月現在モダンブラウザはWebPをサポートしているため、
ブラウザ標準の画像形式と言って良さそうです。

はじめに

いきなり結論ですが、AmplifyでWebP画像の表示は可能になっていました。

2022年8月のこちらの方の記事では、webpのサポートはされていないみたいでした。
Amplifyでwebp画像が反映されない？

確かに当時webp対応されておらず、
ローカルでは表示できていたのにAmplifyにデプロイするとwebp画像が表示されない！といった現象はありました..
公式ドキュメントを読んでもサポートしていないと記載あったので諦めてPNG/JPGにしていた記憶があります..
結構前に対応されていたのかもですが、
2023年12月現在、改めて確認したところ表示できていたみたいです。

AWS Amplifyユーザーガイド

Next.js SSR のサポートAmplify します – AWS Amplifyホスティング

サポートされている機能

サーバー側レンダリングページ (SSR)
静的ページ
API ルート
ダイナミックルート
すべてのルートをキャッチ
SSG (スタティック生成)
インクリメンタル・スタティック・リジェネレーション (ISR)
国際化 (i18n) サブパスルーティング
国際化 (i18n) ドメインルーティング
ミドルウェア
環境変数
イメージ最適化
Next.js 13 アプリケーションディレクトリ

サポートされていない機能

エッジ API ルート (エッジミドルウェアはサポートされていません)
オンデマンド・インクリメンタル・スタティック・リジェネレーション (ISR)
国際化 (i18n) 自動ロケール検出

あらためて最新のAmplifyのユーザーガイドを読んでみるとイメージ最適化の項目部分、
AVIFおよびWebPイメージ形式はサポートされていません。
という文章が消えていることに気がつきました..！
サポートすると言ったリリースページは探すことができなかったのですが、
実際に試してみたいと思います！

Next.jsでの動作確認

今回はNext.jsのv14で実装しています。

SSG

~/app/page.tsx を以下のようにしました。
WebP画像を表示しているだけです。

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <picture>
        <source srcSet="/logo_wolf.webp" width="97" type="image/webp" />
        <img src="/logo_wolf.png" alt="Mavs Logo" />
      </picture>
    </main>
  )
}

ローカルではWebPとして画像を配信していることが確認できます。

この状態でAmplifyにデプロイしたいと思います。

Next.js SSGでのAmplifyホスティング

package.jsonを以下のように記述します。

"scripts": {
  "dev": "next dev",
  "build": "next build && next export",
  "build:prod": "next build",
  "start": "next start",
  "lint": "next lint"
},

buildコマンドの他に build:prod を追加したのは、Amplifyのフレームワーク判定をNextjs-SSGにするためです。
今回は以下の記事を参考にしております！
AWS Amplify で Next.js 14 アプリを SSG（静的サイト）としてホスティングする [2023年11月版] – PLAY DEVELOPERS BLOG

Amplifyホスティングのデプロイ画面に移り、amplify.ymlを以下のようにします。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build:prod
  artifacts:
    baseDirectory: out
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

ビルド時に使用するDockerイメージを指定します
構築イメージに public.ecr.aws/docker/library/node:18 を入力します。

実際にデプロイされた環境を確認すると、WebP画像が表示できていました！

AVIFも表示ok

AVIF画像を用意し表示できるか試してみたところ、AVIFも正常に表示できていました！

※ただ、AVIFは2023/12現在、Edgeでのサポートはされていないため、WebP等の代替画像を用意する必要があります。

next/imageのWebP変換でも対応可

next/imageは、画像の表示を最適化してくれるコンポーネントです。

import Image from 'next/image'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Image src="/logo_wolf.png" alt="Mavs Logo" width={97} height={138} />
    </main>
  )
}

ローカルではこのようにPNG画像がWebP変換されて配信されております。

Amplifyホスティングへデプロイして表示確認すると、
next/imageでのWebP変換が動作することを確認できました！！

おわり

今回は、AWS AmplifyがWebP画像をサポートしていることについてご紹介しました。
以前はWebP画像が表示されなかったため、PNGやJPG形式に変換していましたが
最新のAmplifyではWebP画像が表示されるようになっていました。
実際にNext.jsを使用したSSG（Static Site Generation）・SSRでのAmplifyホスティングについて解説しました。next/imageでWebP変換した画像も正常に表示されていました！！

静的サイトやJamstack等のWebサイトを、Amplifyでホスティングする際にWebPが表示できず、
他のホスティングプロバイダにした方は、ぜひ再度Amplifyを候補として検討してみても良さそうです！！