"BOKU"のITな日常

BOKUが勉強したり、考えたことを頭の整理を兼ねてまとめてます。

最近のブラウザは画像ファイルの拡張子が間違ってても何事もなく表示する

f:id:arakan_no_boku:20200826222925p:plain

目次

きっかけはIEInternet Explorer)ユーザからの問い合わせ

HTMLは間違ってないし、画像ファイルもあるのに、ブラウザに画像が表示されない・という問い合わせがIEInternet Explorer)ユーザからありました。 

すべての画像が表示されないのではなく、できるものとできないものがあるとのこと。

確認したところ、確かに、HTMLにはミスはありません。

なんせ、IMGタグで、こんな感じに書いているだけですから。

<img src="test.jpg" />

そして、test.jpg ファイルもちゃんと所定の場所にあります。

ひょっとして、ブラウザによって違うのかなと思って試してみると、以下のような結果でした。

  • Chromeで開く => 画像はちゃんと表示される。
  • Edgeで開く => 画像はちゃんと表示される
  • FireFoxで開く => 画像はちゃんと表示される
  • IEInternet Explorer)で開く => 画像は表示されない。 

IEの場合だけ表示されないんですね。  

なんと拡張子JPEGPNGファイルだった(笑)

画像ファイルをダンプしてみました。

XEditというプログラムを使ってみました。

freesoft-100.com

すると・・。

f:id:arakan_no_boku:20200826230542p:plain

なんだこれ!!(笑)

先頭が「PNG」で始まるPNGヘダーがあります。

JPGって拡張子がついているけど、これは、PNGファイルです。

ちなみに、同じ画像がJPEG形式で保存されていたらダンプはこうなるはずです。

あきらかに違いますよね。

f:id:arakan_no_boku:20200826230948p:plain

最新のブラウザではは拡張子が間違ってても表示するんだ 

なんのことはない。

test.jpg というファイルの中身が「PNGフォーマット画像ファイル」だったわけです。

驚いたことに、画像ファイルの拡張子と中身のフォーマットが異なっていても、今時のブラウザでは何事もなかったかのように表示するですね。

そしてこれは、ブラウザに限られたことでなく、Windows10の付属アプリケーションはほぼそういう動きをするみたいです。

エクスプローラでも何事もなかったように画像表示しますし、ペイントなども同じ。

つまり。

古い考え方で開発されている「IEInternet Explorer)」だけが、拡張子と中身のフォーマットが違うので正直にエラーにしていた。

そういう話なのですね。

個人的には、今回は「IEInternet Explorer)」の動きのほう、エラーに気付けるので好みですけど、まあ、そこが「昭和の人間」なのでしょう(笑) 

どうやったら、あんな中身と拡張子の違うファイルをうっかり作成できるのか?理解に苦しみますが、おかげで、ひとつ知識が増えました(笑) 

ではでは。