emuramemo

製品レビュー、HTML/CSS、webデザイン、音楽、その他いろいろ

PNG画像を軽量化できるサイト「TinyPNG」とCSSスプライトで高速化

以前何度かいろんなブログでお見かけしたPNG画像軽量化サイト「TinyPNG

 

これが想像以上に軽量化してくれます。

そして見た感じもほとんど劣化がわかりません。(私自身、見分けはつきませんでした…)

 

実際に試してみると合計700KBが300KBまで軽量されました。

 

みんな大げさに言ってるだけじゃないのかと、半信半疑試してみたのですが、よいですね。

 

 

TinyPNGの使い方

f:id:emj1025:20130208170635j:plain

http://tinypng.org/

ファイルをサイト内(赤枠)にドラッグ&ドロップするだけ。

もしくはこの部分をクリックすると参照ウィンドウが開くのでそちらでも可能。

 

ファイルを複数選択して同時にアップロードすることができます。(同時に20ファイルまで。それを超えた分はエラーが出ますので、小分けにアップロードしてください)

 

こんな記事も上がっていたので重要なファイルはアップロードしないほうが無難かも。

ブラウザにファイルをドロップしてはいけない | ぼくはまちちゃん!

 

ファイルによっては容量が変わらない、または容量が増えるなんてものもあるので1個試しただけで残念がらないでください。圧縮後に、さらにもう一度圧縮してみると0~1%ほど圧縮できますが1回だけで良いと思います。

 

やってみた感じ、元々の容量が大きいファイルのほうが軽量化の恩恵を受けられる気がしました。しかし、大きすぎる画像はgifの色数を減らしたみたいな劣化をすることもありましたので軽量化したあとのチェックも忘れずに。

 

 

導入のきっかけ

「PNG圧縮かー…、でもそんなにPNG使わないし」と思っていた矢先、

js使いまくりな重量系サイトを制作することがあったので「少しでも軽量化を」と、CSSスプライトの導入に至りました。

 

CSSスプライトといえば透過PNGです。(透過しておかないとあとあと修正があった場合面倒すぎるので透過にします)

 

透過PNGがそこそこの量になってきたので「そういえばPNGを圧縮できるサイトがあったな」と、はてブしてたのを思い出しました。

 

 

CSSスプライトとの相性が良い

CSSスプライトはメリット、デメリット(管理面やSEO面で)もありながら、画像リクエストをかなり減らせるのでサイトの高速化にはとても良い手段です。

 

CSSスプライトについてはこちらの記事でかなりわかりやすく解説されています。必読!

CSSスプライトについてあれこれ。| Lopan.jp

 

画像をまとめて1枚で作成するので、web制作で背景色を気にしなくても良い透過pngで保存する場合が多いと思います。

 

まとめるので1ファイルの画像容量が大きくなる→TinyPNGで圧縮率が高くなる(気がする)

 

という流れでフロントエンド側でサイト高速化を実現できますね。

圧縮作業は最後にまとめてやることをお勧めします。

コーダーはサイトを組むだけではなく、こういうことにも気を使っていきたいですね。(自分がプログラミングできない分…汗)

 

emuramemo(c) All Rights Reserved.