使用するWebグラフィックス形式は何ですか？

Webサイトには、JPEG、GIF、PNG、SVG形式のグラフィックを含めることができます。どれをいつ使用する必要がありますか？

JPGを使用する場合

• 写真画像
• 圧縮が重要でない場合

PNGを使用する場合

• 透明性が必要なとき
• パターン（背景）がある場合

GIFを使用する場合

• 後方互換性のあるアニメーションが必要な場合*
• 画像が主にほんの少数の色で構成されている場合（2-16）**
• 透明性を必要とせず、パターニングが必要な場合（ただし、pngが推奨されます）

_{* ほとんどすべてのブラウザで実行可能なオプションとしてのCSSアニメーションの登場により、.GIF形式の使用はWebアニメーションの人気フォーマットになりつつあります。.jpg、.png、および.gifすべてのCSSを使用した「アニメーション」機能を持つように設定することができます。アニメーションgif は特定のケースシナリオのWebデザインで魅力的に使用される場合がありますが、例外はまれであるため、それらを回避することが最善である傾向があります。}

_{**（.gifパレット内の画像は256色に制限されています。）}

（重複した質問から移行）

これは、保存する画像の種類に完全に依存します。

• PNGは、「ベクターのような」ビットマップグラフィックスに最適な可逆圧縮形式です（つまり、同じ色で明確に定義された大きな規則的な領域を持つグラフィックス、クリアテキストを含むグラフィックス）。

• SVGはベクター形式であり、ベクターグラフィックス（要するに、ピクセルのコレクションではなく幾何学的要素のコレクション）を含めるのに最適です。SVGは無限にスケーラブルですが、ビットマップグラフィックは拡大すると品質が低下します。

• JPGは非可逆圧縮形式です（特に、人間の目に見えない画像のニュアンスを除去して、ストレージスペースを節約します）。写真に最適です。圧縮方式のため、ベクターイラストやテキストにはあまり適していません。

ブラウザーの互換性：

• PNGグラフィックは、ブラウザ全体でサポートされます。ただし、PNGにアルファ透明度が含まれている場合はIE 6（透明部分は灰色で表示されます）、PNGが不透明度が100未満のHTML要素内にある場合はIEのすべてのバージョンを除きます％（ただし、これはエッジケースです）。

• 現時点では、ブラウザのサポートが100％ではないため、SVGは必ずしもオプションではありません。通常の<img>タグとは他の動作の違いもあります。これは、自分が何をしているかを知っている場合にのみ使用してください。

• 標準のJPGは、CMYKではなくRGBモードで保存されている限り、すべてのブラウザーでサポートされます（プログラムが区別しない場合は、おそらくデフォルトです）。

いくつかの重要な要素に注意する必要があります...

最初に、LosslessとLossyの 2種類の圧縮があります。

• ロスレスとは、画像を小さくすることを意味しますが、品質を損なうことはありません。
• ロッシーとは、画像が（均一に）小さくなりますが、品質が低下することを意味します。画像をLossy形式で何度も保存すると、画質は次第に悪化します。

異なる色深度（パレット）もあります：インデックスカラーとダイレクトカラー。

• インデックス付きとは、作成者が制御する限られた数の色（通常256色）のみをイメージがカラーマップと呼ばれるものに保存できることを意味します。
• 直接は、著者が直接選択していない何千もの色を保存できることを意味します

BMP-ロスレス/インデックス付きおよびダイレクト

これは古い形式です。ロスレスです（保存時に画像データは失われません）が、圧縮はほとんどまたはまったくありません。つまり、BMPは非常に大きなファイルサイズになるため、保存を意味します。IndexedとDirectの両方のパレットを持つことができますが、それは小さな慰めです。ファイルサイズが不必要に大きいため、この形式を実際に使用する人はいません。

用途：本当にありません。BMPが優れているものはありません。また、他の形式では改善されていません。

GIF-ロスレス/インデックスのみ

GIFはロスレス圧縮を使用します。つまり、画像を何度も保存でき、データを失うことはありません。適切な圧縮が実際に使用されるため、ファイルサイズはBMPよりもはるかに小さくなりますが、インデックス付きパレットのみを保存できます。これは、ほとんどのユースケースで、ファイルには最大256の異なる色しか存在できないことを意味します。それはかなり少量のように聞こえますが、そうです。

GIF画像もアニメーション化でき、透明度があります。

用途：ロゴ、線画、および小さくする必要があるその他のシンプルな画像。Webサイトにのみ実際に使用されます。

JPEG -非可逆/ダイレクト

