JPG、GIF、PNG、および SVG 形式を使用する場合

グラフィックフォーマットが大きな違いを生む

サザンティ・ボン/ゲッティイメージズ

Web 上の画像タイプの一般的な例には、GIF、JPG、および PNG があります。 SVG ファイル。これらのさまざまな形式は、Web デザイナーに Web サイトの視覚的な魅力を最適化するためのさまざまなオプションを提供します。

GIF画像

色数が固定されている少数の画像には、GIF ファイルを使用します。 GIF ファイルは常に 256 色以下に縮小されます。 GIF ファイルの圧縮アルゴリズムは JPG ファイルほど複雑ではありませんが、単色の画像やテキストに使用すると、ファイル サイズが非常に小さくなります。

GIF 形式は、写真画像やグラデーション カラーの画像には適していません。 GIF 形式は色の数が限られているため、グラデーションや写真を GIF ファイルとして保存すると、バンディングやピクセル化が発生します。

JPG画像

何百万色もの写真やその他の画像には JPG 画像を使用します。複雑な圧縮アルゴリズムを使用して、画像の品質の一部を失うことで、より小さなグラフィックを作成できます。これは、画像を圧縮すると画像情報の一部が失われるため、「非可逆」圧縮と呼ばれます。

JPG 形式は、テキスト、単色の大きなブロック、鮮明なエッジを持つ単純な形状を含む画像には適していません。これは、画像を圧縮すると、テキスト、色、または線がぼやけて、別の形式で保存した場合よりも鮮明でない画像になるためです。

PNG画像

PNG 形式は、GIF 画像が使用料の対象になることが明らかになったときに、GIF 形式の代替として開発されました。 PNG グラフィックは GIF 画像よりも圧縮率が高いため、GIF として保存された同じファイルよりも画像が小さくなります。 PNG ファイルはアルファ透明度を提供します。つまり、画像の領域を完全に透明にすることも、アルファ透明度の範囲を使用することもできます。たとえば、ドロップ シャドウは一連の透明効果を使用し、PNG に適しています (または、代わりに CSS シャドウを使用して終了することもできます)。

GIF のような PNG 画像は、写真にはあまり適していません。 True Color を使用して GIF ファイルとして保存された写真に影響を与えるバンディングの問題を回避することは可能ですが、非常に大きな画像になる可能性があります。 PNG 画像も、古い携帯電話やフィーチャー フォンでは十分にサポートされていません。

SVG 画像

SVG はスケーラブル ベクター グラフィックの略です。 JPG、GIF、および PNG に見られるラスターベースの形式とは異なり、これらのファイルはベクターを使用して非常に小さなファイルを作成し、ファイル サイズが大きくなっても品質を損なうことなく、任意のサイズでレンダリングできます。アイコンやロゴなどのイラスト用に作成されています。

Web 配信用の画像を準備する

使用する画像形式に関係なく、そのサイトのすべての画像が WEB配信準備中 .画像が大きすぎると、サイトの実行が遅くなり、全体的なパフォーマンスに影響を与える可能性があります。これに対抗するには、これらの画像を最適化して、高品質とその品質レベルで可能な最小のファイル サイズとのバランスを見つける必要があります。

適切な画像形式を選択することは戦いの一部ですが、これらのファイルを確実に準備することも、この重要な Web 配信プロセスの次のステップです。