画像を縮小・圧縮して表示速度を高速化する方法

この記事の結論

• 表示速度を改善することで、ユーザーの離脱率が下がる
• ウェブページの表示速度は、グーグルからのページの評価に影響する(=検索結果に影響する)
• 実際の画像の縮小・圧縮の方法はこちら

なぜ画像を縮小・圧縮する必要があるのか

画像を縮小(リサイズとも言う)・圧縮することは、ホームページを作る上で欠かせない作業と言えます。

なぜなら、画像の容量を最低限まで落とすことで、ページの表示速度を高めることができるからです。

ページの表示速度を高めることで、主に以下の2つの大きなメリットがあります。

今回はこの2つのメリットの簡単な説明と、実際にどう画像の容量を落としていくかというところを解説したいと思います。

一応、「縮小(リサイズ)と圧縮の違いって何？」という方のために簡単な説明を載せておきます。

縮小(リサイズ)とは

そのままですが、縮小して大きさを変更することで容量を減らすことです。
例えば、1200 × 600(px)の画像を600 × 300(px)に縮小するなど。

圧縮とは

画像の余分な部分を取り除いてファイル容量を減らすことです。
例えば、1200 × 600(px)、容量500KBの画像を圧縮したとすると、画像の大きさ1200 × 600(px)は変わらないまま、容量を200KBに落とすことができます。

「どれぐらいファイル容量を減らせるか」ということに関しては圧縮方法によります。

ユーザーが離脱しづらくなるというメリット

「ホームページを訪れたユーザーが、ページの読み込み速度によってどのように行動が変わるか？」という研究はいろんなところで行われています。

例えば、以下の参考サイトでは、スマホサイトにおいて3秒を超えるとユーザーが半分以上が離脱するという結果が示されています(調査は2017年)。

グーグルは、スマートフォン向けサイトを対象に同様の調査を実施した。それによると、モバイルサイト表示速度の改善は進んでいるものの、PC向けサイトに比べるとまだ時間がかかり、15秒という値だそうだ。

ショックなことに、読み込みに3秒以上かかるとアクセス者の53％が閲覧を止めてしまうという。直帰率は読み込み完了時間が長くなるほど高くなり、3秒だと1秒の32％増、5秒だと同90％増、6秒だと同106％増、10秒だと同123％増になる。

引用元：https://boxil.jp/beyond/a5835/

ホームページの内容を見る前にユーザーが離脱してしまうと、どれだけ内容の良い記事を書いたりしても意味がありません。

まずはユーザーに見てもらうという意味で、表示速度を上げることはとても重要だと言えます。

検索結果で上位表示しやすくなるメリット

グーグルは、表示速度を上げることは、そのホームページの評価(=検索結果の順位）に影響を与えるということを明言しています。

例えば、ブログ記事をグーグル検索で上位表示させたいとして、内容のしっかりした良い記事を書いたとしても、ページの読み込みが遅いせいで順位に影響を及ぼす可能性があるということです。

つまり、グーグルからの評価を上げるには、

の2つを重視することが良いと考えられます。

表示速度の改善に関してはいろいろな方法があるのですが、ファイルの容量を削るという方法はシンプルで効果的であり、
またファイルの種類の中でも画像は特に容量が大きいので、

画像の容量を減らすことは表示速度改善に最も効果的だということが分かります。

自分のホームページの表示速度をチェックしてみる

グーグルが提供しているこちらのサイトを使えば、表示速度に関しての評価が見れます。

何をどう改善すれば良いか？という細かい情報も見れますので、自分のホームページを持っている人はチェックしてみてください。

ちなみに、私のサイトであるweb-loid.netは、色々な施策をした結果、表示速度は非常に高い数字を保てています。

PCサイト

スマホサイト

今回の画像の容量を減らすという施策も、とても効果があるので是非、参考にしてみてください。

実際に容量を減らしてみる

容量を減らすと言っても、ウェブ上のツールを使うだけなので簡単です。

まず、容量の多い高画質の画像を用意します。

自分は、無料で高画質な画像は、unsplashで手に入れています。こちらのサイトは画像の量も多く質もとてもいいのでおすすめです。

今回用意した画像↓↓(画像は適当に選びました笑)

こちらの画像、unsplashからそのまま保存した場合、横幅4608px、、縦幅3072px、容量4,898KB(約5MB)あります。

この画像をブログのアイキャッチや挿入画像として利用した場合、ファイル容量が大きいため、ページの読み込みに時間が掛かってしまいます。

この読み込み時間を出来る限り短くするために、画像の容量を削る作業を行います。

画像の縮小(リサイズ)

画像のリサイズは、単純に画像の幅を小さくします。

現在、自分のブログの記事の幅が698pxとなっているので、この幅に合わせて画像を小さくしていきます。

今回使うサービスは、Image Resizerというサイトです。

以下のように設定し、「縮小する!!」をクリック。

これだけで、374KBまで落とすことができました。

画像の圧縮

続いては画像の圧縮を行います。画像の大きさはそのままで、中身を削ったりすることで容量を少なくしていきます。

「画質が荒くなるんじゃないの？」

という疑問があると思いますが、人間の目では画質の変化は確認できないぐらい、上手く容量を落としてくれるので安心です。

今回使う圧縮のウェブサービスは、tinypngというサイトです。かなり有名なので知っている方も多いのでは無いでしょうか。

こちらのサイトで圧縮したいpng形式かjpg形式の画像を読み込みます。あとは勝手に圧縮してくれるのでそれを待ちます(約5秒程度)。

↓↓↓↓↓↓↓↓

これでなんと、70%も圧縮することができました。

先ほど縮小(リサイズ)した374KBの画像が、さらに113KBまで削れました。すごい。

肝心の画質ですが、違いはほとんど分からないかと思います。

圧縮前(374KB)

圧縮後(113KB)

以上で容量の削減が完了になります。

まとめ

今回、画像の容量を4,898KBから113KBまで削ることができました。

冒頭で言ったように、ファイルの容量を削ることが、表示速度を高める手段としてとても有効です。

表示速度改善には画像の容量を削る以外にも、以下のようなものがあります。

表示速度の改善に興味がある人はぜひ調べてみてください。

参考になれば幸いです。