ホームページの画像が表示されない原因と解決方法｜よくある5つのケースを徹底解説

ホームページに画像をアップロードしたはずなのに、いざサイトを確認すると画像が表示されていない。そんな経験をしたことがある方は少なくないはずです。

画像が表示されない原因は、一口には言えません。ファイルのパスが間違っている場合もあれば、キャッシュが原因のこともあります。iPhoneで撮影した画像をそのまま使っていたり、スマホではなぜか映らない、という状況もあります。

制作現場でも、このトラブルは意外と頻繁に起きます。経験のある担当者でも「なぜ表示されないのか」の原因特定に時間がかかることがあるくらいです。

ただ、落ち着いて確認する順番さえ知っていれば、ほとんどのケースは自分で解決できます。

この記事では、ホームページの画像が表示されない原因を「ファイル・コード・環境」という3つの層に整理したうえで、原因ごとの確認方法と解決手順を順番に解説します。「どこから確認すればいいかわからない」という方でも、読み進めながら原因を絞り込めるようになっていますのでぜひ参考にしてみてください。

ホームページの画像が表示されない主な原因は「ファイル・コード・環境」の3層にある

画像が表示されない問題は、大きく3つの層に分類して考えると原因を特定しやすくなります。

ここでは、それぞれについて詳しく解説します。

ファイル側の問題（パス・ファイル名・形式・破損）

最も多いのが、ファイル自体の問題です。画像をサーバーにアップロードしたつもりでも、指定しているパス（ファイルの場所を示すURL）が間違っていれば、ブラウザは画像を見つけることができません。

ファイル名に全角文字や日本語が含まれている場合も表示エラーの原因になります。たとえば「会社ロゴ.png」という名前のファイルをアップロードしても、サーバー上では文字コードが正しく処理されず、表示されないことがあります。ファイル名は必ず半角英数字で統一するのが基本です。

画像の形式（拡張子）が問題になるケースも見落としがちです。JPEGやPNGであれば主要ブラウザはほぼ対応していますが、HEICやCMYKモードで保存されたJPEGなど、環境によっては表示できない形式が存在します。iPhoneで撮影した画像をそのまま使っている場合や、印刷用データを流用している場合は特に注意が必要です。対処法としては、画像編集ソフトでJPEGまたはPNG形式に変換してから再アップロードすることで解決できます。

さらに、アップロード中に何らかの理由でファイルが破損してしまうケースもあります。ローカル（自分のPC）では正常に開けるのにサイト上では表示されない、という場合はこのパターンが疑われます。一度サーバー上のファイルを削除して再アップロードするだけで解決することが多いです。

コード・設定側の問題（imgタグ・CSS・パーミッション）

画像ファイル自体に問題がなくても、それを呼び出すHTMLの記述が間違っていれば表示されません。WordPressを使っていない場合、HTMLで画像を表示するには<img>タグを使い、src属性に画像のパスを正確に指定する必要があります。ここでのよくあるミスは、拡張子の書き忘れや大文字・小文字の混在、スペルミスなどです。

一方、WordPressを使っている場合でも、CSSの設定が原因で画像が非表示になっていることがあります。display: noneやvisibility: hiddenといったプロパティが意図せず適用されていると、画像はサーバー上に存在しているにもかかわらず見えない状態になります。ブラウザの開発者ツール（F12キーで開けます）で該当の画像要素を確認すると、CSSによって隠れているかどうかを判別できます。

パーミッション（ファイルのアクセス権限）も見落とされやすいポイントです。サーバー上でファイルの読み取り権限が適切に設定されていないと、ブラウザがファイルにアクセスできず、結果として画像が表示されません。一般的には、画像ファイルのパーミッションは「644」、フォルダは「755」が標準的な設定です。

閲覧環境側の問題（キャッシュ・ブラウザ・スマホ）

「自分のPCでは表示されているのに、他の端末では映らない」「更新したはずの画像が古いままになっている」という場合、キャッシュが原因であることが多いです。キャッシュとは、ブラウザやサーバーが表示速度を上げるためにデータを一時保存する仕組みのことです。この保存されたデータが古い状態のままになっていると、更新後の画像が反映されません。

スマートフォンでだけ画像が表示されないというケースも実際には多く、単純なキャッシュの問題のほか、レスポンシブデザイン（画面サイズに合わせて表示を自動調整する仕組み）が正しく設定されていないことが原因になっている場合があります。PCでは問題なく見えても、スマホで確認して初めてトラブルに気づく、というパターンです。

