フロントエンドエンジニア8ヶ月目の者です。
業務を進めていく上で、画像を圧縮したり、適切なフォーマットを選んだりする重要性を学びました。
そこで、今回は、画像の最適化について自身の勉強も含めて書けていけたらと思います。
##なぜ画像を最適化させる必要があるのか
そもそもなぜ画像を最適化させる必要があるのでしょうか。
それは、画像がWebページのパフォーマンスに大きく影響するからです。
画像はHTMLやCSSと比べてもファイルサイズが大きくなりがちです。
そうすると、どうしても画像を読み込むのに時間がかかってしまい、Webページのパフォーマンスに悪影響を及ぼします。
逆に言えば、画像次第でWebページのパフォーマンスは改善可能だということです。
では、この画像の読み込み速度を上げるために私たちができることは何なのでしょうか？
##適切な画像フォーマットを選択する
まず、考えるべきことは適切な画像フォーマットを選択することです。
では、どういった場合にどの画像フォーマットを利用すれば良いのでしょうか？
###JPEG
JPEGは圧縮率が高く、フルカラーの画像を扱えるので写真などの画像に用いると良いでしょう。
ただ、JPEGを使用する場合は圧縮率と画質に気をつける必要があります。
圧縮率を上げれば画像を軽くできますが、その分画質が落ちてしまいます。
そのため、JPEGを使用する際にはどこまで画質を落として、画像を軽くするのかといったことを考える必要があるでしょう。
###PNG
PNGは8bitと24bitの2種類あり、8bitでは256色、24bitではフルカラーで写真を保存でき、透過させられるのも特徴です。
PNGはJPEGとは違って可逆性圧縮を採用しているため、圧縮したデータを完全に復元できます。
しかし、その分データ容量が大きくなってしまうので気を付けましょう。
PNGの使い道はイラストやロゴです。
イラストやロゴはJPEGだと圧縮時のノイズが目立ちますが、PNGでは綺麗に書き出せるでしょう。
###SVG
SVGはベクター形式で表現された画像で、ラスター形式のPNGやJPEGと違い、拡大縮小で劣化することがないことが特徴です。
また、CSSやJavaScriptでアニメーションを制御できるのも特徴として挙げられるでしょう。
SVGの使い道としては、単純な形のオブジェクトを表現するのに向いています。
しかし、写真等の複雑な画像の表現には向いていないので気を付けましょう。
###GIF
GIFは256色以下の画像を扱うことができ、画像フォーマットの中では歴史が長いようです。
GIFはアニメーションで使うことが多いです。
ただ、GIFアニメーションは重くなってしまいがちなので、軽くするために工夫する必要があります。
###WebP
WebPはGoogleがオープンソースで開発している、新しい画像フォーマットです。
WebPは圧縮率が高いにもかかわらず、画質を担保しているのが特徴として挙げられます。
Googleの発表によると、PNGと比べ約26%、JPEGでは約25〜34%も容量を圧縮できるようです。
（ソース：A new image format for the Web）
しかし、WebPは一部対応していないブラウザが存在するので注意しましょう。
(引用：Can I use)
##画像を圧縮する
適切に画像を圧縮することも重要です。
画像の圧縮を行ってくれるツールがこの世には存在するので、それを使いましょう！
私はImageOptim（Macのみ）をいつも使用しています。
(引用：ImageOptim)
画像を使用する際には圧縮ツールに通すことを癖付けると良いかもしれません。
ちなみに、私はこんな感じでFinderのツールバーにImageOptimをセットしています。
##画質を落とす
画質を落とすことで、画像を軽くできます。
私はいつもPhotoshopで画質を調整しています。
画質を落としすぎて見栄えが悪くなってしまったら、元も子もないので見栄えが悪くならない程度に画質を落としていきます。
ファイル>書き出し>Web用に保存の手順でクリックすると下記の画面が出てきます。
この画面で右上にある画質の項目を0-100で変更できるので、見栄えが悪くならない程度に画質を落とします。
画像によって適切な画質が異なりますが、70くらいがちょうど良いでしょう。
もちろん、もっと下げられることもあるので、画像の見栄えを確認しながら画質を調整してみてください。
##GIFアニメーションを動画にする
GIFアニメーションはどうしても重くなってしまいます。
そのため、時にはGIFアニメーションを動画にした方が軽い！ということもあります。
###サイト内に動画にできるGIFアニメーションがあるか調べる
まずは、サイトの中に動画に変換できるGIFがあるかどうか確認しましょう。
この作業はLighthouseを使用することでできます。
- デベロッパーツールを開く
- Lighthouseタブをクリック
- Performanceチェックボックスにチェックを入れる
- Generate reportをクリック
上記の手順でopportunitiesのところに下記のようにGIFアニメーションを動画に置き換えたときの計測結果が出てきます。
###GIFを動画に変換する
世の中便利で、GIFアニメーションを動画にするためのツールも用意されています。
英語のサイトにはなりますが、こちらでGIFアニメーションをMP4にする方法が紹介されています。
##WebPを使う
軽量なWebPを使うのも一つの手です。
ただ、非対応のブラウザのためにフォールバックを用意する必要があります。
現在（2021/12/22）非対応のブラウザの中で気をつけるべきなのが下記です。
- IE 全てのバージョン
- MacOs Catalina以前のバージョン
- iOS 13以前
（引用：そろそろWebPに切り替えよう。変換方法や対応ブラウザ、使い方を解説！）
現状はまだまだフォールバックが必要な状態と言えますが、時間の経過につれて非対応ブラウザのシェアも少なくなってくるので、いつか非対応ブラウザを気にすることなく使用できる時が来るでしょう。
###フォールバックの準備
フォールバックにはpictureタグを使います。
<picture>
<source srcset="Webpのパス" type="image/webp">
<img src="フォールバックのパス">
</picture>
上記のように記述することで非対応のブラウザでは、フォールバックの画像が表示されます。
###Webpに変換する
Webpにはツールを使って変換できます。
有名なのはSquooshじゃないかなっと思います。
(引用： Squoosh)
SquooshはWebpの変換にも使えますが、画像の圧縮にも対応しています。
##パターンがあるものはリピートさせる
背景画像に多いですが、画像には一定のパターンが存在するものがありますよね。
そういった場合には、画像全体を書き出すのではなくパターンの最小サイズを書き出して、それをリピートさせることで画像サイズを抑えることができます。
backgroundプロパティ（MDN）で画像のパスとリピート処理を一括で指定できます。
##画像を遅延読み込みさせる
こちらは画像の最適化というよりも、ファーストビューを高速化させるための方法です。
画像を遅延で読み込みさせると、画像を最初に読み込まない分ファーストビューが高速化されます。
私がよく使用するのはlazysizes.jsです。
下記のようにclassにlazyloadを設定して、data-srcに遅延表示させたい画像へのパスを設定するだけです。
<img class="lazyload" src="低品質画像のパス" data-src="遅延表示させたい画像のパス">
詳しい使い方はこちらを参考にしてください。
##CDNを使う
現在は、CDNから画像を配信することがスタンダードらしいです。
CDNから画像を配信することによって、40%から80%のファイル削減効果があります。（ソース：Use image CDNs to optimize images）
下記の画像のようにフォーマットや画質までURLを変更することで指定できます。
（引用：Use image CDNs to optimize images）
そして、画像配信用のCDNにはSelf-managed image CDNとThird-party image CDNの2種類存在します。
###Self-managed image CDN
Self-managed image CDNは自分たちでインフラを管理することに抵抗がない人に最適な方法です。
ただ、商用のCDNよりも機能が少なくドキュメントも限定的です。
無料で使えるものでは、Thumborが代表として挙げられます。
###Third-party image CDN
Third-party image CDNは画像専用のCDNをサービスとして提供しているものです。
こちらは導入が簡単で10-15分ほどで完了します。
Third-party image CDNは有料で使用量に応じて費用がかかることが多いです。
そのため、予算と相談してどのサービスを使用するか決めましょう。
##まとめ
今回は色々調べながら、画像の最適化について書かせていただきました。
状況によっては今回紹介したことが使えないことがあるかと思いますが、参考になると幸いです。
最後まで読んでいただきありがとうございました。
##参考サイト