JPEG画像は、人間の目が気付かない情報を削除することで、詳細な写真画像をできるだけ小さくするように設計されました。結果として、それは損失の多い形式であり、同じファイルを何度も保存すると、より多くのデータが時間の経過とともに失われます。何千もの色のパレットがあり、写真には最適ですが、非可逆圧縮は、ロゴや線画に悪影響を及ぼすことを意味します。

用途：写真。また、グラデーション。

PNG-8-ロスレス/インデックス付き

PNGは新しい形式であり、PNG-8（PNGのインデックス付きバージョン）は実際にはGIFの優れた代替品です。ただし、残念ながら、いくつかの欠点があります。まず、GIFのようなアニメーションをサポートできません（できますが、すべてのブラウザーでサポートされているGIFアニメーションとは異なり、Firefoxのみがサポートしているようです）。第二に、IE6のような古いブラウザーでいくつかのサポートの問題があります。第三に、Photoshopのような重要なソフトウェアのフォーマットの実装は非常に貧弱です。（Adobeを失礼します！）PNG-8は、GIFなど256色しか保存できません。

目的：PNG-8がGIFよりも優れている主なことは、アルファ透明度をサポートしていることです。

重要な注意： Photoshopでは、最新バージョンにアルファ透明度のサポートがついに追加されました。古いファイルをお持ちの場合は、透明度を維持したままPhotoshop PNG-24ファイルをPNG-8ファイルに変換する方法があります。1つの方法はPNGQuantで、もう1つはFireworksでファイルを保存する方法です。

PNG-24-ロスレス/ダイレクト

PNG-24は、ロスレスエンコーディングとダイレクトカラー（JPEGのような何千もの色）を組み合わせた素晴らしいフォーマットです。その点では、BMPに非常によく似ていますが、PNGは実際に画像を圧縮するため、ファイルが非常に小さくなります。残念ながら、PNG-24ファイルはJPEG、GIF、PNG-8よりもはるかに大きいため、実際に使用するかどうかを検討する必要があります。

PNG-24は圧縮時に数千色を許可しますが、JPEG画像を置き換えることを意図したものではありません。PNG-24として保存された写真は、おそらく同等のJPEG画像よりも少なくとも5倍大きくなり、目に見える品質はほとんど向上しません。（もちろん、ファイルサイズを気にせず、できる限り最高の品質の画像を取得したい場合、これは望ましい結果になるかもしれません。）

PNG-8と同様に、PNG-24もアルファ透明度をサポートしています。

SVG-ロスレス/ベクトル

現在人気が高まっているファイルタイプはSVGです。これはベクターファイル形式であるという点で上記とは異なります（上記はすべてラスタです）。つまり、実際にはピクセルではなく線と曲線で構成されています。ベクトル画像を拡大しても、曲線または線が表示されます。ラスターイメージを拡大すると、ピクセルが表示されます。

例えば：

これは、SVGがRetinaスクリーン上または異なるサイズでシャープネスを保持したいロゴとアイコンに最適であることを意味します。

さらに、SVGファイルはXMLを使用して記述されているため、テキストエディターで開いて編集できるため、必要に応じてその場で操作できます。たとえば、JavaScriptを使用して、Webサイト上のSVGアイコンの色を、テキストと同じように変更できます（2つ目の画像は不要です）。

それがお役に立てば幸いです！

JPG：

利点：

• さまざまな圧縮レベルが利用可能
• すべての画像エディターで操作が簡単

不便：

• 圧縮アーチファクト

用途：

• たくさんの色の大きな写真または画像
• 高圧縮が必要な場合

PNG：

利点：

• アルファ付きの透明性！
• たくさんの色
• jpgを置き換えることができます

不便：

• JPGよりも圧縮率が低い（ただし、それほどではない）
• IE6（および私が信じる7）と互換性がありません-これにはパッチまたはハックを使用する必要があります。しかし、誰が気にしますか？使用する必要があります;）

用途：

• たくさんの色の小さなまたは中程度の写真/画像
• グラデーションの透明度が必要な場合に使用する必要があります
• アイコン
• ロゴス

GIF：

利点：

• アニメーション化できます
• 一部の色（8〜16または32色）を使用すると非常に明るい
• 透明性

不便：

• 255色を超えることはできません。
• アニメーションgifは人々を逃がすことができる
• 透明度のアルファなし（透明かどうか！）

用途：

• アニメーションGIF（主にニュースレターで使用しています）
• アイコン
• アニメーション化されたファビコン\ o /
• ロゴス

Webサイトには、JPEG、GIF、PNG、SVG形式のグラフィックを含めることができます。どれをいつ使用する必要がありますか？

写真の場合：

