TAROSITE.NET: BLOGGING

CSSで見るウェブグラフィックスのミライ

• Share on Tumblr
• 
• Tweet

by TARO MATSUMURA @taromatsumura 2008.05.06 22:51

　Adobe AIRの話題はぜひ注目すべきだが、モバイル環境でのリッチコンテンツのミライについて考える際、こちらもとても魅力的だ。最新のブラウザはSVGもサポートしているけれど、それ以前にCSSを活用したグラフィックスについてキチンと使ってみてはどうか、という話である。

　Adobe Illustratorには、ラスター画像（ドットの画像）を解析して、ベクター画像（線の画像）に変換してくれる機能がついている。もちろん精度の問題はあるとしても、ラスター画像からベクター画像に変換すれば、小さな写真を思い切り引き伸ばしたとしても、はじめの解析の精度から劣化することはないし、巨大な画像にしてもデータサイズに悩まされることはない。

　CSSによるグラフィックスも、再現性を高めた記述をしてあげることで、画像サイズに関係なく軽い情報量で画像を表示させることができるわけだ。特にアニメーションの画像などは、高い再現性を確保することができる。

　まあケータイも3Gでそれなりのスピードを得ているし、Wi-Fiなら画像の読み込みにストレスを感じることは少なくなると思うけれど、とはいってもブラウザの中で軽快にグラフィックスを閲覧する手段が標準で搭載されているのであれば、進んでそれを採用してもいいだろう。

　Internet ExplorerやFirefox、そしてSafariなら、CSSによるグラフィックスを表示できる。さらに、iPhoneやAndroidなど、ブラウザをフル搭載しているモバイル端末なら、その恩恵を受けることができる幅も大きい。

　リッチな体験＝データ量が大きい、という比例の関係はそろそろ考え直してもいいかもしれないな、その場合、ここまでできるぞ、というのが右の画像ということになるわけで。

Technobahn: WEBグラフィックスの新しい可能性
WEBでグラフィカルイメージを扱う場合、スタティックなデータ形式の場合は、GIFやJPEGなどの画像フォーマットが、ダイナミックな形式の場合にはJavaやFlashなどの使うのが一般的だ。しかし、最近のブラウザの進化により、複雑な図形もCascading Style Sheets（CSS）を使って表現することができるようになってきたことはあまり知られていない。下にホーマー・シンプソンの画像は、ホーマー・シンプソンをベクター形式のグラフィック・エレメントに分解した上で、CSSを使って表現したものとなる。

• BLOGGING
• art
• css
• keitai
• tech
• web