画像圧縮「TinyPNG」がWordPressのプラグインに!「Compress JPEG & PNG images」を使ってみた!
| WEB制作サイトの軽量化に最も効果があるのが画像の圧縮たと思うのです。
ココ最近のサイトに関しては、大きな画像を使うことが頻繁にというか、当たり前になっております。
ことブログに関しても大きい方が見やすいですしね 🙂
で、今までは、「EWWW Image Optimizer」を使ってきました。こちらも、便利で設定も簡単でした!※ EWWW Image Optimizerが悪いわけではないです。僕の使い方(サイトの方向性)の問題だと思います。
でも、「PageSpeed Insights」から、画像の最適化をしやがれの注意が全然きえないのですよね。
「こいつら最適化したら92%も良くなるんだよ。なんでしないん?( ´_ゝ`)プッ」
って、ずっといれてたんですよね。
笑われ続けるのは、僕の性に合わないので、再度画像の最適化について考えてみた。
画像の最適化に関して
最適化の方法について、考えてみたよね。
- PhotoShopなどで、かなり頑張る!
- 画像圧縮のサイト or アプリ(ツール)を使う
- WPのプラグインで別のを探して使う
こういう感じになるかと思います。
それでは、それぞれ考えてみましょう。
PhotoShopなどで、かなり頑張る!
PhotoShop様の性能は、言うまでもなくすごいのです。が、いかんせん、僕が使いこなせておりません。
これを頑張って使いこなせれば、完璧なのでしょうがハードルが高いですよね。(無知の想像でした)
いろいろと調べてみると圧縮用の設定や、ツールやアクションやらを最初にしてしまえば、できちゃうようですね。
でも、そんなこともめんどうなのですよねヽ(´Д`;)ノアゥア
画像圧縮のサイト or アプリ(ツール)を使う
圧縮するサイトやアプリは無数にあります。その中でも有名なのはサイトでは「TinyPNG」が代表格ですよね。昔はPNGのみだったようなきがしますが、いまはJPEGも可能になっていますね。
圧縮アプリでいえば、Macだと「ImageOptim」や「JPEGmini」ですね。
Windowsだと・・・いっぱいありすぎてどれがいいんだかw
これらの方法は、作業としては書き出した画像をサイトやアプリにドラッグするだけですので、簡単で効率よく圧縮が可能です。しかも、画像の荒れもすごくすくないです。
サイトやアプリにドラッグして圧縮するという一手間を厭わない人はこちらをおすすめです。ハードルは限りなく低いです。
WPのプラグインを使う
簡単で確実に圧縮はできるんですが、ずっと笑われていました。
EWWW Image Optimizer以外のプラグインを調べてみる。
※ EWWW Image Optimizerが悪いわけではないです。僕の使い方(サイトの方向性)の問題だと思います。
調べてみたら上で紹介している「TinyPNG」がプラグイン出してたv(。・ω・。)ィェィ♪
「Compress JPEG & PNG images」というものです。
これも「EWWW Image Optimizer」同様に簡単に使えるようです。
ってことで、一番手間が少なそうなWPのプラグインを導入してみました。
インストール&セッティング
いつも通り、プラグインの新規インストールで「Compress JPEG & PNG images」を検索しインストール&有効化をする
見慣れたパンダがでてきましたね。安心ですw
設定は「設定 -> メディア」にが下記のようなのが追加されております。
画像は、API KEYを登録しちゃってるのでOKAY的になっちゃってますが、「Visit TinyPNG Developer section to get an API key」ってのがあるのでこちらにリンクし、アカウントつくるとAPI KEYが発行されます。そちらをプラグインに戻って入力すればOKです。
File compression
この項目は、どのサイズのがぞうにたいおうしますか?って質問ですね。
メディアで設定してある「サムネイル」「中サイズ」「大サイズ」「オリジナルサイズ」「functionなどで設定しているサイズ」が表示されるので該当箇所にチェックするだけです。
Original image
オリジナルサイズの変更てきなことだと思います。(上でオリジナルサイズのところにチェックをしないとこちらは使えません)
オリジナルサイズをそのまま使うのか、リサイズやらメタデータの保存をするかです。
Resize and compress the original image
オリジナル画像のリサイズを行えます。
スクショのまま使うとめっちゃでかいやん、Retinaさんよー!的な場合に横幅、縦幅の上限を設定できます。比率に関しては変わりませんのでご安心を!
Preserve creation date and time in the original image (JPEG only)
JPEGのみですが、作成日の情報を保存できます。
Preserve copyright information in the original image
作成者の情報を保存できます。
Preserve GPS location in the original image (JPEG only)
こちらもJPEGのみですが位置情報を保存できます。
メタデータの情報は、僕としては圧縮を目的としているのでいらにゃいの一択ですが、保存されるのはオリジナルだけなので、オリジナルに情報を残しておきたい方は、チェックを入れてみてもいいのかな。メリットが見当たらないけども。。。
すでにアップ済みの画像を圧縮する!
プラグインを導入する方の大半は、すでに画像をアップされている方が多いのではないでしょうか。
そんな場合には、「メディア -> Bulk Optimization」から可能です。
すでに大量にアップされている方は、めっちゃ時間かかるかもですが、「Start Bulk Optimization」ボタンを押すことで可能となります。
ここで注意です!
一括圧縮を行えるのですが、不具合が起きないという保証はないので、バックアップ等を行い、自己責任で行ってください。今のところ僕は、問題は起こってないです。
また、無料で行える枚数として月500枚だということです。こちらを超える場合は有料になるようなので、ご注意ください。
まとめ
画像圧縮に関していろいろと調べてみましたが、方法はいっぱいありますね。
今回は、めんどくさがりなので、一番お手軽なプラグインの導入をしてみましたが、みなさまは、それぞれ自分にあった方法をお選びください。
サイトの高速化の初歩的なことですが、実際に一番効果があるのは画像を軽くすることだと思います。
容量をすくなるくすることはサーバーの負担軽減にもつながりますので、みなさまやってみてはいかがでしょうか。