透明性が必要ない場合はJPEG。透明性が必要な写真グラフィックのPNG。

100％真実ではありませんが、大まかな目安です。他の形式の詳細については、この質問に対する他の回答をご覧ください。また、透明度がない場合に画像をデジタル表示するのに適したラスター画像形式を確認してください。JPEGまたはPNG？そして、私たちの選択ファイル形式のようなタグは、JPEG、PNG、GIF＆SVGもっと知るために。

グラフィックスの場合：

PNG / JPEGフォールバックを使用したSVG。

この時代にSVGを提供しない理由はまったくありません。これらは、通常の画像とほぼ同じ方法で実装され、より汎用性があります。

そのため、現代のWebサイトデザイナーのワークフローは完全には変更されておらず、更新されています。あなたはまだグラフィック用にPNGとJPEGを準備して提供していますが、それらはSVGが機能しないときのフォールバックにすぎません。

SVGとは何ですか？

SVGはを表しScalable Vector Graphicます。技術的になりすぎることなく、SVGと他のピクセルベースのフォーマットの違いは、グラフィックの構成のデータが数学的計算として保存されることです。ブラウザがSVGを開くと、SVGをレンダリングするための計算を行う必要があります。古いブラウザーには、これらの計算を行う機能やSVGを処理する機能がありません。さらに、古いコンピューターは、10年前に使用できたとしても、SVGの重いWebページのレンダリングに苦労したかもしれません（できませんでした）。SVGのデータは16進形式（16進数）で保存されるため、ピクセルデータのバイナリストレージと比較して非常に小さなファイルサイズに最適化できます。

フォールバックテクニックを実現する方法の詳細については、次のリソースをご覧ください。

1. Retina WebでのSVGの使用をマスターし、PNGスクリプトでフォールバックする

2. 透過的なデータURIを使用したパフォーマンスと進歩的な開発のためのSVGワークフローの再検討

3. CSSのトリック-SVGフォールバック

最初のリンクからコピーされた次のJavaScriptスニペットは、すべてではないにしてもほとんどのブラウザーでSVGサポートを検出し、PNGフォールバックを提供するためにファイル名を変更するために必要なものです。

function supportsSVG() {
    return !! document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;  
}
if (!supportsSVG()) {
    var imgs = document.getElementsByTagName('img');
    var dotSVG = /.*\.svg$/;
    for (var i = 0; i != imgs.length; ++i) {
        if(imgs[i].src.match(dotSVG)) {
            imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
        }
    }
}

<DA01>

SVGを使用する場合

• 通常、可能な限り最小のファイルサイズと解像度に依存しないため、任意のデバイスピクセル比を処理できます（たとえば、網膜スクリーン）
• アートがベクターファイル形式（特にアイコン）に適している場合
• 最新のブラウザーのみをターゲットにするだけの贅沢がある場合（一部のブラウザーではSVGサポートが比較的新しい）

アイコンフォントを使用する場合

• 豊富なアイコンセットが必要な場合
• SVGのように、ベクターファイル形式の利点が必要な場合
• 最新のブラウザのみをターゲットにするだけの贅沢がある場合（一部のブラウザではWebフォントのサポートは比較的新しい）

</DA01>

なぜSVGが最良の選択肢なのですか？

• 一つのファイル（奉仕する必要はありませんから任意のサイズに美しくスケール@2x.jpg網膜画面用またはグラフィックを伸ばします）

• 非常に多くの場合、JPEGおよびPNGよりも小さいファイルサイズ

• ロゴの品質を犠牲にする必要はほとんどありません

• レスポンシブデザインをさまざまな方法で簡単にします

ノート

• インラインSVGのサポートはあまり一般的ではないため、安全のため、現時点では画像タグを介してファイルにリンクすることをお勧めします。（グラフィックを他の場所、つまりナビゲーションアイコンで再利用する場合は、ブラウザがそれをキャッシュして他のページの読み込み時間を節約するために、外部にリンクする必要があります。）

• IEはSVGZ、SVGグラフィックスに使用可能な圧縮形式であるをサポートしていません。ブラウザーおよび最近の以前のバージョン間で最大限の互換性を得るにはSVG 1.0、この時点で使用するのが最善です。

