2022-11-23 分類: 網站建設
從網頁設計角度,應該如何優化網站圖片
1、去掉無意義的修飾。
除了內容圖片,其他的圖片的作用是修飾,也就是對于傳達信息來說并非本質性的。大的優化就是壓根不要圖片!所以在優化之前要做的,首先是確認設計,設計本身是否需要用那么多圖片?還是說可以更簡潔?
2、不用圖片。
切圖是一件扯淡的事情,直接使用CSS替代圖片來實現修飾效果吧!如半透明、邊框、圓角、陰影、漸變等,在當前主流瀏覽器中都可以用CSS達成。將來CSS濾鏡得到廣泛支持后,還可以做到alpha混合、正片疊底等各種效果。
3、使用矢量圖替代位圖。
對于絕大多數圖案、圖標等,矢量圖更小,且可縮放而無需生成多套圖。現在主流瀏覽器都支持SVG了,所以可放心使用!
4、使用恰當的圖片格式。
我們常見的圖片格式有JPEG、GIF、PNG。基本上,內容圖片多為照片之類的,適用于JPEG。而修飾圖片通常更適合用無損壓縮的PNG。而GIF基本上除了GIF動畫外不要使用。且動畫的話,也更建議用video元素和視頻格式,或用SVG動畫取代。
除了這些格式之外,Chrome、新版Opera、Android 4 支持WebP格式,IE 9 、IE mobile 10 支持JPEG XR。這兩個新格式都支持無損和有損壓縮,都具有更良好的壓縮比。當然這需要為不同的瀏覽器返回不同的圖片,增加了開發成本,也增加存儲成本。不過你省了流量或者相同流量下改善了圖片質量,提升了用戶體驗。你會如何取舍呢?
對了,別忘了使用優秀的圖片編碼器及合適的參數。好的圖片編碼器,尤其是有損圖片格式的編碼器(推薦Caesium),能通過算法或手動調整,獲得更高的壓縮比。
5、按照HTTP協議設置合理的緩存。
具體的緩存策略(如永久緩存 重命名)、部署策略(如反向代理、CDN等)這里就不展開了。
當前標題:從網頁設計角度應該如何優化網站圖片
文章位置:http://vcdvsql.cn/news/216000.html
成都網站建設公司_創新互聯,為您提供ChatGPT、響應式網站、全網營銷推廣、用戶體驗、建站公司、關鍵詞優化
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯
猜你還喜歡下面的內容