WordPressを使っていて気になるのがアイキャッチ画像やメディアで追加した記事中の画像のサイズです。せっかく作ったアイキャッチ画像が重いとサイト表示が遅くなり逆に損をしてしまっている場合があります。今日はそんな悩みを一発で解決するツール「TinyPNG」を紹介します。
このページの目次
TinyPNGとは？
TinyPNGは画像ファイルの見た目をほぼ変えずにサイズの削減を行うことのできるツールです。今回はサイトを利用した一番簡単な方法をご紹介しますが、他にWordPressのプラグインやPhotoShopに使えるプラグインなど様々なプラットフォームで使用できます。
今回は1番王道のWebサイト版をご紹介しますが、WordPressのプラグインも別記事でご紹介しています。
対応している拡張子
以前は.pngのみの対応でしたが、現在は.jpegが追加されたことによってほとんどの画像ファイルを扱うことができます。
TinyPNGの仕組み
TinyPNGは非可逆圧縮を行い画像ファイルを圧縮しています。類似している画像内の色数を減らすことによってデータを格納するバイト数を削減しファイルサイズを最適化しています。
TinyPNGの使い方
早速使い方をみていきましょう。まずは公式サイトにアクセスします。
1.画像を用意します。※最大20ファイルまで可能なので一括で作業を行いたい場合はフォルダにまとめておきましょう。
2.サイズの削減を行いたい画像をサイトの点線内にドラッグします。
全てのファイルが緑色の「Finish」と表示されるまで待ちます。ファイル数や大きさによって異なりますが、数秒から数分です。
3−１.ファイルを別々にダウンロードする場合はファイル名の右端にある「download」をクリックします。
3−２.ファイルを一括でダウンロードする場合は。ファイル名の下に表示されている「Download All」をクリックします。
以上でダウンロードが完了しているのでファイルをみてみてください。画像によって異なりますが、数パーセントから数十パーセントの削減がされています。
画像を見比べてみる
実際にこの記事で使用している画像をTinyPNGを使って圧縮してみました。
.jpegの場合
.jpegのファイルを圧縮前と圧縮後で並べてみました。
圧縮前
圧縮後
圧縮前と後で見分けがつきませんが画像サイズは30%削減されています。
.pngの場合
.pngのファイルを圧縮前と圧縮後で並べてみました。
圧縮前
圧縮後
.jpegと同様見分けがつきませんが、画像サイズが21%削減されています。
まとめ
画像サイズを一発で削減できるツール「TinyPNG」の使い方をご紹介しました。ドラッグ＆ドロップで簡単にファイルサイズ削減を行えるのでとてもおすすめです！
