見栄えは変えずに画像ファイルを圧縮してくれるサービス「TinyPNG」

このブログではスクリーンショットをベタベタ貼ることが多いので画像はよく使います。
 
画像を記事の中にたくさん貼れば、当然ですがページの読み込みもその分だけ遅くはなるので、移行前のブログなんかは体感でもわかるくらいにページの読み込みが遅かったのではないかと思います。当然、ページの読み込み速度はSEO的な面にも少なからず影響します。
 

上記のページはURLを入力したページの読み込み速度を採点してくれるサービスのページです。採点結果が85点くらいからがパフォーマンスの高い結果と言われています。サイトの表示に問題がある場合、その問題を一覧にして指摘してくれますので試したことない方はぜひ試してみてください(但し、指摘の内容は用語がちょっと…難解なものに感じるかもしれませんｗ)
 
ブログをWordPressへと移行してからは以前よりもこういったページの読み込み速度も少し意識するようになりました(と言いながらヘッダーにはガチャガチャ動くものを設置していますが…)
 
 

TinyPNG

さて、今回紹介するのはドロップ操作でアップロードするだけで画像ファイルを圧縮してくれる便利なサービス「TinyPNG」です。
 

このブログでは現在、画像アップロード時に自動で圧縮してくれるプラグインも導入していますが、アップロード前に作成した重い画像は事前にこの「TinyPNG」で圧縮をかけるようにもしています。
 
こういった運用をしっかりするようになってからは、気休め程度ですがPageSpeed Insightsの採点も良くなりました。
 
 

使い方

操作は非常に簡単です。まずは上記のTinyPNGサイトにアクセスします。
 
アクセスしたら、画面中央の「Drop your .png or .jpg files here!」部分めがけて圧縮したい画像をドロップするか、もしくはクリックして圧縮したい画像を選択するだけです。すぐに画像の圧縮が始まります。
 

 
 
すぐに圧縮は完了するので、圧縮した画像は右側にある「download」をクリックして保存するだけです。
 

 
ちなみに、上記のサンプルを作るためにアップロードしたJPEG画像は元のサイズが328KBでしたが、上記の圧縮をかけたところ143KBと半分くらいにファイルサイズを圧縮することができました。見栄えは目視する限りでは特に変わりありません。
 
 
一括ダウンロードにも対応しています。複数枚の画像を上記の操作で圧縮したら画面少し下の方にある「Download all」をクリックすれば、アップロードして圧縮した画像をzipファイルとして一括でダウンロードすることができます。
 

 
 
このように、ほんのちょっとの手間だけで画像を簡単に圧縮することができます。サンプルではJPEG画像で操作しましたが、もちろんPNG画像にも対応しています。
 
 

まとめ

最後に一応、このTinyPNGで圧縮した画像とそうでない画像とを貼っておきますので、比較対象のサンプルとしてご確認頂けたらと思います。
 
圧縮前(122KB)

 
TinyPNG圧縮後(47KB)

 
どうでしょう？見た限りでは特に明確な違いはないと思います。
 
でもファイルサイズで言えば、圧縮後は圧縮前の大体3分の1までサイズが現象しています。
 
非常に手軽なので、こういった画像ファイルの圧縮をされたことない方は、ぜひ使ってみてください！