環境
- IE11(11.48.17134.0)
- Microsoft Edge 42.17134.1.0
- Firefox 60.0.2 (64 ビット)
- Google Chrome 67.0.3396.79（Official Build） （64 ビット）
- Windows10
データの準備
-
png.jpg: PNGだけど拡張子が"jpg"の画像 -
jpg.png: JPEGだけど拡張子が"png"の画像 -
index.html: 上記の画像を表示するHTMLファイル
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>PNG画像だけど、拡張子が"jpg"</h1>
<img src="png.jpg">
<hr>
<h1>JPEG画像だけど、拡張子が"png"</h1>
<img src="jpg.png">
</body>
</html>
調べたこと
拡張子が間違っている画像をファイルとして表示
IE11で、index.htmlをファイルとして（C:\xampp\htdocs\false-images\index.html）開いたところ、画像は表示されませんでした。
また、開発ツールのコンソールには「イメージをデコードできません」というメッセージが表示されていました。
DOM7009: URL 'file:///C:/xampp/htdocs/false-images/png.jpg' のイメージをデコードできません。
png.jpg
DOM7009: URL 'file:///C:/xampp/htdocs/false-images/jpg.png' のイメージをデコードできません。
jpg.png
どうやらIE11は、拡張子を見ているようです。
IE11以外のブラウザで確認する
他のブラウザで確認したところ、画像は表示できました。
- Firefox: OK
- Google Chrome: OK
- Microsoft Edge : OK
拡張子が間違っている画像を、HTTPで表示
IE11で https://yuji38kwmt.github.io/static-page/false-images/index.html を開いたところ、画像は表示されました。
レスポンスヘッダの"content-type"は、拡張子から推測された値でした。
（"png.jpg"ならば"image/jpeg"）
"content-type"は間違った値ですが、画像は表示されました。
まとめ
- 拡張子が間違った画像を、IE11でファイルとして開くと、画像は表示されない
- IE11では、ファイルとして画像を開くときと、HTTPで開くときで、挙動が異なる
これ以上は分かりませんでした。
まあいずれなくなるブラウザだから、調査はこの辺りでよいでしょう。
気になったこと
URLバーに表示される値
ファイルとして開いたとき、URLバーに表示される値が異なりました。
- IE11：
C:\xampp\htdocs\false-images\index.html - IE11以外：
file:///C:/xampp/htdocs/false-images/index.html
ファイルとして開いたときと、HTTPで開いたときの挙動の違い
IE11以外でも、挙動の違いがありました。
たとえば、Firefoxで「画像の情報を表示」を選択したときの「サイズ」です。
- ファイルとして開いたとき：「不明（キャッシュなし）」
- HTTPで開いたとき：「296.72 KB (303,843 バイト)」
スキーマが"http"と"file"で異なるので、ブラウザの処理も大きく異なるんですかね。よく分かりません。
