かとのぼのマイコード・マイライフ

個人開発者かとのぼのプログラミングと雑談のブログです。たまに読書と銭湯も

画像圧縮サービスTinyPNGでサイトの表示を早くする【ブログやWebサービス開発者向け記事】

画像圧縮サービスTinyPNG

Webサービスやブログなどでサイトの素早い表示に画像圧縮は欠かせません。無料で簡単に使える画像圧縮サービスTinyPNGを使ってサイトの表示速度をあげましょう。

画像圧縮でサイトの表示速度をアップ

今やWebサービスもブログも画像なしでは成立しません。しかし、画像はテキストに比べてデータ容量が大きいので表示速度が遅くなります。

グーグルによると、サイトの表示に3秒以上かかると50%の人は待てずにサイトから離脱するそうです。

つまり、ユーザーの離脱を防ぐために画像の容量を圧縮する画像圧縮サイトを使う必要があるのです。

TinyPNGは無料の画像圧縮サービス

私が普段利用している画像圧縮サービスはTinyPNGです。

 

TinyPNG – Compress PNG images while preserving transparency

 

ポリゴンのパンダが笹を食べている、一目見たら忘れないサイトです。

PNG形式とJPEG形式の画像をファイルを圧縮できます。このサイトは無料で使えてログインも不要です。

だいたい70〜80%くらい画像を圧縮してくれるので、かなり画像を軽くしてくれます。下のイメージ画像ももちろんTinyPNGを使って圧縮しています。

謎のパンダがトレードマークのTinyPNG

謎のパンダがトレードマークのTinyPNG

TinyPNGの使い方

使い方は至ってシンプル。ホーム画面のアップロードファイルの部分に圧縮したい画像をドラックアンドドロップか、選択するだけです。あとは勝手に圧縮作業をしてくれます。

圧縮が完了すると、パンダが万歳をします。あとは「Download all」のボタンをクリックしてダウンロードしてください。

これだけです。

画像の圧縮が成功した画面

画像の圧縮が成功した画面

モバイルを意識したサイト作りを

現在、ブログもWebサービスもモバイル(スマホ)からの閲覧が大半になってきています。

モバイルは、パソコンよりもサイトの表示は遅くなる可能性が高いため、必ず画像は圧縮して、少しでも表示速度をあげるよう対策をしておきましょう。

関連記事:

www.katonobo.com

www.katonobo.com

www.katonobo.com