ホームページ作成での画像の扱い方

ルールに従って綺麗な画像を適切なサイズで使う！

ホームページの出来栄えは画像で決まる

同じ「レイアウト」で、「同じコンテンツ」が書かれているホームページでも、画像が綺麗であるかどうかで、ホームページの印象はずいぶん変わります。

 

「トップバナー」や「画像リンク」等は、現在クオリティが高くなってきています。初心者さんであっても、画像を扱うための最低限の知識を身につければ、当初から見やすく、綺麗なホームページを作成する事は可能です。

 

クオリティの高い画像と、これを加工するソフトは無料で提供されていますので、画像配布サイトはお気に入りに登録し、ソフトはダウンロードしておきましょう。

 

画像ソフトは、無料で使えるソフトであってもGIMPのように操作が複雑で、使いこなすのが難しいソフトも多いです。なので高性能の画像ソフトを当初から使わない方が良いです。覚えるだけで相当時間がかかり、本末転倒になってしまいます。

 

初心者さんであれば、画像ソフトはJTrim（ジェイトリム）を使ってください。ホームページ作成上とりあえずこのソフトは必要不可欠なので、ダウンロードしておきましょう。

 

それと欲しい画像が検索できるサイト（Pixabay）を紹介しますので、お気に入りに入れておいて下さい。下記URLでは他にもお勧めサイトがありますので、ご活用下さい。

 

画像ファイルの3つの種類とルール

• JPEG・・・スマホ、デジカメ等の写真
• PNG・・・イラスト、ロゴ
• GIF・・・・イラスト、アニメーションGIF

 

• BMP形式

 

■JPEG
フルカラーで1677万色のが使えるため、スマホ、デジカメ等の写真の表示に適した画像形式です。JPEGではファイルの圧縮率の選択で、ファイルサイズを変更する事ができます。

 

圧縮率を小さくし、ファイルサイズを大きくすると画質が鮮明になりますが、大きなサイズの画像を同じページで使い過ぎると、閲覧者がページを開くスピードが遅くなりSEO上不利になります。

 

逆にファイルサイズを小さくするために圧縮率を上げると、ホームページは軽くなり表示スピードは速くなりますが、画像は不鮮明になります。

 

現段階では写真の画像はJPEGを使うという事だけ覚えてください。

 

■PNG
指定した色に対して透過処理ができることがPNGの特徴です。画像の輪郭など、一部を透明化し、背景の色が見える状態にする事ができます。

 

またPNGは1677万色のフルカラーが使えるうえ、ファイルサイズが小さく、JPEGのように圧縮ノイズが目立たないので、イラストやロゴなどの保存に適しています。

 

ただし写真など輪郭のはっきりしていない画像をPNGにすると、 JPEG形式よりもファイルサイズが極端に大きくなるので注意が必要です。

 

■GIF
GIFはデータ容量が非常に小さく、ホームページで閲覧きるように開発された画像フォーマットです。WEB上でよく見かけますが、複数の画像をファイルに入れることで、アニメーションとして動画のように見せている画像がアニメーションGIFです。

 

GIFは使える色数が256色に限られていますので、ファイルのデータ容量が少なくて済みます。色数が少ないので、ホームページ上ではボタン画像などに使われる事が多くなっています。

 

単色が多いロゴや簡単なイラストに向いているって事です。

 

ホームページ作成で使ってはいけない画像フォーマットがあります。それがBMP形式です。拡張子が .bmp になっていて、BMPはビットマップと読みます。

 

このフォーマットはWindowsで標準の画像形式なのですが、上記の３つの形式と比べて、極端にファイルサイズが大きくなっていて、ホームページで使うには不向きです。

 

重要なalt属性

通常HTMLで画像を表示させる場合下記のようなタグを使います。

 

上記のタグを日本語で要約すると、、、

 

となります。タグを分解すると、、、

 

テキストブラウザのように画像を表示しないブラウザや画像表示をOFFにしている閲覧者のために[alt属性]によって画像の代わりとなる代替文字列を記述するルールがあります。

 

画像が見れない状態の閲覧者さんに対して、テキストで画像を説明するのですが、なるべく画像の様子がイメージできるように、詳しく記述する必要があります。

 

 

上記では「リンゴ」とだけを書くのではななく、色、状況、状態、をalt属性で記述し、実際どのような画像であるかが解るようにしています。

 

このように画像の説明を解りやすく記述すると、グーグルの画像検索でヒットしやすくなります。閲覧者さんがグーグル検索をする際、通常検索窓にテキストを記述するのですが、このときコンテンツによっては[動画]、や[画像]で検索する場合があります。

 

この画像検索で画像がヒットし、クリックして頂いた場合、ホームページに直接飛ぶようになっています。なのでalt属性を正確に記述する事はSEO対策になるわけです。

 

画像の横幅（width）指定についての注意！

ホームページに使う画像で、イラストなどの場合は、取り込み先の画像そのままのサイズで使えることが多いですが、写真の場合は大きさの加工が必要になってきます。

 

写真自体を加工しなくても、タグで、「表示上の大きさ」は調節する事ができます。そのためのタグがstyle="width:160px;"であり、160pxが横幅の大きさになります。

 

しかしタグ（width）で画像を小さくした場合は、表示上の大きさは小さく出来たとしても、画像のファイルサイズ自体は変更されず、元の容量のままです。

 

なのでデジカメの写真では、特にファイルサイズが大きくなりますので、上記でお伝えしているJTrim（ジェイトリム）で、ファイルサイズを落とす必要があります。

 

スマホなど携帯端末でもデジカメ並みの大きさがありますので加工は必須になるわけです。

 

3216pxの元画像をタグ（width）で320pxに落とした画質

---534KB---

↑↑↑
上下の写真を比べて、さほど画質に影響がない事が解ります。大きさを5分の1に加工した下記画像は、ファイルサイズでは10分の1以下になっています。
↓↓↓

640pxに加工した画像をタグ（width）でさらに320pxに落とした画質

---45.7KB---

 

320pxの画像をタグ（width）で160pxに落とした画質
9,71KB

 

特に写真を多く掲載するホームページを作成したい方は、ファイルサイズを考慮する必要があります。画質に影響しない大きさを試してみて、ホームページが軽く動くか検証したほうが良いです。

 

グーグルはホームページの各ページが開くスピードを監視しているとお考え下さい。

 

それに閲覧者さんもホームページが開くのを、3秒以上待ってくれません。上位表示の理屈は色々ありますが、このような事が積み重なってSEOに影響するわけです。

 

グーグルアナリティクスでは各ページの重さ（ファイルの大きさ）を検証できます。

 

またページスピードインサイトというツールでホームページの速度を計る事ができます。このようなツールはすべて無料で利用することができます。少しづつ覚えていきましょう！