1. ホーム
  2. css

[解決済み] 透過画像で可能な最小のデータURI画像

2022-05-10 11:50:31

質問

私は、スプライトを使用し、いくつかのアイコンの代替テキストを提供できるようにするために、背景画像と透明な1x1の画像を使用しています。

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

私は、スプライトの代わりに実際の画像にデータ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 を省略しないでください。これは、いくつかのブラウザで壊れます。