JPG などのグラフィック形式を Web 上で完璧に使用する方法

JPEG

JEPG は、Joint Photographic Experts Group によって 1992 年に作成され、作成者の名前にちなんで命名されました。 JPEG は非可逆ラスター画像形式です。つまり、JPEG を圧縮して保存するたびに、一部の情報

が不可逆的に失われます。

JPEG は、色より明るさに敏感であるという人間の目の認識の欠陥を利用しており、人間が取得するのが苦手な情報を破棄する圧縮アルゴリズムを使用しているため、「非可逆形式」となります。圧縮率の設定により、最終的に保存されるファイルのサイズと品質が決まります。

JPEGの用途

JPEGは明るさと色の圧縮に適しているため、写真やその他のリアルな画像や陰影のある画像(絵画や3Dレンダリングなど)に適しています。そのため、長年にわたって写真を保存するための最も人気のある形式でした。同じ理由で、JPEG はロゴ、幾何学的図形、スクリーンショットなどのベクター画像には適していません。

写真や、絵画などの複雑な画像や陰影のある画像は、JPEG を使用する良い例です。

JPEG を圧縮します

非可逆形式である JPEG ファイルの圧縮率は、最終的な画質に反比例します。 Photoshop などのツールで JPEG を保存すると、0 から 100 までの品質設定が表示されます。 Photoshop はいくつかの画質を設定します ファン :

低い -10%

— —

— —

は非常に高い -80%

100% (61KB)、非常に高い 80% (29 KB)。

高い 60% (16 KB)、中 80% (7 KB)。

低い 100% (6 KB)、最小 0% (3 KB)。

適切な画質と小さいファイル サイズを兼ね備えているため、Web ページでは 50% から 60% の品質の JPEG を使用することをお勧めします。メタデータを削除すると、JPEG ファイルのサイズも小さくなります。

Photoshopでは、「書き出し」で「メタデータ：なし」または「Web用に保存（レガシー）」を選択することで圧縮できます。画像の全体または一部をぼかすと、ファイル サイズも小さくなります。

JPEG は非可逆形式であるため、同じファイルを 100% の品質で保存しても、同じ画像に圧縮アルゴリズムが何度も適用されるため、何度も保存すると画質が低下することに注意してください。ただし、この変更はファイル サイズの変更に反映されない場合があります。

PNG

Portable Network Graphics も、1995 年から存在するラスター イメージ形式です。 JPEG とはロスレス形式であるという点で異なり、現在ウェブ上で最も一般的なロスレス

形式です。これは、その圧縮アルゴリズムにより、ファイルを保存して圧縮するときに情報が失われることはないことを意味します。

PNG には次のような優れた機能がたくさんあります:

透明度チャンネル - 各ピクセルが異なる透明度を持つことができることを意味します。
8 ビット ファイルはパレットベースのカラー モデル (インデックス カラーとも呼ばれます) を使用できます。 - これは、色数を減らすとファイルを小さくできることを意味します;
PNG 圧縮は GIF より 25% 効率的です
2D インターレース - 画像は読み込まれるにつれて徐々に表示されますが、表示されません画像が完全にロードされた場合にのみ起動します。このオプションを使用するとファイル サイズが増加するため、注意して使用する必要があります。

PNGの用途

PNGは、線画、ロゴ、アイコン、色の少ない画像に最適です。複雑な色の写真や画像は、PNG 形式を使用して巨大なファイルを生成します。 PNG のもう 1 つの利点は、透明な背景をサポートしていることです。この場合、

が複雑な画像であっても、JPEG では画像の透明度を実現できないため、PNG を使用する必要があります。

PNGは線画やロゴ、アイコンなどによく使えます。

PNG を圧縮

PNG の圧縮アルゴリズムは可逆であるため、外部ツールを使用して選択的に色を減らし、画像サイズを縮小できます。

ほとんどの PNG 使用シナリオ (線画、グラフィック、アイコン) では、256 色で十分です。したがって、パレット内の色数を減らすことで、ファイル サイズをさらに小さくすることができます。

GIF

Graphics Interchange Format もビットマップ形式であり、この記事で説明されている他の形式よりも早く登場しました。 1989 年に Steve Wilhite によって作成され、PNG が作成されるまでは最も人気のある

8 ビット画像形式でした。 GIF は PNG と似た特性を持っていますが、いくつかの欠点があります。

• 256 色のみをサポートします。

• 画像は段階的に表示されますが、PNG と比べて滑らかではありません。パフォーマンス

• バイナリ透明度 - ピクセルは 100% 透明か 100% 表示のみ可能

• 曖昧な発音

SVG

話しているラスター形式は異なります名前が示すように、これはベクトル形式です。これは、ピクセルに基づいてデータを保存するのではなく、記録された座標の形式でグラフィック情報を保存することを意味します。 SVG は、HTML に似た XML ベースのセマンティック タグ構造を使用します。 DOM 構造のため、SVG 要素を ID で取得して操作できます。これにより、要素の変更やアニメーション化、JavaScript や CSS

を使用したレスポンシブ グラフィックの作成など、多くの可能性が開かれます。

他のベクター形式と同様に、SVG 画像は細部を失うことなく任意のサイズに拡大できます。

SVGの用途

SVGは、線画、ロゴ、アイコン、イラスト、データの視覚化で広く使用されています。ただし、写実的な画像や細部が多く含まれる複雑な画像には適していません。場合によっては、SVG と PNG の両方が同じ目的をうまく果たすことができます。線画の場合、通常、SVG の方がファイル サイズが小さくなります。ただし、これは避けられないわけではありません。ベクター画像に含まれるアンカー ポイントの数によっては、PNG よりも大きなファイルが生成される場合もあります。 SVG が本当に優れているのは、データの視覚化です。ベクター アニメーションは JavaScript を使用して操作および作成できるため、D3 のようなライブラリは無限の可能性を提供します

SVG を圧縮する

ほとんどの場合、SVGz (GZipped SVG) などのツールは、Web で使用される SVG ファイルを圧縮するために使用されます。ウェブページは不要です。圧縮を実現するためにサーバー上で Gzip を有効にすることはできます (有効にする必要があります)。ただし、効果はほとんどありません。より良いアプローチは、SVG ベクター グラフィックスから不要なアンカー、要素、属性を削除してファイル サイズを減らすことです。アンカー ポイントはベクター画像を描画するため、削除したアンカー ポイントがベクター

の最終形状に影響を与えないように注意する必要があります。 Adobe Illustrator を使用して SVG を編集する場合は、[ファイル] > [名前を付けて保存...] ではなく、[エクスポート] > [名前を付けてエクスポート...] を使用して保存してください。これには、もちろん他の利点もあります。 。 Sketch では、不要なフォルダーも SVG に追加のタグとして保存されるため、使用しないように注意してください。

不要なノードをクリーンアップすることは、SVG のサイズを削減する 1 つの方法です。

要素タグは、開始タグと終了タグを含む、SVG ファイル内に含まれるすべてのものです。 Adobe Illustrator や Sketch などのベクター編集ソフトウェアでは、SVG に不要な要素や属性が散在する場合があります。 SVG コンプレッサーを使用すると、この冗長な情報を削除できます。

以上がJPG などのグラフィック形式を Web 上で完璧に使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。