★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

画像の圧縮率が高い「Compress JPEG & PNG」プラグインの使い方

WordPressでTinyPngを使って画像圧縮!「Compress JPEG & PNG」の使い方

画像というのはサイト内のコンテンツの中でも一番サイズが大きくなりがちなので、画像の容量を減らすために有効なのがロスレス圧縮や不可逆圧縮してサイズを減らすことです。

画像圧縮系のサービスやサイトは数多くありますが、その中でも一番pngやjpegファイルの圧縮率がよくさらに劣化もしにくいと言われているのがあの有名な「TinyPng」というサービスです。

これは元々WebサービスでしたがWordPressでも「Compress Jpeg & PNG images」というプラグインを使うことで一括で圧縮したり、アップロード時に自動圧縮させることが可能です。

そこでここではそのCompress Jpeg & PNG images」プラグインを使って画像を圧縮させる方法について紹介します。

TinyPngは無劣化圧縮?

まずプラグインの紹介をする前にTinyPngを使うときの注意点を説明します。

よくTinyPngにありがちなのは「ロスレス(無劣化)で圧縮できる」という誤解です。

ですがTinyPng本家の説明には圧縮について次のように書かれています。

TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files.

TinyPng公式サイトより

はっきりと「lossy compress(不可逆圧縮 = 完全に元の画像に戻せない圧縮方法)」と書いてあります。

どのような不可逆圧縮方法を使っているのかは分かりませんが24bitカラーを8bitカラーに変更し、使用色数を大幅に減らすことで圧縮しているのではないかと言われています。

ただTinyPngの場合は不可逆圧縮と言ってもほとんど劣化が気にならないレベルです。

例えば次のようなグラデーション画像(サイズは約15.4KB)があるとします。

これをTinyPngで圧縮するとサイズは約7.84KBになり、次が圧縮後の画像です。

サイズがほぼ半分になったにもかかわらず画質は全く劣化していないように見えます。

実際は使用色数が24bitから8bitになったので元の画像とは違う色が使われているのかもしれませんが人間の眼ではその微妙な違いは分かりません。

このようにTinyPngは不可逆圧縮なので完全に元の画像の画質を保てるわけではないですが、劣化は人間の眼で見るには違いが分からないくらい少ないので画像が劣化しすぎて丸っきり別物になるという心配はありません

「Compress JPEG & PNG images」の導入・使い方

Compress JPEG & PNG images」プラグインを使うとWordPress内でTinyPngを使って画像を圧縮することができます。

その導入手順と使い方は次の通りです。

プラグインの導入

まずプラグインをインストールして有効化してWordPress内で使えるようにします。

まずメニューから「プラグイン」ー>「新規追加」を開いてください。

新規追加画面が開いたらプラグインの検索欄に「tinypng」というキーワードを入力すると検索結果の一番上あたりに次のようなプラグインが表示されるので「今すぐインストール」ボタンを押してインストールしてください。

このプラグインは次のプラグインページから直接ダウンロードすることも可能です。

https://ja.wordpress.org/plugins/tiny-compress-images/

インストールが完了したら「今すぐインストール」ボタンが「有効化」ボタンに変わるので必ずそれを押して有効化するのを忘れないでください。

これでプラグインが使用可能になります。

アカウントの作成

次にプラグインを使用するために必要なアカウントを作ります。

そのためにまずメニューから「設定」ー>「メディア」を開いてください。

メディア設定を開いたら一番下にスクロールするとTinyPngの設定項目があるので下の画像のオレンジ色の枠で囲った「Register new account」内に名前とメールアドレスを入力して「Register account」ボタンを押します。

アカウントを登録すると登録したメールアドレス宛に次のようなメールが届くのでどの中にある「Activate your account」ボタンを押すとアカウントの確認が完了します。

これでプラグインを使用するためのアカウント登録は完了です。

画像の圧縮

画像を圧縮するにはメニューから「メディア」ー>「Bulk Optimization」を開きます。

すると次のようなページが開くのでその下に表示されている「Start Bulk Options」ボタンを押すと画像の圧縮が開始します。

画像数によりますが、数百個以上の画像があると圧縮にもかなり時間がかかると思うので終わるまで気長に待ちましょう。

「Compress JPEG & PNG images」の制限

Compress JPEG & PNG images は画像をほぼ劣化なしで圧縮できる便利なプラグインですが1つ制限があります。

それは無料会員だと1カ月に圧縮できる画像数は500個まで、ということ

今プラグインを使ってどれだけの画像を圧縮したかはTinyPngのダッシュボード画面で次のように確認できます。

もしこういった制限をなくすなら有料会員になる必要があります。無料会員だと圧縮できる数に限りがあることに注意です。

他の圧縮系プラグインとの比較

この Compress JPEG & PNG 以外にも画像圧縮系プラグインは結構あります。

しかし圧縮率と劣化の少なさで比較すればやはり TinyPng が一番ですね。

次記事でも TinyPng と他の圧縮系プラグイン ( EWWW と WP Smush の2つ ) を比較しましたが、圧倒的に圧縮率が高くかなり優秀です。

WordPressには画像圧縮系のプラグインがいくつかありますが、画像の圧縮率や使いやすさはプラグインごとでだいぶ違います。そこでここで「EWWW Image Optimizer」、「Compress JPEG & PNG images(TinyPng)」、「Smush Image Compression and Optimization」の3つの画像圧縮系プラグインを圧縮率や使いやすさの点から比較します。

有料会員にならないと全ての機能は使えないものの、少しでも画像を小さくしたいという場合はTinyPngを選ぶのが一番いい選択だと思います。

圧縮以外にできる画像最適化の方法

ここまで TinyPNG について紹介してきました。圧縮すれば読み込み速度も速くなるので読みやすい快適なブログが作れるはずです。

そしてこれ以外にも画像を最適化する方法はいくつかあります。

例えばその最適化案をいくつか挙げるとすると・・・

  • 圧縮しやすい画像を選ぶ・作成する
  • 記事最大幅にリサイズ(特にアイキャッチ)
  • 検索エンジン向けに画像の説明を追加する

・・・などなど

記事文章をリライトするのと同じく、画像も最適化すれば読者にも検索エンジンにも評価の高い記事ができます。

ちなみに次がアイキャッチ画像での最適化方法についてまとめた記事です。

ブログ記事に使うアイキャッチ画像、適当に選んだり元画像のまま挿入したりしてませんか?ここでは記事を読みやすくするためのアイキャッチ画像最適化のコツを詳しくまとめました。

特に「アクセスが少ない・・・」「書いた記事が読まれない・・・」という方は最適化しておきましょう。地道に最適化すれば徐々にアクセスが集められるようになります。

まとめ

以上、 Compress Jpeg & PNG images プラグインを使い方についてでした。

本家 TinyPNGと圧縮性能は変わらないので、画像圧縮するならこのプラグインを使っておけば間違いないですね。

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press