HTML5ゲームのスプライトに使用する画像形式はどれですか？
回答:
画像形式は、ピクセルの生データを保存するための方法にすぎないため、ビットマップを使用している限り、形式は通常、ロード手順後の実行に違いを生じません。重要なのは、グラフィックAPIに提供されるピクセルデータです。Webで一般的に使用される3つの形式があります。
.gif（現在は非推奨となっている）GIF形式は256色以下の画像に使用されるため、サイズが非常に小さくなります。GIFはアニメーションにもよく使用されます。256色以下の色を使用する場合、それはロスレス形式です。つまり、圧縮に関して品質が失われることはありません。それ以外の場合は、色の種類を256に減らす必要があり、品質が低下します。
.pngポータブルネットワークグラフィックス形式は、私が思うに、GIFよりも多くの色を保存できる一方で、圧縮率が高いため、まったく最も使用されている画像形式です。PNGは半透明にも対応しています（または一般に透明度と呼ばれます。透明度と呼ばれるには、ピクセルが100％半透明である必要があるため、これは間違った名前です）。これはロスレス形式でもあり、2006年にGIFを改善して置き換えることを目的としています（ソース、最初の段落）。個人的には、ウェブサイトやゲームで画像タイプとして使用しています。
.jpeg JPEG形式は、写真などによく使用されます。半透明にすることも、ロスレス圧縮を保証することもできません。圧縮時に品質を指定することは一般的であり、スペースと品質の間のトレードオフにつながります。
いくつかのユースケースを見てみましょう：
- アートワークまたは一般的に複雑なアートは、そのタイプの画像用に設計されているため、JPEG形式で保存するのが適切です。
- スプライトは、特に色の種類が少ない場合は、PNGで保存するのが最適です。
- 背景を保存する場所を定義することは困難です。一般的なルールは次のようなものです。それが写真や多種多様な色を含む複雑なアートの場合は、JPEG、それ以外の場合はPNGを使用します。
- GIFは前述のようにPNGに置き換えられるため、256色未満のアイコンを使用する場合でも、アイコンはおそらくPNG画像である必要があります。
通常、グラフィックスAPIのメモリ消費量とパフォーマンスは、これらのフォーマット間で等しいことに注意してください。重要なのは、サイズと読み込み速度です（読み込みコストを見積もる場合は、これらの形式のアルゴリズムに飛び込むことができます）。raw状態の画像のメモリ消費は、通常width*height*4、最も一般的なRGBAピクセル形式の一般的なルールバイトによって定義されます。
@マルコの答えに追加するいくつかのこと：
.gifは非常に古くなっています。.gifファイルはできるだけ使用しないようにします。ブラウザー内アニメーションのため、最近では人々だけが使用していると思います。アニメーションpngは十分にサポートされていません。。現時点でれ。
だからあなたが持っているのはjpgとpngだけです。
PNG： ロスレスです。ここで検討しているのは、取得する圧縮率だけです。通常、無地のブロックを圧縮するのは適切ですが、バリエーションの多いシーンを圧縮するのは適切ではありません。
JPG：で恐ろしい仕事をしています ソリッドカラーのブロック（両方の詳細を失うと PNGより多くのスペースを取る）が、絵と素晴らしい仕事の変化の多くの（良好な圧縮、ほとんど目立たない画質の損失を）。
例えば
4Kbロックマン、PNG形式：
この同じ写真は JPG 36Kbです。
そしてディテールの損失（それは無料です！jpg圧縮で）
したがって、ここでは、カラー画像の無地のブロックで、JPGを使用することにより、ディテールが失われ、追加のサイズが発生します。結論：単色の大きなブロックを持つ画像にはjPGを使用しないでください。
ここで、ハイカラーシーンについて考えます。
1.63 MB PNG：
277 K JPG：
おおよその損失（jpgを使用してこれをアップロードしました！しかし、損失を示しています
要するに
- 単色のブロックを持つ画像、つまりNESスタイルのスプライトにはPNGを使用してください。
- 色のバリエーションが多い画像にはJPGを使用します。これは、他の画像、特に背景に似ています。
質問をさらに抽象化してみましょう：
指定されたプラットフォームで実行されているゲームで、使用するメディアについての考慮事項は何ですか？
考慮事項1：サイズ、別名読み込み速度
プラットフォームやゲーム、メディアの種類に関係なく、レンダリングのためにコンテキストに取り込む必要があるのが実情です。Webベースのプラットフォームでは、これはダウンロードを意味します。デスクトップ環境またはコンソールでは、ローカルストレージメディアからロードすることを意味します。メディアのロードには時間がかかります。低速の接続で多くのメディアをダウンロードする必要がある場合、Webベースのプラットフォームは特に機能しなくなる可能性があります。
考慮事項＃2：メモリ消費
サイズに関連していますが、同じではありません。メディアは、ディスク上またはパッケージ内などで圧縮されますが、いったんテクスチャまたはサウンドバッファーとして読み込まれると、かなり大きくなる場合があります。ゲームが実行されているデバイスには、無限のメモリはありません。
考慮事項＃3：品質とスタイル
メディアは十分な品質ですか？これはゲームにとって非常に重要であり、多くの場合、サイズを考慮すると矛盾します。多くの場合、2つの間のバランスが必要です。一部のゲームは信じられないほどシンプルなグラフィックス（minecraft）を備えていますが、それでも非常に成功しています。他のものは、メモリのゴブとゴブを占める本当に素晴らしいグラフィックスを持っていますが、驚くほどに見える背景で没入感のある品質を提供します。ゲームによっては、効果音のためにブリップやブループを使用しないものもありますが、41kのステレオミュージックが必要なゲームもあります。
したがって、どちらが最も重要であるかに基づいて、ゲームに適切な決定を行います。決定はゲームごとであり、1つのサイズがすべてに当てはまるわけではありません。
一般に、許容できる画質を提供できる最小のファイルサイズを選択します。さらに、pngはアルファをサポートしているため、アルファレイヤーを処理するために追加の画像を処理する必要はありません。
何のために/いつpngを使用するか（一般的に言えば）：
- アルファレイヤーを使用する必要がある場合
- シャープな線を維持したい漫画的な画像/ベクターのような画像。
- 色が少ない画像
PNGはロスレスですが、色深度は変更できます。
残りのケースにはjpgを使用します-写真画像、絵画、細部の多い写真、色、グラデーション。PNGを使用してこれらの画像を保存しようとすると、ファイルサイズがjpgよりもはるかに大きいことがわかります。
adobe image readyなどのツールを使用すると、さまざまな形式や品質設定でファイルサイズとともに画像をプレビューできます。