前の記事 ≪:2009年3月18日 管理人のブックマーク
次の記事 ≫:これは驚きの、どんな画像もジグソーパズル化してしまうJavaScript「snap...

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

2009年03月19日-はてなブックマーク

スポンサード リンク
[PR] 日々膨大に出現するJS/CSSライブラリ等を意識にとどめておく方法
Tip: High quality CSS thumbnails in IE7 ・Devthought

画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。
普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。

具体的には以下のCSS指定によってそれが可能みたいです。
img { -ms-interpolation-mode: bicubic; }


デモページ


う〜ん、縮小してもとっても綺麗です。

FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。
これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。

転送量を考えれば、サムネイルが完全に不要になるということは無さそうですが、知っていることで、他画像とのサイズあわせぐらいならばブラウザ上でやっちゃえそうです。
知っていると知らないでは大違い、かも。

関連エントリ
関連の記事検索:CSS, 画像, チュートリアル, Web制作, Webデザイン, ie
スポンサード リンク

By.KJ : 2009年03月19日 07:07 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)