JPGなどの画像がブラウザで表示されない際に、チェックしたいこと まとめ

ウェブ制作の現場でまれに遭遇する問題です。

「imgタグで画像を取得しようとしても、なぜかブラウザで表示されない」というトラブルについてです。

考えられる原因とその解決方法をまとめてみました。

画像が表示されない場合に考えられる原因

画像そのものに問題がある

例えば、「カラーモードがCMYKになっている」など。（その場合は、カラーモードをRGBに変更し保存しなおせば解決できる。）

こういった、画像そのものに問題があるかどうかは、専門家でなければわかりにくいですが…

例えば、TinyJPGのような画像軽量化ツールを利用し画像を軽量化してみれば、その過程で問題ない画像に再生成されるケースが多いです。

HTML（パス、URL）が間違っている

なんだかんだで、最も多い原因です。

ごくごく単純にimgタグsrc内のパスが間違っているケース。

PHPで記述している場合は、php部分が間違っており意図した出力ができていない可能性もありますので、ブラウザの「ソースコードを確認」で丁寧に見なおしましょう。

CSS内の記述であっても同様です。ブラウザの「要素を検証」で見なおしましょう。

拡張子が大文字になっている

HTMLでは拡張子が小文字なのに、ファイルの拡張子が大文字である場合、など。

ブラウザにもよりますが、画像取得に失敗するケースがあります。

基本的にHTML側もファイル側も【.jpg】【.png】のように小文字に統一すべきです。

ファイル名が日本語

【猫.jpg】のようにファイル名を日本語にするのはやめましょう。

【cat.jpg】とするべきです。

PC内で保管しておくだけであれば、ファイル名は日本語のほうがわかりやすいですが、ウェブ上に公開するのであれば、ファイル名は小文字英数字または記号で統一しましょう。

広告ブロックの拡張機能が非表示にしている

【advertisement.jpg】のようなファイル名にしていると、Adblock Plusのような広告ブロックの拡張機能に広告扱いされ非表示とされてしまうケースがあります。

対策として、「advertisement」「ad」のような広告を意味する単語をファイル名に含まないようにしましょう。

キャッシュが残っている

ブラウザにキャッシュが残っており、その影響で画像が見れない、または変更したのにそれが反映されない、というケースもあります。

強制リロード（スーパーリロード）をしてみましょう。