當頁面有大量圖片的時候就會直接影響到頁面的加載速度,如果圖片半天都沒有加載,那么會很影響用戶的體驗感,進而導致用戶的流失。下面給大家介紹幾種進行圖像優化的方法。

        1、能不用圖像則不用圖片,能用css完成的部分盡量減少頁面使用圖片。

如半透明、邊框、圓角、陰影、漸變等,在當前主流瀏覽器中都可以用CSS3達成。

        2、 使用矢量圖SVG替代位圖。

對于絕大多數圖案、圖標等,矢量圖更小,且可縮放而無需生成多套圖。現在主流瀏覽器都支持SVG了,所以可放心使用!

        3、使用恰當的圖片格式。

我們常見的圖片格式有JPEG、GIF、PNG。基本上,內容圖片多為照片之類的,適用于JPEG。而修飾圖片通常更適合用無損壓縮的PNG。GIF基本上除了GIF動畫外不要使用。且動畫的話,也更建議用video元素和視頻格式,或用SVG動畫取代。

        4、按照HTTP協議設置合理的緩存。

        5、使用字體圖標webfont、CSS Sprites等。

        6、用CSS或Javascript實現預加載。

        7、WebP圖片格式能給前端帶來的優化。

WebP支持無損、有損壓縮,動態、靜態圖片,壓縮比率優于GIF、JPEG、JPEG2000、PG等格式,非常適合用于網絡等圖片傳輸。

        圖像格式的區別

        矢量圖:圖標字體,如 font-awesome;svg 

        位圖:gif,jpg(jpeg),png

        1、gif:是是一種無損,8位圖片格式。具有支持動畫,索引透明,壓縮等特性。適用于做色彩簡單(色調少)的圖片,如logo,各種小圖標icons等。

2、JPEG格式是一種大小與質量相平衡的壓縮圖片格式。適用于允許輕微失真的色彩豐富的照片,不適合做色彩簡單(色調少)的圖片,如logo,各種小圖標icons等。

3、可以細分為三種格式:PNG8,PNG24,PNG32。后面的數字代表這種PNG格式多可以索引和存儲的顏色值。

關于透明:PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基礎上增加了8位(256階)的alpha通道透明;

        優缺點

1、能在保證不失真的情況下盡可能壓縮圖像文件的大小。

2、對于需要高保真的較復雜的圖像,PNG雖然能無損壓縮,但圖片文件較大,不適合應用在Web頁面上。

作為專注培養web前端人才的南京科迅教育,立足于社會需求,以企業人才需要為基點,堅持打造全程面授的高品質教學模式,不斷與時俱進的去升級課程內容,積極拓展課外項目活動,以實踐來驅動教學,助力學員掌握好過硬設計技能和提升實際運用經驗,所以,如果你也想改變目前的工作狀態;如果你也想進名企、拿高薪;如果你也想突破自我,南京科迅教育的大門隨時為你敞開!歡迎和期待廣*員們來校進修!