【ブログ】画像を圧縮・リサイズする意味は？具体的な方法・基準・無料ツールも解説

【ブログ】画像を圧縮・リサイズする意味は？具体的な方法・基準・無料ツールも解説

ぴか

ブログのページ表示速度を高速化したい。
画像の圧縮・リサイズ方法が知りたい。

こういった疑問を解消します。

✔︎本記事の内容

✔︎筆者情報

ブログのページ表示速度を上げるために必須なのが“画像の圧縮・リサイズ”です。

「画像を軽くするのが大事なのは知ってるけど、方法・基準がわからない」という方がSNS上で散見されます。

本記事では、そんな画像圧縮初心者に向けて、画像の圧縮・リサイズの方法と基準をわかりやすく解説します。

ブログを始めたばかりで画像の圧縮・リサイズのやり方がわからない方はもちろん、なんとなくやっているけど改めて基準が知りたい方も、是非読んでみてくださいね。

なぜブログ用の画像は圧縮する必要があるのか

サイズが大きい画像を使用することで、ページの表示速度が下がり、結果的にGoogleからの評価が下がります。

Googleからの評価が下がるということは、検索で上位表示することが難しくなり、そのさきの目標としていた“販売”や“申し込み”が達成できなくなります。

ぴか

ブロガーとしては致命的・・・

Googleサーチコンソールのヘルプに、以下のような記載もあります。

速度が重要な理由

ページの読み込みに時間がかかると、直帰率に深刻な影響を及ぼします。具体的には:
ページの読み込み時間が 1 秒から 3 秒に増加すると、直帰率は 32% 増加します。
ページの読み込み時間が 1 秒から 6 秒に増加すると、直帰率は 106% 増加する。
遅いと判断されたページは、Google 検索での順位が下がる可能性がある。
ケーススタディをご覧ください。

出典：Googleサーチコンソールヘルプ

表示速度が遅いとユーザーにストレスを与えた結果、直帰率が上がり、Google検索での順位が下がる可能性があるということ。

ページ読み込みが遅くてページバックした経験は、本記事を読んでいる方もありますよね。

せっかく訪問してくれたユーザーのためにも、画像を適切なサイズにして表示速度を上げていきましょう。

【ブログ】画像はリサイズしてから圧縮が最適

実は画像を圧縮するだけでは、後述する基準のサイズまで圧縮できないことがほとんど。

unDrawのように最初から画像サイズが小さい場合は、プラグインの自動圧縮だけで事足りますが、以下のような画像を利用する場合はリサイズが必要です。

ブロガーの中には、PowerPointやKeynoteを使ってアイキャッチを作成する人が多くいますよね。

中には圧縮するものの、100KBを下回らずに重たいまま投稿している人も。

これでは、更新する度に蓄積して表示速度が大幅に落ちてしまいます。

画像属性にかかわらず、リサイズ＋圧縮すれば30KBほどまで画像サイズを落とすことができるため、必ず行なっていきましょう。

次の章ではリサイズ方法と、リサイズするピクセル数を理由も含めて解説します。

【ブログ】画像をリサイズする方法

画像のリサイズは、無料WebツールBULK Resize Photosがおすすめ。

BULK Resize Photosなら無料かつ簡単に画像をリサイズすることが可能です。

BULK Resize Photosにアクセスしたら、リサイズした画像をドラッグ＆ドロップ。

左部メニューから『幅』を選択して、横幅を指定します。

ブログで利用する画像は、基本的に横幅700〜800px（ピクセル）あれば十分です。

中には有料テーマによって推奨する画像サイズがあるので、有料テーマを利用している方は推奨サイズを設定しましょう。

ぴか

当サイトで利用しているJINの推奨サイズは760pxだよ！

幅を入力したら、『スタートリサイズ』をクリック。

ちなみにGoogle砲を狙うのであれば、幅を1,200pxにする必要があります。

GoogleはGoogle砲の被弾条件をを公開。

さらに、“高画質の画像”については以下の通りに説明しています。

高画質でサイズの大きい画像（幅が 1,200 ピクセル以上）を使用します。
この高画質の画像をユーザーに表示する権利が Google にあることを保証します。そのためには、AMP を使用するか、large-image-optin@google.com にメールを送信して、Google のオプトイン プログラムへの参加を申し込む必要があります。

