はじめに
目的
この章では、Webサイトで画像が表示されないときにまず知っておいてほしい全体像をわかりやすく説明します。以降の章で詳しく確認する前の準備として読んでください。
問題の全体像
画像が表示されない原因は大きく分けて「表示する側の設定」「保存や配信の問題」「閲覧する側の環境」の三つです。具体例をあげると次のようになります。
– ファイルパスの誤り：HTMLのsrcが間違っている（例：/images/pic.jpg と ../images/pic.jpg を混同）。
– サーバー側の問題：ファイルが存在しない、アクセス権がない（403）、サーバーエラーで配信できないなど。
– ブラウザやネットワーク：キャッシュが古い、ブラウザ拡張が画像をブロック、HTTPとHTTPSの混在でブロックされることがある。
この章での心構え
まずは簡単な確認を優先してください。ファイルのパス、ブラウザの表示、サーバーの応答（404や403の有無）を順に見れば、原因の見当がつきやすくなります。以降の章で、原因別の詳しい確認手順を順を追って説明します。
読み方のヒント
ひとつずつ確かめると早く解決します。初心者の方はまずブラウザで画像URLを直接開いてみることをおすすめします。
よくある原因
ここでは画像が表示されないときに多い原因を、具体例と簡単な確認方法を添えて説明します。
1. 画像パス（URL）の間違い
ファイル名の綴りミスや大文字小文字の違い、フォルダ階層の誤り、相対パスと絶対パスの混同が多いです。例：image.JPGとimage.jpgは区別されます。確認方法：ブラウザで画像のURLを直接開く、HTMLのimgタグを点検します。
2. ファイルがアップロードされていない／移動・削除された
サーバーにファイルがないと404になります。FTPや管理画面で該当ファイルを探し、正しい場所にあるか確認してください。
3. パーミッションやサーバー設定の問題
ファイルやフォルダの権限設定が不適切だとアクセスできず403になります。パーミッション（例：755や644）を確認し、ホットリンク防止や.htaccessのルールも見直してください。
4. 画像形式が未対応、またはファイル破損
古いブラウザや一部環境で未対応の形式（例：WebP）が表示されないことがあります。画像をローカルで開けるか、別形式（PNG/JPEG）で保存して試してください。
5. 混在コンテンツ（HTTPSページでHTTP画像）
HTTPSサイトでHTTPの画像を読み込むとブラウザがブロックします。対処法は画像をHTTPSで配信するか、相対URLにすることです。
6. ブラウザのキャッシュ・拡張機能・ネットワーク障害
キャッシュが古い、広告ブロッカーなどの拡張機能が画像を遮断する場合があります。キャッシュをクリアする、別のブラウザや端末で確認してください。
基本的な確認手順
以下は画像が表示されないときに順番に確認する基本手順です。ひとつずつ確実に切り分けてください。
-
画像URLを直接開く
-
画像のURLをブラウザのアドレスバーに貼り付けて単体で表示できるか確認します。表示されなければパスが間違っている、ファイルが無い、または権限が原因の可能性があります。
-
HTML側の指定を見直す
-
imgタグのsrc属性が正しいか確認します。例: src=”/images/photo.jpg”。拡張子（.jpg/.png）や大文字小文字の違いに注意してください（サーバーは区別することがあります）。相対パスと絶対パスの違いも確認します。
-
サーバー上の存在・権限を確認
-
サーバー上に該当ファイルがあるか確認します。管理画面やFTP、ファイルマネージャーで場所を開いてください。ファイル権限は一般にファイル644、フォルダ755が標準です。アクセス制限（.htaccessやホットリンク防止設定）もチェックしてください。
-
プロトコルと外部配信の確認
-
サイトがHTTPSの場合、画像もHTTPSで配信されていないとブラウザがブロックすることがあります。外部サーバーやCDNに置いている場合は配信障害がないか確認します。
-
ブラウザ・ネットワークで切り分け
-
別ブラウザ、シークレットウィンドウ、別ネットワーク（スマホのモバイル回線など）で試して、ブラウザキャッシュや拡張機能、回線固有の問題かを切り分けます。開発者ツールのネットワークタブでリクエストとステータス（200/404/403など）を確認すると原因特定が早まります。
これらを順に確認すると、多くの表示トラブルは自力で解決できます。必要なら、各手順で見つかった結果を教えてください。次に進む手順を提案します。
追加で教えてほしいこと
サイトの画像が表示されない問題を詳しく調べるため、以下を教えてください。情報がそろえば、より具体的な確認手順や修正方法を案内できます。
1) サイトの種類
- 自分で作ったサイトか、他人のサイト（閲覧のみ）かを教えてください。
- 自分のサイトなら、HTML直書きかCMS（例: WordPress、MovableTypeなど）か、テーマやプラグイン名が分かれば記載してください。
2) 発生するブラウザと端末
- どのブラウザ・端末で出るか（例: Chrome スマホのみ、Edgeだけ、全てのPCブラウザなど）。
- 可能ならブラウザのバージョンも教えてください（Chromeなら「設定→ヘルプ→バージョン」で確認できます）。
3) 表示される代替表示の種類
- 画像の代わりに出る表示を教えてください：×マーク、altテキスト、画像領域が真っ白、ブロックされたエラー（鍵マークや亀裂アイコン）など。
4) 添付してほしいもの（可能なら）
- 問題のページのURL、該当する画像のURL
- スクリーンショット（表示の様子）
- ブラウザの開発者ツールのConsoleやNetworkで出ているエラーメッセージ（コピーして貼ってください）
- HTMLの該当部分（imgタグ周辺）や、CMSなら関連する設定画面のスクリーンショット
これらを教えていただければ、ファイルパスの誤り、権限やサーバ設定、CORSやSSLの問題、CMS側の設定ミスなど、より的確な対処案を提示できます。ご用意が難しい項目があれば、その旨だけでも構いません。
