ウェブサイトの表示速度を改善するなら、画像圧縮は必要不可欠です。
画像圧縮のツールには複数の種類がありますが、TinyPNGは高性能かつ無料で使える便利なサービスです。
この記事では、パンダのキャラクターで有名な画像圧縮サービスTinyPNGの使い方について解説します。ブログを始めた方やオウンドメディアを運営されている方の参考になれば幸いです。
そもそも画像圧縮って？
画像圧縮とは、画像の見た目やデザインなどの性質を保ったまま、データ量を減らす技術のことです。具体的には、次の画像にあるような処理のことを指します。
画像のデザインが変わらないのにデータ量が減るのは、ぱっと見ただけでは分からない複雑な色素をシンプルにするなどでうまく調整しているためです。
ウェブサイトのコンテンツを作成する際に、画像のデータ量を減らさないと、表示速度が遅くなる可能性があるので注意が必要です。
サイトスピードは直帰率やCVRに影響する重要な指標ですので、こまめにチェックすることをおすすめします。
また、モバイルの表示速度があまりにも遅い場合には、Googleのスピードアップデートの影響で検索順位を落とすおそれがあります。
なお、サイトスピードについて詳しく知りたい方は、こちらの記事をご覧ください。
TinyPNGは無料で使える画像圧縮サービス
TinyPNGは、オランダとスウェーデンを拠点とするvoormediaという会社が提供している無料の画像圧縮サービスです。SUMSANGやairbnbなどのグローバル企業にも利用されており、日本でもブログ運営の必需品として人気があります。
TinyPNG公式HPから引用（最終確認日：2020/4/9）
上記の引用にもあるとおり、パンダがイメージキャラクターとして使われています。ちなみに、名前は「ジョージ」というそうです……。
TinyPNGの使い方
TinyPNGは、初心者でも簡単に利用できるように設計されています。
まず、TinyPNGの公式ホームページにアクセスしましょう！
すると、以下のページが表示されますので、【pngまたは.jpgファイルをここにドロップしてください！】の場所に画像をドラッグして入れ込むだけで圧縮が開始されます！
TinyPNG公式HPから引用（最終確認日：2020/4/9）
ドロップする場所にも記載されているように、TinyPNGが対応している画像ファイルの形式はpngファイル及びJPEGファイルです！
実際に、927.4KBの画像を圧縮してみると、318.4KBまでデータ量を減らすことができました！ 以下の図に表示されているように、画像の圧縮率も一目で分かります。
TinyPNG公式HPから引用（最終確認日：2020/4/9）
そのあとは、画像データの保存方法を選択しましょう！ これには大きく３つの方法があります。
- Dropboxに保存する
- すべてをダウンロードをクリックしてzipファイルを保存する
- ダウンロードをクリックして個別のファイルを保存する
ダウンロードが完了したら、画像を確認して終了です。
TinyPNGの公式ホームページは英語で表記されています。英語が苦手な方はGoogle翻訳を使って日本語に変換しましょう！
利用する際の注意点
TinyPNGを利用する際は、以下の2点を注意しましょう！
- 一度に画像圧縮できるのは20枚まで
- 画像圧縮できる画像のデータ容量は５MBまで
もし、これらの上限を外したい場合は、TinyPNG PROという有料版のサービスがあるので、そちらを使ってみてください。
有料版では以下のサービスが追加されます。
- 一度に20枚以上の画像を圧縮できる
- ファイルサイズの制限を5MBまで25MBにアップグレードできる
- アナライザーツールで詳細な統計を表示できる
なお、利用料金は年間で25米ドル（日本円で2700円程度）です。画像ファイルの挿入を多用する方は検討してみてはいかがでしょうか？
また、背景が透明の画像に関しては、圧縮前と圧縮後の画像で色が変化する場合があるので注意してください。例えば、次の画像のような状態になることがあります。
【圧縮前の画像】
【圧縮後の画像】
知らない間に重たいサイトに……
ブログ系のメディアを運営している方であれば、ユーザーに伝わりやすいよう画像をアップロードされている方もたくさんいらっしゃるかと思います。
一つひとつの画像のデータ容量は小さく見えても、それらが100枚や1000枚と増えていくと、ウェブサイトが重たくなるおそれがあります。
そのため、画像は圧縮してかアップロードする習慣をつけましょう！
また、WordPressでウェブサイトを構築している方は、TinyPNGのプラグイン版もありますので、そちらを使えば自動的に画像を圧縮することもできます。
こうしたツールをうまく使ってサイトスピードを最適化して、ユーザーの使いやすいページを作りましょう！
