画像の利用を最適化する

画像はサイトを構成する単純な要素と考えているかもしれませんが、最大限に活用しましょう。すべての画像には個別のファイル名と alt 属性を持たせることができるので、この点を有効的に利用すると良いでしょう。

alt 属性は何かの理由によって画像が表示されないときに、代わりのテキストを示してくれるものです。

この alt テキストは短いですが、画像の内容を正確に説明しています

このような属性を使うのは、ユーザーが画像を表示しないブラウザを利用していたり、もしくはスクリーンリーダーのような別の手段でサイトを閲覧していたりする場合に、alt 属性の代替テキストがあれば画像に関する情報を提供できるからです。

何かの理由によって画像が表示されていませんが、alt テキストは表示されました

alt 属性を使うもうひとつの理由は、画像からリンクを張る場合に画像の alt テキストがリンクに対するアンカーテキストのように扱われるからです。ただし、サイトのナビゲーションとしてテキストのリンクで十分なのであれば、画像を使ったリンクを多用することは推奨されません。また、画像のファイル名と alt 属性をわかりやすく付けると、Google 画像検索のような画像に特化した検索エンジンにサイトの画像について伝えることができます。

適切な画像の使い方

簡潔で、かつ内容をきちんと説明しているファイル名と alt テキストを付ける ―― 最適化できるその他の多くの要素と同様、(ASCII 文字コードにおける) ファイル名と alt 属性は、簡潔かつ説明的なものが理想です。

注意点
- 可能であれば "image1.jpg", "pic.gif", "1.jpg" のような一般的なファイル名は使わない (何千もの画像を持つサイトの場合は、画像ファイルの名前を自動的に付けることを検討してみるのも良いかもしれません)
- 極端に長いファイル名を付けない
- alt 属性にキーワードを詰め込んだり、文章をすべてコピーして貼り付けない
画像をリンクとして使用する場合は alt テキストを提供する ―― 画像をリンクとして利用する場合は、alt テキストを提供すると Google にリンク先のページ内容が理解されやすくなります。テキストのリンクのアンカーテキストを書いているようなイメージで考えてください。

注意点
- ガイドライン違反と疑われるほどに極端に長い alt テキストは書かない
- サイトのナビゲーションに画像リンクだけを使うのは控える
画像はひとつの専用ディレクトリにまとめて保管する ―― 画像をドメイン名内の複数のディレクトリやサブディレクトリに分散して保管せず、ひとつのディレクトリ (例: brandonsbaseballcards.com/images/) にまとめられないか検討してみてください。こうすることで、画像へのパスを簡潔にできます。
一般的にサポートされているファイル形式を使う ―― JPEG, GIF, PNG, BMP の画像形式は、ほとんどのブラウザでサポートされています。また、ファイル形式に合わせて、拡張子を付けておきましょう。