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

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

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

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

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

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

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

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

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

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

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

WebP支持無損、有損壓縮,動態(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:是是一種無損,8位圖片格式。具有支持動畫,索引透明,壓縮等特性。適用于做色彩簡單(色調(diào)少)的圖片,如logo,各種小圖標(biāo)icons等。

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

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

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

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

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

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

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