webデザイン以前何度かいろんなブログでお見かけしたPNG画像軽量化サイト「TinyPNG」これが想像以上に軽量化してくれます。見た感じもほとんど劣化がわかりません。(私自身、見分けはつきませんでした...)実際に試してみると合計700KBが300KBまで軽量されました。みんな大げさに言ってるだけじゃないのかと、半信半疑試してみたのですが、よいですね。TinyPNGの使い方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で圧縮率が高くなる(気がする)という流れでフロントエンド側でサイト高速化を実現できますね。圧縮作業は最後にまとめてやることをお勧めします。コーダーはサイトを組むだけではなく、こういうことにも気を使っていきたいですね。17:16あなたにおすすめの記事プロフィールid:emj1025Webデザイナー。デザイン・ギター・宅録を少々。このブログでは気になった製品、HTML/CSS、Webデザイン、音楽などを記事にしています。Reserved.引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。