簡(jiǎn)述jpg，gif，png-8，png-24的區(qū)別，及其各自的使用場(chǎng)景

　　- jpg：

　　- 1.不支持動(dòng)畫(huà)

　　- 2.有損耗

　　- 3.可以表達(dá)的顏色比價(jià)多，高達(dá)1600w之多，所以如果圖片色彩豐富，適合用jpg

　　- 4.使用場(chǎng)景：色彩、細(xì)節(jié)豐富的圖片、漸變圖

　　- gif：

　　- 1.有透明性，可以是全透，也可以全不透，沒(méi)有半透明，

　　- 2.支持動(dòng)畫(huà)格式。

　　- 3.無(wú)損耗，做任何操作都不會(huì)使圖像質(zhì)量產(chǎn)生損耗。

　　- 4.最多能表達(dá)256種顏色，如果色彩豐富、細(xì)節(jié)豐富的圖片不建議保存成gif，

　　- 5.使用場(chǎng)景：色彩簡(jiǎn)單的log、icon、線(xiàn)框圖、動(dòng)圖

　　- png：

　　- 1.有透明性，支持透明、不透明、半透明

　　- 2.不支持動(dòng)畫(huà)

　　- 3.無(wú)損耗

　　- png-8：是256色的png，可以代替gif，同等質(zhì)量下，尺寸也更小，但是不支持動(dòng)畫(huà)，所以沒(méi)有辦法完全替代gif，如果沒(méi)有動(dòng)畫(huà)需求那可以采用png-8

　　- png-24：是全色的png，和jpg一樣能表達(dá)出豐富的色彩和細(xì)節(jié)，但不能替代jpg，因?yàn)榇鎯?chǔ)下來(lái)png-24比jpg要大很多，但因?yàn)槭菬o(wú)損耗的，所以比較適合源文件或者需要二次編輯圖片

　　精靈圖和base64如何選擇

　　精靈圖，是網(wǎng)頁(yè)處圖圖片的一種方式，它是把多張小圖整合到一張，利用background-position屬性定位某個(gè)圖片的位置，來(lái)達(dá)到在大圖片中引用某個(gè)小圖片的效果，當(dāng)頁(yè)面訪(fǎng)問(wèn)時(shí)，可以減少向服務(wù)器的yg有求次數(shù)，提高頁(yè)面的加載速度。

　　base64，是網(wǎng)絡(luò)上最常見(jiàn)的用于傳輸8Bit字節(jié)代碼的編碼方式之一，將原本二進(jìn)制形式轉(zhuǎn)成以64個(gè)字符基本單位，所組成的一串字符串。base64的圖片會(huì)隨著html或者css一起下載到瀏覽器,減少了請(qǐng)求，避免跨域問(wèn)題，但是低版本的IE瀏覽器不兼容，體積比原來(lái)的圖片大，不利于css的加載，所以如果是圖比較大，就用精靈圖合并為一張大圖，使用base64直接把圖片編碼成字符串寫(xiě)入CSS文件

　　了解過(guò)音頻、視頻嗎?知道視頻新增了哪些屬性嗎?

　　- 音頻 – audio

　　- 視頻 – video 標(biāo)簽使用基本一致，在一個(gè)網(wǎng)頁(yè)中插入視頻或者是音頻，多媒體標(biāo)簽在不同瀏覽器下情況不同，存在兼容性問(wèn)題

　　- 谷歌瀏覽器把音頻和視頻標(biāo)簽的自動(dòng)播放都禁止了，如果相自動(dòng)播放，需要添加muted屬性，

　　- 視頻新增了

　　- controls 控件

　　- autoplay 自動(dòng)播放，必須要和muted一起用

　　- muted 靜音

　　- loop 循環(huán)

　　- poster 視頻的封面等屬性

　　更多關(guān)于“web前端培訓(xùn)”的問(wèn)題，歡迎咨詢(xún)千鋒教育在線(xiàn)名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬(wàn)人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時(shí)歡迎你來(lái)試聽(tīng)。