最小限の透明データ URI イメージの最適なサイズはどれくらいですか?

透明画像用の最小限のデータ URI

CSS 内で背景画像と一緒に 1x1 の透明画像を利用することを想像してください。これにより、特定のアイコンに代替テキストを提供しながら、スプライトを利用できるようになります。

パフォーマンスを最適化するには、画像にデータ URI を使用することを検討してください。しかし、このアプローチを使用して透明な画像を作成する場合の最適なサイズはどれくらいですか?

簡潔な応答

透明 GIF を使用した広範な実験を通じて、特定の画像が不安定になり、 CSS内の不具合。たとえば、可能な限り小さいサイズを使用して背景画像を透明 GIF に追加しようとすると、その機能が妨げられる可能性があります。奇妙なことに、以下のような特定の GIF は、一部のブラウザで CSS 背景をブロックする可能性があります。

短いが不安定 (74 バイト)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

安定しているがわずかに長い (78 bytes)

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

さらに考慮すべき点は、コメント内でよく見られる提案として「image/gif」を省略しないことです。この省略により、複数のブラウザで誤動作が発生する可能性があります。

以上が最小限の透明データ URI イメージの最適なサイズはどれくらいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。