WordPressでアップロードした画像を自動圧縮してくれるプラグイン【Compress JPEG ＆ PNG images】
みなさんはwebページで使用する画像の圧縮していますか？
もししていないなら絶対にやった方がいいです！！ なぜならページが表示されるまでの時間が目に見えて変わるからです！
ページを開こうとして真っ白な状態が続くページを見たことありませんか？ 僕は5秒以上表示されなかったらブラウザバックしちゃいますw ※画像がすべての原因とは限りません
そうならないように今回はWordPressの画像圧縮プラグインを紹介します！
目次
WordPressでアップロードした画像を圧縮してくれるプラグイン【Compress JPEG ＆ PNG images】
TinyPNGというサービスをご存知ですか？
画像圧縮してくれるwebサービスです。
【Compress JPEG ＆ PNG images】はTinyPNGが提供しているWordPressプラグインです！
TinyPNGのプラグイン版ってかんじですね！
特徴
- アップロード時に自動で圧縮
- 無料でひと月に500枚まで圧縮できる
- 圧縮後も画像がほとんど劣化しない
APIキーを取得しよう！
プラグインを先にインストールしてもいいのですがAPIキーを取得しないと使用することができません。
TinyPNG – Developer APIページに行きます。
名前とメールアドレスを入力して「Get your API key」をクリックすると、入力したメールアドレスに「Get your Tinify API key」というメールが届きます。
入力したメールアドレスにメールが送信されました。
メール内の「Visit your dashboard」をクリックしてください。
クリックして飛んだ先のページでAPIキーをコピーしてください。
このページはマイページみたいなものなので念の為URLとメールアドレスをどこかに保存しておくといいです。
プラグインをインストールしよう！
プラグイン → 新規追加 → 「Compress JPEG & PNG images」 で検索！
インストールして有効化すると管理画面サイドメニューの「設定」の中に「Compress JPEG & PNG images」という項目が追加されます。
その設定画面の「Tinify account」の「Already have an account?」に先ほどコピーしたAPIキーを貼り付けて保存すると利用可能になります！
このような表示になると完了！
Compress JPEG ＆ PNG imagesの使い方
初期設定のままでも十分つかえますが簡単な機能の説明をします。
はじめにCompress JPEG ＆ PNG imagesは圧縮できる枚数は月に500枚です。
普通に使用していて500枚を超えることはあまり無いと思いますが、超えた場合はweb版のTinyPNGを使うか次の月を待ちましょう（笑）
※500枚を超えると有料アカウントにしませんか？と聞かれるだけで勝手に有料アカウントになるわけではありません。
管理画面サイドメニューの「設定」→「Compress JPEG & PNG images」に移動
Tinify account（アカウント確認）
Tinify accountでは以下を確認できます。
- APIが連携されているか
- あと何枚画像が圧縮できるか
New image uploads（新しい画像のアップロード）
New image uploadsでは画像を新たにアップロードしたときの挙動を変更できます。
Compress new images in the background (Recommended)
画像をアップロードごバックグラウンドで圧縮
アップロードは時間が短い。
基本的にこの設定でいいと思います。
Compress new images during upload
アップロード中に画像を圧縮。
アップロードには時間がかかりますが、圧縮後アップロード完了なので圧縮されたかがわかる。
Do not compress new images automatically
自動で圧縮しません。
後述する手動圧縮は可能です。
Image sizes（圧縮する画像のサイズ）
Image sizesではwordpressが自動生成している画像を選択して圧縮する画像を絞ることができます。
個人的にはこの設定だけは変更した方がいいです。
何故かと言うと5つチェックが入っていいると1枚アップロードするだけで5枚圧縮したことになり、500枚制限なので実質100枚しか圧縮できなくなるからです。
Original image（元の画像の情報）
Original imageでは画像の内部データを削除するかどうかなどの設定ができます。
基本的に何もチェックしなくていいかと思います。
Resize the original image
チェックすると設定したサイズを超えると圧縮します。
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の位置を削除します。（JPEGのみ）
過去にアップロードした画像を一括で圧縮（Compress JPEG ＆ PNG imagesをインストールする前の画像のこと）
管理画面サイドメニューの「メディア」の中の「Bulk Optimization」という項目をクリック。
「Start Bulk Optimization」をクリックすると一括圧縮がスタートします。
過去にアップロードした画像が多いと500枚制限かかる可能性があるのであまりオススメはしません...
Total Savings（メディアライブラリ内すべてのデータ）
メディアライブラリ内の圧縮した画像数や総データ量などの確認ができます。
でかい円グラフ
圧縮率が表示されます。
41.6%なら総データ量から41.6%圧縮したよってこと。
image sizes optimized
圧縮した画像数。
initial size
圧縮前のデータ量
current size
圧縮後のデータ量
アップロードした画像を個別に圧縮
管理画面サイドメニューの「メディア」の中の「ライブラリ」に移動します。
「Compress」ボタンをクリックでその画像を圧縮できます。
最後に
画像を圧縮することでPageSpeed Insightsのスコアも普通に上がりますし、何より読み込み速度が明らかに上がります。※画像が多いほど効果的
ページの離脱率も下がりますしいいことばかりだと僕は思います！
以上で「Compress JPEG & PNG images」の説明は終わりです。
みなさんもサイトが重いな〜って感じたらぜひ使ってみて下さい！
参考サイト
https://pc-pier.com/blog/2018/09/04/tiny-compress-images/
https://requlog.com/self-branding/wordpress/compress-jpeg-png-images/