WordPress プラグイン

【WordPress】画像圧縮プラグイン TinyPNG JPEG, PNG & WebP image compressionの使い方

画像を圧縮できるいいプラグインない?

WordPressなどで画像をアップロードするとき、そのままアップロードしていませんか?

一眼レフなどで撮影した画像は非常にサイズが大きく、そのままアップロードしていくとページがどんどん重くなってサイトスピードに影響が出てしまいます。

そしてサイトスピードはSEOにも関係してくるので、なるべく画像は適正サイズにした上で圧縮することが好ましいです。

例えば一眼レフで一番大きいサイズで撮影した場合は幅が5000pxを超えることもありますが、ブログで使うには1000pxくらいで十分です。

なので、

  1. Photoshopや画像加工ソフトなどでリサイズ(サイズを小さくする)
  2. その後画像を圧縮(容量を小さくする)

この2つをやればかなり画像の容量を小さくすることが出来ます。

画像の圧縮とは

画像の圧縮とは余計な部分を取り除き、容量を小さくすること。

これを見ると画質を気にする人がいるかも知れませんが、基本的には人の目には分からない程度です。

人の目では分からない程度の画質を気にしてファイルをリサイズも圧縮もしないでアップロードしていたら、リサイズと圧縮をする場合と比べてファイルサイズが5倍〜10倍と変わってきてしまいます。

なのでアップロードする画像は必要なサイズにした上で圧縮するのがベストになります。

そしてWordPressで画像圧縮のプラグインといえばEWWW Image Optimizerが有名ですが、正直圧縮率が低くあまり効果がありません。

そこで今回は圧縮率の優れたプラグイン、TinyPNG JPEG, PNG & WebP image compressionの使い方をご紹介していきます。

サイト版の方はこちらの記事を参照下さい。

無料でも使える画像圧縮サイト TinyPNGの有料版の登録方法

TinyPNG JPEG, PNG & WebP image compressionとは?

TinyPNG JPEG, PNG & WebP image compressionは画像圧縮サイトとして有名なTinyPNGのプラグインとなります。

サイトもプラグインも無料で使えます(有料版にアップグレードも可能)

