---
title: "WebP画像が表示されないときの原因と直し方"
description: "WebP画像が共有HTMLで表示されない原因を調べたいデザイナー・エンジニア向けに、パスミス・ファイル未同梱・ブラウザ非対応の3パターンを原因別に解説し、修正手順と再発防止策を具体的に示します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/webp-not-showing-fix"
markdown: "https://giga-site.com/articles/webp-not-showing-fix/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# WebP画像が表示されないときの原因と直し方

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

> Source HTML: https://giga-site.com/articles/webp-not-showing-fix
> Article index: https://giga-site.com/articles/index.md

## よくある原因

最も多いのは、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画像が表示されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/webp-not-showing-checklist/index.md)
- [WebP画像が表示されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/webp-not-showing-ai-prompt/index.md)
- [WebP画像が表示されないときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/webp-not-showing-request-message/index.md)
- [SVGが表示されないときの原因と直し方](https://giga-site.com/articles/svg-not-showing-fix/index.md)
- [OGP画像が更新されないときの原因と直し方](https://giga-site.com/articles/ogp-image-not-updating-fix/index.md)
- [SVGが表示されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/svg-not-showing-checklist/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "WebP画像が表示されないときの原因と直し方",
  "description": "WebP画像が共有HTMLで表示されない原因を調べたいデザイナー・エンジニア向けに、パスミス・ファイル未同梱・ブラウザ非対応の3パターンを原因別に解説し、修正手順と再発防止策を具体的に示します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/webp-not-showing-fix",
  "url": "https://giga-site.com/articles/webp-not-showing-fix",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "WebP画像をJPEGに変換するにはどのツールを使えばよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SquooshやiLovePNGなどの無料Webツールなら複数ファイルをまとめて変換できます。MacならプレビューアプリでもJPEG書き出しが可能で、インストール不要で即対応できます。"
      }
    },
    {
      "@type": "Question",
      "name": "Base64埋め込みにするとファイルサイズはどれくらい増えますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Base64エンコードにより元のバイナリサイズの約1.33倍になります。500KBの画像なら約665KBになり、複数枚あるとHTMLが数MB単位で膨らむため注意が必要です。"
      }
    },
    {
      "@type": "Question",
      "name": "Cloudflare経由で配信するとWebPのContent-Typeが変わることはありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "通常はCloudflareがContent-Typeを変更することはありません。ギガサイト便ではPolishは無効なため、送り手側のファイル形式がそのまま配信されます。"
      }
    }
  ]
}
```