ブログ用の画像を圧縮して軽くする4つの方法

ブログの画像を圧縮する4つの方法

ブログの記事を書く際に、画像を貼り付けることって多いですよね。

画像のデータは、テキスト(文章)のデータに比べてかなり大きいです。

そのため、そのままの画像の状態でどんどん貼り付けてしまうと、記事を見ようとした時にページが表示されるまで時間がかかってしまう場合があるので、ブログ用の画像は圧縮して容量を小さくしたものを貼る方が良いです。

今回は、ブログ用画像を圧縮してから貼ることのメリットと、実際に圧縮する方法を4つ紹介していきます。

それでは、本題に入ります。

ブログ用画像を圧縮するメリット

ブログの容量が圧迫されることを防げる

無料サービスのブログ(Ameba・livedoor・はてなブログ等)を利用する場合でも、サーバーを契約してWordPressを利用する場合でも、ブログに使用できるデータの容量が決まっている場合がほとんどです。

使っているブログサービスや契約したサーバーのプランによっては、ちょっとやそっとじゃいっぱいにはならない容量のものもあります。
しかし、容量が多くない場合は、画像をどんどん貼ってしまうと、かなりのデータ容量を使ってしまう場合があります。

そのため、圧縮して軽くした画像を貼ることで、データ容量がすぐにいっぱいになる…という事態を避けることが出来ます

画像データが軽いと、早く画像=ページを表示できる

テキスト(文章)の部分は基本的にデータが軽いため、すぐに表示されます。

一方、画像はデータが重いため、表示させるために読み込んでしまい、時間がかかってしまう場合があります

ブログに限らず、サイトを見る時になかなか画像が表示されなくてイライラしてしまった経験、ありませんか?
どうしても画像を見たいと思うようなサイトなら待てるかもしれませんが、たまたま検索で見つけたようなサイトの場合だと、表示されるのを待たずに、別のサイトを見に行ってしまいがちですよね。

せっかく自分のブログを見に来てくれた人が画像のせいで記事を見ずに離脱してしまう。
そんな悲しい事態を避けるためにも、画像を圧縮し、データを軽くしておくことで、早く画像を表示させることがとても重要になります。

そのため、ブログに使えるデータの容量に関わらず、画像のデータを圧縮して軽くしておくことが大切なのです。

画像のデータを圧縮しておくことの重要さは伝わったでしょうか。
次の項目からは、実際に画像を圧縮する方法を紹介していきます。

画像を圧縮できるサービス

今回は、アイキャッチ画像で使用した元の画像(貼ったものは圧縮後のものです)を実際に圧縮し、どのくらいデータが軽く出来るかを検証しつつ、説明していきます。
圧縮テスト用画像

なお、この画像はフリー画像サイト(pixabay)から入手したもので、容量は849KBでした。

849KB

その1・Googleフォト

Googleフォトは、画像をクラウド保存出来るサービスです。Androidのスマホを使用している方であれば、お世話になっている方も多いのではないでしょうか?

このGoogleフォトは、画質が少し落ちますが容量無制限で保存が出来ます(元の画質のままで保存する場合は、容量制限が有ります)。

この機能を利用することで、元の画像より容量を軽くしたものをダウンロードする事が出来ます

Googleフォト画質選択

元の画像をGoogleフォトにアップロードした上で、ダウンロードするのですが、同一端末でのアップロード&ダウンロードは不可能(デバイスに追加のメニューが表示されず、デバイスから削除…しか表示されない)です。

そのため、元の画像を端末に残したい場合は、別の端末やパソコンからダウンロードして下さい

ちなみに、今回の画像をパソコンのGoogleフォトからダウンロードしたところ、容量が589.7KBになりました。

598.7KB(Googleフォト)

元の容量よりは軽くなったかな?くらいの圧縮具合ですが、スマホカメラで撮影した2Mを超えるような大容量の画像であれば、もっと効果を実感できます。

その2・LINE

スマホを利用していれば、お世話になっている人も多いであろうLINE

トーク画面に画像を貼ることができますが、この画像は自動的に容量が圧縮された状態になります。

