Published on

ちょっとした画像最適化でCVも向上しSEO対策にもなる

目次

ホームページやブログなど、画像はたくさん使われています。

特にモバイル端末では、画像のサイズが大きいと表示に時間がかかり、サイトの閲覧者を待たせてしまうことにもなりますね。
これはページの離脱につながったり、SEOの面でも表示が遅いとマイナスになるので、よくない状態です。

画像でコンバージョンが上がる研究データです。

[sanko href="https://calendar.perfplanet.com/2014/images-are-king-an-image-optimization-checklist-for-everyone-in-your-organization/" title="Images Are King: An Image Optimization Checklist for Everyone in Your Organization" target="_blank"]

最適化とはどういうこと

高画質の画像や大きなサイズの画像を加工など何もせず、そのままの状態でサイトにアップして表示している状態は、表示が遅かったりしてデメリットが多いです。
なので、できる限り質を保ったまま容量を減らすように画像を圧縮をしたり、早く表示するための対策をとりましょうということです。

なぜ最適化をしたほうがいいのか

スマホなどのモバイル端末での閲覧が多くなっていて、モバイル端末での閲覧は通信速度が早いとは限らなくて、スペックも最新のものとは限らないです。
なので、できる限り画像の圧縮などをして画像の表示を早めることで、ユーザーにとってストレスのないように対策をしたほうがいいですね。
つまり、離脱率が下がり、表示速度の向上によってSEO対策にもなるので、PV増やコンバージョン率アップに繋がるというわけです。

色々ある画像形式

  • JPEG 2000（2000 年）
  • JPEG XR（2009 年）
  • WebP（2010 年）
  • FLIF（2015 年）
  • HEIF と BPG
  • BPG（2015 年
  • HEIF （2015 年）

とまあこのように、たくさんありますね。

WebPはGoogleが開発したもので、NetflixやAmazon、Yahooなどが使っているようです。

どれがいいのかって問題もありますが、このあたりはブラウザによって対応していないなど、互換性がなかったり、使い勝手がよくないです。

今の所、まだブラウザの対応問題もあって、一般的にはまだあまり使われていないんですが、GoogleはWebPをこれから推して行く流れのようです。

じゃあ互換性がいいのってなに？って思うんですが今の最新のエンコードでは2つが主流のようです。

  • MozJPEG
  • Guetzli

簡単に説明すると、MozJPEGはブラウザのfirefoxの運営元が開発したもので、
圧縮しても高品質を保つのでWEB用に適しています。

Guetzliは人間の目ではわからないぐらいのぎりぎりまで圧縮をめざすものです。
デメリットは圧縮処理が重い。

なかなか分かりづらいですが、結局のところ、エンコーダの種類よりどれぐらい圧縮するかが重要なようです。

具体的な対策

画像を最適化にする方法はいくつかあるので紹介します。

プログレッシブ JPEGで圧縮すると体感速度が早くなる。

JPEGの圧縮はベースラインとプログレッシブがあって、違いは表示のされかたです。

ベースラインは上から下へ順に表示されます。
重い画像を開くと上から少しずつ表示される画像を見たことありますか？
あれです。

プログレッシブは低画質から高画質へ変わります。

わかりやすい比較がこちらにあります。
「Start Animation」をクリックすると表示の違いがわかります。

[sanko href="http://www.patrickmeenan.com/progressive/view.php?img=https%3A%2F%2Fwww.nps.gov%2Fplanyourvisit%2Fimages%2FGrandCanyonSunset\_960w.jpg" title="Progressive Jpeg Demonstration" target="_blank"]

プログレッシブのメリットは最初から画像が表示されるので、読み込みが早いと言う印象が与えられる。

注意点として、かなり小さい画像ではサイズがベースラインより多くなるかもしれないので意味がなくなるかもしれません。

photoshopでは書き出しのオプションでプログレッシブが選択できます。

圧縮率がどれぐらいがいいのか

圧縮率はどれぐらいがいいのかですが、参考までにTwitterの例では
プログレッシブ、CDNを使っていて圧縮率はページによって変わりますが85〜96％ぐらいにしているようです。
[sanko href="https://www.webpagetest.org/result/190509\_Y2\_781cd2b4b7b8b2aee65e30e6a800d6b4/1/performance\_optimization/" title="web page test" target="_blank"]

