前の記事｜次の記事

画像置換について考えてみました

2009年04月06日 HTML/CSS/JavaScript

柳谷真志

ReTweet Tumblr

こんにちは、テニスっ子のまーしーです
この週末もしっかりテニスしてきました。徐々に日焼けし始めてます。

普段読んでるブログで画像置換について書いてあったので少し書いてみようかなと思います。

画像置換乱用してませんか？ | THE HAM MEDIA
http://h2ham.seesaa.net/article/115925272.html

画像置換は使いません

まず結論から言うと画像置換は滅多に使わないです。
SEO効果のほどがいまいちわからないかった昔は使ってたこともあります。
ただあくまでも指示されたときのみでしたね。

現在も使う場合は指定をされたときだけです。
imgでやってたら戻しで画像置換になってた、とか。そういう意図ならそれにあわせて作ってあげるしかないかな、という感じです。
（そのような戻しがある時点で直接お客さんとというワケではないので・・・）

画像置換するところにidとかふったうえで、cssで画像指定するとかめんどくさいよなぁとか思ってしまったりしますね。
ブラウザでぱっと見ただけだと画像置換なのか画像テキストなのかはわかりませんが、そいう問題でもないよなぁ、と。

altもちゃんと認識されるから画像置換しても意味ないんじゃん？となったとしても、altにめちゃくちゃうめこんじゃうことが可能になっちゃう気がするから、そのあたりは判断材料にはなりえないきがするんだよな。
（そういえばfirefoxでimgのwidth,height,borderってなんか挙動変？とか思ったのは気のせい？？）

ブラウザの日本語fontの種類が豊富じゃないし、バラバラなのでテキストベースできれいに見せるのはなかなか難しいところがあるのは仕方がない気がします。
そのあたりできれいになれば問題ないような気もするんですがねぇ。

他の切り口から見てみます

なんか書いていていまいちなので、あげられてたメリットとかに対して少し考えてみます・・・

＜メリット＞

一枚のHTMLファイルからいろんなデザインを再現可能
→その必要性があるかどうか？

HTML自体が軽くなる
→HTMLしか読まないならそうだけど。何に対して見せるのか？というところもありそうな。
普通に見る人にとってはcssもくっついてこないと意味ない気がするし・・・
データ量としてどっちが軽いのかしら。

再利用性が高くなる
→確かにそうかも？？画像差し替えくらいでいけるのであればあまりかわらなそう。
imgの場合はwidthとかも変更する必要あり。画像置換の場合はcssを変更する必要あり。
どっちが楽かしら。デザインのみを修正という事があるのであれば、か。。。。

＜デメリット＞

SEOスパムとされる可能性があるかもしれない
→スパムの様な気がする、という以前に気持ち悪いから自分じゃやらないけど、altに埋め込んでしまっても同じ事？？

何もしていない場合の印刷時など、CSSオン・画像オフ環境で表示されない
→そうですね。
（別な話題ですが、印刷の場合はmediaをallにすれば済む話じゃないような気がするんだけど。普通に組んだら印刷も問題なしなのがあたりまえなのかしら・・）

おっと、数だけならデメリットの方が少ないじゃん（苦笑

自分自身の勉強不足を露呈してる感がありますね・・・
なんとなく使わない方がよさそう、というのはあるんですが、
測る物差しにもよるのかなぁ、という感じもしてきました。

===========

画像置換乱用してませんか？ | THE HAM MEDIA
http://h2ham.seesaa.net/article/115925272.html

画像置換について ? grandes cedro
http://grandes-cedro.net/2009/03/%e7%94%bb%e5%83%8f%e7%bd%ae%e6%8f%9b%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/

2009年04月06日

firefox , SEO

コメント - 6トラックバック - 3

テオヤンセン展いってきた

Movable Type4.25で、MTNoSearchタグが復活。

トラックバックこの記事へのトラックバックURL
http://linker.in/mtos/mt-tb.cgi/54

はじめまして。
いつも更新を楽しみにしています。

a要素の画像置換に限定して言えば、
JavaScriptだけでは:activeと:focusダイナミック擬似クラスを表現できません。

アップルのグローバル・ナビゲーションのような
クリックしたときに押し込んだような表現をしたい場合は、
画像置換を使うしかないと思います。

rea2009年04月07日
reaさん、はじめまして。
コメントありがとうございます。

なるほど、勉強不足でした。

はてなブックマーク - 画像置換について考えてみました｜linker journal｜linker
http://b.hatena.ne.jp/entry/http://linker.in/journal/2009/04/post-18.php

でforestkさんも書かれていましたが、普段からそのあたりに気を配っていないのが問題ですね。

これを機会にちゃんと設定するようにしていきたいと思います！

コメントありがとうございました。
今後ともどうぞよろしくお願いいたします！！

柳谷真志2009年04月07日
> JavaScriptだけでは:activeと:focusダイナミック擬似クラスを表現できません。

onmousedownイベントとかonfocusイベントで表現できるのでは?というかできますよね。というか実際僕はそうしてます。

この記事では触れられていませんが、画像置換の最大のメリットはCSSスプライト的な実装を行うことによりhttpリクエストを減らし、フロントエンドのパフォーマンスを向上させられるという点だと思います。

これについてはオライリーから出ている「はいパフォーマンスWebサイト」という本に詳しく書いてあります。またはその著者によって下記にその内容が大体書いてあります。

■Best Practices for Speeding Up Your Web Site
http://developer.yahoo.com/performance/rules.html

また画像置換には様々な環境的条件でのデメリットもありますがこれも問題の切り分けによってトレードオフすることで一応大きな問題の起こらない解決を得られるはずです。

これについては下記の記事がよくまとまっています。ここまでエレガントではないですが、こちらも以前同じような実装をしたことがあります。

■A New Image Replacement Technique: The State Scope Method
http://www.sitepoint.com/article/image-replacement-state-scope/

kotarok2009年04月07日
はじめまして。取り上げてもらってどうもです。
改めて見るとメリット3つは同じ気がしますね（汗
例えば、iPhone環境だとネット速度遅いからHTMLには見出しとかの画像は入れない方が軽くなるしCSSだけ変えればいい感じにできるなーなんてのがメリットだと思ったのです。
一般的な企業サイトとかでは、まずそんなこと企画されないと思いますが、用途によっては使える手段かなと思います。

横からアレですが、画像置換しなくてimgで入れてもactiveの設定をCSSでできますよ。aの背景に画像入れてimgをvisibility:hidden;すればいいです。一緒に背景ずらせばactiveとhoverとfocusで画像も使い分けれます。多分。（やったことないきがしますが；

大杉2009年04月07日
＞kotarokさん

コメントありがとうございます。
ちょうどその本はよんで色々試してるところでした。
httpリクエストは減るんですね。
なるほど。
その分パフォーマンス向上につながる・・と。

そういう切り口で考えていませんでした。
ありがとうございます。

英語の記事は頑張って読んでみます！

柳谷真志2009年04月08日
＞大杉さん

コメントありがとうございます。
そうですねぇ、画像をあえて表示させたくない場合などは画像置換のほうがよさそうですね・・

imgでやる方法も知りませんでした。
今度試してみます！！

柳谷真志2009年04月08日