• 他の画像形式とほぼ同じ方法でSVGを使用してスプライトシートを作成できますが、実際のピクセル値を使用して各画像のxおよびy座標を定義する代わりに、パーセントベースの値を使用します。

  パーセンテージ値が十分に正確でない場合はどうですか？

  幅と高さの両方を100で除算し、整数、または最大で小数点以下1桁の数字を達成できるように、スプライトシートを構築する必要があります。例として、10px x 10pxスプライトシートに7 x アイコンを一緒に配置する場合は、キャンバスを作成しないでください70px x 10px。

  どうして？100を7で割ると、が得られます14.285714285714285714285714285714。これは、丸められたパーセンテージとして、間違いなくどこかで不完全な数学を引き起こすでしょう。

  代わりに、80px x 10pxキャンバスを作成し、空の12.5％を心配しないでください。アイコンは正確に12.5％刻みになります。これは言うまでもなく、作業がはるかに簡単です。

多くの色の写真や画像には.jpegを使用する必要があります。.gifファイルタイプは、アニメーション画像や透明度が必要な場合に便利ですが、使用が減っています。最も一般的な形式は.pngです。これは、アルファ透明度と.gifファイルタイプよりも広い範囲の色を提供することもできます。より詳細な概要については、Jonathan Snookの記事「Which Image Format Is Best」をご覧ください。

写真にはJPEGを使用し、他のすべてにはPNGを使用すると便利です。

もちろん、アルファ透明度を必要とせず、256色未満のグラフィックスを使用している場合、GIFは帯域幅をいくらか節約するかもしれませんが、確実に消え去ります。

JEPGにはない圧縮アーティファクトがないため、ほとんどすべてにPNGを使用し、最近ではほぼ互換性があります（私は、 HomesteadのSiteBuilderソフトウェアのデスクトップバージョンですが、それはそれについてです）。

達成したい圧縮/品質のレベルで画像をベースで選択する必要があります。

Webは情報のダウンロード速度にすべて関係し、画像のサイズは小さいほど、ページの読み込み速度に優れています。

JPG：何百万色もの画像（写真）

PNGおよびGIF：透明度とわずかな色の場合。64/128の異なる色でのみ使用しますが、通常は256未満です（アイコン、ラスターである必要があるベクター画像、高コントラストの色、わずかな色のグラデーション）

PNGとGIFの選択方法は？

まず、圧縮/品質の最適化を確認し、より少ない重量でより良い結果が得られる人を選択します。私は今でも広くGIFを使用していますが、同じ種類の画像にはPNGよりも優れている場合があります。ある形式を別の形式と区別せずに、最適化に適した形式をチェックするだけです。

• GIFを選択：256色以下のアニメーション画像用
• アニメーションが必要ない場合は、PNGを選択できます。適切なPNGを選択：8ビットと24ビットの2種類があります。8ビットは、品質/圧縮のためにアニメーションのないGIFのより良いバージョンである傾向があります（しかし、私がいつも言っていなかったように、Web用に保存するときにそれをチェックしてください）。24bitには圧縮がありませんので（特別なグラフィック効果にはほとんど使用しません）、色の透明度を使用するためのアルファ値があります（ページに特別なフィルターまたは.htc動作を適用しない場合、古いIEブラウザはこれをサポートしていません）。

さまざまな記事から、Webデザイナーの 90％が、PNGはロスレス形式のみであると考えています。多くの専門家は、PNG-8の存在についても知りません。

ただし、PNG-32の代わりに、PNG-8がWebに使用すべきものであることは明らかです。許容できる品質で2x-5xの小さいファイルサイズを提供するためです。

画像に適した圧縮を決定するのが難しい場合があります。たとえば、写真ではないが、多くの色とグラデーションがある場合。このツールを使用すると、両方の非可逆形式を視覚的に比較し、最適なバリアントを選択できます。

以下は、損失のあるPNG形式とJPEG形式を比較するための便利なツールです。PNGとJPEG

主なWebグラフィック形式はGIF、JPG、およびPNGです。違いを把握し、各画像に最適な形式を選択することが重要です。これにより、画像が見た目がよく、できるだけコンパクトになり、サイトの訪問者の画面にすばやく表示されます。

GIF-グラフィック情報形式

GIFグラフィックス形式は、チャート、グラフ、またはグラフィックスとして設定されたテキストなど、数色のみの画像に最適です。使用する色が少ないほど、GIFファイルの効率が上がります。GIFファイル...

•最大256色を含めることができます。

•透明度と呼ばれる機能をサポートします。この機能では、256色のうち1色が透明に設定されます。これにより、ファイルの背景が見えなくなり、Webページの背景が透けて見えるため、グラフィックがボックスの中にあるように見えなくなります。

•アニメーション化できます。単一のファイル内には、多くの画像フレームと、各フレームを表示する時間を示すインデックスが保存されます。アニメーションGIFは標準の画像ファイルとして扱われるため、標準のタグで読み込まれます。

•ロスレスです。つまり、圧縮プロセスによって画質が低下することはありません。

