Tinypng 画像圧縮プラグインを使ったサイト高速化

サイト表示速度を早くする

画像圧縮パンダ　TinyPNG

僕愛用している画像圧縮プラグイン TinyPNG を紹介していきましょう。

Compress JPEG & PNG imagesとは

画像を圧縮するパンダで有名な　tinypng　のWordPressプラグイン版です。

毎月500枚まで無料で圧縮できます。

 

Compress JPEG & PNG imagesの使い方

ユーザー登録

tinypng公式サイトでユーザー登録

tinypng公式サイトでメニュー（DEVELOPER API）を選択します。

左テキストに名前、右テキストにメールアドレスを入力して送信します（上画像）

 

メールでアクティベーション

登録したメールアドレス宛にタイトル名「Get your Tinify API key」でtinypngからメールが届きますので水色ボタンをクリックしましょう。

可愛いね、パンダ。確か彼の名前はジョージ。Macbook airを使っているようです。

 

 

AP keyの取得とクレジットカード登録

 

API key取得とカード登録

クレジットカード登録

Payment detailsと書かれた箇所にクレジットカード情報を入力してUpgrade account nowボタンを押すとカード登録できます。

 

画像圧縮数が月500枚を越えた分は、１枚あたり圧縮料金 0.009ドル（およそ1枚あたり1円）がかかります。

2000回圧縮してもたったの1500円程度。激安です。

 

API key取得

API keyが表示されるのでコピーしてTinypngプラグインの設定画面のAPI key箇所に貼り付けます。（下画像 ピンク枠）

API key貼り付け場所

 

 

画像を挿入するときに自動で画像圧縮してくれます。

 

既存の画像を圧縮する場合は、WP管理画面のメディアから一括圧縮できます。

 

 

人件費として考えた場合

画像圧縮に要する時間を仮に１分としても時給６００円の場合10円はかかりますよね。となるとコストは約10分の1。

てことで、みんなパンダちゃんを使いましょう。

 

プラグインを探すときは、tinypng　で検索しても出てきます。一番最初にヒットするパンダを選んでください。ゴリラではありませんよ、パンダです。

ちなみにEWWWの圧縮は無料で使える範囲は可逆圧縮（LOSSLESS圧縮）で圧縮率がよくありません。

 

Tinypngプラグインのおすすめ設定方法

 

設定前はこんな設定↓

 

 

おすすめ設定

File compressionの設定

 

・Original image

以外はチェックを外します。

 

がんちゃん
がんちゃん

投稿本文に挿入する場合は、フルサイズを使用します。

 

Resize and compress the original image の数値

 

幅(px)：アイキャッチ画像で使う幅、本文に挿入するときの画像幅

高さ(px)：想定する最大高さサイズ

に合わせます。

高さのある画像を挿入することはあまりないので高さ800pxに設定しています。

 

この設定を行うとフリー素材の幅800pxオーバーの大きな画像を選んでアイキャッチ画像に挿入しても幅800pxで統一してくれるので便利。

当然圧縮もしてくれます。

フリー素材の画像サイズを気にせずに済むので楽チンです。

 

がんちゃん
がんちゃん

Cocoonのアイキャッチ画像のおすすめ幅は 800px です。

 

複数サイト 共通で使えます

API keyの確認

Tinypngプラグインを使用しているサイトのTinyPNG設定画面で上画像のChange API keyリンクを押すとkeyが確認できます。

 

API keyは複数サイトで共通して使用できます。

 

API keyを忘れた場合

Tinypng公式サイトにログインする（ログインするにはメールアドレスを入力してメールに届いたURLをクリック）と確認できます。

 

圧縮する画像サイズの目安

デフォルト設定では、1画像に対してサムネイル画像複数、中サイズ、大サイズと多くの画像を圧縮してしまいます。

1枚だけ圧縮したつもりが複数枚分課金カウントされてしまうので注意が必要です。

 

さらに画像挿入に圧縮する時間にかかりますので、最低限必要だと思われるサイズを選びます。

サムネイルはピクセル数が小さいですが多用する場合はチェック入れます。

アーカイブページはあまりSEOで意味がない場合が多いのでアーカイブに使用する画像サイズは圧縮を除外します。

 

おすすめメディア設定

おすすめメディア設定

今回の画像圧縮プラグインから話がそれますが、投稿本文に挿入する画像サイズはみなさん何を使っていますか？

僕の場合は、すべてフルサイズ（つまりオリジナル画像）を使用しています。

理由は

・サーバー容量削減

・TinyPNGで圧縮したファイルしか使わない

からです。

これらの画像サイズはテーマによっては、使用する場合もあるかもしれません。（Cocoonの場合はテーマオリジナルサイズを自動生成しているので上記設定で大丈夫そうです。）

 

画像圧縮は一括がおすすめ？

Tinypngプラグインのデメリットは、画像アップロードをするたびに圧縮するために時間がかかることです。

頻繁に画像をアップロードして使う場合はプラグインを無効化して、圧縮する画像が増えたときにプラグインを有効化、圧縮実行を行いましょう。（メディアメニュー Bulk Optimization から実行）

 

 

過去の画像も画像圧縮してくれます。

 

ただし投稿記事をアップロードしてすぐにアクセスが見込める場合は、画像圧縮プラグインを常時有効していたほうがSXOの観点から直帰率低下、離脱率低下に繋がりますので個々の判断でお願いします。

 

コメント