大きい画像をキレイに縮小表示させるCSS

In: css

28 5月 2009

Webページを作成していて、もっとも面倒な作業の一つがサムネイルの作成です。
大きい画像を無理矢理WidthやHeightで縮小して表示すると、読み込みが重い上に、ブラウザで見たときにジャギーが粗くなってギザギザで汚くなってしまいます。

しかし、あるCSS設定をすると、IEで画像の縮小表示がなめらかに表示されることが分かりました。

それがこの指定です。

img { -ms-interpolation-mode: bicubic; }

これで縮小画像の表示がバイキュービック形式の縮小になります。

論より証拠。この2つの画像を見比べてください。

広告

画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌

コメント

8 Responses to 大きい画像をキレイに縮小表示させるCSS

トラックバックURL:

Avatar

夢見るプログラマーの開発日誌 » 画像縮小時の見栄え

4月 8th, 2010 at 8:21 PM

Avatar

kanariia

9月 12th, 2011 at 4:40 PM

img { -ms-interpolation-mode: bicubic; }で縮小画像の表示がバイキュービック形式の縮小になる!

Avatar

Hiroaki Yano

12月 25th, 2011 at 12:21 PM

素敵なCSSを発見!
http://t.co/SdntFEjz
この手の方法まだあるのかな?

Avatar

peperocino

12月 25th, 2011 at 9:21 PM

素敵なCSSを発見!
http://t.co/SdntFEjz
この手の方法まだあるのかな?

Avatar

オカムラアキノリ

10月 31st, 2012 at 11:22 AM

知らなかった・・・そしてマジでキレイになった。 大きい画像をキレイに縮小表示させるCSS | Weblogy http://t.co/XMIDEreN

Avatar

okamuraakinori

10月 31st, 2012 at 8:22 PM

知らなかった・・・そしてマジでキレイになった。 大きい画像をキレイに縮小表示させるCSS | Weblogy http://t.co/XMIDEreN

Avatar

ku_marin

3月 26th, 2014 at 12:00 PM

※ふるいIE

Avatar

takedamayumi

8月 8th, 2014 at 3:00 PM

IE7でサムネイル画像などの縮小表示がバイキュービック形式でなめらかに表示される。 img { -ms-interpolation-mode: bicubic; }

Comment Form

About this blog

ここは、SE見習いである私ことdaceloが、日夜習得していくシステム関連の備忘録、phpやWordPressTipsのネタ、あるいはSEOやWebマーケティング関連の雑感を投稿するブログです。 平日は大体毎日投稿しています。土日は休業日です。

カテゴリー

カテゴリー

アーカイブ