透過画像で可能な最小のデータURI画像

スプライトを使用し、一部のアイコンに代替テキストを提供できるように、背景画像付きの透明な1x1画像を使用しています。

画像のデータURIを使用してHTTPリクエストの数を減らしたいのですが、透明な画像を作成するために可能な最小の文字列は何ですか？

スプライトの代わりに実際の画像にデータURI：を使用できることはわかっていますが、すべてを散らばるのではなく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として、1つのコメントが示唆しているように省略しないでください。これはいくつかのブラウザで壊れます。

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E

最終的な長さは、gzipされたものによって異なります。

圧縮された透明な1x1 GIFファイル（82バイト）である必要があると思います。

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

で生成されたURIジェネレータ：dopiaza.orgデータ。

最小のPNG-114バイト：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

この男は、GIF仕様を介して問題を分解します。の彼の解決策はtransparent.gif37バイトでしょう：

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

彼はまず透明度を取り除き、次にカラーテーブルを削除することでさらに小さくなりました...

GIF89a仕様

• ヘッダー（6バイト）

  バイト「GIF」とバージョン番号（通常は）で構成されます89a。

• 論理画面記述子（7バイト）

  詳細は省きますが、ファイルのこのセクションでは次のことを示しています。

  • ファイルのサイズは1x1ピクセルです。
  • グローバルカラーテーブルがあります。
  • グローバルカラーテーブルには2つの色があります。2番目の色は背景色として使用する必要があります。

• グローバルカラーテーブル（6バイト）

  色ごとに3バイト、赤、緑、青のそれぞれ1バイトで構成されます。このファイルでは、最初の色は白、2番目の色は黒です。

• グラフィック制御拡張（8バイト）

  カラーテーブルの2番目の色を透明として扱う必要があることを示すために使用されます（アニメーションパラメータにも使用できますが、このファイルにはありません）。

• 画像記述子（10バイト）

  GIFファイルには実際に複数の「画像」を含めることができます。これにより、背景色と同じ色の部分の画像データを指定する必要がなくなります。各画像ブロックには、全体の画像サイズ内の位置とサイズがあります。上記のファイルでは、位置は0,0で、サイズは1x1です。

• 画像データ（5バイト）

  LZWでエンコードされた画像データの1つのブロック。画像に含まれる単一のピクセルを表すには5バイトかかります。圧縮アルゴリズムは、1バイトを適切に圧縮するようには設計されていません。

• GIFトレーラー（1バイト）

  16進数値3B（;ASCII）の1バイトは、GIFの終わりを示します。

透明なGIFに必要な構造に基づいて、43バイトはあなたが得ることができる限りかなり小さいことがわかります。

しかし、私はそれを少し小さくするための1つのトリックを理解することができました。標準では、グローバルカラーテーブルを持つことはオプションであると述べられています。もちろん、カラーテーブルなしでGIFを作成するとどうなるかは未定義です。

ただし、透明として定義されたカラーテーブルインデックスがある場合、GIFデコーダーは実際にはカラーテーブルが存在しないことを気にしません。

そこで、論理画面記述子を変更してグローバルカラーテーブルがないことを示し、テーブル自体を削除して合計6バイトを節約し、ファイルサイズをわずか37バイトに減らしました。

興味深いことに、FirefoxとGIMPの両方が開いて表示されている（透明な場合は「表示」されている）にもかかわらず、Wordpressから、GDが有効なGIFファイルではないというエラーメッセージが表示されました。大丈夫。

さらに小さくするために、私は画像内に残っている最大の「オプション」ブロックであるグラフィックコントロール拡張機能に注目しました。透過性が必要ない場合は、このブロックは不要になり、それを8バイト取ります。

出典：これまでで最も小さなGIF。

次の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"/>

以下も参照してください。

• データURIでのSVGの最適化
• SVG（GitHub）/ SVG CSS URI 用のURLエンコーダ—最適化された置換

これは私が見つけた最小のものです（26バイト）：

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

次のデータURIを使用して空の画像を取得しています。 //:0

空の画像の場合：

data:null

（それはに翻訳されますsrc=(unknown)）