ホームページ > 記事 > ウェブフロントエンド > 京東背景画像の最適化 skill_html/css_WEB-ITnose
京東背景画像の最適化 skill_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:54:581026ブラウズ
このドキュメントには主に次の側面が含まれています:
- 基本概念
- ビットマップ
- PNG を使用する必要がある場合
- JPG を使用する必要がある場合
- 概要
1. 基本概念
- ビットマップ
ビットマップは、ピクセル マップまたはラスター マップとも呼ばれます。画像内の各点の色、深度、透明度などの情報を記録して画像を表示します。ビットマップは大きなパズルに似ていますが、各ピースが単色のピクセルである点が異なります。これらのピクセルを特定のルールに従って配置すると、目に見えるものが形成されます。したがって、ピクセル イメージを拡大すると、これらのパッチワーク ピクセルが表示されます (下図を参照)。 Web ページで使用される JPG、PNG、GIF 形式の画像はすべてビットマップです。
利点: 豊富な色レベルでリアルな画像を表示するのに役立ちます。
欠点: ファイルサイズが大きく、ズームインおよびズームアウトすると画像が歪みます。
- JPG と PNG
JPG と PNG のいくつかの機能の比較:
| 格式 | 压缩模式 | 交错支持 | 透明支持 | 动画支持 |
| JPG | 有损压缩 | 支持 | 不支持 | 不支持 |
| PNG | 无损压缩 | 支持 | 支持 | 不支持 |
圧縮モード
インターレースサポート
透明なサポート
アニメーションのサポート
| 格式 | 最高支持色彩通道 | 索引色编辑支持 | 透明支持 |
| PNG8 | 256色 | 支持 | 支持布尔透明 |
| PNG24 | 约1600万色 | 不支持 | 支持8位（256阶）alpha透明 |
| 形式 | サポートされている最高のカラー チャネル | インデックス付きカラー編集のサポート | 透明度のサポート |
| PNG8 | 256 色 | サポート | ブール透明度をサポート |
| PNG24 | 約 1,600 万色 | サポートされていません | 8 ビット (256 レベル) アルファ透明度をサポート |
- GIF
現在 GIF の使用率が低いため、GIF アニメーションに適していることがよくあります。これは、PNG 自体が開発者によって開発された画像であるためです。 GIF 形式を置き換えるため、透明な画像には PNG8 を使用することをお勧めします。
GIFファイルのデータは、LZWアルゴリズムに基づく連続階調可逆圧縮形式です。その圧縮率は通常約 50% であり、どのアプリケーションにも属しません。 GIF 形式のもう 1 つの特徴は、複数のカラー画像を 1 つの GIF ファイルに格納できることです。1 つのファイルに格納された複数の画像データを 1 つずつ読み出して画面に表示すると、最も単純なアニメーションを作成できます。
2. 実際の応用
- PNG を使用する場合
ケース 1:
以下の Jingdong Mall のヘッダー部分を JPG 形式と PNG8 形式で保存します。 保存結果には 2 つの注目すべき点があることがわかります。
1. JPG で保存したファイル サイズは、で保存したファイルよりも大きくなります。 PNG
2. JPG ファイルにノイズが表示されます
結果の原因の分析:
まず、テキストの色とストロークが次のとおりであることがわかりました。画像に含まれる色は非常に限られています。この画像が PNG で保存されている場合、画像を実際に復元するために保存する必要がある色情報はほとんどありません。 JPG 形式の場合、サイズは主に画像のカラー レベルによって決定されるため、色数が少なくコントラストが強いこの場合、ファイル サイズを適切に圧縮できません。
ケース 2:
次の画像は PNG8 と JPG で保存されました。PNG8 で保存すると、画像の品質が保証されるだけでなく、画像のサイズも保証されることがわかりました。ファイルサイズは 8.3K しかありませんが、PNG8 で保存すると、JPG を 100% で保存するとファイルサイズが 44.2K に増加します。拡大しないと具体的な違いがわからないかもしれませんが、実際には以前と同様に不要なノイズが表示されます。 。 PNG8 の圧縮率を達成し、JPG 45% を使用して保存すると、画像に重大な歪みが発生します。
結論 次の条件の画像は、PNG8 形式での保存に適しています :
1. 画像内の色が少なく、主に単色または単色です。滑らかなグラデーション。
2. 明るさの差が大きく、コントラストが強い単純な画像 ([今すぐ購入] ボタンの背景やテキストなど)。
- JPG を使用する場合
ケース 1:
下の画像は JPG 60% を使用しています (左上)。 PNG8 256色ディザなし（右上）、PNG8 256色拡散ディザあり（左下）、PNG32（右下）がそれぞれ格納されています。 JPG を使用して画像を保存すると、最大の圧縮率を達成できるだけでなく、元の画像の復元効果も確保できることがわかります。 PNG8で保存すると画像ファイルサイズが大きくなり、歪みも大きくなります。品質は PNG24 形式でのみ保証されますが、ファイル サイズは JPG よりもはるかに大きくなります。
結果の理由の分析:
この結果の理由は、JPG と PNG のそれぞれの圧縮アルゴリズムにも関連しています。
1. 写真や写実的な作品では、環境光の影響により、画像の色レベルが非常に豊かになります。たとえば、バスの赤い領域は、反射、影、遠近効果により、異なる明暗の領域を形成します。PNG を使用して保存する場合、この領域を保存するには、異なる赤の色合いが必要です。画像全体に関して、PNG8 の 256 色では画像に表示されるすべての色を完全にインデックス化することはできないため、保存中に多くの色が失われ、歪みが発生します。画像の効果を確実にしたい場合は、色範囲が広い PNG24 で保存する必要があり、対応するファイル サイズも大きくなります。
2. JPG 圧縮アルゴリズムは、ファイル サイズを可能な限り圧縮しながら、画像の視覚効果をより良く復元するために、現実世界のこれらの複雑な色の変化を圧縮するのに適しています。
ケース 2
下の図では、背景をさまざまな画像形式で保存する場合、次のことがわかります: JPG で保存する場合 (背景に名前を付けて直接保存する場合)、ファイル サイズは36.3K、PNG8 256 を使用した場合、色が不足しているため、サイズが 57.7K に増加しました。これは、これらのカラー ブロックの影響を軽減するためです。画質を向上させるために、PNG8 に拡散ディザリングを追加しました。その結果、この時点でファイル サイズは 156.3K に達し、PNG24 を使用して歪みなしで保存すると、ファイル サイズは 231.9K になります。
結果の理由の分析:
画像には多くの実際のマテリアル (白い雲、アリ、緑の葉など) が使用されていることがわかります。これらの実際の素材は写真画像と同じなので、色のレベルが非常に豊かになるため、PNG 形式での保存には適していません。現時点では JPG 形式を使用する必要があります。
結論 次の条件を満たす画像は、JPG 形式での保存に適しています :
リアルな写真画像や非常に豊かな色レベルを持つ画像の場合、通常、JPG 画像形式で保存すると最高の圧縮効果が得られます。
概要
画像を保存するときに JPG と PNG のどちらを使用するかは、主に画像のカラー レベルと色数に基づいて選択されます。一般に、豊富なレイヤーと多くの色を含む画像は JPG に保存されますが、単純な色と強いコントラストを含む画像は PNG に保存する必要があります。ただし、いくつかの特殊なケースもあります。たとえば、一部の画像には豊富な色レベルがありますが、画像のサイズが小さく、含まれる色の数が限られているため、それらを PNG で保存することもできます。一部のベクター ツールで描画された画像も、より多くのフィルター効果を使用するため、豊かな色のグラデーションを形成します。このとき、JPG で保存する必要があります。
もう 1 つの原則は、デザインの品質をより確実に保つために、コンテナの背景、ボタン、ナビゲーションの背景など、ページ構造で使用される基本的な視覚要素をできる限り PNG 形式で保存する必要があるということです。 。広告バナーや製品画像など、特に厳しい品質要件がないその他のコンテンツ要素は、ファイル サイズを削減するために JPG に保存できます。
3. Photoshop の各種パラメータの意味と設定スキル
- PNG8 のパラメータ設定
減色アルゴリズム色の場合
は、カラー ルックアップ テーブルの生成に使用する方法と、カラー ルックアップ テーブルで使用する色の数を指定します。次の色深度削減アルゴリズムのいずれかを選択できます。
- 知覚可能: 人間の目がより敏感な色を優先してカスタム カラー テーブルを作成します。
- オプション: 「知覚可能な」カラー テーブルに似たカラー テーブルを作成しますが、大きなカラー領域や Web カラーの保持に適しています。このカラー テーブルは通常、最大限の色の完全性を備えた画像を生成します。 「選択可能」がデフォルトのオプションです。
- サンプリング: 画像のメイン カラー スペクトルから色見本を抽出して、カスタム カラー テーブルを作成します。たとえば、緑と青のみを含む画像は、主に緑と青で構成されるカラーマップを生成します。ほとんどの画像には、色スペクトルの特定の領域に色が集中しています。
- 制限付き (Web): Windows および Mac OS の 8 ビット (256 色) パレットに共通の標準 216 色のカラー テーブルを使用します。このオプションにより、8 ビット カラーを使用して画像を表示するときに、ブラウザーのディザリングが色に適用されなくなります。 (このパレットは Web セキュリティ パレットとも呼ばれます。) Web パレットを使用すると、より大きなファイルが作成される可能性があるため、このオプションはブラウザのディザリングを回避することが優先される場合にのみ推奨されます。
- カスタム: ユーザーが作成または変更したカラー パレットを使用します。既存の GIF または PNG-8 ファイルを開くと、カスタム カラー パレットが含まれます。 [Web とデバイス用に保存] ダイアログ ボックスの [カラー テーブル] パレットを使用して、カラー ルックアップ テーブルをカスタマイズします。
- 白黒、グレースケール、Mac OS、および Windows では、一連のカラー パレットが使用されます。
追記: 通常の状況では、「オプション」項目はデフォルトで選択できます。
ディザリング方法とディザリング
アプリケーションのディザリング方法とディザリング量を決定します。 「ディザリング」とは、コンピュータのカラー表示システムでは提供されない色をシミュレートする方法を指します。
ディザのパーセンテージを高くすると、より多くの色とより詳細な画像を表示できますが、ファイル サイズも大きくなります。最適な圧縮率を得るには、必要な色の詳細を提供する最も低い割合のディザを使用します。
主に単色を含む画像は、通常、ディザリングなしでも問題なく表示されます。連続トーン、特にカラー グラデーションを含む画像では、カラー バンディングを防ぐためにディザリングが必要な場合があります。
いくつかのディザリング方法から 1 つを選択できます。
- 拡散: パターン ディザリングに比べて通常は目立ちにくいランダム パターンを適用します。ディザ効果は隣接するピクセル間に広がります。
- パターン: ハーフトーンのような正方形のパターンを使用して、カラー テーブルにない色をシミュレートします。
- ノイズ: 拡散ディザリング方法と同様のランダム パターンを適用しますが、隣接するピクセル間にパターンを拡散しません。 「多彩な」ディザ法を使用すると、継ぎ目は表示されません。
ps: 一般に、ディザリングを選択する必要があるのは、画像内に歪みの原因となる色が多すぎる場合のみです。最良の効果を得るには、拡散ディザリングを選択し、ディザリングの割合を適切に調整することをお勧めします。ディザが大きいほど、ファイル サイズは大きくなります。
透明度とマット化
画像内の透明ピクセルを最適化する方法を決定します。
- 完全に透明なピクセルを透明にし、部分的に透明なピクセルを色とブレンドするには、「透明度」を選択してからマットカラーを選択します。
- 完全に透明なピクセルを 1 つの色で塗りつぶし、部分的に透明なピクセルを同じ色でブレンドするには、マットな色を選択し、透明度の選択を解除します。
- マット カラーを選択するには、マット スウォッチをクリックし、カラー ピッカーで色を選択します。あるいは、マット メニューからオプションを選択することもできます: スポイト (スポイトの見本ボックスの色を使用)、前景色、背景色、白、黒、またはその他 (カラー ピッカーを使用)
インターレース
PNG と GIF の両方の画像形式には、画像をより高速に表示できる機能が備わっています。画像は特別な方法で保存でき、画像の大まかなスケッチを表示し、ファイルのダウンロード後に詳細を入力できます。これには、大きな画像が画面にゆっくりと表示されるのを座って待つ代わりに、見るものを提供できるため、意味のある心理的効果があります。
ps: サイズやファイル サイズが比較的大きい画像の場合は、このオプションをオンにすることをお勧めします。
- JPG パラメータ設定
品質
「品質レベル」メニューからオプションを選択するか、「品質」を選択します「テキストボックスに値を指定してください。 [品質] 設定が高くなるほど、圧縮アルゴリズムでより詳細な情報が保持されます。ただし、高品質設定を使用すると、低品質設定を使用した場合よりも大きなファイルが生成されます。いくつかの品質設定で最適化された画像を表示して、品質とファイル サイズの最適なバランスを決定します。
品質設定のヒント
- 画像を 100% の品質の JPG 形式で保存しないでください。 100% が必ずしも最高の品質であるとは限らないため、最終的には不当に大きなファイルが得られるだけです。実際、情報の損失を防ぐには、品質を 95 以上に設定するだけで十分です。品質には分水嶺があるため、通常、最高の JPG 品質は 60 ～ 80 であることをお勧めします。
- 品質 50% 未満の圧縮率を使用する場合は注意が必要です。 Photoshop で品質が 51 より低く設定されている場合、「カラー ダウンサンプリング (原文: カラー ダウンサンプリング)」と呼ばれる別の最適化アルゴリズムが実行され、平均して約 8 ピクセルのノイズが発生します。エッジ。 50% 未満の品質のストレージを使用すると、追加の圧縮アルゴリズムが使用され、特にコントラストの高い画像の場合、より深刻な画像の歪みが発生します。
イラスト (左が品質 50、右が品質 51)
最適化
「最適化」を選択すると、ファイルが若干小さい拡張 JPEG が作成されますサイズ。ファイル圧縮を最大限に高めるには、最適化された JPEG 形式を使用することをお勧めします。ただし、一部の古いブラウザーはこの機能をサポートしていません。
ps: 現在、この機能をサポートしていないブラウザは基本的にありません。
連続
Web ブラウザーに連続して表示される画像を作成するには、「連続」を選択します。画像は一連のオーバーレイとして表示され、画像全体がダウンロードされる前に画像の低解像度バージョンを確認できるようになります。連続 JPEG の表示にはより多くのメモリが必要ですが、一部のブラウザはこのオプションをサポートしていません。
ps: このオプションをチェックすると、場合によってはファイル サイズが圧縮されることがあります (画像サイズが 10k を超える場合)。これに基づいて保存することをお勧めします。実際の状況について。ただし、IE6 およびそれ以前のバージョンの IE ブラウザは、連続的な JPG 表示をサポートしていません。代わりに、画像が完全に読み込まれた後に一度だけイメージングを実行します。そのため、ユーザー エクスペリエンスは、連続的なステップバイステップ イメージングを使用しない場合と比べて劣る可能性があります。このオプションは慎重に選択することをお勧めします。
ぼかし
画像に適用するぼかしの量を指定します。ぼかしオプションは、ガウスぼかしフィルターと同じ効果を適用し、ファイル サイズを小さくするためにファイルをさらに圧縮できます。 0.1 ～ 0.5 の範囲の設定をお勧めします。
ICC プロファイル
画像の ICC プロファイルをファイルに保存するには、「ICC プロファイル」を選択します。 ICC プロファイルは、一部のブラウザで色補正に使用されます。 (「Photoshop でのカラー管理の設定」を参照してください。)
マット
元の画像の透明ピクセルの塗りつぶしの色を指定します。マット見本をクリックし、カラー ピッカーで色を選択します。 [マット] メニューからオプションを選択します。元の画像内の完全に透明なピクセルは選択した色で塗りつぶされ、元の画像内の部分的に透明なピクセルは選択した色とブレンドされます。