服務小靜態圖像的最佳方式是什麼？

現在我是基地64編碼他們和使用數據uris。這個想法是，這會以某種方式降低瀏覽器需要的請求數量。這個水桶拿着水嗎？服務小靜態圖像的最佳方式是什麼？

服務圖像的最佳方式是什麼？ DB，來自FS，S3？

我最感興趣的是基於python和java的答案，但都歡迎！

來源

2010-10-28 NorthIsUp

我一定會看看CSS Image Sprites，體面的寫作here和here。

這個概念非常簡單，將您的圖片合併爲一個，只顯示您需要的切片作爲CSS背景。這樣可以將來自多個圖像的HTTP請求數量降低爲一個或多個（在適當的情況下將精靈圖中的小圖像組合在一起），並且維護的圖像更少，CSS中只有一些背景座標。

此外，與任何靜態資源make sure your cache headers are set correctly一樣，所以客戶端不會不必要地讀取它。

來源

2010-10-28 18:57:11

+1我會這麼做......雖然精靈是很難維護，它可能是最好的解決方案 – pleasedontbelong 2010-10-28 18:59:21

@pleasedontbelong - 這取決於你的圖像編輯器我想，我個人使用Fireworks，並發現它們很容易維護，我只是出口一個扁平化的PNG的最終精靈......一切都可編輯在原始/源文件中。 – 2010-10-28 19:01:10

從我對另一個CSS sprite問題的回答中得到更多的信息：「Base64編碼的數據比原始字節大1/3，所以在下載所有圖像數據所花費的時間比提出請求長三倍以上的頁面上，CSS sprites從性能的角度來看，它是優越的。「 http://stackoverflow.com/questions/3525663/css-sprites-vs-data-uris/3525961#3525961 – Chuck 2010-10-28 19:18:01

現在我是64位編碼他們和使用數據uris。這個想法是，這會以某種方式降低瀏覽器需要的請求數量。這個水桶拿着水嗎？

這絕對是一個壞主意：它won't work in IE < 8;它增加了33％的服務數據量;它使圖像完全不可緩存。

我想說你應該把圖片作爲適當的圖片資源 - 無論是作爲單獨的文件，還是像@Nick所說的CSS精靈，將取決於它們的數量和大小。

來源

2010-10-28 18:56:49

數據URI被緩存爲css文件的一部分。我假設你的意思是每當css改變時你都必須重新下載所有的圖像。此外，Base64壓縮得很好，所以我懷疑額外的數據量是那麼大。 – 2010-10-28 19:10:30

@Gabe我理解它的方式，他在HTML文件中顯示base64數據，而不是在樣式表中顯示？ – 2010-10-28 19:17:04

儘管我在技術上同意你的觀點，但有時候減少服務器命中數比在緩存或捲上節省一點點更爲可取。我承認，特別是在配合瀏覽器要求的情況下，這些案例將會很少，但仍然存在。 – McKay 2010-10-28 19:18:37

數據URL肯定會減少對服務器的請求數量，因爲瀏覽器不需要請求單獨的請求中的像素。但是它們在所有瀏覽器中都不受支持。你必須做出權衡。

來源

2010-10-28 18:57:29

Nicholas C. Zakas寫了tool，使得它更容易在CSS中使用數據URI，並且還包含一個IE6/7兼容FIX：

CSSEmbed還支持MHTML模式使IE6和IE7兼容使用類似於數據URI的內部圖像的樣式表。

來源

2010-10-28 19:04:01

服務小靜態圖像的最佳方式是什麼？

回答

相關問題