BLOG

ブログ

いつのまにか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をサポートしているため、
ブラウザ標準の画像形式と言って良さそうです。

WebP ブラウザサポート状況(2023/12現在)

はじめに

いきなり結論ですが、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等の代替画像を用意する必要があります。

AVIF ブラウザサポート状況(2023/12現在)

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を候補として検討してみても良さそうです!!

RELATED ARTICLE