使用圖片的劣勢(shì)：我們現(xiàn)在有很多特效（漸變、陰影蛮寂、圓角等等）都可以用純粹的html css svg等加以實(shí)現(xiàn)，實(shí)現(xiàn)這些效果少則數(shù)行寥寥代碼，多則加載額外的庫(kù)（一張普通的照片比非常強(qiáng)大的效果庫(kù)也大了許多）淑翼。這些效果不但需要的空間小，而且在多設(shè)備品追、多分辨率下都能很好的工作玄括。圖片占用帶寬，而且與分辨率息息相關(guān)肉瓦。
備選技術(shù)：css效果遭京、css動(dòng)畫(huà)、圖標(biāo)庫(kù)使用字體的方式泞莉，保持文字的可搜索性同時(shí)擴(kuò)展顯示的樣式
如果真的不能避免使用圖片該怎么辦哪雕？如何正確的使用圖片呢
- 圖片分類(lèi)
- jpg
- png
- gif
- svg 可縮放矢量圖形是基于可擴(kuò)展標(biāo)記語(yǔ)言
- APNG和webp格式尚未被web標(biāo)準(zhǔn)所采納
- 圖片使用
- 如果顏色豐富的照片，jpg是通用的選擇
- 如果需要較通用的動(dòng)畫(huà)戒财，gif是唯一可用的選擇
- 如果需要清晰的圖片且顏色豐富的圖片热监，使用png
- 圖片加載的方式
- 有一種加載先模糊后清晰，另一種是很清晰饮寞，但是逐行加載顯示孝扛。（原因是圖片本身壓縮算法不同，在圖片被生成的時(shí)候已經(jīng)決定了圖片在瀏覽器當(dāng)中是如何表現(xiàn)的）
- 模糊到清晰（小波算法）幽崩，逐行加載顯示（離散余弦變換苦始，使用實(shí)數(shù)）瀏覽器根據(jù)不同圖片選擇不同算法。更改文件后綴名不會(huì)影響加載方式慌申，壓縮算法讀取是在文件頭部陌选。
m
每次都清除緩存的方法
逐行加載
Paste_Image.png
、
Paste_Image.png
網(wǎng)絡(luò)環(huán)境較差時(shí)國(guó)外的蹄溉，慢網(wǎng)速情況下展示的狀態(tài)
- css-sprites
- 工具使用
狼廠
可愛(ài)的開(kāi)發(fā)者
鵝廠
- 工具使用
使用pc端精靈圖在移動(dòng)端上面設(shè)置時(shí)要將圖片大小按PC/2 一般情況下PC端與移動(dòng)端分辨率屏幕標(biāo)準(zhǔn)的比值差是1:2
Paste_Image.png
更簡(jiǎn)便的方法：
Paste_Image.png
注意在移動(dòng)端要按pc與移動(dòng)端的比值算
響應(yīng)式動(dòng)態(tài)圖片加載（SDK）
- 我們需要一個(gè)默認(rèn)圖片
- 我們要把屏幕分辨率的信息帶給服務(wù)器
- 我們要用服務(wù)器返回給我們更優(yōu)質(zhì)的圖片
未來(lái)的方法
- 創(chuàng)建新元素
- 比如：
<picture></picture>
- 比如：
Paste_Image.png
隨著屏幕的變小變成不同分辨率的圖片或替換成不同質(zhì)量的圖片咨油，未來(lái)響應(yīng)式圖片設(shè)置的一種理念
Paste_Image.png
Paste_Image.png
Paste_Image.png
- 創(chuàng)建新圖像格式
- 比如100K的文件里有75K的版本、20K的版本和5k版本的圖像
