SEO対策

【サイトの高速化】ブログの画像を圧縮するおすすめツール

ブログ 画像 圧縮

こんにちは、りゅうのすけ(@k_r001)です。

この記事では、画像圧縮についてまとめています。

 

  • 自分のブログの離脱率を減らしたい
  • 画像の容量を軽くしたい!
  • 表示速度を少しでも上げたい!

 

こういった方に向けて、書いています。

 

\このサイトの表示速度/
ブログ 画像 圧縮

モバイルでの表示速度が97点に達しているので、参考になると思います。

画像圧縮の種類

ブログ 画像 圧縮

画像の圧縮は、画像の容量を小さくすることです。

 

 

実は、トリミングも画像圧縮のうちの一つです。

 

上記手順で圧縮を行えば、容量を最も小さくすることができます。

 

\画像縮小方法/

 

ブログの素材で一番重いのは動画

ブログ 画像 圧縮

容量の重さは、文字が一番軽くて動画が一番重いです。

ブログを重くする原因は、「画像の重さ」です!

 

\容量の重さ比較/

  文字     <     画像     <     動画

 

ただし、無理に画像を減らすと、文字ばかりの羅列になり、逆に人が離れる原因になってしまいます。

 

文字を主体的に使いつつも画像を利用しましょう。

ブログの表示速度を上げるには画像を圧縮する

ブログ 画像 圧縮

ブログの記事を軽くするには、画像を圧縮しましょう。

ブログに動画を載せる人は、少ないので画像を軽くすることに力を入れましょう。

 

画像一枚の容量は物にもよりますが、文字に換算すると、約1万文字ほどになります。

 

だからこそ画像の圧縮を行えば、サイト自体が軽くなります。

画像圧縮で削っている部分はどこなのか?

ブログ 画像 圧縮

画像圧縮で削っている箇所は、目に見えないデータです。

もし圧縮していることが目で見て確認できるのであれば、とてつもない視力の持ち主ということになります。

圧縮前と後の比較

\圧縮前 228KB/
ブログ 画像 圧縮

⬇︎⬇︎⬇︎⬇︎⬇︎

\圧縮後 59KB/
ブログ 画像 圧縮

イラストだからだと思うかもしれないですが、写真も同様です。

 

圧縮を繰り返し何度もしていると、目で見えてわかるようになることもあります。

 

ブログの画像を圧縮するオススメツール

ブログ 画像 圧縮

画像圧縮に使えるツールは、3つあります。

 

おすすめ画像圧縮ツール

 

この、3つのツールを使います。

「MAC」と「Windows」によって使い分ける必要があります。

 

 

それぞれOSによって使い分けましょう。

MACの人向け「imageoptim」

ブログ 画像 圧縮

imageoptim」は「MAC」であれば、ダウンロードしてソフトとして使うことができます。

ブラウザを開くという手間が省けますが、「Windows」には対応していません。

設定は、を押せば、変更できます。

 

オススメ画像圧縮率

  • JPEG 75%
  • PNG 70%
  • GIF 70%

 

圧縮率を設定すれば、あとはソフト上に画像をドラッグするだけで画像を圧縮できます。

MACを使っているという方は、ダウンロードしておきましょう。

 

\imageoptim/

 

Windows向け「squoosh」

ブログ 画像 圧縮

Squoosh」は、「Google」が推奨している画像圧縮サービスです。

ブラウザ上で使うのでダウンロードなどの必要はありません。

圧縮率や拡張子を簡単に切り替えれます。

 

「PNG」➡︎「JPG」など、拡張子を変更したいという方にもおすすめです。

 

ただし、「imageoptim」と比べるとブラウザを開かないといけないので、少々不便ですが他のサービスと比べると使いやすいです。

 

\Squoosh/

 

PNG形式で背景を透過させてる場合、JPEGに変更すると背景の透過が外れるので注意!

 

誤って背景の透過を消してしまった場合は、「removebg」を使うことでも変更可能です。

