画像が表示されないときに確認したいポイント
ホームページの画像が、表示されない。
画像の代わりに、壊れた画像の印や、説明の文字だけが出ている。
そんなときに確かめたいポイントをまとめました。
この記事では、画像が表示されない主な原因と、直し方を解説します。
1.まず確かめたいのは5つ
| 確かめること | 考えられる原因 |
|---|---|
| 画像のファイルがあるか | ファイルを消した、アップロードできていない |
| 場所と名前が合っているか | フォルダの場所、ファイル名、大文字・小文字が違う |
| https のページで http の画像を読んでいないか | 安全でない読み込みとして、ブラウザが止めている |
| 古い表示が残っていないか | ブラウザのキャッシュ |
| 画像の形式や大きさに問題がないか | 対応していない形式、大きすぎる |
2.原因によって直し方が違う理由
画像が表示されないとき、ブラウザは「その場所に画像がない」「読み込みを止めた」など、さまざまな理由で表示をあきらめています。どの理由なのかによって、直す場所が変わります。
ブラウザの開発者向けの機能を使うと、画像が読み込めなかった理由を確かめられます。やみくもに画像を入れ直す前に、原因を確かめると早く直せます。
画像が出ないときは、画像のURLを直接開いてみるのが、いちばん早い確かめ方です。
3.確かめ方と直し方
1. 画像のURLを直接開く
表示されない画像の上で右クリックし、「画像を新しいタブで開く」などで、画像のURLを開いてみます。「見つかりません（404）」と出れば、その場所に画像がありません。
2. 場所と名前を確かめる
- ファイル名の大文字と小文字（Photo.jpg と photo.jpg は別のファイルとして扱われることがある）
- 拡張子（.jpg と .jpeg、.png など）
- フォルダの場所（画像を置いたフォルダと、指定している場所が同じか）
- ファイル名に日本語や空白が入っていないか
3. https のページで http の画像を読んでいないか
ページが https なのに、画像のURLが http で始まっていると、ブラウザが安全のために読み込みを止めることがあります（混在コンテンツ）。画像のURLを https に直しましょう。サーバーの引っ越しや、https に切り替えたあとに起きやすい問題です。
4. キャッシュを消す
画像を差し替えたのに古い画像が出る、自分だけ表示されない、という場合は、ブラウザのキャッシュが原因のことがあります。詳しくは、ブラウザのキャッシュとは？で解説しています。
5. 開発者向けの機能で確かめる
ブラウザの開発者向けの機能の「コンソール」や「ネットワーク」を見ると、読み込めなかった画像と、その理由が表示されます。使い方は、Google Chromeのデベロッパーツールの基本的な使い方で解説しています。
4.よくある質問
WordPressで、画像が全部表示されなくなりました。
サーバーの引っ越しや、URLの変更のあとに起きやすい問題です。画像のURLが古い住所のままになっていないか確かめましょう。
スマートフォンだけ、画像が表示されません。
スマートフォン用に別の画像を指定している、通信が遅く読み込みが終わっていない、などが考えられます。
画像の代わりに、文字が表示されます。
画像の説明（alt属性）が表示されている状態です。画像そのものが読み込めていないので、URLを確かめましょう。
ほかのホームページの画像を使っていたら、表示されなくなりました。
相手のホームページで画像が消えたか、ほかのホームページから読み込むことを止められた可能性があります。画像は、許可を得たうえで、自分のサーバーに置きましょう。
5.まとめ
画像が表示されないときは、ファイルがあるか、場所と名前が合っているか、https で読んでいるか、キャッシュが残っていないかを確かめましょう。
- 画像のURLを直接開いて、あるかどうかを確かめる
- ファイル名の大文字・小文字と拡張子を確かめる
- https のページでは、画像も https で読む
- 開発者向けの機能で、読み込めなかった理由を確かめる
まずは、表示されない画像のURLを、直接開いてみましょう。
画像が表示されない原因が分からない場合は、浅草Web屋にご相談ください。
6.自分のホームページを確認する
何から確認すればよいか分からない方は、まず無料チェックをお試しください。ホームページのURLを入力すると、公開情報から確認できる範囲で、サイトの状態をチェックできます。
※無料チェックで確認できるのは、外部から見える公開情報の範囲です。サーバー内部の設定や、すべての弱点を確認できるわけではありません。結果は、ホームページ全体の安全性を保証するものではありません。ご自身のサイト、または管理者の了承があるサイトでご利用ください（利用規約）。
もっと詳しく調べたい場合や、修正・復旧について困っている場合もご相談いただけます。相談する