現在、スマートフォンサイトの普及に伴い、サイトの表示スピードが重要視されています。
サイトの表示が遅くなる原因としては、いくつかありますが、最も多く負荷をかけている要因はサイト内の画像にあります。
画像は、WEBサイトになくてはならない存在です。文章だけでは、コンテンツの良さは伝わりません。
しかし画像を入れれば入れるほどサイトの表示スピードは遅くなります。
画像を圧縮する事で、使用している画像はそのままで、表示スピードを改善する事が可能です。
デザインデータからデザインパーツを書き出すとき、高品質で書き出せば画像は綺麗になりますが、画像の容量が大きいので、表示スピードは遅くなります。
デザインデータから書き出すときは、なるべく中品質で書き出すようにしましょう。
もうデザインデータを書き出してしまっている既存のサイトは、ツールを使って画像を圧縮していきます。
今回は無料で簡単に画像を圧縮できるツール「TinyPNG」についてご紹介いたします。
ドラッグ＆ドロップで簡単に圧縮できる「TinyPNG」
TinyPNG
「TinyPNG」は、もとの画質をほとんど損なわないまま容量を圧縮する画像圧縮ツールです。ブラウザ上で使えて、操作も簡単。しかも無料で使用する事が可能です。
使い方はとってもシンプル。圧縮したい画像をドラッグ＆ドロップで「TinyPNG」のサイトにもっていけば、圧縮してくれます。
jpgとpng両方圧縮に対応しているので、気にせずどんどん圧縮していけます。
共通パーツ（ヘッダーロゴやグローバルナビなど）を圧縮するだけでも、かなり表示スピードが向上します。
表示スピードが上がれば、離脱率を防ぐことができアクセス数が増加する可能性があります。
Googleはもともと表示スピードについては評価基準に入れないと公言していましたが、最近その発言を撤回し評価基準に入れる方針に変更しました。
ユーザーにとってもGoogleの評価にとっても表示スピードは非常に重要になります。
jpgとpngをうまく使い分けれているか
画像をいくら圧縮しても、jpgとpngの設定が間違っていれば意味がありません。
例えば大きな写真などをpngに設定していると、容量がとてつもなく大きくなってしまいますし、単色のボタンなどをjpgにしていると、圧縮した時に劣化が分かりやすくなってしまいます。
写真など画像の中に色が大量にある場合は、必ずjpgを設定するようにしましょう。
また、色は何色かしか使っていない簡単なボタンやアイコンなどはpngを設定しましょう。そうすると劣化することなく、容量を圧縮する事が可能です。
最初は面倒ですが、画像の書き出しや圧縮はルールを決めてしまい、必ずそれを実行するようにしましょう。
とにかく使いやすい「TinyPNG」
「TinyPNG」は、基本英語のサイトですが、使いやすさは抜群です。
画像を簡単に圧縮する事が出来、圧縮した画像をまとめてダウンロードする事も可能です。
画像の名前もそのままなので、ダウンロードした画像をFTPにアップすれば画像圧縮は完了します。
PCにインストールしてローカルで使用する画像圧縮ソフトもありますが、機能が多すぎて使いこなせなかったり、画像の劣化がひどかったりとあまりいいものが少ないように思います。
「TinyPNG」はブラウザ上で使えて、登録も不要なのでとても使いやすいです。
まとめ
表示スピードは画像圧縮以外にいろいろ改善箇所があります。画像を劣化させたくないので、他の箇所を改善するという人もモチロンいると思います。
しかし、画像は表示スピードの50％以上に影響を与えています。この対策をすれば表示スピードが改善されることは間違いありません。
「TinyPNG」を使えば、劣化を抑えて圧縮が可能なので、是非一度お試しください。
