Webページで使用できる画像形式はいくつかあります。 一般的な例としては、 GIF 、 JPG 、 PNGなどがあります。 SVGファイルは、今日のウェブサイトでも一般的に使用されており、Webデザイナーにはオンライン画像のための別のオプションが与えられています。
GIF画像
小さな、一定の色数の画像にはGIFファイルを使用します。 GIFファイルは常に256色以下の色に縮小されます。 GIFファイルの圧縮アルゴリズムは、JPGファイルよりも複雑ではありませんが、フラットカラーの画像やテキストで使用する場合、 ファイルサイズは非常に小さくなります 。
GIF形式は、写真画像やグラデーションカラーの画像には適していません。 GIF形式には色数が限られているため、GIFファイルとして保存すると、グラデーションや写真のバンディングやピクセル化が発生します。
一言で言えば、GIFは色が少数の単純な画像にのみ使用しますが、PNGも同様に使用できます（詳細は後で詳しく説明します）。
JPGイメージ
数百万色の写真やその他の画像には、JPG画像を使用します。 複雑な圧縮アルゴリズムを使用して、イメージの品質の一部を失うことで小さなグラフィックスを作成することができます。 これは、画像が圧縮されたときに画像情報の一部が失われるため、「損失の多い」圧縮と呼ばれます。
JPG形式は、テキストを含む画像、単色の大きなブロック、エッジが鮮明なシンプルな形状には適していません。 これは、画像が圧縮されると、テキスト、色、または線がぼやけて、別の形式で保存されるほどシャープではない画像になるためです。
JPG画像は自然な色がたくさんある写真や画像に最適です。
PNG画像
PNGフォーマットは、GIF画像がロイヤルティフィーの対象となると思われるときに、GIFフォーマットの代わりに開発されました。 PNGグラフィックスはGIFイメージよりも優れた圧縮率を持っているため、GIFとして保存された同じファイルよりも小さいイメージになります。 PNGファイルはアルファ透明度を提供します。つまり、画像の領域を完全に透明にしたり、アルファ透明度の範囲で使用することができます。 たとえば、ドロップシャドウは透明効果の範囲を使用し、PNGに適しています（または、代わりにCSSシャドウを使用して終了できます）。
GIFのようなPNG画像は、写真にはあまり適していません。 真の色を使用してGIFファイルとして保存された写真に影響するバンディングの問題を回避することは可能ですが、これは非常に大きな画像をもたらす可能性があります。 PNG画像も古い携帯電話やフィーチャーフォンではうまくサポートされていません。
透明性を必要とするファイルにはPNGを使用します。 このPNG形式を代わりに使用して、GIFとして適しているファイルにはPNG-8も使用します。
SVGイメージ
SVGはScalable Vector Graphicの略です。 JPG、GIF、PNGにあるラスターベースのフォーマットとは異なり、これらのファイルはベクトルを使用して非常に小さなファイルを作成し、ファイルサイズの増加の品質を損なうことなく任意のサイズでレンダリングできます。 アイコンやロゴなどのイラスト用に作成されています。
Web配信のためのイメージの準備
どのイメージフォーマットを使用しても、あなたのウェブサイトはすべてのページにわたってさまざまなフォーマットを使用していますが、そのサイトのすべてのイメージがWeb配信用に準備されていることを確認する必要があります。 イメージが大きすぎると、サイトがゆっくりと実行され、全体のパフォーマンスが低下する可能性があります。 これに対抗するには、高画質と低画質のバランスをその画質レベルで実現できるように、 これらの画像を最適化する必要があります。
正しい画像形式を選択することは戦いの一部ですが、この重要なウェブ配信プロセスの次の段階であることを確認してください。
Jennifer Kryninのオリジナル記事。 ジェレミージラール編集。