分かりやすいWEBサイトにするために、画像は必要不可欠です。
しかし、画像を多く使い表示速度が落ちてしまうとSEOによくありません。
画像の品質を保ったまま、ページの表示速度を短縮する方法を紹介します。
画像の最適化する方法
具体的な手法を3つ紹介します。
WEBサイトの読み込みをどの程度早いかによって、使い分けてもいいと思います。
画像のファイル容量を圧縮する
WEBサイトにおいて画像は視覚的なインパクトを与えるとして重要な役割を担っています。ビジュアルを重視しているWEBサイトにとっては、読み込み速度よりも、画像のクオリティの優先度が高いことも多いです。
しかし、正しく画像が圧縮できれば画像のクオリティを保ったまま、容量を減らすことが出来ます。圧縮できれば読み込み速度が短くなることは事実です。
ファイル容量が100％のものが10％に圧縮するとさすがに、画像が粗くなってしまいます。
しかし90％〜80％に圧縮できれば、見た目は変わらず、WEBサイトの読み込み速度を十分に短縮できます。
私が使用している圧縮サイトはこちらになります。
画像をドラックするだけで、すぐに圧縮してもらえるのでいつも使用しています。
適切なファイルフォーマットを選ぶ
WEBに最適化された画像ファイルフォーマットを選ぶことで、読み込み速度を減らせます。
適切なファイルフォーマット（JPEG、PNG、GIF、SVG）を使用するが重要です。
JPEG
約1677万色の色数が使用できて、その豊富な色数から人や景色などの「自然物」の写真に向いています。
JPEGは写真の圧縮に適した非可逆圧縮方式であり、写真画像に限ってはJPEGのほうが見た目はそのままにファイルサイズが小さくなることが多いです。
しかし、保存を繰り返してしまうと画質が劣化してしまうのがデメリットがあります。
PNG
JPEGと同様の色数と透過処理が行えることから、イラストやロゴ、描き図板の「人工物」に向いているのがPNGです。
イラストやロゴなどの保存はJPEGだと圧縮ノイズが目立ってしまうのでPNGが適しています。
GIF
動画化された画像をWEB上で表示されるのに広く使われているファイル形式です。
GIFを使えば、比較的小さいファイル容量で動画化された画像が作成でき、短いメッセージをユーザーに伝えたり、よりコミカルな効果を演出できます。
SVG
シンプルな画像やテキストに使われるファイル形式です。SVGファイルは、図形やカーブ、線、テキスト要素を含んでいます。
レスポンシブデザインとも相性が良いという特徴があります。
しかし、写真など複雑かつ、色数やグラデーションを多く用いているものには向いていません。逆にJPEGよりサイズが大きくなります。
ファイル容量は小さく、JPEGやPNGと同じように画像検索エンジン上に表示されます。
私は、Adobe Photoshopを利用して画像の最適化をしています。
Loading属性の使用
Loading属性とは、imgやiframeの遅延読み込みができるというものです。
対応ブラウザは、ChromeとEdgeといった主なブラウザは対応していますが、Safariは正式機能としてはまだ対応していないです。また、Firefoxはimgのみ対応しています。
使い方は img 要素や iframe 要素で loading 属性を使って以下の値を指定します。
| 値 | 意味 |
| eager | 遅延読み込みをしない（すぐにロード） |
| lazy | 遅延読み込みをする（Lazy Load） |
Chrome などでは auto（遅延読み込みするかどうかをブラウザに委ねる）という値が利用可能なようですが、標準仕様には記載されていないです。 将来的に変更される可能性があるため、標準仕様に含まれるまで使用しない方が良いと思われます。
<img loading="eager" src="/images/01.jpg" width="960" height="593" alt="">
<img loading="lazy" src="/images/02.jpg" width="960" height="593" alt=""> 画像のスクロール位置に応じて「必要な分だけ画像を取得」するので、とても効率的です。
まとめ
表示速度が遅いと直帰率も上がってしまい、SEOに悪いです。
また、画像の最適化・圧縮をすることでコストもかからずWEBサイトのディスク容量を節約できます。
表示速度をを挙げれるように様々な対策をしてみましょう。
