画像最適化のすすめ

画像最適化のすすめ

画像最適化のすすめ

なぜ画像の最適化をすると良いのか?
この理由は2つあります。ひとつはページの表示速度の改善をしてページの離脱率を改善する為、もうひとつはSEO改善の為です。このSEO改善に関しては、Core Web Vitals(コアウェブバイタル)と呼ばれる仕組みが関係しています。(詳しくはこの「SEOの今」でまとめています。ご参照をお願いします。)

Core Web Vitalsはまだ導入されているわけではなく、Googleが今年発表した2021年以降新しく導入される要素です。新型コロナウイルスの影響でモバイルファーストインデックス(MFI)の導入も当初の予定より半年遅れて、2021年3月延期が決まっているので、このCore Web Vitalsの導入も早くて2021年の後半になると私は予想しています。このようにまだ対応する時間には余裕はありますが、Core Web Vitalsに改善することでSEOだけなく、ページ離脱率の改善にも寄与しますので導入時期、関係なく早めに対応することをお勧めします。

ページ表示速度と離脱率の関係

「ページの表示速度がどの程度、離脱率に影響するのか?」ということに関して、今回はGoogleが運営するThink with Googleというメディアの情報を使用して説明します。

表示速度と離脱率の関係

上記資料の画像は、表示速度が1秒からそれぞれ3秒、5秒、6秒、10秒増えた時に離脱率がどこまで増えるかというテスト結果です。驚くことに3秒増えるだけで32%も離脱率が上昇してしまいます5秒増えたら90%近く増え、6秒だと100%(2倍)を超えてしまいます。さらには、10秒だと120%も上昇します。通常時でも一般的に離脱率は50%程度はあり、それから数秒表示が遅くなるだけで表示を待てずにページから離脱や直帰する人が圧倒的に増えてしまい、ページの内容以前の部分問題が出るとなっています。5Gにも代表されるように通信環境が年々整備されて早くなり、パソコンの性能も上がって処理速度が改善される今は表示の早さに対して閲覧者も非常に敏感になってきています。
一方で逆に早く表示できる回線やパソコン性能があるので、画像の最適化はもはや不要だと考える方もいるかもしれませんが、最新鋭の環境は世界中のどんな状況でも整うということではもちろんありませんので、どんな環境でも早く快適にページを表示をさせる必要はあります。テストの結果が示すように2秒増えたら30%離脱率が上がってしまう事実もあるのでしっかりと対策しましょう。

画像最適化によるSEOの改善

次に画像最適化によるSEOの改善について説明します。先ほども書いたようにCore Web Vitalsは2021年以降にGoogleランキングの要素「ページエクスペリエンス」のひとつとして導入されます。

ページエクスペリエンスの評価

まずはページエクスペリエンスを説明します。ページエクスペリエンスとは、一言で説明すると「ページ来訪者がページを快適に閲覧する体験を阻害すること」は改善して廃城するようにしてくださいという内容です。この要素には既に導入されているモバイルフレンドリーやHTTPS(SSL)対応などもありますが、大きい要素して新たにCore Web Vitalsが入ります。Core Web Vitalsの要素はLCP、FID、CLSとあります。画像を最適化するとこのCore Web VitalsのうちのLCP(ページの表示速度)の改善に大きく貢献することができます。

画像を最適化できる2つの方法

画像を簡単に最適化できる方法いは2種類の方法があります。

1. 画像の圧縮

ひとつは画像の圧縮です。今回は、Compressor.ioのサイトを使って画像圧縮の仕方について説明します。

画像圧縮の比較

実際にこのサイト内の例を確認するとわかりやすいのですが、元々700KBの画像容量が変換したい画像をアップロードしてダウンロードするだけで250KBと65%以上軽量化ができます。しかも画像1枚だけなら10秒程度で作業が終わり、変換後の画像のクオリティもほぼ遜色ないです。10秒で終わる簡単にできる改善方法ですのでぜひ試してみてください。なお、対応している画像の拡張子PNGとJPG(JPEG)です。

おすすめの使用方法としては、例えば、スマートフォンで撮った写真を画像素材として使う時にパソコンに送り、画像の圧縮をした後の画像をペライチの画像素材として使用するようにすると良いです。今までの作業に「+1分以内」でできるSEO改善なので必ず行うようにしましょう。

2. 画像のリサイズ

もうひとつは画像のリサイズです。代表的な画像のリサイズ方法は以下3パターンあります。

(A)画像編集ソフトで編集

PhotoshopやGIMPなどの画像編集ソフトを使ってリサイズします。リサイズの目的ならWindowsに標準で入っているペイントでも構いません。

WIndowsペイント

Windowsのペイントを使用する場合、ソフトを立ち上げた時にサイズ設定が「パーセント」の方になっていて、このままだと大きさを調整しづらいと思いますので、「ピクセル」の方に切り替えて使うことをお勧めします。

(B)画像リサイズのWebサービスの利用

ふたつめは画像リサイズのWebサービスを使用して大きさを最適化する方法です。今回は「画像を縮小する」というサイトを使用して説明します。

画像を縮小する

サイトに画像をアップロードしてサイズ選んで「縮小する!!」のボタンを押すだけで選択したサイズに縮小できます。難しい設定は一切にないので初心者の方はこちらの方法がおすすめです。また、Photoshopのような画像編集ソフトで普段リサイズしている方も複数枚をまとめて縮小する時などにはこのようなサイトでリサイズすると早いです。

(C)スマートフォンのアプリの利用

ページに仕様する写真をスマートフォンで撮っている方はカメラのアプリに付属の機能やリサイズ専用のアプリでリサイズを使い、スマホでリサイズまで済ませてしまうと簡単にできると思います。リサイズするだけのアプリであれば、無料でダウンロードできるものも多くありますので試してみてください。

 

縮小するサイズは大きさはどれぐらいにするといいですか?というご相談も良く聞きます。
私のおすすめは「横幅が800px~1200px程度」です。これはWebページの横幅は通常広い場合でも1200px程度だと思いますので、1200px以上が必要になる場面は少ないからです。もちろん、他の事情もあると思うので、もっと大きくすることも構いませんが、その際は画像の容量が大きくなりすぎないように注意してリサイズしましょう。

最後に

画像の最適化(軽量化)をすることでページの離脱率とSEOの両方の改善に対応することができます。近年、デジタルカメラの性能が上がりきれいで鮮明な画像になる一方で画像の容量が重くなり、それが起因としたページ速度の遅延の状況もよく見ています。
必要なサイズなどひと手間の改善をすることで圧倒的に変わる要素です。まとめて行うと作業量も多くなりますので、都度対応したものを使用する習慣を身に着けることをお勧めします。