京東背景画像の最適化 skill_html/css_WEB-ITnose-htmlチュートリアル-php.cn

このドキュメントには主に次の側面が含まれています:

基本概念

ビットマップ

実際の応用

PNG を使用する必要がある場合
JPG を使用する必要がある場合
概要

Photoshop スキルのさまざまなパラメータの意味と設定

1. 基本概念

ビットマップ

ビットマップは、ピクセルマップまたはラスターマップとも呼ばれます。画像内の各点の色、深度、透明度などの情報を記録して画像を表示します。ビットマップは大きなパズルに似ていますが、各ピースが単色のピクセルである点が異なります。これらのピクセルを特定のルールに従って配置すると、目に見えるものが形成されます。したがって、ピクセルイメージを拡大すると、これらのパッチワークピクセルが表示されます (下図を参照)。 Web ページで使用される JPG、PNG、GIF 形式の画像はすべてビットマップです。

利点: 豊富な色レベルでリアルな画像を表示するのに役立ちます。

欠点: ファイルサイズが大きく、ズームインおよびズームアウトすると画像が歪みます。

JPG と PNG

JPG と PNG のいくつかの機能の比較:

格式	压缩模式	交错支持	透明支持	动画支持
JPG	有损压缩	支持	不支持	不支持
PNG	无损压缩	支持	支持	不支持

フォーマット

圧縮モード

インターレースサポート

透明なサポート

アニメーションのサポート

JPG

非可逆圧縮

サポートされています

サポートされていません

PNG

可逆圧縮

格式	最高支持色彩通道	索引色编辑支持	透明支持
PNG8	256色	支持	支持布尔透明
PNG24	约1600万色	不支持	支持8位（256阶）alpha透明

サポートされていますサポートされていますサポートされていません JPG 機能 1. 写真画像またはリアルな画像の高度な圧縮をサポートし、圧縮率を使用して画像ファイルのサイズを制御できます。 2. 非可逆圧縮により画像データの品質が低下し、画像を JPG 形式で編集および再保存すると、この劣化が蓄積されます。 3. JPG は、色が少ない、類似した色の領域が大きい、または明るさの明らかな違いがある単純な画像には適していません。 PNG の特徴 1. 歪みなく画像ファイルのサイズを可能な限り圧縮できます。 2. PNG を使用してグレースケール画像を保存する場合、グレースケール画像の深度は最大 16 ビットにすることができます。カラー画像を保存する場合、カラー画像の深度は最大 48 ビットにすることができます。最大 16 ビットのアルファチャネルデータを保存します。 3. 高い忠実度を必要とするより複雑な画像の場合、PNG は可逆圧縮できますが、画像ファイルが大きいため、Web ページでのアプリケーションには適していません。 PNG8 と PNG24 PNG 形式は PNG8 と PNG24 に分割できると述べられていますが、2 つの後の数字は、この PNG 形式がインデックス付けして保存できる最大カラー値を表しています。。「8」は 2 の 8 乗で 256 色、24 は 2 の 24 乗で約 1,600 万色を表します。 PNG8 は、1 ビットのブール透明度チャネルもサポートします。いわゆるブール透明度は、完全に透明または完全に不透明のいずれかを指します。 PNG24 は 8 ビット (256 レベル) のアルファチャネル透明度をサポートしています。つまり、完全な透明から完全な不透明 (いわゆる半透明) まで、合計 256 レベルの透明度を保存できます。

形式	サポートされている最高のカラーチャネル	インデックス付きカラー編集のサポート	透明度のサポート
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 表示をサポートしていません。代わりに、画像が完全に読み込まれた後に一度だけイメージングを実行します。そのため、ユーザーエクスペリエンスは、連続的なステップバイステップイメージングを使用しない場合と比べて劣る可能性があります。このオプションは慎重に選択することをお勧めします。