ブログ

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

【ブログ】画像を圧縮・リサイズして表示速度を上げよう

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

【ブログ】画像を圧縮・リサイズして表示速度を上げよう
ぴか
ぴか
ブログのページ表示速度を高速化したい。
画像の圧縮・リサイズ方法が知りたい。

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

✔︎本記事の内容

  • ブログ用の画像はリサイズしてから圧縮が最適
  • ブログに適切な画像サイズ
  • ブログ用の画像を圧縮・リサイズする方法
  • ブログ用の画像圧縮・リサイズにおけるQ&A

✔︎筆者情報

ぴかメモ 管理人情報

本記事の筆者は、ブログ歴1年3カ月です。
3ブログを運営して、月25万円ほどの収益があります(2020年9月)

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

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

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

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

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

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

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

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

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

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

速度が重要な理由

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

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

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

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

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

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

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

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

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

  • 写真
  • スクリーンショット
  • PowerPoint
  • Excel
  • Keynote

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

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

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

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

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

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

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

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

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

BULK Resize Photos 画像 リサイズ

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

BULK Resize Photos 画像 リサイズ

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

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

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

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

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

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

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

  1. ユーザーの関心を引くと思われる内容のコンテンツを投稿する
  2. コンテンツに高画質の画像を使用する

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

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

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

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

BULK Resize Photos 画像 リサイズ

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

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

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

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

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

  • tinypng
  • EWWW Image Optimizer

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

ブログ画像圧縮①:tinypng

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

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

tinypng
  1. 画面中央に圧縮したい画像をドラッグ&ドロップ
  2. 『Go Pro』をクリック

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

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

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

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

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

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

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

EWWW Image Optimizeインストール方法

EWWW Image Optimizeインストール方法
  1. WordPress管理画面のプラグインをクリック
  2. 「EWWW Image Optimizer」で検索
  3. 『今すぐインストール』

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

EWWW Image Optimize設定方法

EWWW Image Optimizeインストール方法
  1. WordPress管理画面の設定から該当プラグインをクリック
  2. 基本タブを選択
  3. メタデータ削除チェック

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

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

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

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

EWWW Image Optimize 一括圧縮

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

EWWW Image Optimize 一括圧縮

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

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

✔︎画像圧縮まとめ

  1. まずは、tinypngで圧縮
  2. ①で圧縮した画像を「EWWW Image Optimize」で自動圧縮

※過去の画像を一括圧縮したい場合は「EWWW Image Optimize」の一括圧縮機能を使用する

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

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

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

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

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

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

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

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

質問②:画像のファイル形式は?

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

  • 写真:JPEG
  • イラスト:PNG

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

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

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

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

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

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

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

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

まとめ
  1. 画像をリサイズ:BULK Resize Photos
  2. 画像を圧縮:tinypng
  3. プラグインの自動圧縮を利用:EWWW Image Optimize

※過去の画像を一括圧縮したい場合は「EWWW Image Optimize」の一括圧縮機能を使用

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

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

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

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

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

現代人におすすめの読書サービス知ってますか?

多忙で読書する時間がない、活字が苦手で読書ができない・・・

そんな方におすすめなのがAmazon運営の『Audible』です。
ビジネスマンの間ではスキルアップに使用している方も多くいます。

以下のリンクから申し込みをすると1ヶ月間無料です。

\今なら好きな本が1冊無料/
Amazon Audible公式HP 

クリックするとAudible公式HPに移動します
無料体験はいつ終了するかわからないのでお早めに
※30日間の無料トライアル中は一切料金がかかりません。