著者:岸本健太郎
Pocket
LINEで送る

slim化

当サイトや、他の、作成を代行したりするサイト・でもそうなのですが、ページの表示を高速化する上で、非常に悩ましいのが画像のサイズ。

例えば書評サイトだと、写真を上げる時に、デジカメで撮影したままだとかなりファイルサイズが大きいのです。
レスポンシブなどでスマホ対応しているサイトもかなり増えてきてはいますが、回線速度がまだまだ遅いモバイルなどでは死活問題になりかねません。

そこで今回は、画像サイズを縮小するサービスをご紹介するとともに、結局何を使えばいいか、をお伝えします。

元画像と縮小後の画像を比較

■オリジナルJPG画像:81.5KBぱくたそより)
HIR93_sofa-deneteiruneko500

■オリジナルPNG画像:276KBぱくたそより)
inu

です。
なぜ犬と猫なのかは別に理由ありません。あざとい?はい。だってかわいいもん。

Yahoo! Smush.it

結果
JPEG画像:81.5KB ⇒ 73.9KB
PNG画像:276.47KB ⇒ 170.48 KB

有名なYahoo!のサービス。Wordpressでもプラグインとして存在しますね。
こちらはJPGもPNGも圧縮できますが、ドラッグ&ドロップで画像をアップできないのがちょっと使いづらい。あと、圧縮率はイマイチですね。

JPG圧縮前:81.5KB
HIR93_sofa-deneteiruneko500

JPG圧縮後:73.9KB
c2ec76ec-smush-HIR93_sofa-deneteiruneko500(smush)

PNG圧縮前:276.47KB
inu

PNG圧縮後:170.48 KB
inu(smush)

Yahoo! Smush.it

JPEG/PNG Minimizer

結果
JPEG画像:81.5KB ⇒ 14KB
PNG画像:276.47KB ⇒ 54KB

全てにおいて優れているサービス。
使いやすさもいいですし、圧縮率も高いです。
JPGとPNGの両方に対応しているのも便利ですね。

JPG圧縮前:81.5KB
HIR93_sofa-deneteiruneko500

JPG圧縮後:14KB
neko(media4x)

PNG圧縮前:276.47KB
inu

PNG圧縮後:54KB
inu(media4x)

JPEG/PNG Minimizer

TinyPNG

結果
PNG画像:276KB ⇒ 50.7KB

PNG画像しか変換できませんが、圧縮率はかなり優秀。
また、画質も維持できています。
画像をドラッグ&ドロップするだけで圧縮してくれるので便利です。複数画像も一括でOK。

PNG圧縮前:276kb
inu

PNG圧縮後:50.7 KB
inu (tinypng)

TinyPNG

compresspng

結果
PNG画像:276.47KB ⇒ 48.7KB

こちらもTynePNGと同様PNG画像しか変換できませんが、圧縮率は同じくらい優秀。
使いやすさで選んで問題ないと思います。

PNG圧縮前:276kb
inu

PNG圧縮後:50.7 KB
inu(compress)

compresspng

jpegmini

結果
JPG画像:276.47KB ⇒ 48.7KB

こちらはかなり有名なサービスで、JPGしか変換できませんが、画質をあまり落とさず軽量化できます。
ただ、無料で使おうとすると、オンラインでは1枚づつしかできず、デスクトップ版も変換できる画像の枚数に制限があるでの、少々使いづらいかも。

JPG圧縮前:81.5KB
HIR93_sofa-deneteiruneko500

JPG圧縮後:13.1KB
neko(jpgmini)

JPEGmini

結局どのサービスを使えばいいの?

上記の結果から、個人的には、

JPEG/PNG Minimizer
JPEG/PNG Minimizer

がオススメです。
使いやすさも問題ありませんし、画質も調整可能です。

PNGしか扱わない、と言う場合は、「tynypng」がオススメ。
シンプルで軽い感じがします。
こちらは画質の劣化具合が少なく、かつ圧縮度合いが大きいので。

というわけで、サイトやに画像を掲載する際は、一度これらのサービスで軽量化をしてから掲載されると、よりスムーズな表示に繋がります。

有名なamazonの2006年の調査結果で、
「読み込み時間が0.1秒早くなれば、売上が1%増加する」
「読み込み時間が1秒増えると、反応率が7%減少」
ということが発表されています。

もちろん、前提があってのことですので、全てにおいて当てはまるわけではないでしょうが、読み手のストレスを軽減できるよう、画像の表示速度は速くしておきたいですね。

おまけ番外編

デスクトップ版なら。「Caesium」がオススメです。
品質をだいたい80~90ぐらいに設定すると思いますが、若干劣化します。
ただ圧縮率は相当高いです。

ダウンロードはこちらから(GET ITをクリック)

  • このエントリーをはてなブックマークに追加