【ブログで使う画像を圧縮】ロスレス圧縮とロッシー圧縮の違いとは?

パンダ ブログ

今回はブログで使う画像を圧縮する方法についてです。

ブログに使う画像はファイルサイズを小さくするに越したことはありません。

なぜなら、Googleは「ユーザーの利便性」を第一に掲げています。

Googleが掲げる10の事実

 

この「10の事実」のひとつ、“遅いよりは速い方がいい”というのは、

画像を表示する速度も含まれています。

極端に小さすぎて見にくい画像だと「ユーザーの利便性」に適合しているとはいえませんが、

同じサイズで見た目も同じであれば、画像はなるべく圧縮するべきです。

作業はそれほど面倒ではありませんので、

SEO(検索エンジン最適化)対策として、画像を圧縮していきましょう。

スポンサーリンク

圧縮前に画像を小さくする

そもそもブログに使う画像のサイズは、どれくらいのものが適当なのでしょうか?

私もブログを始めたころは、よくわかりませんでした。

とりあえず、コンテンツ幅(画像をのせる場所の幅)よりも、極端に大きくする必要はありません

スマホやカメラで撮影した写真は、そのまま使うとサイズが大きくなっていることが多いので注意して下さい。

私は、ブログのコンテンツ幅は「770px」に設定、記事に挿入する画像の幅は「800px」以下にして、

サイズもなるべく小さくなるように圧縮してます(最大でも200KB程度)。

具体的には、画像編集ソフト「PhotoScape X」を使って、画像をリサイズ、もしくはトリミング(切り抜き)することが多いです。

「PhotoScape X」は、リサイズやトリミングなどが簡単にできるので、画像編集に慣れていない初心者の方にもおすすめです。

【PhotoScape X】の基本的な使い方

「EWWW Image Optimizer」で圧縮

そして画像の圧縮方法ですが、WordPressには自動で画像を圧縮してくれる便利なプラグインがあります。

EWWW Image Optimizer

EWWW Image Optimizer

これからアップする画像も、過去にアップした画像も圧縮してくれるプラグインです。

※WordPress以外の方は、次の章で紹介する「TinyPNG」をお使い下さい。

EWWW Image Optimizerのインストール方法

インストール方法は、WordPressをお使いの方には説明不要だと思いますが、念のため。

WordPressの「ダッシュボード」から「プラグイン」→「新規追加」へ進んで下さい。

プラグイン新規追加

 

検索窓に「EWWW Image Optimizer」と入力。

EWWW Image Optimizerをインストール

 

EWWW Image Optimizer」と「EWWW Image Optimizer Cloud」の2つが出てくるので、評価やインストール数の多い方(“Cloud”じゃない方)の「今すぐインストール」をクリックします。

インストールが完了したら「有効化」を忘れずに押しましょう。

EWWW Image Optimizerの設定

設定(確認)するのは2ヶ所だけです。

「EWWW Image Optimizer」の「設定」を押します。

EWWW Image Optimizerの設定

 

ベーシック」タブの「メタデータを削除」を確認してみて下さい。

あらかじめチェックが入ってると思いますが、もしなければチェックを入れましょう。

「メタデータを削除」にチェック

 

そして「変換」タブの「コンバージョンリンクを非表示」ですが、こちらにもチェックを入れます。

「コンバージョンリンクを非表示」にチェック

以上、2ヶ所を確認したら、忘れずに「変更を保存」を押して下さい。

使用方法

「EWWW Image Optimizer」は、これからアップする画像については自動的に圧縮処理を行ってくれるので、特に何もすることはありません。

「EWWW Image Optimizer」をインストールする前にアップした画像は、まとめて圧縮できます。

「ダッシュボード」の「メディア」→「一括最適化」を押します。

画像一括最適化

 

最適化されていない画像をスキャンする」を押します。

最適化されていない画像をスキャンする

必要があれば最適化の前に、元画像の“バックアップ”を取っておきましょう。

最適化できる画像がいくつあるか教えてくれるので、よければクリックします。

「画像を最適化」を押す

 

処理中…

一括最適化処理中

 

これで過去にアップした画像も圧縮できました。

一括最適化完了

「EWWW Image Optimizer」は手間いらずの便利なプラグインですが、実は弱点があったりします。

それは、10~20%くらいしか画像が圧縮されないということです。

無料版の「EWWW Image Optimizer」はロスレス圧縮ファイルを再び元の状態に戻せる圧縮方法)なので、これが限界だったりします。

スポンサーリンク

「TinyPNG」で圧縮

そこでファイルサイズの大きな画像については、プラウザで圧縮できる「TinyPNG」を使います。

TinyPNG」という名前ですが、PNGとJPGファイルのどちらにも対応しています。「TinyJPG」というサイトもありますが、機能は「TinyPNG」と全く同じです。

使い方はかんたん。圧縮したい画像ファイルを「TinyPNG」の破線の中へドラッグ&ドロップして、出来た圧縮ファイルをダウンロードするだけです。

画像ファイルをTinyPNGへドラッグ&ドロップ

 

1つずつダウンロードするなら「download」、後から一括してダウンロードする場合は「Download all」を押します。

圧縮した画像をダウンロード

 

「TinyPNG」はロッシー圧縮データを削減して元の状態には戻せない圧縮方法)で、画像によりますが50~90%ほど圧縮されます。

圧縮率だけ見ると「TinyPNG」の圧倒的勝利ですが、ロッシー圧縮なので画質は劣化します。

ロスレス圧縮とロッシー圧縮の比較

ではどれくらい劣化するのか、「EWWW Image Optimizer」(ロスレス圧縮)と「TinyPNG」(ロッシー圧縮)とで比較してみましょう。

テストするのは他の記事に使った「アイキャッチ画像」で、元のファイルサイズは178KBです。

圧縮前の元画像
元の画像 178KB
 
ロスレス圧縮の画像
ロスレス圧縮 178KB→157KB(約12%圧縮)
 
ロッシー圧縮の画像
ロッシー圧縮 178KB→31KB約83%圧縮

 

大差がつきましたが、パッと見はほとんど変わりませんね。

では拡大した画像をご覧下さい。

ロスレス圧縮拡大
ロスレス圧縮拡大
 
ロッシー圧縮拡大
ロッシー圧縮拡大

拡大すると、ロッシー圧縮では文字の周りがにじんでいるのがお分かりいただけるでしょうか。(スマホでご覧の方はさらに拡大してみて下さい。)

ただ、拡大しないと分からない程度なので、こだわらないならロッシー圧縮で十分だと思います。

TinyPNGのプラグイン版

「TinyPNG」には、WordPressのプラグイン版「Compress JPEG & PNG images」もあります。

プラグイン「Compress JPEG & PNG images」

 

「EWWW Image Optimizer」と同じようにWordPressにアップした画像を自動で圧縮してくれます。

自動で圧縮してくれる分、「TinyPNG」よりも手間いらずですが、「日本語に対応していない」ことや「月に500枚を超えると有料になる」などの制限があります。

最後に

まとめですが、ブログで使う画像の圧縮であれば、通常、こんな順番で行われてはいかがでしょうか。

画像圧縮のステップ
1 大きい画像は「PhotoScape X」でサイズを小さくする
2 「TinyPNG」で画像を圧縮
3 「EWWW Image Optimizer」でさらに圧縮(一度インストールすれば、あとは自動で最適化)

あとは、あらかじめカメラの画素数を小さく設定しておいたり、無料の写真素材サイトでダウンロードする際に小さめの画像を選べば、「①PhotoScape Xでのリサイズ」は省くことができますよ。

コメント