兵庫県西宮市の集客に強い売り上げアップWEB制作、ホームページ制作ならHeartsN|全国対応 エリア検索はコチラ
0798-78-2212 営業時間10:00~17:00(土日祝休)

イメージタグの意味と使い方をマスターしよう!

イメージタグとは、HTML上で画像を表現するためのタグのことです。

IMGタグ

属性を指定することによって、その画像の相対的・絶対的な場所、画像が示しているものなどを検索エンジンに知らせることができます。属性をしっかりと指定することはSEO対策にもつながりますので、確実に行いましょう。

そもそもHTMLって何?

HTMLとは、ウェブページを作成するために開発された言語です。

Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略であり、現在ウェブ上で見られるほとんどのウェブサイトはHTMLで記述されています。HTMLを使用して文書を作成すると、文書の構造が明確になります。また、HTMLを使えば、文書中に画像、動画、フラッシュなどを埋め込めます。

HTMLはウェブブラウザから確認することができます。

FireFoxの場合は、ブラウザを右クリックして「ページのソースを表示」をクリックすると、HMTLで記述されたソースコードが表示されます。

タグとは?

HTMLはタグと呼ばれるものから構成されています。

タグとは<>の記号で囲まれた半角の英数字のことです。いろいろなタグをつけることにより、HMTL文書が装飾され、より見やすく、視覚的になります。タグにはHTML文書であることを宣言するhtmlタグ、ヘッダーであることを宣言するheadタグ、タイトルであることを宣言するtitleタグ、太字にするbタグなどがあります。

開始タグと終了タグで文書を囲うことにより、様々な装飾が可能になります。

開始タグは<b>、終了タグは</b>のように記述します(終了タグにはスラッシュを付けます)。たとえば、「あいうえお」という文字を太字にする時には<b>あいうえお</b>のように記述します。一部のタグは開始タグ・終了タグを区別しないこともあります。

タグの一部は属性を持っています。

属性とはタグに情報を付加するものです。属性は通常、属性名=属性値のように記述します。たとえば、<font color=red>と記述すると、文字が赤くなります。

イメージタグとは?

画像を掲載する際に使うのがイメージタグです。<img>で表記します。

イメージタグでは必ずsrc属性を指定します。src属性に指定するのは表示する画像ファイルのURLです。たとえば、<img src=”aaa.png”>といった感じです。こう表記することにより、HTMLの中に画像を置くことができます。

imgタグで指定できる属性(一部)

src属性

<img src="aaa.png" />

上記の通り表示する画像ファイルのURLを指定するための属性です。

alt属性

<img src="aaa.png" at="○○" />

画像の代わりに表示される文字列を指定するための属性です。

画像を表示できない、あるいは表示しない設定になっているブラウザを考慮したもので、HTML4.01では必須の属性として定義されています。

SEO対策で最も重要になるのがこのalt属性です。

現在の検索エンジンは画像を正しく認識することができませんが、imgタグ内のalt属性を読み取ることはできます。alt属性の部分に適切な文字列を記入することにより、検索エンジンに画像の内容を正しく把握してもらえるようになります。

また、適切なalt属性を設定することはアクセシビリティの向上にもつながります。

画像が表示できない環境の人に、本来はどのような画像が表示されるかを知らせることができるからです。

alt属性には必ずその画像と関係が深い文字列を記述するようにしましょう。

たとえば、人が二人写っている画像を設置するときには<img src=”xxx.jpg” alt=”2人の人”>といった感じで記入します。
こうすることにより検索エンジンはその画像に2人の人が写っていることを把握します。
「夕方の海岸で話し合う二人の男女」のように細かく指定すると、アクセシビリティがより向上します。

一方、alt属性の情報はあまりSEO対策に影響を与えないという意見もあります。

特定のキーワードをalt属性に入れ続けるとかえってスパム判定されやすくなることもあります。単なるキーワードの羅列は避け、意味の通る文章を書くことがスパム扱いされないコツです。

ただし、すべてのimgタグに細かなalt属性を付ける必要はありません。

区切り線や非常に小さな画像、アイコンに対して長々とalt属性を記述するのは無駄どころかかえって有害です。たとえば、トップページに戻る際にクリックする、家の形をしたアイコンに「家の形をしたアイコン。屋根は緑色で茶色いドアがあり、ドアの右側には大きな窓が付いている」と記述しても意味がないですよね。このような飾り的な画像に対しては、alt属性は指定しないほうがいいでしょう。

border属性

<img src="aaa.png" at="○○" border="0" />

画像に枠線を付けるための属性です。

境界線を指定することにより、画像を強調したり、シャープな印象にしたりできます。指定しなくても問題ありませんが、その場合画像に枠線はつきません。ただし、画像にリンクを設定するとborder属性を指定しなくてもその周りに枠線が付くことがあります。これを消したい場合はborder=”0”と指定します。

width属性とheight属性

<img src="aaa.png" at="○○" border="0" width="100" height="200" />

画像のサイズを指定するための属性です。

Width属性では画像の幅、height属性では画像の高さを指定できます。画像の大きさを変更しない場合でも、サイズの指定は行っておいたほうがいいでしょう。ただし、これはあくまでも画像の表示サイズを変更するものであり、データ量そのものを変えるものではないことには注意が必要です。データ量を変えたい場合にはペイントなどの画像編集ソフトを使ったほうがいいでしょう。

また、元画像のサイズが小さいのに無理やり表示サイズを大きくしようとすると解像度が下がり画質が荒くなるので気を付けましょう。

画像の形式はどうするの?

画像の形式にはjpeg、png、gif、bmpなどがあります。

jpegはデジタルカメラの画像などで使われている画像形式です。

使える色数が非常に多いので、自然物などのカラフルなものを保存するのに適しています。データのサイズも小さく、表示に時間もかからないのでウェブサイトでは最も多く使われています。ただし、圧縮すると劣化する(不可逆圧縮)性質を持つので、線画などには向いていません。

pngはインターネット上でつかわれるために開発されたものです。

gifをベースとして作られていますが、より使える色数が多いのが長所です。ファイルのサイズはjpegと比べると少し大きめですが、特別大きいわけでもないのでそれほど問題になることはありません。自然物などを保存するならばjpegのほうが有利ですが、線画の保存ならば一般的にpngのほうが有利です。

gifは画像が劣化しないので、jpgとは対照的に線画などに向いています。

一方で最大で256色しか使えないため、自然物などのカラフルなものには向いていません。イラストや簡単なアニメなどでつかわれることが多いです。

bmpは圧縮していないので保存を繰り返してもが質は落ちませんが、その代わりサイズは非常に大きくなります。

ほかの形式と比べるとあまりにもサイズが大きいので、ウェブ所ではほとんど使われていません。

一般的なホームページでつかわれるのはjpeg、png、gifの3種類です。

写真を載せる場合はjpeg、線画の場合はpng、アニメーションやイラストの場合はgifといった感じで使い分けるのが最もいいでしょう。

只今、インターネットサービス無料相談会実施中です。

アイデアを形にしたい、効果的なWEBサイトを作りたい、マーケティングで悩んでいる・・・など、どんな些細な事でも構いません。気軽にご相談下さいませ。

集客に強い売り上げアップWEB制作、ホームページ制作なら当社にお任せ下さい!ご相談、お見積りは無料!まずは気軽にご相談下さい。
0798-78-2212 受付時間:平日10:00~17:00(土日祝休)