•読み込み中に、低品質から高品質にフェードインするようにインターレースすることができます。これにより、訪問者が待っている間に見るべきものが得られます。

•写真には適していません-品質が低下し、ファイルがコンパクトになりません。写真にはJPGグラフィック形式を使用します。

JPG-共同写真専門家グループ

JPGグラフィックス形式は、写真やスキャンしたアートワークなど、多くの色を含む画像に最適です。JPGファイル...

•最大1600万色を含めることができます。

•可変圧縮をサポートします。個々の画像に多かれ少なかれ圧縮を適用できます。適用する圧縮が多いほど、品質が低下します。このグラフィック形式ではファイルサイズを非常に小さくすることができますが、多くの場合、ファイルサイズと画質の間で妥協する必要があります。新しいグラフィックソフトウェアでは、保存する前にプレビューが表示されます。これにより、さまざまなレベルの圧縮を試して、品質とファイルサイズの最適な妥協点を選択できます。

•ベースラインまたは標準、ベースライン最適化または標準最適化、およびプログレッシブの3つのタイプがあります。ベースラインは、Internet Explorerバージョン1などのように、私たちが最近古代と考えるブラウザー向けに設計されました。最適化されたベースラインは、標準ベースラインよりも多くの圧縮を提供し、今日のほとんどすべてのブラウザーはそのような画像を読み取ることができます。インターレースGIFファイルのようなプログレッシブJPGは、画像の粗い表現から完成した外観まで、ダウンロードしながら構築されます。これは素晴らしいWebグラフィックス形式ですが、古いブラウザはすべてこの形式をサポートしていません。

•グラフィックとして設定されたテキストや、単色の領域を含む画像など、わずかな色の画像には適していません。これらのグラフィックにJPGを使用すると、必要以上に大きくなり、「まだら」に見えます。

PNG-プログレッシブネットワークグラフィックス

PNGは最新のWebグラフィックス形式です。PNGファイル...

•最新のすべてのブラウザーでサポートされています。これらのファイルは古いブラウザでは表示されない場合があるため、このグラフィック形式を使用すると、一部のWebサイト訪問者が画像を表示できなくなる場合があります。

•コンパクトで汎用性があり、背景を透明にする機能や数百万色の画像を含める機能など、GIFとJPGの最高の機能を組み合わせることができます。

•主に古いブラウザでサポートされていないため、まだ広く使用されていません。

どちらを使用するか？

適切なWebグラフィックス形式を選択することにより、訪問者のコンピューター上で画像がきれいに表示され、すばやく表示されます。間違った形式を選択すると、画像の外観が悪くなり、ダウンロードに時間がかかります。

Web上で人々が犯す最も一般的なグラフィックの間違いは、画像に間違ったグラフィック形式を使用することです。しかし、選択は本当に簡単です...

•グラフィックに多くの色（写真など）がある場合は、JPGを選択します。

•グラフィックの色が少ない場合は、GIFを選択します。GIFを使用する場合は、使用する色のみを含む最適化されたパレットを試してください-ファイルサイズを半分にカットできます。

理想的な世界では、これは次のようになります。

JPEG-ラスター画像および写真用

PNG-ベクターグラフィックス（ロゴなど）

残念ながら、Internet Explorer 6（依然として、残念ながら多数のユーザー）はPNG画像の透明度をサポートしていません。したがって、PNGに透明度が含まれている場合、問題が発生する可能性があります。幸いなことに、この問題を回避するために使用できるハックがありますが、エレガントな方法ではありません。

http://24ways.org/2007/supersleight-transparent-png-in-ie6 http://www.alistapart.com/articles/pngopacity/

（編集：また、IE 7でもPNGのいくつかの機能に問題があると思います。）

GIFにはPNGに比べて2つの利点しかありません。

1. （ほぼ）完璧なブラウザサポート（透明性はありませんが、これはあまりボーナスではありません）
2. それらはアニメーション化される場合がありますが、Webデザインではアニメーション化されたグラフィックスを控えめに使用する必要があります。

編集：PNGはオープン形式であるため、サポートされ使用可能なGIFよりも常にPNGの方が適しています。

最も指摘したように、JPEGは写真に適し、PNGはテキストやグラフを含むグラフィックに適しています。GIFには、アニメーションをサポートするという唯一の利点があり、非常に慎重に使用する必要があります。

良いヒントは、画像をJPEGおよびPNGとしてエクスポートすることです。ほとんどの場合、グラフィックに適した形式の方がファイルが小さくなります。写真はJPEGほど小さくなり、グラフはPNGほど小さくなります。したがって、どちらを選択すればよいかわからない場合は、それが良い判断材料になります。