主にデザイン面では画像処理や画像の使用位置、使用数、使用方法が重要となってきます。基本的に求められることはWEBサイトの表示速度をなるべく速くする＝画像ファイルのサイズや使用回数を調整することが必要となる。
画像使用方法について
WEBサイトでの画像の使用方法には、HTML側で用いるimgと、css側で用いるbackground-imageの2つの方法があり使い分けるポイントとして
①imgタグはテキストの内容をカバーする画像に用いる。
- ・あくまでもテキストを補完する役割を担うためメインコンテンツ内が望ましい。
- ・alt属性で画像の内容を説明する
- ・各画像の周辺に短いキャプションを添える（例<figcaption>たまの画像</figcaption>）。
- ・XMLサイトマップへ画像を登録、送信する。
②background-imageは装飾目的の画像に用いる。
文字の背面に画像を敷くことでテキストを引き立てることが目的。特にh1やh2などのSEO上重要なタグについては、HTMLでテキストをしっかり用意した上でCSSを使って背面を装飾する。
- 例
- 「HTML」→<h1>SEOについて</h1>
- 「CSS]→h1{background:url(image/a.png)no-repeat;width:560px;height:39px;}
背景画像を活用してキーワードを調整しよう
背景画像を使ってキーワード調整することが可能、つまりはキーワードを多用すると評価が下がってしまうがやむ得ぬ場合もあるためそのときは背景画像を利用してテキストっぽく表示させる（これ以上キーワードを増やせない場合は、背景画像を活用しよう）。
CSSスプライトで表示速度改善しよう
ページ表示を高速化させる方法としてCSSスプライトが存在します。CSSで読み込む複数の背景画像を1枚の画像にまとめるというもの（background-positionにて1つの画像から位置指定して表示）。それによって読み込み回数を減らし、画像間に少々の隙間があったとしても、トータルのデータサイズはすくなくてすみます。アマゾンはこれを使用しているとのこと。デメリットとしは修正の手間が面倒ということです。
- 例
- ・h2{background: 0 0 uri(image/spite.png) no-repeat; width: 341px; height: 100px;}
- ポイント
- ・変更する可能性の少ない画像においてのみ使用する。
- ・アイコンなど頻出する画像限定で利用する。
画像ファイルを圧縮しよう
方法はさまざまであるが、画像ファイルを軽くしたほうがページ読み込み速度は向上する。
具体的な修正方法を探すツールとしてグーグルが提供しているPageSpeedInsightsがあります。
URLを入力→改善ポイントが表示→リンクをクリックするとその改善箇所が表示される。
画像ファイルサイズを小さくするツール
・compressor.io
・https://tinypng.com/
・https://www.jpegmini.com/
文字の調整をCSSで行おう
検索エンジンでは文字間隔を認識できないためCSSのletter-spacingで文字間隔は調整する。
画像の作成と管理上の留意点
- ・画像は専用フォルダにまとまる
- ・画像へのパスを簡潔にする。
- ・画像それぞれに固有のファイル名をつける。
- →簡潔で画像に関係のある名前をつけることが推奨されている。なにも関連のない名前はNG.