古いブラウザを使っている場合、WebPなど比較的新しい画像形式に対応していないこともあります。閲覧者側の環境によって表示が変わるため、複数のブラウザ・端末で確認する習慣をつけておくと、こうした問題を早期に発見できます。

ホームページで画像が表示されない原因の具体的な確認手順と解決方法

画像が表示されないと気づいたとき、むやみに設定を変えるよりも、確認する順番を決めて一つずつ潰していくほうが早く解決できます。よくある原因として以下の5つが挙げられます。

ここでは、それぞれの確認方法と具体的な対処手順を解説します。

【ファイルパス・ファイル名】半角英数字になっているか確認する

画像が表示されないとき、まず確認したいのがファイルパスとファイル名です。

確認手順

アップロード前にファイル名を半角英数字に統一しておく習慣をつけると、このトラブルはほぼ防げます。

【画像形式】JPEG・PNG以外の形式は要注意（HEIC・WebPの落とし穴）

画像ファイルの形式が原因で表示されないケースは、意外と気づきにくいものです。「確かに画像をアップロードした」という状況で他の原因が見当たらない場合、形式を疑ってみてください。

確認手順

特に注意が必要な形式は以下の2つです。iPhoneで撮影した画像はHEIC形式になっていることが多く、WindowsブラウザやAndroid端末では表示できません。また、印刷会社などから受け取ったデータはCMYKモードで保存されているJPEGの場合があり、Webブラウザでは正しく表示されないことがあります。

【キャッシュ】ブラウザとサーバー、2種類のキャッシュをクリアする

キャッシュとは、ブラウザやサーバーが表示速度を上げるためにデータを一時保存する仕組みのことです。この保存データが古い状態のままになっていると、更新後の画像が反映されません。キャッシュには「ブラウザキャッシュ」と「サーバーキャッシュ」の2種類があり、それぞれ対処が異なります。

ブラウザキャッシュのクリア手順（Chrome の場合）

手軽な方法として、普段と別のブラウザでサイトを開いてみるのも有効です。別ブラウザで正しく表示されるなら、ブラウザキャッシュが原因である可能性が高いです。

サーバーキャッシュのクリア手順（WordPressの場合）

キャッシュ系プラグインを使っていない場合や、サーバー独自のキャッシュ機能が有効になっている場合は、利用中のレンタルサーバーのサポートに問い合わせるのが確実です。

【サーバーのパーミッション】ファイルのアクセス権限を確認する

パーミッションとは、サーバー上のファイルやフォルダに対するアクセス権限の設定です。この設定が適切でないと、ブラウザがファイルにアクセスできず画像が表示されません。一般的には、画像ファイルは「644」、画像が入っているフォルダは「755」が標準的な設定です。

確認・修正手順

パーミッションの変更は慎重に行う必要があります。誤った設定はセキュリティ上のリスクにつながることもあるため、不安な場合はホームページの制作会社や管理会社に依頼することをおすすめします。

---

【WordPressの場合】プラグインとメディアライブラリを確認する

WordPressを使っている場合、画像表示トラブルの原因としてプラグインの干渉とメディアライブラリのURL不一致が多く見られます。

プラグインの確認手順

特に、画像最適化プラグインやキャッシュ系プラグインを最近導入した場合は優先的に確認してください。

メディアライブラリのURL確認手順

それでもホームページの画像が表示されない場合

ここまで紹介した手順をすべて試しても画像が表示されない場合、原因がサーバー側の深い設定や、複数の要因が重なっているケースが考えられます。そうした状況では、自己解決にこだわるよりも専門家に状況を共有して判断を仰ぐほうが、結果的に早く解決できることが多いです。

相談する際は、以下の情報をあらかじめまとめておくとスムーズです。

• 表示されない画像のURL
• 使用しているサーバーとCMS（WordPressなど）の種類
• いつから表示されなくなったか（更新作業やプラグイン導入など、直前に行った操作）
• PCとスマホそれぞれでの表示状況
• すでに試した対処の内容

これらを整理しておくだけで、原因の特定にかかる時間が大幅に短縮されます。制作会社や保守担当者への問い合わせ時だけでなく、サーバー会社のサポートに連絡する際にも役立ちます。

弊社では、ホームページの表示トラブルや集客状況についての無料診断を提供しています。「何を確認すればいいかわからない」「修正したつもりだが自信がない」という段階でも対応していますので、お気軽にご相談ください。