スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Posted at --年--月--日 | 記事URL | スポンサー広告 | Top↑

IE7対象、CSSのみで画像の縮小サムネイルをきれいに表示させる方法

IE7対象、CSSのみで画像の縮小サムネイルをきれいに表示させる方法

Tip: High quality CSS thumbnails in IE7 [Devthought]
[情報元:画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌]

HTMLで画像サイズを強制的に縮小表示させても、きれいに縮小した画像を表示させるCSSテクニックが紹介されています。対象となるのはIE7。ちなみにFirefoxやGoogle Chromeはこのようなテクニックを使用しなくてもきれいに表示されるそうです。初めて知った・・・。

小さい画像を表示する場合、通常はあらかじめ縮小した画像を用意しておきますが、このテクニックを用いれば、場合によってはサムネイルの作成の手間を省くことが出来ます。ただ、実際には表示が縮小されていても、元の画像をそのまま読み込ませているため、ページの構成によってはかえって転送量が増えてしまうことにもなります。(表示が縮小されているだけで、縮小された分だけ容量が自動的に小さくなっているわけではない、ということ。ここがサムネイル画像を用意したときとの決定的な違い。)

詳細は以下のとおり。

CSSの記述

記述は以下の1行だけ。下記の場合だとimg要素全てに適用されますが、特定の画像にクラスを割り当てて適用させたりする場合は、元エントリーにあるような書き方になります。

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

実際の動作

デモページが用意されています。IE7とそれ以外のブラウザでアクセスしてみるといいでしょう。

一応、面倒な人用にIE7とFirefox3でのスクリーンショットを以下にとっておきました。

◆Firefox3.0.7にて閲覧
Firefox3.0.7にて閲覧

◆Internet Explorer 7にて閲覧
Internet Explorer 7にて閲覧

見れば分かりますが、IE7でもあまり劣化していません。それと、劣化とは関係ないですが、なぜかFirefoxのほうが画像のシャープさがやや強いように見えます。ブラウザによって画像の見え方が微妙に違う?


画像を大量に表示させるページ構成だとまったく使えません、というか使っちゃダメなテクニックだと思いますが、画像を1つだけしか使わない、というようなページには、場合によっては有効かもしれません。使いどころを見極める必要がありますね。

▼スポンサードリンク

Posted at 2009年03月22日 | 記事URL | CSS | Trackback(0) | Comment(0) | Top↑
1つ後の記事:青・紫・赤・オレンジ・茶・緑・モノクロなど、カラー別Webサイトデザイン50選
1つ前の記事:[ネタモノ]『USBししおどし』














管理者にだけ表示を許可する

トラックバックURL
→http://smallwebmemo.blog113.fc2.com/tb.php/324-f26b1bef
この記事にトラックバックする(FC2ブログユーザー)
Home
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。