透明な画像に可能な最小のデータURI画像
スプライトを使用し、一部のアイコンに代替テキストを提供できるように、背景画像とともに透明な1x1画像を使用しています。
画像にデータURIを使用してHTTPリクエストの数を減らしたいのですが、透明な画像を生成するための最小の文字列は何ですか？
私はスプライトの代わりに実際の画像にデータURI：sを使用できることに気づきましたが、すべてが散らばるのではなくCSSに保持されていると保守が容易になります。
さまざまな透明GIFで遊んだ後、一部は不安定でCSSの不具合を引き起こします。たとえば、<img>があり、可能な限り最小の透明GIFを使用している場合は正常に機能しますが、透明GIFにbackground-imageが必要な場合、これは不可能です。何らかの理由で、次のような一部のGIFは（一部のブラウザーで）CSSバックグラウンドを防ぎます。
短い（ただし不安定-74バイト）
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
次のように、少し長くて安定したバージョンを使用することをお勧めします。
⇊安定⇊（ただしわずかに長い-78バイト）
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
別のヒントとして、あるコメントが示唆するように、image/gifを省略しないでください。これはいくつかのブラウザで壊れます。
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E
最終的な長さは、gzipで圧縮するものによって異なります。
私はそれが圧縮された透明な1x1 GIFファイル（82バイト）でなければならないと思います：
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
dopiaza.org data：URI generator で生成されます。
最小のPNG-114バイト：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=
この男 GIF仕様で問題を解決します。 transparent.gifに対する彼のソリューションは37バイトになります。
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
彼は最初に透明度を削除し、次にカラーテーブルを削除することでさらに小さくなります...
GIF89a仕様
Header（6バイト）
バイト「GIF」とバージョン番号で構成され、通常は
89aです。論理画面記述子（7バイト）
あまり詳しく説明しなくても、ファイルのこのセクションは次のことを示しています。
- ファイルのサイズは1x1ピクセルです。
- グローバルカラーテーブルがあります。
- グローバルカラーテーブルには2つの色があり、2番目の色を背景色として使用する必要があります。
グローバルカラーテーブル（6バイト）
色ごとに3バイト、それぞれ赤、緑、青のバイトで構成されます。このファイルでは、最初の色は白で、2番目の色は黒です。
Graphic Control Extension（8バイト）
カラーテーブルの2番目の色を透明として扱う必要があることを示すために使用します（アニメーションパラメーターにも使用できますが、このファイルにはありません）。
画像記述子（10バイト）
GIFファイルには実際に複数の「画像」を含めることができるため、画像の背景色と同じ色の部分の画像データを指定する必要がなくなります。各画像ブロックには、全体の画像サイズ内の位置とサイズがあります。上記のファイルでは、位置は0,0で、サイズは1x1です。
画像データ（5バイト）
1つ LZWエンコード 画像データのブロック。画像に含まれる単一ピクセルを表すには5バイトかかります。圧縮アルゴリズムは、1バイトをうまく圧縮するようには設計されていません。
GIF Trailer（1バイト）
3B（ASCIIの;）の16進値を持つ単一バイトは、GIFの終わりを示します。
透明なGIFに必要な構造に基づいて、43バイトは可能な限り小さいサイズに近いことがわかります。
しかし、私はそれを少し小さくするためのトリックを見つけました。標準では、グローバルカラーテーブルを持つことはオプションであると記載されています。もちろん、カラーテーブルをまったく使用せずにGIFを作成した場合の動作については定義されていません。
ただし、カラーテーブルインデックスを透明として定義している場合、GIFデコーダーは実際にカラーテーブルがないことを気にしません。
そこで、論理スクリーン記述子を変更して、グローバルカラーテーブルがないことを示し、テーブル自体を削除して、合計6バイトを節約し、ファイルサイズをわずか37バイトに減らしました。
興味深いことに、Wordpressは、FirefoxとGIMPの両方が開いて表示されるという事実にもかかわらず、これが有効なGIFファイルではないというGdのエラーメッセージの素敵なリストを提供してくれました。透明なときに表示されますか？）ファイルは問題ありません。
さらに小さくするために、画像に残っている最大の「オプション」ブロックであるグラフィックコントロール拡張機能に注目しました。透明性が不要な場合、このブロックは不要になります。これは、8バイトを削除できます。
ソース： The Tiniest GIF Ever 。
次のSVGデータ（60バイト）を試すことができます。
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>
スタンドアロンsvgファイルは次のようになります（62バイト）：
<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"/>
こちらもご覧ください：
これは私が見つけた最小のものです（26バイト）：
data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=
次のデータuriを使用して空の画像を取得しています：//:0
空の画像の場合：
_data:null
_（それはsrc=(unknown)に変換されます）