出典：Googleサーチコンソールヘルプ

上記から、表示速度を上げる上でGoogle砲も受けたい方は幅を1,200pxにするのが良いでしょう。

上のような画面が表示されると同時に、リサイズされた画像がダウンロードされます。

次の章では圧縮方法を解説していきます。

【ブログ】画像を圧縮する方法

画像の圧縮は、Webツールとプラグインの2つを利用して行うのがおすすめ。

ひとつひとつ解説していきます。

ブログ画像圧縮①：tinypng

まずは、無料のWebツール「tinypng」を使用して、圧縮していきます。

tinypngは無料ながら、画像の美しさを担保したまま大幅に圧縮してくれるツールのこと。

上記２手順だけで画像大幅が完了。

次は圧縮した画像をプラグイン「EWWW Image Optimizer」 を利用して、さらに圧縮していきます。

ブログ画像圧縮②：EWWW Image Optimizer

「EWWW Image Optimizer」は、WordPressに画像アップロード時、自動で画像サイズを圧縮してくれるプラグインのこと。

画像を劣化することなく、圧縮してくれるのも特徴です。

さらに、「EWWW Image Optimizer」は画像をアップロードするときに自動で圧縮してくれるだけでなく、すでにアップロード済みの画像も一括で圧縮可能。

表示速度を意識する前にアップロードしていた重たい画像も、ワンボタンで一括圧縮可能なのは嬉しいですよね。

EWWW Image Optimizeインストール方法

「EWWW Image Optimizer」の他に「EWWW Image Optimizer cloud」もありますが、設定画面に日本語があるため、「EWWW Image Optimizer 」を利用しましょう。

EWWW Image Optimize設定方法

最後に画面下にある『変更を保存』をクリックしたら完了です。

これで、WordPressにアップロードする画像は自動で圧縮されるようになりました。

最後に既にアップロード済みの画像を一括圧縮する方法を紹介します。

EWWW Image Optimizeでアップロード済み画像を一括変換

まずは、WordPress管理画面のメディア<一括最適化をクリック。

続けて表示される画面中央の『最適化されていない画像をスキャンする』をクリック。

圧縮可能な画像数が表示されたら、『○○点の画像を最適化』というボタンが現れるため、クリックすれば完了です。

✔︎画像圧縮まとめ

少し手間ではありますが、画像を圧縮することで大幅にサイトの表示速度が向上します。

【ブログ】画像圧縮・リサイズに関するQ＆A

ブログ用の画像を圧縮・リサイズする際に、よくある質問についてまとめました。

質問①：圧縮するファイルサイズの目安は？

ファイルサイズは40KB〜80KBがおすすめです。

画像サイズにもよりますが、記事のアイキャッチ・見出し（h2）の下に入れる画像なら、ファイルサイズが40KB〜80KB程度で画像の美しさを担保できます。

※使用している画像の画素や色彩にもよって誤差はありますが

質問②：画像のファイル形式は？

画像の属性によって異なります。

一番ファイルサイズが軽いのはJPEGですが、イラストの場合JPEGだと劣化してしまう可能性あるため、「とりあえず軽いからJPEG」というのはおすすめできません。

使用する画像属性によって使い分けていきましょう。

質問③：画像を圧縮したら画像が劣化しない？

圧縮率が高すぎると劣化してしまいます。

質問①で説明した通り、ファイルサイズが40KB〜80KB程度あれば美しさを担保できますが、画像サイズ・圧縮率によって誤差が生まれます。

画像を圧縮する際はオリジナルの画像は残しておくのがおすすめです。

もし、画像が劣化してしまった場合は圧縮率を変えて圧縮してみましょう。

まとめ：ブログ用の画像は必ず圧縮・リサイズしよう

ブログ用の画像圧縮・リサイズは手間ですが、行わないとGoogleからの評価が下がり、結果的に目的である収益に繋がりにくくなってしまいます。

しかし、こういった細かな積み重ねを行なっていくことが成功にも繋がるので粛々と行なっていきましょう。

正直いうと、筆者はどうしても面倒臭い時はプラグインの自動圧縮だけで済ませる時もあります。

自分の体力・ストレスと相談して無理のない程度に頑張っていきましょう（笑）

関連記事 【JIN高速化】表示速度のスコアを96まで上げた方法