今回は改善できる項目の内、「効果的な画像フォーマット」についての改善施策をご紹介します。

画像のサイズというのはサイトのパフォーマンスに大きく影響します。
webサイトを開いた際に画像が重くてなかなか読み込まれないと、ユーザーをイライラさせたり、最悪の場合サイトを離脱してしまうなどネガティブな影響を与えてしまうことに。

そこで画像を軽量化するなど効率的に画像を表示させる施策が必要になってきます。
いくつか方法があるので、一つずつ見ていきましょう。

1.   画像を圧縮する

この方法がシンプルかつ効果があり、大抵の場合はこちらの方法で対処が可能です。
PageSpeed Insightsのレポート画面で「効率的な画像フォーマット」の項目をクリックすると改善できる画像のリストが表示されます。

これは適切な画像サイズになっておらず、容量を減らせる余地があることを示しています。

WordPressを作成されたサイトであればEWWW Image OptimizerCompress JPEG & PNG imagesなどのプラグインを使用することで画像を圧縮することが可能です。

WordPressではないサイトの場合、オンラインツールを使用して画像を圧縮することも可能です。
https://compressjpeg.com/ja/https://compressor.io/あたりが使いやすいです。
それぞれのツールで一度に圧縮できる枚数や設定できる項目が異なりますので、使い勝手を試していただくことをお勧めします。

2.   WebP画像の使用

これは以前書かせていただいた記事とも重複しますが、フォーマット自体を変えてしまう方法です。
【表示速度改善施策】次世代フォーマットでの画像の配信

こちらも画像を軽くするという意味では優秀なのですが、全てのブラウザがWebP対応している訳ではありませんのでWebP画像と圧縮されたjpg画像、png画像との併用が理想的です。

3.   正しいサイズで画像を提供する

これは圧縮云々の前に、その画像サイズ自体が大きすぎるという場合に当てはまります。
具体的に言うとスマホ用の画像であれば一般的に横幅640px程度と言われていますが、そこに横幅5000pxなどのそもそも必要以上に大きな画像を使用しないでねということです。
適切にリサイズした画像を使用しましょう。

4.   レスポンシブな画像を配信する

3と内容は似ているのですが、例えばパソコン用とスマホ用ではそもそも必要な画像サイズが違います。
そのため、デバイスによって画像を出し分けるとより効果的な画像配信が可能となります。

<img src = “flower-large.jpg” srcset = “flower-small.jpg 480w、flower-large.jpg 1080w” sizes = “50vw”>

例えばこのようにimgタグに画像の出し分けをする記述をすることで画面サイズによって画像を出し分けることができます。

エンジニアを社内に抱えていたり、外注できる場合はsharp npm package や ImageMagick CLI toolなどのリサイズツールを使用する方法もあります。

5. 画像の遅延読み込み

こちらは画像のサイズを変更するのではなく、画像自体を必要に応じて表示させましょうということです。
例えば最初にページを開いた時、少し乱暴な言い方ですが画面に収まる分の画像だけ見ることが出来れば良いのです。
残りの下の方にある画像はスクロールに合わせて順次読み込めれば画像の読み込み負荷が軽減されます。

従来であればWordpressであろうとなかろうとlazyload(遅延読み込み)用のプラグインを使用していたのですが、最近ではネイティブ lazy-loadという仕組みが整いつつあります。
(プラグインとはエンジニアがwebサイトのコードを書くときに使う便利ツールのようなもの)
要はブラウザの標準機能として実装されつつあるということです。
Chrome、Firefox、Edgeなどの主要ブラウザは対応済み。Safariも実装される予定のため、今からであればプラグインを使用せずとも以下の書き方をすることによって遅延読み込みをさせることができるようになります。

<img src=”lazy-img.jpg” loading=”lazy” alt=”” height=”” width=”” />

まとめ

いかがでしたでしょうか。
ケースバイケースではありますが、画像を最適化すると言っても様々な方法があります。
エンジニアの手を借りなければ難しいものもあればWordpressのプラグインを利用するなど比較的手のつけやすいものもあります。
画像の最適化は目に見えて効果がわかりやすいため、できることから対応していただくことをお勧めします。

ページスピードの改善対応を行っています。サイトの規模感によって金額も変わります。お見積りのご依頼はお気軽にフォームよりご相談願います。