InternetExplorerで縮小表示した画像がギザギザ(ジャギー)になってしまう問題の解決法

original

レスポンシブデザインでWeb制作をしていたら、この問題でハマったので解決法についてメモしておきます。

まず結論からなんですが、この問題は「画像本来のサイズと表示サイズの違い」によって発生します(IE11で確認)。

こう書くとシンプルな問題に思えますが、タチが悪いのは「元画像サイズと表示サイズのジャンプ率」によっては発生しない場合があることです。

以下の例をご覧になってください。

※本記事はInternetExplorerでご覧になってください。

1.幅2000pxの画像を400pxに縮小して表示した場合

large

IEでご覧になると文字のフチがギザギザ(ジャギー)になってしまっているのがわかると思います。

2.幅400pxの画像を400pxで表示した場合

small

元画像400pxの画像をそのまま400pxで表示した場合です。綺麗にそのまま表示されていますね。

このように、元画像と表示画像のサイズが違う場合に画像がギザギザになってしまうわけです。

しかし、実はこの問題が真にタチが悪いのは次の場合なのです。

3.2で使用した幅400pxの画像を300pxで表示した場合

small

どうでしょう?縮小表示したにも関わらず特に問題無く表示されますよね?

つまり画像のがギザギザに荒れてしまうのは、元画像サイズと表示サイズの「ジャンプ率の大きさ」によってギザギザの程度が決まるということです。

人間の視覚的にはよくわからないかもしれませんが、厳密にいえば3のケースも荒れてはいるのですが人の目にはあまり気づきにくいだけですね。なんとなくボケている感じはわかるかと。


この問題について調べるとcssで画像に「img { -ms-interpolation-mode: bicubic; } 」と指定する方法ばかり出てきてしまうのでなかなか答えにたどり着けませんでした。

ただ、私の記憶が定かであればIEのどこかのバージョンで横幅サイズを変更しても綺麗に表示されていたことがあったような気が・・・記憶違いでしょうか?

通常であればレスポンシブデザインが想定する最大サイズはPCだと思いますので、IEで表示する画像が最大サイズになるようにして対応すれば当面は問題ないかと。

ただ、昨今はPCも4Kなどのディスプレイも出てきてしまっているので、そろそろSVGで対応することも視野に入れるべきなのかもしれませんね。

これからのWeb制作者はWebブラウザの差異もデバイスの差異も考慮しなければならないなんて・・・スマホが発売された時は「これからはモバイルでもPCサイトが見れるからPC表示だけでよくなる」と思ってました(涙)。

追記

どうも腑に落ちなくて調べてみたら、やはりどうやらIE8では画像補間方式にバイキュービック法を採用していたのでこの問題が一時的に解決したのですが、IE9からまたニアレストネイバー法に戻ってしまったそうです。

→Microsoft公式コミュニティの質問より

なぜ退化してしまうのか・・・そりゃブラウザシェアが変わってくるはずですよね。