高性能WEB開発用画像圧縮

1. 画像サイズを減らす

画像が多い場合、画像サイズを減らすのがダウンロード速度を上げる最も直接的な方法です。
1. PNG8 は同じ効果がありますが、画像サイズが GIF より小さいため、GIF (非アニメーション画像) の代わりに PNG8 を使用してください。

2. Fireworks を使用して PNG 画像を処理します。当社製品の多くの PNG 画像は、アーティストによって Photoshop を使用して直接エクスポートされます。
その後、アーティストに Fireworks を使用して PNG を処理するように依頼しました (おおよその方法は、PNG8 として保存し、背景色を削除することを選択することです)。
処理後、100K画像のサイズは基本的に3/4に縮小されますが、画質もわずかに低下します。それを受け入れることができるかどうかによります。

3. Smush.it (http://www.smushit.com/ysmush.it/) を使用して画像を圧縮します。 Smush.it は、YUI チームによって作成されたオンライン画像圧縮 Web サイトです。
この Web サイトは、元の画像の品質に影響を与えることなく画像から一部のメタデータを削除するため、安心してこの Web サイトを圧縮に使用できます。
ただし、この圧縮率も比較的制限されています。


2. 画像の結合と分割

1. スプライトが画像を結合してリクエストの数を減らし、パフォーマンスを向上させることは誰もが知っています。ただし、あまりにも多くの画像を結合しないでください。画像が大きすぎると、この 1 枚の画像がこのページの表示に影響を及ぼします。

2. 場合によっては、大きな画像を複数の小さな画像に分割する必要があります。たとえば、製品のホームページには比較的少数の画像があり、大きなバナー画像は 1 つだけです。
すべてのブラウザで画像を同時にダウンロードできるため、分割せずに大きな画像を 1 つだけ使用すると、ダウンロード速度が遅くなります。


3. 透過画像処理

IE6 では透過 PNG 画像を表示できません。これは多くの開発者にとって悩みの種です。いくつかの方法の長所と短所を以下に紹介します。

1. AlphaImageLoader を使用します。IE6 はフィルターをサポートします。IE6 が PNG をサポートするようにするには、次の CSS コードを使用します。

#some-element { 
background: url(image.png); 
_background: none; 
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', 
sizingMethod='crop'); 
}

欠点: AlphaImageLoader は、透明な画像を処理するために大量のリソースを消費し、IE のメモリ使用量が急速に増加します。
また、AlphaImageLoader のすべての処理は同じスレッドで同期的に実行されるため、AlphaImageLoader が多すぎると UI のレンダリングがブロックされます。
_filter を使用すると、IE7 も認識できます。実際、IE7 で上記のコードを使用すると、IE7 は画像を直接使用せず、AlphaImageLoader を使用します。
注: 個人的には、AlphaImageLoader の使用をできるだけ避けることをお勧めします

2.
DD_belatedPNG (http://www.dillerdesign.com/experiment/DD_belatedPNG/) を使用すると、インターフェイス上のすべての透明な画像を同じ方法で簡単に処理できます。
長所: 使い方が簡単 (AlphaImageLoader より簡単)
短所: ページ上で処理する画像が多い場合、速度が比較的遅く、画像を動的に変更することができません。

3. VML
IE6 は VML をサポートしています。VML は次のとおりです:
HTML コード ヘッダーを変更します
html xmlns ="http://www.w3.org/1999/xhtml" xmlns:v >
スタイル タイプ ="テキスト/CSS" >
v:* { 動作 : url(#default#VML) } ; style="color: rgb(128, 0, 0);">style >
span style="color: rgb(128, 0, 0);">ヘッド >
ボディ >
v:image src ="image.png" />
スパン style="color: rgb(128, 0, 0);">ボディ>
span style="color: rgb(128, 0, 0);">html >


利点: 優れたパフォーマンス、高速な速度
短所: 使い方が複雑で、Firefox などのブラウザをサポートしていません。異なるブラウザが異なる HTML コードを出力するかどうかを判断する必要があります。

4. 複数のドメイン名から写真をダウンロードする

各ブラウザは同時に同じドメイン名に対して固定リクエストしか送信できないため、例えばIE6では2つあるようですので、複数のドメイン名を開いて画像リソースをリクエストすることが可能です。
たとえば、img1.abc.com、img2.abc.com。ただし、ドメイン名を開きすぎないでください。ドメイン名を解決して新しい接続を開くのに時間がかかり、速度が遅くなる可能性があります。通常、2 ～ 4 つのドメイン名で十分です。

5. IE6 での背景画像のキャッシュ

IE6 の背景画像のキャッシュは面倒なことで、IE6 で背景画像をキャッシュするには次の JS を使用することを多くの人が知っています
試してください。
document.execCommand("BackgroundImageCache", false, true);
}catch(e){}
しかし、これの効果はあまり良くありません。マウスの動きによって背景画像が変更されると、IE6 は常に画像要求を送信します (背景画像がダウンロードされている場合でも)。
戻り結果は304ですが、それでもかなり時間がかかります。この場合、次の回避策を使用できます。
ページ上で DIV 要素を直接使用して画像をロードします。これにより、ロードされた画像が実際にキャッシュされ、マウスが移動してもリクエストが送信されなくなります。

6. 画像のプリロード

ページがロードされた後、次のコードを使用して次のページの画像をプリロードします。次のページに入るときに、画像を再度ダウンロードする必要はありません

window.onload=function(){ 
var img = new Image(); 
img.src = "images/image.png"; 
img = null; 
};