ホームページの画像が表示されない｜原因7つと3分でできる切り分け

ホームページに写真を載せたのに、そこだけ真っ白。
あるいは、枠とバツ印だけが出ている。

こんにちは、三重県でホームページ制作をしているMYコンサルティングです。
画像が表示されない原因は、実はそれほど多くありません。ほとんどが4つのうちのどれかです。この記事では、順に切り分けていく手順をまとめました。

3分でできる切り分け

手順1｜シークレットウィンドウで開く

まずこれです。保存されたキャッシュを使わずに読み込むので、自分のブラウザの問題かどうかが一発で分かります。
ここで表示されるなら、原因は手元のキャッシュです。詳しくは更新が反映されないときの記事をどうぞ。

手順2｜画像のURLを直接開く

表示されない場所を右クリックして「画像のアドレスをコピー」を選び、そのURLをブラウザのアドレス欄に貼って開いてみてください。

「404 Not Found」と出れば、そこにファイルが無いということです。パスかファイル名が間違っているか、アップロードできていません。
画像が普通に開けるなら、ファイルは存在しています。HTML側の書き方かCSSの問題です。

手順3｜他の端末で見てもらう

自分だけ見えている、あるいは自分だけ見えていない、という状況が分かると原因が絞れます。
自分のパソコンでだけ見えている場合は、ほぼ確実にアップロード漏れです。

原因と直し方7つ

① アップロードできていない（最多）

いちばん多い原因です。HTMLは上げたのに画像フォルダを上げ忘れた、というパターンが定番です。

FTPソフトでサーバー側のフォルダを開き、その画像が実際に存在するか確認してください。
自分のパソコンには画像があるので手元では正常に見えます。この「自分だけ見える」状態が、気づくのを遅らせます。

② アップロードが0バイトで終わっている

これは当社が実際に踏んだ失敗なので、はっきり書いておきます。

③ ファイル名の大文字・小文字が違う

サーバーは大文字と小文字を区別します。Logo.png と logo.png は別のファイルです。

WindowsやMacの手元の環境では区別されないため、自分のパソコンでは表示され、サーバーに上げた途端に消えるという現象が起きます。
対策はシンプルで、ファイル名はすべて小文字にすること。当社は英数字の小文字とハイフンだけ、というルールで統一しています。

④ 拡張子が違う

.jpg と .jpeg、.JPG と .jpg。
スマートフォンから取り込んだ写真は .JPEG のように大文字になっていることがあり、HTMLの記述と食い違います。実際のファイル名をそのまま確認してください。

⑤ パス（場所の指定）が違う

画像がどこにあるかの書き方が間違っているケースです。

先頭のスラッシュがあるかないかで、まったく別の場所を指します。
サブフォルダの中にあるページで表示されない場合は、たいていここが原因です。

⑥ 画像形式に対応していない

WebPやAVIFといった新しい形式は、容量が小さくて優秀ですが、古い端末やブラウザでは表示できないことがあります。
スマートフォンでだけ出ない、特定の人だけ見えない、という場合はこれを疑ってください。当社では、必要に応じて従来のJPEGも用意しておく形をとっています。

⑦ 他人のサイトの画像を直接読み込んでいる

他のサイトにある画像のURLをそのまま貼って表示させる方法（ホットリンク）は、相手側の設定で遮断されることがあります。ある日突然表示されなくなるのはこのためです。
そもそも権利の面でも問題になりやすいので、画像は自分のサーバーに置いてください。

表示はされるが遅い場合

「出ないわけではないが、じわじわ出てくる」という場合は、画像が重すぎます。

スマートフォンで撮った写真は、1枚で3MB以上あることも珍しくありません。それを何枚も並べれば、当然ページは重くなります。
目安は横幅1200〜2000ピクセル、容量は数百KB以内。この程度に縮小しても、画面上の見た目はほとんど変わりません。

表示が遅いページは離脱されやすく、検索の評価にも影響します。スマホでの表示速度についてはスマホ最適化の記事にまとめています。

制作会社に伝えること

特に「直前に何をしたか」は重要です。画像を差し替えた、ページを更新した、サーバーを移した。そのどれかの直後に起きているなら、原因はほぼそこにあります。

よくある質問

画像が表示されないとき、まず何を確認すればいいですか？

シークレットウィンドウで同じページを開いてください。そこで表示されるなら、原因はご自身のブラウザに残ったキャッシュです。シークレットでも出ないなら、画像そのものがサーバーに正しく置かれていない可能性が高くなります。次に、表示されない画像を右クリックして画像だけのURLを直接開いてみると、ファイルの有無がはっきりします。

自分のパソコンでは見えるのに、他の人からは見えないと言われます。

サーバーにアップロードできていない可能性が高いです。手元のフォルダにはファイルがあるので自分のパソコンでは表示され、サーバーには無いので他の人には表示されない、という状態です。FTPソフトでサーバー側のフォルダを開き、実際にファイルがあるか、サイズが0バイトになっていないかを確認してください。

ファイル名の大文字と小文字は関係ありますか？

大いに関係します。サーバーは大文字と小文字を別のものとして扱うため、Logo.pngとlogo.pngは違うファイルです。WindowsやMacの手元の環境では区別されないので、自分のパソコンでは正常に見えていて、サーバーに上げた途端に表示されなくなる、という事故がよく起きます。

スマホでだけ画像が出ません。

画像の形式が原因のことがあります。WebPやAVIFといった新しい形式は、古い端末やブラウザだと表示できない場合があります。また、LINEやInstagramのアプリ内ブラウザは独自のキャッシュを持っているため、通常のブラウザで開き直すと表示されることもあります。

画像の代わりに枠とバツ印が出るのはなぜですか？

ブラウザが画像を読みに行ったものの、見つからなかったことを示しています。つまりHTML側のパスは書かれているが、その場所にファイルが無い状態です。パスの綴り、拡張子（.jpgと.jpeg）、フォルダの階層を順に確認してください。

画像が重くて表示に時間がかかります。

スマートフォンで撮った写真をそのまま載せると、1枚で数MBになることがあります。ホームページに載せる写真は、横幅1200〜2000ピクセル程度、容量は数百KB以内が目安です。表示が遅いページは離脱されやすく、検索の評価にも影響します。

まとめ

画像が表示されないときは、シークレットウィンドウと画像URLの直接確認。この2つでほとんど切り分けられます。

そして原因の多くは、アップロード漏れ、0バイトでの転送失敗、ファイル名の大文字・小文字、パスの誤りです。特別なことは起きていません。
ファイル名を小文字で統一しておくだけで、このうちの1つは最初から防げます。

関連する記事として、更新が反映されないときの原因、キャッシュとは何かもあわせてどうぞ。

当社では、保守をご契約いただいているお客様のこうしたトラブルは、ご連絡いただければこちらで調べて直しています。
「自分ではどこを見ればいいか分からない」という場合もお気軽にご相談ください。料金プランはこちらです。