簡約透明資料 URI 影像的最佳大小是多少？

透明圖片的簡約資料 URI

設想在 CSS 中使用 1x1 透明圖片和背景圖片。這樣可以利用精靈，同時仍為特定圖示提供替代文字。

要最佳化效能，請考慮對影像使用資料 URI。然而，使用這種方法創建透明圖像的最佳尺寸是多少？

簡明回應

透過對透明 GIF 的廣泛實驗，某些影像表現出不穩定並導致CSS 中的故障。例如，嘗試使用盡可能小的尺寸將背景圖像添加到透明 GIF 可能會妨礙其功能。奇怪的是，某些 GIF（例如下面的 GIF）可能會在某些瀏覽器中封鎖 CSS 背景。

較短但不穩定（74 位元組）

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

穩定但稍長(78位元組）

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

另一個考慮因素是不要省略「image/gif」作為評論中經常出現的建議。此遺漏可能會導致多個瀏覽器故障。

以上是簡約透明資料 URI 影像的最佳大小是多少？的詳細內容。更多資訊請關注PHP中文網其他相關文章！