むやみやたらに画像を使わず、画像を使用するときには「キャプションテキスト」を併記できている
Webページの構成要素は、テキストだけではありません。利用者にわかりやすく情報を理解してもらうためには、「画像」を使用するのも効果的な手法です。
ただし、画像をあまり乱用すればページの表示速度が遅くなってユーザビリティの低下につながりますので、ファイル形式やサイズ容量などは、しっかり考慮して使っていくことが大事です。
また、画像でなくても情報が伝わるのであれば、むしろ画像を使わない方が良い場合があります。
その辺りもしっかり考えて、使用するべきかを検討しましょう。
作業手順
3つの注意点に従って「画像」を追加したり、修正する
画像でなくても表現できる場合は、むやみに画像を使わない写真・イラストなど画像を使わなければいけない部分以外は、できるだけテキスト記述を優先しましょう。あまり画像を使用すると、ページ全体を重くしたり使いづらいサイトになる恐れがあります。サイトによってはページの半分以上を画像にしているものもありますが、ユーザビリティを考えると避けた方が良いです。画像の中でテキストが記述されているものもクローラーが認識しづらいため、独立させたテキスト記述にするのが望ましいです。
画像を使う場合には、説明となる「キャプションテキスト」を併記する「キャプションテキスト」を併記しましょう。画像の下に内容を説明するテキスト文字を表示させることで、利用者にとっては画像が何を表すかがよりわかりやすくなります。（＊画像の下に表記されるのでアンダーテキストとも言われます）
画像サイズは大きくなりすぎないようにファイル容量が重いとページ表示に時間がかかるため、結果としてユーザビリティを損ねて利用者が離脱してしまいます。せっかく高画質な画像を使用しても意味がなくなるため、適度なサイズに調整しましょう。一般的には、72dpi（ppi）〜96dpi（ppi）の解像度であれば問題ありません。
HTMLファイルで使用する「画像」のファイル形式を指定する
実際に、設定できる画像のファイル形式には主に以下があります。
もっとも標準的な画像形式。静止画像データで使われ、1,677万色のフルカラーを表現することができる。圧縮すると元に戻らない「不可逆圧縮」という特徴がある。
pngWebページで使用するために開発された画像形式。 256色を扱える「png-8」と、 フルカラーを扱える「png-24」があり、グラデーションカラーや透明〜半透明などの 透過処理も作成可能。保存を繰り返しても画質は劣化しない。
gifWebページで使用するために開発された画像形式。 色数は最大256色と少ないため データ容量も小さくできる。「gifアニメ」と呼ばれる簡易アニメーションも作成可。 色数が多い写真やグラデーション表現には不向き。
svg拡大・縮小をしても画像が粗くなることがない「ベクター」という画像形式だが、 写真のような複雑な陰影を表現する画像には不向きからか、Webページでの使用は あまりされていない。
WebpGoogleが開発したオープンソースの次世代画像フォーマット。jpgより圧縮率が高く、 透過画像やアニメーションが作成可能。ファイル拡張子は「.webp」。
Googleが開発したということもあり、Googleは「Webp形式」を推奨しています。 特徴としては、以下などがあります。
- 画質を綺麗に保ちながらファイルサイズを軽くできる
- 画像の透過やアニメーション処理にも対応
pngやjpgと比べて画質を維持しつつ軽量化できる。また、アニメーションと透過処理を両立できるというメリットは大きいです。Webページで使用できる画像形式はいくつもありますが、今後は「Webp形式」を採用するのが望ましいといえます。
いずれにせよ、画像を使用する際は、ファイル容量や形式はもちろん、そもそも画像でなければいけないのかを考えた上で、画像を使うことが効果的であると判断したのであれば、積極的に使用していきましょう。
まとめ
1つでも当てはまったらチェックしましょう。
- 3つの注意点に従って「画像」を追加したり、修正できた
- HTMLファイルで使用する「画像」のファイル形式を指定できた
