ギガサイト便
HTMLをURL化
トラブルシュート

WebP画像が表示されないときの原因と直し方

AI生成HTMLをギガサイト便でプレビュー共有したとき、WebP画像だけが真っ白のままになるケースがあります。原因はブラウザのキャッシュではなく、ほとんどの場合はパスの記述ミスかファイルが同梱されていないことです。この記事では自分側と相手側に分けて確認手順を整理し、再発を防ぐ運用まで解説します。

4分で読める

よくある原因

最も多いのは、HTML内の相対パスがZIPを解凍した後のフォルダ構造と一致しないケースです。AIにHTMLを生成させると画像パスをimagesフォルダ以下に決め打ちすることが多く、実際には同名の画像ファイルをZIPに含め忘れていることがあります。

もう一つの原因はブラウザの対応状況です。Edge 18以前やiOS 13未満のSafariはWebPを解釈できません。社内の古いPCや検証用端末で確認する場合は、pictureタグでJPEGフォールバックを用意するか、PNG/JPEGへ変換してから共有する方が安全です。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

自分側で確認すること

HTMLファイルをテキストエディタで開き、.webpを検索してすべての参照パスを洗い出します。次に、ZIPの中身を展開してそのパスにファイルが実際に存在するか目視確認します。ギガサイト便にアップロードする前にローカルでHTMLをダブルクリックして開き、ChromeのF12→Networkタブで404になっているリソースがないか確認するのが最速の方法です。

画像ファイルが存在するのに表示されない場合は、ファイル名の大文字・小文字を確認してください。Hero.webpとhero.webpはWindowsでは同一に見えますが、Cloudflare上のLinux環境では別ファイルとして扱われます。また、ファイル名にスペースや日本語が含まれていると不具合が起きやすいため、英数字とハイフンのみに統一することを推奨します。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

相手側で確認すること

受け取った側でURLを開いたときに画像が表示されない場合、まず別のブラウザ（ChromeとSafariなど）で試してもらうよう依頼します。特定のブラウザだけで再現するならWebP非対応が疑われ、全ブラウザで再現するならファイル自体が存在しない可能性が高いです。

相手がVPN環境や会社のプロキシ経由でアクセスしている場合、ギガサイト便の認証セッションが途切れて画像リクエストが401になることがあります。ギガサイト便のプレビューURLに直接アクセスしてログインが求められないかを確認してもらい、問題が続くようであればIPアドレス制限なしの環境で試すよう案内してください。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

再発防止の運用

AIにHTMLを生成させる際、プロンプトに「画像はすべてBase64でインライン埋め込みにすること」と指定するとファイル参照を完全になくせます。ただしBase64はファイルサイズが約1.3倍になるため、合計が2MBを超える場合はWebP/JPEGを別ファイルにして、フォルダ構成をフラット（index.htmlと同じ階層に画像を置く）にする方が扱いやすいです。

チーム運用の場合は「アップロード前チェックリスト」をNotionやGoogleスプレッドシートに作り、ZIP中身確認・ローカル開き確認・2ブラウザ確認の3項目を必須にします。ギガサイト便でプレビューURLを発行した後は、必ず自分のスマートフォンでも開いて最終確認する習慣を付けると、相手に届く前にトラブルを止められます。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

よくある質問

WebP画像をJPEGに変換するにはどのツールを使えばよいですか？

SquooshやiLovePNGなどの無料Webツールなら複数ファイルをまとめて変換できます。MacならプレビューアプリでもJPEG書き出しが可能で、インストール不要で即対応できます。

Base64埋め込みにするとファイルサイズはどれくらい増えますか？

Base64エンコードにより元のバイナリサイズの約1.33倍になります。500KBの画像なら約665KBになり、複数枚あるとHTMLが数MB単位で膨らむため注意が必要です。

Cloudflare経由で配信するとWebPのContent-Typeが変わることはありますか？

通常はCloudflareがContent-Typeを変更することはありません。ギガサイト便ではPolishは無効なため、送り手側のファイル形式がそのまま配信されます。

関連記事

トラブルシュート

WebP画像が表示されない問題をAI生成HTMLで防ぐプロンプト

AI生成HTMLでWebP画像の表示トラブルを未然に防ぎたい制作担当者向けに、プロンプトへの具体的な指示例と生成物の検証手順を紹介します。ギガサイト便での静的公開を前提とした実践的な内容です。

4分で読める
トラブルシュート

SVGが表示されないときの原因と直し方

HTMLでSVGが表示されない問題を解決したいWebデザイナー・制作者向け。インラインSVG・imgタグ・object要素など参照方法別の原因と、MIMEタイプ・CSP・パスエラーを含む実践的な修正手順を解説します。

5分で読める
トラブルシュート

OGP画像が更新されないときの原因と直し方

HTMLページを更新してもOGP画像が変わらない原因と直し方を知りたいWeb制作者向けに、キャッシュの仕組み・デバッグツールの使い方・再発防止の運用を具体的な手順で解説する記事。

5分で読める
「トラブルシュート」の記事をもっと見る →