簡(jiǎn)述jpg,gif,png-8,png-24的區(qū)別,及其各自的使用場(chǎng)景
- jpg:
- 1.不支持動(dòng)畫
- 2.有損耗
- 3.可以表達(dá)的顏色比價(jià)多,高達(dá)1600w之多,所以如果圖片色彩豐富,適合用jpg
- 4.使用場(chǎng)景:色彩、細(xì)節(jié)豐富的圖片、漸變圖
- gif:
- 1.有透明性,可以是全透,也可以全不透,沒有半透明,
- 2.支持動(dòng)畫格式。
- 3.無損耗,做任何操作都不會(huì)使圖像質(zhì)量產(chǎn)生損耗。
- 4.最多能表達(dá)256種顏色,如果色彩豐富、細(xì)節(jié)豐富的圖片不建議保存成gif,
- 5.使用場(chǎng)景:色彩簡(jiǎn)單的log、icon、線框圖、動(dòng)圖
- png:
- 1.有透明性,支持透明、不透明、半透明
- 2.不支持動(dòng)畫
- 3.無損耗
- png-8:是256色的png,可以代替gif,同等質(zhì)量下,尺寸也更小,但是不支持動(dòng)畫,所以沒有辦法完全替代gif,如果沒有動(dòng)畫需求那可以采用png-8
- png-24:是全色的png,和jpg一樣能表達(dá)出豐富的色彩和細(xì)節(jié),但不能替代jpg,因?yàn)榇鎯?chǔ)下來png-24比jpg要大很多,但因?yàn)槭菬o損耗的,所以比較適合源文件或者需要二次編輯圖片
精靈圖和base64如何選擇
精靈圖,是網(wǎng)頁處圖圖片的一種方式,它是把多張小圖整合到一張,利用background-position屬性定位某個(gè)圖片的位置,來達(dá)到在大圖片中引用某個(gè)小圖片的效果,當(dāng)頁面訪問時(shí),可以減少向服務(wù)器的yg有求次數(shù),提高頁面的加載速度。
base64,是網(wǎng)絡(luò)上最常見的用于傳輸8Bit字節(jié)代碼的編碼方式之一,將原本二進(jìn)制形式轉(zhuǎn)成以64個(gè)字符基本單位,所組成的一串字符串。base64的圖片會(huì)隨著html或者css一起下載到瀏覽器,減少了請(qǐng)求,避免跨域問題,但是低版本的IE瀏覽器不兼容,體積比原來的圖片大,不利于css的加載,所以如果是圖比較大,就用精靈圖合并為一張大圖,使用base64直接把圖片編碼成字符串寫入CSS文件
了解過音頻、視頻嗎?知道視頻新增了哪些屬性嗎?
- 音頻 – audio
- 視頻 – video 標(biāo)簽使用基本一致,在一個(gè)網(wǎng)頁中插入視頻或者是音頻,多媒體標(biāo)簽在不同瀏覽器下情況不同,存在兼容性問題
- 谷歌瀏覽器把音頻和視頻標(biāo)簽的自動(dòng)播放都禁止了,如果相自動(dòng)播放,需要添加muted屬性,
- 視頻新增了
- controls 控件
- autoplay 自動(dòng)播放,必須要和muted一起用
- muted 靜音
- loop 循環(huán)
- poster 視頻的封面等屬性
更多關(guān)于“web前端培訓(xùn)”的問題,歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué),課程大綱緊跟企業(yè)需求,更科學(xué)更嚴(yán)謹(jǐn),每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升,都可以找到適合的班型,千鋒教育隨時(shí)歡迎你來試聽。