BLOG
ブログ
2024年4月25日
WebPとAVIFへ変換する時に注意したい画像サイズ
サイズが軽い画像フォーマットWebPとAVIFは以前と比べて対応ブラウザも増えて、サイトのパフォーマンス向上にぜひ対応したいですね。
レアケースですが、かなり前に作った社内用のサイトを新しい構築環境の調査も含めてAstro jsで作り直していて、画像の最適化（変換）ができない場面に遭遇しました。
jpgからWebPとAVIFへ変換できず…
制作中はエラーは出ていませんでしたが、ビルドした際にこんなメッセージが。
遭遇したエラーメッセージ（ビルド時）
[CouldNotTransformImage]
# 画像を変換できませんでした
Processed image is too large for the HEIF format
# HEIFフォーマットには大きすぎ単純に画像が大きすぎるのが原因のようです。
サイトのスクショだったのでかなり縦長だったんですよね。
また、途中までエラーが出ずに気付かなかったのは
1〜3辺りまで見て問題ないと思って進めていたら11番の拡大画像が駄目だったのが原因です。
ちなみに制作中（dev）に該当の画像を開くと、こんな感じでお知らせしてくれます。
Could not process image request: [Error: Processed image is too large for the HEIF format]最大サイズは?
「最大サイズはいくつだろう」と調べた所、GoogleのWebpのサイトに記述がありました。
よくある質問 | WebP | Google for Developers
“WebP 画像の最大ピクセル サイズは 16383 x 16383 です。”
とのこと。（いやー、知らなかった〜）
一応、確認してみた境界線です。
| 16383px | 16384px | 16385px | |
| Webp | ○ | × | × |
| Avif | ○ | ○ | × |
結論
一般的なサイトではここまで大きい画像を使うことは無いですし、ファイルが壊れてる以外では問題なく変換できると思いますが、
もしWEBデザイン・コーディングを勉強していてポートフォリオサイトを作る場合では、こういった大きいサイズの画像を使う可能性もあり得るかもしれません。
使用したい場合は分割するなり、jpgのみにするか、そもそも魅せ方を変えるなど別の方法を考える必要がありますね。
デザイナー
araki
人生の目標は門前仲町のバーの制覇 酒は弱い
こんな記事も
読まれています
CONTACT & WORKS
お気軽にご相談・お問い合わせください