COLUMN コラム

Webサイトを制作する上でほぼ必ず使用する写真や画像ですが、みなさんはサーバーアップの際に圧縮処理をしていますか？

一枚だけを圧縮したところでサーバーへの負担、読み込み速度に変化はありませんが、多くの画像を使用するようになった昨今のWebサイトでは、画像を圧縮することでサーバーにかかる負荷の軽減、読み込み速度の改善が期待できます。

今回は画像圧縮の際に役に立つWebツール「TinyPNG」を紹介します。

1. TinyPNGとは

冒頭で述べたように、「TinyPNG」とはブラウザ上で利用できる画像圧縮ツールです。

一度に20枚、ファイルの容量は5MBまでと上限がありますが、無料で利用できる便利なツールです。

画像によっては50%以上の圧縮が可能で、後ほど比較しますが、圧縮前の画像と見比べてもほとんど劣化が見られません。

これほどの圧縮率であれば読み込み速度の向上も十分期待できますね。

サイト：TinyPNG

2. TinyPNGの使い方

使い方は非常に簡単で、サイトにアクセスしたらフォルダから圧縮したいファイルをドロップするだけで自動で圧縮されます。

圧縮が完了するとダウンロードボタンが表示されるので、そちらをダウンロードして圧縮完了です。

フォルダ名は元々の名前が使用されるのでわざわざファイル名を直したりという手間もありません。

3. 圧縮画像の比較

では、先ほどの手順で圧縮した画像を比較してみましょう。

＜圧縮前＞

＜圧縮後＞

2枚の画像を見比べても目立った劣化はありません。

ほぼ同じ画像に見える2枚ですが、画像の詳細を見てみると圧縮前は831KB、圧縮後は295KBまで圧縮されています。

約65%も圧縮されていますね。

一枚では意味がなくてもチリも積もれば山となるので、決して馬鹿にはできません。

4. TinyPNGを使用するリスク

TinyPNGを使用する際にはリスクもあります。

オンライン上に画像をアップロードする以上、TinyPNGから画像が外部に流出する可能性があります。

悪意を持った人間が画像を盗み、悪用する恐れがありますので、流出して困る画像のアップロードは控えた方が良いかもしれません。

また、ダウンロードする際にスパイウェアを仕込まれる可能性も0ではありませんので、危険性を知った上で利用して下さい。

Webサイトに使用することを前提として書いているので、流出云々は問題ではないかもしれませんが、安全性を考慮するのであれば、ローカルで全てが解決するよう別の圧縮ソフトを使用しましょう。

おわりに

今回はブラウザ上で利用できる画像圧縮ツール「TinyPNG」を紹介しました。

読み込み速度はユーザビリティに直結するので、Webデザイナーの方は必ず画像を圧縮してからサーバーにアップするようにしましょう。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。webサイトについてお悩みのある方はお気軽にお問い合わせください。