當頁(yè)面有大量圖片的時(shí)候就會(huì )直接影響到頁(yè)面的加載速度,如果圖片半天都沒(méi)有加載,那么會(huì )很影響用戶(hù)的體驗感,進(jìn)而導致用戶(hù)的流失。下面給大家介紹幾種進(jìn)行圖像優(yōu)化的方法。

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

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

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

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

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

我們常見(jiàn)的圖片格式有JPEG、GIF、PNG?；旧?內容圖片多為照片之類(lèi)的,適用于JPEG。而修飾圖片通常更適合用無(wú)損壓縮的PNG。GIF基本上除了GIF動(dòng)畫(huà)外不要使用。且動(dòng)畫(huà)的話(huà),也更建議用video元素和視頻格式,或用SVG動(dòng)畫(huà)取代。

        4、按照HTTP協(xié)議設置合理的緩存。

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

        6、用CSS或Javascript實(shí)現預加載。

        7、WebP圖片格式能給前端帶來(lái)的優(yōu)化。

WebP支持無(wú)損、有損壓縮,動(dòng)態(tài)、靜態(tài)圖片,壓縮比率優(yōu)于GIF、JPEG、JPEG2000、PG等格式,非常適合用于網(wǎng)絡(luò )等圖片傳輸。

        圖像格式的區別

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

        位圖:gif,jpg(jpeg),png

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

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

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

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

        優(yōu)缺點(diǎn)

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

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

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