その機能を利用し、ブログに使用する画像をトーク画面に貼る→貼った画像をダウンロードして使うことで、容量が軽くなった画像を使うことが可能です。

ブログの画像を友人や家族とのトーク画面に貼る…というのはさすがに抵抗がありますので、自分だけのグループを作成すれば、好きなときに画像を圧縮することができます

LINEのホームで「グループ作成」を選択し、友だちを誰も選択しないで「次へ」をタップすれば、自分だけのグループが作れます。

この方法で、ダウンロードした画像の容量を確認しました。

379KB(LINE使用時)

849KBだったものが379KBになりましたので、かなり圧縮してくれているのがわかります。

ただ、使用する場合は、くれぐれも使用するトーク画面をよく確認して、ブログの存在を知らない方にアイキャッチ画像を送ったりしないようにしましょうね。

その3・TinyPNG

TinyPNG – Compress PNG images while preserving transparency
Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!

TinyPNGは、サイト上で画像を圧縮することができるサービスです。
会員登録やインストールが一切不要で無料利用できるため、かなりお世話になっています。

パソコンで利用するイメージが強いかもしれませんが、スマホでも問題なく利用できました。

下向きの矢印が表示されているところをクリック(タップ)すると、画像を選択できるようになるので、圧縮したい画像を選択し、アップロードが完了したらダウンロードの文字が表示されますので、ダウンロードすれば完成です。

TinyPNGで圧縮した結果、容量は391KBでした。

LINE画像よりも容量は少し大きいですが、TinyPNGでは、LINEで圧縮済みの画像も更に圧縮できてしまいます。

試しに、LINEで圧縮した画像をTinyPNGで更に圧縮したところ、容量が338KBにまで減少しました。

手軽に画像圧縮ができるため、ブックマークに入れておくと何かと便利です。

TinyPNG – Compress PNG images while preserving transparency
Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!

無料で使う場合、圧縮できる画像の元のサイズは5MBまでとなっています。
そのため、元々の画像のデータが大きいと、TinyPNGでは圧縮できない場合があります

その4・EWWW Image Optimizer(WordPressプラグイン)

EWWW Image Optimizer
Smaller Images, Faster Sites, Happier Visitors. Comprehensive image optimization that doesn't require a degree in rocket science.

このEWWW Image Optimizerは、WordPressのプラグインとなるため、WordPressを利用していない方は使用できません

このプラグインは、入れておくだけで、画像を貼る(WordPressへのアップロード)際に、自動的に画像を圧縮してくれるという優れものです。無料で利用可能です。

WordPressでブログを運用していて、これまで画像の圧縮なんてやったことがない…という方もいるかもしれませんが、このEWWW Image Optimizerでは、すでにアップロードした画像も一括で圧縮してくれる機能もあります

このプラグインでの圧縮効果は、画像のサイズによって変わります。

EWWW圧縮効果一覧

なお、この記事に使用する画像をダウンロードして確認したところ、108KBでした。

108KB(EWWW)

なお、LINE→TinyPNGで圧縮済みの画像は107KBでした。
今回の画像でいえば、そのままWordPressにアップロードしても違いはあまりなさそうです。

解像度が1827×838から800×637に落ちていることが関係してそうなのですが、それでも、元の画像の容量(849KB)から約8分の1にまで容量が減少したものを貼ることができました

WordPressを利用している方限定の方法となりますが、WordPressの画像を圧縮したいと考える方にはぴったりのサービスではないでしょうか。

画像を圧縮して、少しでも見やすいブログを目指そう

ここまで、画像を圧縮する方法をいくつか紹介してきました。

私自身、WordPressでブログを運用するようになるまでは、あまり画像圧縮の必要性を理解しておらず、適当に画像を貼ってしまっているような状態でした。

しかし、一つ一つの画像を圧縮して軽くしてあげることで、少しでもストレスを感じないページにすることが大事なのだと、今では強く思います。

WordPressに限らず、せっかく自分の記事を見に来てくれた人が、最後まで読んでもらえるように、画像も見やすい状態を目指していきたいものですね。

それでは、今回はこのへんで。

コメント

タイトルとURLをコピーしました