網站優化減少Img對象請求

我正在尋求減少我在開發中非常臃腫的主頁應用程序。我使用服務器大小組合/縫合器和最小化器優化了CSS和JS請求。網站優化減少Img對象請求

我現在正處於旋轉十五張圖像的旋轉木馬圖像作爲雜誌風格的佈局。另外還有非轉盤點，共有8個物體。我想將小圖像分組爲三個大圖像以減少對象請求。

假設：
這些圖像純粹是與文章裝飾。
雖然上述情況屬實，但在圖像不可用的情況下，他們仍應該提供alt文本，因爲它們確實傳達了一個想法（可訪問性請求）。
每個圖像是大約相同的尺寸130Wx80H
每個圖像是一個股票的照片的東西
有許多可用於並行下載兩個域
有兩個多個組小圖像的每4個圖像。

目標：最初，我想我只是使用背景圖像，並讓服務器端創建並緩存一個精靈圖像和CSS生成器。但是，我不確定可訪問性。然後，我認爲默認背景圖像不會被打印。那會導致很多白色。

問題：我可以在保持可訪問狀態的情況下對圖像進行分組，並保持適合屏幕閱讀器的流程。我唯一的辦法是使用普通的舊img標籤並嘗試在兩個域之間拆分對象的URI？是的，非常明顯的是重新設計和刪除圖像，但這是一個電子商務/雜誌網站。

來源

2010-09-28 J.T.

我會建議看看「精靈」是如何工作的，這就是你正在談論的「羣體」。精靈可以很好地處理你的所有裝飾圖像，並減少加載時間。只要你堅持正常圖像&的規則，就像alt標籤一樣，它不應該影響可訪問性。

希望這會有所幫助。

來源

2010-09-28 16:40:26 Nicknameless

你是否建議我使用帶有alt標籤的透明GIF並將圖像的背景圖像設置爲我的精靈？而且，的確，我指的是使用精靈。我已經用它們來裝飾物品，比如15x15像素的東西。問題是你可以使用alt標籤和背景圖片。 – 2010-09-28 16:52:10

在我的搜索中添加單詞「accessibility」後，我找到了這個。 http://www.artzstudio.com/2010/04/img-sprites-high-contrast/ – 2010-09-28 17:05:42

這是一篇優秀的文章，看起來像是可行的。我想你只是回答了你自己的問題：D – Nicknameless 2010-09-28 18:07:09

這裏的解決方案效果很好。警告是你還需要在img標籤中添加圖像尺寸的寬度/高度，這樣在關閉CSS的情況下就可以了。 http://www.artzstudio.com/2010/04/img-sprites-high-contrast/

來源

2010-09-28 18:30:46

這種技術很棒。我完成了一個spriteBuilder CFC，它可以接收任意尺寸的任意數量的圖像並將它們放在網格上。它將CSS屬性存儲在一個數組中，可以循環使用，以便使用適當的內聯CSS輸出img和容器標籤，如上面鏈接的博客中所述。我極大地減少了頁面上的對象數量。 – 2010-10-04 20:04:06

網站優化減少Img對象請求

回答

相關問題