2010年10月7日木曜日

<img>タグを使うか、背景画像を使うか。

スポンサーリンク

WEBサイトに画像を表示させる時、どのような方法で実現していますか?

基本的な問題なのですが、意外と分かってないんじゃないかと思う事例もちらほら。
いろいろな理由から決定しているとは思いますが、その根本はユーザービリィティの一言に尽きます。


画像を表示させる方法


WEBサイトに画像を表示させる方法は、基本的には以下の2つです。

  • <img>タグをHTMLに埋め込む
  • 背景画像で指定する

その他にも、list-imageやプログラムで動的に表示、Flashの埋め込み等々があります。
が、今回は割愛します。

画像表示方法の選択


では、<img>タグを使うか背景画像を使うかはどうやって決めるのでしょうか?

答えは単純で、重要な画像は<img>タグ。
それ以外は背景画像。

という選別方法です。

重要な画像は<img>タグ


重要な画像とは、その画像が無いとページが成り立たない画像の事です。
例えば、ECにおける商品の写真や、購入手順のフローチャートなど。

重要な画像に<img>タグを使う理由は、altが使える事とプリントする際に印刷される事が理由です。

altが使えるメリット

altを使えば、SEO対策に利用できます。
また、音声読み上げ機能(リーダー)で画像を認識でき、ユーザビリィティに有益だからです。

背景画像などaltが付けられ無い場合、SEO対策には何も寄与しませんし、音声読み上げも不可能ですです

印刷出来るメリット

<img>タグで表示させた画像は、CSSが解除されても表示されます。
また、背景画像の表示がOFFでも表示されます。

印刷時にはこの点がとても重要です。
実際に、一般ユーザーで背景画像がOFFに設定されている場合も良く見かけます。

印刷までして情報を手元に置きたいユーザーが実際に印刷した際、必要な情報が書かれた画像が写っていないのであれば大きな問題です。

装飾的な画像は背景画像


背景画像を用いる場所は、基本的に装飾部分です。
デザイン上は重要でも、ページの内容を伝える為には無くても良い場所です。

背景画像を使う場合は、CSSで{background-image:(画像のURL);}を指定して使います。
効率的に画像が配置でき、非常に便利です。

背景画像のメリット

背景画像を使えば、文字の下に必要な画像を敷く事が出来ます。

paddingをうまく使えば、グラフィカルな画像とテキストの融合を作り上がられるでしょう。

また、<img>タグで作ると相当複雑なHTMLなる場合でも、背景画像を<div>や<body>タグに使えば効率的に作れます。

結び


コーディングの経験のある方なら、基本的な事だと思います。
しかし、印刷すると重要な画像が消えることが多い事多い事...。

商品写真はさすがに消えませんが、フローチャートや図版などが印刷時に消える事は意外と多い物です。
意図的なのか、うっかりなのか、やむ終えずなのか...。

ただ、印刷する場合を考えると、<img>タグを使う明確なラインはあるはずです。
ユーザーが印刷する事なども考えて、重要な部分には<img>タグを使う事を忘れてはいけません。
もちろんSEO的にも逃せないaltのためにも。

スポンサーリンク

0 件のコメント :

コメントを投稿