ウェブサイトでは、その仕様や特徴に応じた適切な画像のサイズ、容量、解像度、画像形式などが存在します。これらを使い分けて適切に使用することで表示速度を上げ、ユーザーにとってストレスの無い快適なウェブサイトを作ることができます。
ウェブサイトやその要素にあわせて適切な画像へ変換することを、「ウェブサイトの画像最適化」と呼びます。
この記事では、画像最適化をする前とした後のサンプルをご提示し、最適化をするメリットをご紹介します。あわせて、最適化に際して何に気をつけるか、代表的な最適化ツール、次世代の画像フォーマット、などもご紹介いたします。
目次
最適化前と最適化後の比較
まずは実際に体感をした方が早いと思いますので、最適化前と最適化後の画像を比較してみます。
ご利用の環境によって差はありますが、多くの方の端末では、表示するまでに時間がかかったはずです。
こちらは最適化をする前で、容量が大きい画像となります。画質が良いなどのメリットはありますが、このような画像がウェブサイト上でたくさん使われていると、表示速度が格段に遅くなってしまいます。
続いて、最適化を行った後の画像を見てみましょう。
こちらの画像は、恐らく一瞬で表示されたはずです。多少画質が粗くなるデメリットはありますが、それ以上に、読み込みに時間がかからないことがウェブサイトでは大切になってきます。
また、画質が粗くなるとは書きましたが、ウェブサイトでの閲覧に際してはそこまで遜色が無く、肉眼では気にならないレベルであることがほとんどです。
表示速度の大切さ
ウェブサイトの表示速度についてGoogleは、
モバイルサイトではページの読み込み時間が 3 秒を超えると、53% の訪問が離脱につながると見込まれます。 （モバイルページの読み込みを速くする - Google AdSense ヘルプ より）
という文書を公開しています。
つまり、表示速度が遅いとユーザーが待ちきれず、せっかく訪れたサイトなのに離れていってしまうということです。
表示速度を上げるための施策は様々ありますが、中でも画像の最適化は手っ取り早く行え、効果も高いものになります。
最適化をしない場合のデメリット
もし最適化をしていない画像を大量に使った場合、以下のようなデメリットがあります。
- 離脱率が高くなり、ユーザーがウェブサイトから離れてしまう。
- ウェブサイトを利用しているユーザーのストレスが溜まる。
- 遷移に時間がかかるので、訪問して欲しいページに来てもらえない。
- 通信量が多くなり、スマートフォン等のデータをたくさん消費する。
最適化をした場合のメリット
最適化をし、表示速度を上げれば、以下のようなメリットが得られます。
- ユーザーの滞在時間（ウェブページに居る時間）が長くなる。
- サイトの閲覧がスムーズで快適になる。
- たくさんのページやコンテンツを見てもらえる。
- 通信量を抑えられる。
画像最適化で気をつけること
実際に画像最適化をする際、具体的にはどのようなことに気をつければ良いのでしょうか。 3つに絞って解説していきます。
画像のサイズ
ここでいうサイズとは、縦横のピクセル数となります。
例えば、記事の冒頭で紹介をした最適化前の画像のサイズは、6000×4000ピクセルとなっています。ウェブサイトで使用する画像としては、大きすぎます。
要素や目的によって適切なサイズは異なりますが、どんなに大きくても1600ピクセル以内には収めたいところです。記事の冒頭で紹介をした、最適化後の画像では、1200×800ピクセルにリサイズしています。
画像自体の容量（解像度）
画像自体の容量も最適化においては大切です。一般的には、解像度が粗くなればなるほど、容量が小さくなります。解像度について、許せる範囲まで下げ、画像自体の容量を小さくすることが必要になります。
画像形式
画像の形式については、JPGとPNGが特に使用頻度の高いものとなります。
主な使い分けや、特徴は以下の通りです。
JPG：写真などで使用。解像度を下げて容量を小さくできる。
PNG：イラストやロゴ、図表などで使用。あまり容量を小さくできない。
どちらも容量を下げることは出来ますが、JPGの方がその圧縮率は高いです。JPGとPNGについては、使用用途を元に適切に使い分けることが大切です。
画像の最適化（軽量化）が出来るツール
元のサイズ（縦横のピクセル数）を保ったままで、解像度を下げる形で容量を減らすことを画像軽量化と呼びます。
代表的なツールに、「TinyPNG」があります。そこまで画像が粗くならない形で、品質をある程度保ったまま軽量化をしてくれるツールです。
次世代の画像形式
今回取り上げたJPGやPNG以外に、WebPという次世代の画像形式もあります。画質を損なうことなく、JPGなどより遥かに容量を抑えられるのが特徴です。対応ブラウザがまだ少ない点が懸念となります。
WebPの圧縮率
WebPについてGoogleの公式文書では、WebP 可逆圧縮画像は、PNG 画像と比べてサイズが 26% 小さくなります。WebP の非可逆画像は、同等の SSIM 品質インデックスで同等の JPEG 画像よりも 25 ～ 34% 小さくなります。 （ウェブ用の画像形式 | WebP | Google for Developers より）
と記載があります。可逆圧縮とは、画像の容量を小さくした上で、それを元の状態に戻せる形で圧縮する方式で、その逆となる非可逆圧縮では、元に戻すことが出来ません。WebPでは両方の方式に対応しています。
PNGは可逆圧縮方式を採用しており、WebPで可逆圧縮する場合、PNGより画像容量が26%も小さくなります。
またJPGは非可逆方式を採用しており、WebPで非可逆圧縮する場合、JPGよりも画像容量が25～34%も小さくなります。
WebPで出来ること
WebPでは背景の透過も可能です。ロゴや文字などを重ねられる便利な透過画像ですが、JPGでは対応しておらず、PNGを使う必要がありました。PNGだとどうしても容量が大きくなるので、WebPでそこをカバー出来る点は大きなメリットです。
またWebPでは、GIF動画のように、アニメーションを作成することも出来ます。
参考：アニメーション WebP 画像では、非可逆、可逆圧縮、透明度がサポートされています。これにより、GIF や APNG よりもサイズを小さくできます。 （ウェブ用の画像形式 | WebP | Google for Developers より）
WebPを使うには
一般的なツールで、JPG画像やPNG画像をWebP画像に変換することが出来ます。
Squooshは、Googleが開発した、ブラウザ上で画像圧縮が出来る無料ツールです。WebPへの変換にも対応しています。
Squooshを使用し、変換前と変換後の画像を並べてみました。
サイズが小さくなっているにも関わらず、ほとんど見た目の差が無いことが分かります。
他にもWordPressのプラグインとして、サイト全体の画像を一括でWebPにしてくれるものもあります。
WebP Express – WordPress プラグイン | WordPress.org 日本語
まとめ
画像最適化の大切さやメリットなどについて、具体例もまじえながらご紹介しました。ページの読み込みが早くなると、ユーザーの満足度にも、検索順位にも、良い影響があります。
弊社では、「画像一括軽量化サービス」といったサービスを提供しています。
皆さまのウェブサイトの画像を一括で軽量化するサービスで、画質を極力維持し、対象画像の指定も可能です。
また弊社では、次世代の画像フォーマットであるWebPを利用した、ウェブサイトの構築実績もございます。先ほどご紹介したような、WordPressでのWebP対応も可能です。
画像最適化やWebPを使用したウェブサイトの構築について、またその他のどんな些細なことでも構いませんので、お困りごとがあれば、お気軽にお問い合わせいただけると幸いです。