IEの画像サイズ制限 | よらノート

よらノート

Webデザインやコーディングネタに関する関連リンク、HTML、CSS、JSなどを取り上げています。


テーマ:
2012年5月15日現在

今まで気付かなかったけど、

「IEは縦or横幅16384pxより大きい画像をちゃんと表示できない」

くさいです。

正しくは長辺(上記の場合16384pxの辺)の長さを勝手に1pxにされてしまう。
大きすぎる画像はヤダヤダって言うんですよ、IEは。

自分が実際にハマってググっても有益な情報が出てこなかったので、メモとしてポストしときます。
ほとんど居ないと思いますが、同じようにIEに苦しめられてる人の役に立てば幸いです。



実際に試してみてこの数値にたどり着きました。
IE6~9で同様の動作を見せてくれたので、IEの仕様なのかな?

ただ、私の環境(win7 64bit、CPU:core i7 2600K、メモリ:8G)でしか試してないのでもしかしたら数値にばらつきはあるのかもしれないです。



だいたい、そんなに大きなサイズの画像は使わねぇよ!という話なんで、あまり気にすることではないんですが、たまたま必要になった状況を下記に記します。


【背景】
自社サイトを制作する際にちょっとしたアニメーション的なものを使うことになった事が悪夢の始まり。


【サイト仕様】
・スマホ用に別ページは用意しないけど、スマホでも一応普通に閲覧できるようにする。
・IE6+、Chrome、Firefox、Opera、Safari、、iOS、Androidブラウザでの閲覧可能。
・iOSに対応させるためにFlashは使えない。
・スマホによってはアニメーションgifが正常に動かないのでアニメーションgifも使えない。



そういうわけでjqueryでの実装を考えたわけですが、JSやプログラミング方面はそんなに強くないので、地道にスプライトシートを作成して一定時間ごとに画像のポジションを移動させてアニメーションgifのような表現をすることにしました。

もっと簡単で負荷も少ない方法があったら教えてください。。


作成した画像は1画像の横幅100px、高さが100px程度のpng画像を縦方向のスプライトシートにまとめたもので、横幅100px、高さ19000pxとかふざけた画像が出来上がりました。



いや~二度と作りたくないですね。



そしていざクロスブラウザチェックをしてみると、

Chrome・・・OK
Firefox・・・OK
Opera・・・OK
IE・・・き、消えたッ!?


意外なことにググっても同じような症状を訴えている人も、解決策を提示してる人もほとんど見当たらなかった。

近い内容として[IE8]画像ファイルのサイズ制限

というマイクロソフトのページがあったけど、微妙に違う。
今回ぶちあたった問題は拡張子が「png」「gif」「jpg」全てで縦or横幅16384pxを超えたら表示されなくなってしまったという問題なんですよね。

ちなみにもう一辺の長さを100pxから50px、20pxと変えてみて面積を縮めてみても症状は同じでした。

さらに、19000pxの画像を作成し、html上で幅を16384pxに縮小表示させたらちゃんと表示されます。



IEマジ消えてくれ・・・。

よらさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ

Amebaトピックス