明確業務訴求和用戶訴求為之后的設計提供了指導，不僅可以在接下來討論的過程中不易迷失方向，還可以避免陷入設計細節的糾結。基于業務訴求和用戶訴求其實就是為了不忘初心，是為了明確設計的初衷。
     第一、 樣式代替圖片Chrome，FF等瀏覽器廠商為互聯網的發展做了這么多貢獻，為什么我們還要讓那些不兼容CSS3的瀏覽器阻礙互聯網的發展呢。因此，讓我們直接使用CSS樣式代替圖片來實現修飾效果！例如：半透明、圓角、陰影、高光、漸變等。這些效果主流的瀏覽器都能夠完美支持，而對于那些低端瀏覽器，我們并不會完全拋棄他們，“漸進增強”則是一個很好的解決方案。至于什么是漸進增強，這里不再用過多篇幅去解釋。
     第二、簡約而不簡單的出現，將互聯網行業中很多產品設計帶回到原點，或許更是另一個新的起點。中圖標的扁平化設計、一直崇尚簡約的豆瓣網、還有頂著時代工匠稱號的老羅所設計的錘子ROM，無一不體現著簡約的風格。回到我們圖片優化的主題上。在產品設計和UI設計階段，除了內容圖片，其他的圖片都是起修飾的作用。也就是對于傳遞信息來說并非本質性的。所以最大的優化就是不要圖片。在進入到研發階段之前，就要確認設計，設計本身是否需要用到那么多的圖片，還是說可以做到更簡潔！
     第三、 常用的圖片優化技巧CSS Sprites，將同類型的圖標或按鈕等背景圖合到一張大圖中，減少頁面請求。將圖標做成字體文件。優點是圖標支持多個尺寸，兼容所有瀏覽器，減少頁面請求等。美中不足的是只支持純色的icon。對于絕大多數圖案、圖標等，矢量圖更小，且可縮放而無需生成多套圖。現在主流瀏覽器都支持SVG了，所以可放心使用！圖片壓縮工具，可以在圖片上線前使用壓縮工具進行壓縮，獲得更高的壓縮比。
     第四、 適用各種資源而不限于圖片的優化data url是網絡上最常見的用于傳輸字節的編碼方式之一，可用于在HTTP環境下傳遞較長的標示信息。將圖片轉化為編碼格式，資源內嵌于CSS或HTML中，不必單獨請求。該方式的優點是： 減少了HTTP請求2. 避免了圖片重新上傳，還要清理緩存的問題。不足之處是： IE6, IE7不支持該類型編碼的圖片作為背景圖。增加了CSS文件的尺寸。維護成本較高。
     第五、 選擇最合適的圖片我們常見的圖片格式有JPEG、GIF、PNG。基本上，內容圖片多為照片之類或圖片構成較復雜的情況，適用于JPEG。如網站中的Banner圖、輪播圖、大尺寸背景圖等。修飾圖片通常更適合用無損壓縮的PNG。除了這些格式之外，這兩個新格式都支持無損和有損壓縮，都具有更良好的壓縮比。當然這需要為不同的瀏覽器返回不同的圖片，增加了開發成本，也增加存儲成本。不過你省了流量或者相同流量下改善了圖片質量，提升了用戶體驗。這就需要根據項目需求進行取舍了。
    不是所有的網站都是顯示圖片的，要實現這一目的，還需要用到一些小竅門，比如一般展示型網站的關鍵詞會有一定的權重，而且網站排名也不錯，打開速度也快，這樣可以幫助圖片出現在搜索結果中。而且我們發現，在一個月內更新的圖片更容易被搜索到，因此建議更新文章時加上合適的圖片。

網站建設web前端開發中的圖片優化技巧有哪些由同信長春網站公司為您提供，更多內容：http://m.zgybkzx.com
同信長春網絡公司為您提供：長春網站建設  長春網絡公司  長春手機網站