JPGなどの画像が表示されない原因、チェックしたいことまとめ

ウェブ制作の現場でまれに遭遇する問題。imgタグで画像を取得しようとしても、なぜだかブラウザで表示されないトラブルについて。考えられる原因とその解決方法をまとめてみた。

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

ごくごく単純にimgタグsrc内のパスが間違っているケース。誰でもまず第一にこの可能性を考えるだろう。

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

CSSが間違っているため、画像が取得できていないように見えている可能性もなくはない。ブラウザの「要素を検証」で見なおそう。

HTMLでは拡張子が小文字なのに、ファイルの拡張子が大文字である場合、ブラウザにもよるが画像取得に失敗するケースがある。基本的にHTML側もファイル側も【.jpg】【.png】のように小文字に統一すべきだ。

【猫.jpg】のようにファイル名を日本語にするのはやめよう。【cat.jpg】とするべきだ。

PC内で保管しておくだけであればファイル名は日本語のほうがわかりやすいが、ウェブ上に公開するのであればファイル名は小文字英数字または記号で統一しよう。画像の取得に失敗する他にも、色々面倒なケースが想定される。

【advertisement.jpg】のようなファイル名にしていると、Adblock Plusのような広告ブロックの拡張機能に広告扱いされ非表示とされてしまう。対策として、「advertisement」「ad」のような広告を意味する単語をファイル名に含まないようにしよう。

画像ファイルのカラーモードがCMYKである場合、Internet ExplorerやAndroidでは表示されない。カラーモードをRGBに変更し保存しなおせば解決できる。

画像編集ソフトを扱えない方は、TinyJPGのような画像軽量化ツールを利用し画像を軽量化すれば、その際にカラーモードがRGBに変更される。