プラグインの方の特徴は以下になります。

  • アップロードすると自動で圧縮
  • アップロード済みの画像も圧縮可能

    最初から入れておけば毎回圧縮する手間が省けますね。

    そしてこのプラグインの最大のメリットは、

    驚異的な圧縮率且つ低劣化

    になります。

    低劣化と書きましたが、人の目では違いは分からないレベルです。

    EWWW Image Optimizerの場合は圧縮率が10〜20%台くらいに対して、TinyPNG JPEG, PNG & WebP image compressionは軽く60%くらい圧縮してくれます(どちらも画像によって大きく変わります)

    デメリットを挙げるとすれば、

    • 登録する手間がある
    • 無料で圧縮できるのは1ヶ月に500枚まで

    となります。

    登録に関して必要な情報は名前とメールアドレスだけなので、大したデメリットではありません(サイトのTinyPNGは登録不要でドラッグ&ドロップするだけです)

    また1ヶ月に圧縮できる枚数は500枚までなので、環境や設定によっては足りなくなるかも知れません(設定は後ほど解説します)

     

    TinyPNG JPEG, PNG & WebP image compressionの使い方

    TinyPNG JPEG, PNG & WebP image compressionを利用するには、プラグインのインストール&有効化をします。

    プラグインをインストール&有効化

    まずは管理画面左側のプラグイン→新規追加をクリックします。

    次にTinyPNG JPEG, PNG & WebP image compressionと検索するとパンダのプラグインが出てくるので、今すぐインストールをクリックします(TinyPNGと入力すれば出てきます)

    今すぐインストールをクリックすると有効化にボタンが変わるので、そのまま有効化をクリックします。

    これでプラグインのインストールと有効化は完了です。

    次はアカウントの登録をしていきます。

    設定→TinyPNG - JPEG,PNG & WebP image compressionをクリックします。

    必要なのは名前とメールアドレスだけです。

    赤枠の表示はアカウントの登録をすれば消えます。

    名前とメールアドレスを入力したらRegister Accountをクリックするとこのように表示が変わります。

    そして以下のようなメールが届くので、Avtivate your accountをクリックします。

    そしてこちらが表示されます。

    ステータスを見るとDisabled(無効)となっているので、点3つをクリックしてEnable keyをクリックします。

    するとステータスがActiveに変わります。

    これでWordPressの設定画面に戻るとアカウントが接続されたのが分かります。

     

    こちらからでもアカウントの登録は可能

    アカウントの設定は以下のページから登録することも出来ます。

    TinyPNG – Developer API

     

    各種設定

    アカウントの登録が出来たら各種設定をしていきます。

    New image uploads

    これはアップロードした画像をどうやって圧縮するかと言う設定です。

    設定は3種類あります。

    内容はDeepLで翻訳したものです。

    Compress new images in the background (Recommended)

    バックグラウンドで新規画像を圧縮する(推奨)
    最も高速な方法ですが、一部の画像関連プラグインで問題が発生する可能性があります。

    Compress new images during upload

    アップロード時に新規画像を圧縮する。
    アップロードに時間がかかりますが、他のプラグインとの互換性が高くなります。

    Do not compress new images automatically

    新しい画像を自動的に圧縮しない。
    メディアライブラリの中から圧縮したい画像を手動で選択します。

    まずは推奨されている最初の設定で使ってみて、もし他のプラグインと相性が悪ければ他の設定に変えてみましょう。

     

    Image sizes

    これは圧縮する画像のサイズを設定する項目です。

    WordPressでは画像を1枚アップロードすると、オリジナルサイズ以外にもサムネイルや中サイズなど複数のサイズに自動で分けれられます。

    例えば以下のように3枚の画像をアップしても実際は15枚のファイルになっています。

    もしこれを全部圧縮すれば3枚しかアップしていないのに15枚分圧縮する事になるので、無料で圧縮できる500枚の制限にすぐ到達してしまいます。

    アップする枚数が少なれけば全部にチェックを入れてもいいかも知れませんが、枚数を節約したい場合は大きく圧縮されるOriginalやLargeだけチェックを入れておくといいでしょう。

     

    Original image

    これはアップロードしたオリジナル画像の処理を設定する項目です。

    これは複数チェック可能で、4種類あります。

    Resize the original image

    これにチェックを入れると、幅の上限と高さの上限を設定することが出来ます。

    一眼レフなどで撮影した写真は大きいサイズだと幅5000px以上あったりしますが、ブログなどでそんな大きい必要はないのでここでサイズの上限を設定しておくといいでしょう。また縦横比は維持されるので心配無用です。

    Preserve creation date and time in the original image

    オリジナル画像に保存されている作成日時の情報を保存する。

    Preserve copyright information in the original image

    オリジナル画像に保存されている著作権の情報を保存する。

    Preserve GPS location in the original image (JPEG only)

    オリジナル画像に保存されているGPS(位置情報)を保存する。

    基本的には1つ目の項目だけチェックを入れてサイズの上限を設定し、他の項目はチェックを外したままでいいでしょう。

    ここまで設定が終わったら左下の変更を保存ボタンをクリックして完了です。

     

    アップロード済みの画像の圧縮方法

    プラグインを設定後にアップロードした画像は自動で圧縮されますが、導入前の画像は自動では圧縮されません。

    アップロード済みの画像を圧縮する方法は2つ。

    1. 一括で圧縮
    2. 個別に圧縮

    まずは一括で圧縮する方法を見てみます。

     

    一括で圧縮

    管理画面のメディア→Bulk Optimizationをクリックします。

    そしてこちらが表示されます。

    アップロード済みの画像数と圧縮可能な画像数が違うのは、先ほども書いた通り画像1枚アップロードすると複数のサイズに分けられるからです。

    そして費用ですが、1ヶ月に圧縮できる最大枚数の500枚を超えるとこのように有料の金額が表示されます。

    ここで青いボタンを押したらいきなり料金発生・・・なんて事にはならないのでご安心下さい。

    有料の場合はこの青いボタンからアップグレードをしてから圧縮となります。

    なのでアップグレードをしていないとこのままでは一括圧縮できないので、先ほどの設定で圧縮するファイルサイズの種類を減らすか、個別で圧縮となります。

    もし一括で圧縮可能な枚数であればこのようにボタンの表示が変わります。

    ちなみに画像の枚数は全部で97枚で、そのうち48枚はプラグインを導入後にアップして自動で圧縮、そしてプラグイン導入前にアップしていた49枚が圧縮可能という見方になります。

    そしてその49枚を圧縮した結果がこちら。

    7.01MBから3.55MBと全部で49.4%の圧縮に成功しました。

    画像によっては60%70%となることもあります。

     

    個別で圧縮

    個別で圧縮する場合は、メディアのライブラリを開き、リスト表示にします。

    小さい赤枠がリスト表示のボタンです。

    そして画像ごとにCompressというボタンがあるので、これをクリックすれば圧縮できます。

    そしてこちらが圧縮後。

    一度TinyPngで圧縮した画像ですが、プラグインでさらに15%圧縮されました。

     

    まとめ:画像を圧縮するならTinyPngのサイトかプラグインを使おう!

    今回のプラグインは画像をたくさん使う人で且つ全てのサイズを圧縮したい場合には無料版では難しいかも知れませんが、もし1ヶ月で500枚を超えた時はサイトの方を使いましょう。

    サイトの方は枚数に制限はありませんが、一度にアップロード出来るのは20枚まで、また1枚のサイズは5MBまでという制限があります。

    20枚アップロードしたらリロード(ページ更新)、そしてまた20枚アップロードと言う感じになります。

    ただ連続でアップロードは出来ず、20枚アップロードした直後に20枚アップロードすると5枚しか圧縮できないと言う感じになります。

    恐らく30秒間にアップロード出来るのは◯◯枚までなど制限されているのだと思います。

    どちらも微妙に制限はありますが、圧縮率は素晴らしいので上手く活用していきたいですね。

    -WordPress, プラグイン