Image Sprite

目的

為了提高網站整體性能,針對我們網站圖片比較多,我們決定采用 image sprite 方案減少 http 請求以優化性能;

規則

使用此方案有兩個必須遵循的規則:

  1. 圖片必須是兩倍圖一倍使用
    兩倍圖在切圖時完成;使用時,按照一倍使用;例如:圖片大小是44*44,我們使用的時候包裹圖片的容器應該是22*22。
  2. 必須為 png 圖片,以 iconP 開頭,即 iconP*.png
    例如:iconP-avatar.png;

建議

  1. 建議只合并復用的圖片(在多個頁面出現);
  2. 建議只針對尺寸比較小的 icon(<100*100);
  3. 圖片大小以不超過 2k 為宜;

未完待續。。。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容