このサイトは画像をアップロードするだけで、画像の背景を自動で切り取ってくれます。

画像編集にも使えるので使いやすいです!

 

\removebg/

 

Windows向け「TinyPNG」

ブログ 画像 圧縮

TinyPNG」は、画像をまとめて圧縮できるのが魅力的です、

「Squoosh」も便利ですが、まとめて圧縮することができません

 

圧縮したい画像が複数ある場合は、「TinyPNG」を使いましょう。

 

画像をドラッグすれば、アップロードできてすぐに圧縮が始まります。

手順が簡単なので、パソコン作業に慣れてない人向けです。

 

\TinyPNG/

 

ページの表示速度を測定

ブログ 画像 圧縮

PageSpeed Insights」を使えば、表示速度を数値化できます。

ブログの記事を書いた後に、ページの表示速度を必ず測定しておきましょう。

 

\ページの表示速度測定/

 

速度を測定したいページのURLを入力すれば、ページの表示速度を測定することができます。

表示速度を上げる方法は、⬇︎下記にまとめてあります。

 

\WordPressの高速化まとめ/

 

ブログの画像はどこから集めればいいのか?

ブログ 画像 圧縮

画像を圧縮する方法が分かったとしても無断で勝手に取ってきていいというわけではありません。

 

画像には著作権があり勝手に使うと訴えられたりする場合があります。

 

安心してブログ運営をするには、商用利用無料の画像を使いましょう。

 

\商用利用無料の画像サイトまとめ/

 

自分で画像を作って使うのもおすすめです。

 

\画像作成ツールCanva/

 

上記記事でまとめたものを使用することで、安全なブログ運営をしましょう。

まとめ

画像圧縮で表示速度を最適化しておくこと、訪問者の離脱率を下げるだけでなくSEO対策にもなります。

 

「Googleが掲げる10の事実」でも遅いより早い方が良いと明記されているほどです。

 

自分のサイトに訪問してくれたユーザーのことを、大切にすることが結果自分のためにもつながります。

下記記事⬇︎で、画像圧縮の流れに関する具体的な流れについてもまとめてあります。

 

\画像圧縮の最適な手順まとめ/

 

表示速度にこだわりたい方は、参考にしてみてください。

最後まで見ていただき、ありがとうございました。
 

ABOUT ME
りゅうのすけ
高校卒業後、地元香川で就職、一度転職を経て現在はブロガーとして活動してます。 投資をしたり、MLMに騙されそうになった経験をもとに、ブログを書いています。
PS.

記事が有益だなと思った方は、サポートしていただけるとやる気出ます。
 

\1円からのドネーション/

仕事依頼

 

\WordPress開設依頼/

公式LINE

 

\公式LINEもやってます/
公式LINE無料プレゼント

 

  • ワンクリックで登録可能
  • 個人情報はこちらからわからないようになっているのでご安心を

 

こんな人におすすめ
  • ブログを進めていく上でわからないことがある
  • 設定など誰か相談できる人が欲しい
  • 記事ネタに困った時に情報収集したい
  • ブロガー仲間が欲しい

 
困っていることなど直接相談できる場所になってますので、登録しておくといいですよ!
 

登録者特典

 

公式LINE@無料プレゼント
  1. 限定公開記事の共通パスワード配布
    • ブログ内の限定公開記事のパスワードを配布してます。
  2. サイト作成依頼クーポンコード
    • サイト作成依頼時に使えるクーポンコードを配布します。
  3. ブログスターターキット
    • ブログに必要な便利ツール、イラストなど随時更新
  4. 完全個別無料相談
    • ブログについて、1日1人限定で無料相談を受けてます。
      (営業を仕掛けるのはやめてください。)

 

\友達追加しますと、下記のメニューが表示されます。/
公式LINEリッチメニュー

 
各ボタンをポチポチ押すことで欲しい情報だけで情報を取得できるので便利ですよ!