Googleによると、通常のWEBサイトでは圧縮率90だと無駄に高いそうで、80ぐらいでいいようです。

ウェブの場合 q=90 は無駄に高すぎます。 q=80 で十分であり、2x ディスプレイなら q=50 で十分です

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/automating-image-optimization/?hl=ja#closing-recommendations

もちろんもっと圧縮しても問題無い場合は50とかでも大丈夫です。

圧縮に使えるツール

画像圧縮ツールは検索すれば色々でてきますね。
エンコード方式が不明なものも多いですが、最新の方式が使えるツールを一部紹介します。

「Image Optim」
https://imageoptim.com/mac
このツールはweb以外にmac版だとダウンロード可能なアプリが使えます。
高圧縮が可能なGuetzliも使えます。

試しに75ぐらいの圧縮率で8.5メガの画像を圧縮してみました。

3メガまで圧縮されていますね。

読み込み速度向上にはCDNサービスも使おう

CDNは早く読み込めるメリットがあるので積極的に使いたいところです。

WordPressでは「jetpack」プラグインに画像のCDN機能が使える「Photon」という機能があります。無料で使えます。
デメリットは画像サイズが勝手に調整され、アクセスが若干遅いかもです。

「Cloudinary」という画像CDNサービスはNetflixやレッドブル、も使っているサービスです。Googleも画像管理するコストを考えたらCloudinary使ったほうがいいと、オススメのようです。
無料プランもあり、圧縮効率の設定や管理、編集などもサイト上で行えます。
画像をドラッグアンドドロップなどでアップロードしてリンクをコピーしてサイトに貼るだけです。

よろしければこちらからどうぞ。
Cloudinary公式サイト

WordPress用のプラグインもあるようです。https://ja.wordpress.org/plugins/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/
エディタが従来のクラシックバージョンでは使えそう。

その他の最適化方法

大きい画像のリサイズは負荷が大きいから気をつけたほうがいいよー、リサイズの方法を見直してみてねってことで、以下のような対策があります。

[sanko href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia\_and\_embedding/Responsive\_images" title="Responsive images" site="MDN web docs" target="_blank"]

具体的にはwidthやheightの属性ですね。

<img src="elva-fairy-800w.jpg" style="width:100px;height:100px;" alt="Elva dressed as a fairy">

これだと負荷が大きいからsrcsetやsizesを使ってくれてもいいよということです。

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

デバイスごとに最適な画像を使うから表示が早くなるので、ユーザーにもSEOにもいいよーってことですね。

重要じゃない画像を遅らせて読み込む

遅らせるメリットについては

  • データ消費を削減（ギガ泥棒しない）
  • バッテリーを節約
  • ダウンロード速度の改善

この対策は一個のJSファイルを読み込むことで実現できます。

lazysizesです。

かなり簡単に使えるようなので手順を紹介します。

  1. ファイルを読み込む
  2. 画像タグにclass="lazyload"を追加する

これだけで使えるようです。

読み込みコードです。srcのパスはファイルを設置した場所に合わせましょう。

画像タグのコード

重要な画像を優先して読み込むプリロード

サイトのロゴなど、真っ先に表示したい画像に対して有効です。

<link rel="preload" as="image" href="logo.jpg"/>

重要でない画像には使わないようにしましょう、パフォーマンスが落ちるようです。

まとめ

画像圧縮はマスト。少しでも読み込み速度を改善するためにできるだけ圧縮しましょう。

圧縮率は80が基準で、画質重視でなくもっとサイズダウンさせたいなら80以下にしよう。

ぼやけた画像からくっきり画像に変わる、プログレッシブ形式だとユーザーが読み込みが早いと感じる。

画像の読み込みをはやくするためのCDNはCloudinaryがおすすめ。

ときには画像を遅らせたりして、ユーザーの負担を減らそう。

画像を最適化させる方法はけっこうあるので、サイトの特性に合わせて試してみるのがいいですね。