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

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

如半透明、邊框、圓角、陰影、漸變等，在當(dāng)前主流瀏覽器中都可以用CSS3達(dá)成。

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

對(duì)于絕大多數(shù)圖案、圖標(biāo)等，矢量圖更小，且可縮放而無(wú)需生成多套圖?，F(xiàn)在主流瀏覽器都支持SVG了，所以可放心使用！

        3、使用恰當(dāng)?shù)膱D片格式。

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

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

        5、使用字體圖標(biāo)webfont、CSS Sprites等。

        6、用CSS或JavaScript實(shí)現(xiàn)預(yù)加載。

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

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

        圖像格式的區(qū)別

        矢量圖：圖標(biāo)字體，如 font-awesome；svg 

        位圖：gif,jpg(jpeg),png

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

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

　　3、png:PNG可以細(xì)分為三種格式:PNG8，PNG24，PNG32。后面的數(shù)字代表這種PNG格式多可以索引和存儲(chǔ)的顏色值。

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

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

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

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

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