ページ表示速度が速くなるよ。画像圧縮のススメ。

   2017年5月12日

assyuku

今回は画像を圧縮する方法をご紹介。

Webサイトでは画像を使用することは多かれ少なかれほとんどですよね。
サイズの小さい画像数点であれば、ページ表示速度に影響することは
まずないですが、ギャラリーサイトなど写真を大きく枚数も大量にある場合、致命的です。。。

画像を圧縮することでかなりのサイズダウンが見込めます。

圧縮することで画像が荒くなったりしないの?と思うかもしれませんが、
ぜんぜん変わらないです。比べてみても見分けがつきません。

TinyPNG

私がふだん使っている画像圧縮サービスは
あの有名なパンダです。

panda

TinyPNG

名前のとおり、PNGファイルしかできないはずが
いつからかはわかりませんがjpgも圧縮できるようになっていました!

TinyPNG-–-Compress-PNG-images-while-preserving-transparency

TinyPNGは一括で20ファイルまで圧縮できるので便利で
圧縮率も優秀、何より使いやすいです。

説明しななくても分かると思うけど使い方

TinyPNG-–-Compress-PNG-images-while-preserving-transparency2

英語のサイトなのに、わかる。ってすごい。

Drop your .png or .jpg files here! に
圧縮したい画像ファイルをドラッグ&ドロップでぽいっとします。
そうすると圧縮がスタートします。

そして結果がでるので、「download」をクリックで終わりです。
ダウンロード済みのリンクは色が変わるのでどれをダウンロードしたかが分かります。

私が気に入ってるところは
ダウンロード済みのリンクの色が変わってくれるところと
保存するときにファイル名が変わらずそのまま上書きできちゃうところ。

これ私にとっては結構重要。

ほかの圧縮サービスも使ってたことがあるけど、
上記のお気に入りポイントが当てはまらなかったんですよね。

圧縮前・後 画像比較

比べてみるとこんなかんじです。
どうですか?画像はきれいなままです(^_^)

153KB → 32.3KB 圧縮率81%

IMG_9009_thankyou

IMG_9009_thankyou_

ブログで使用する写真や、サイトで使用する写真を圧縮して
サイトの高速化をはかってみてはいかがでしょう。

web tipsの記事