圖片壓縮
壓縮之后 肉眼幾乎察覺不出來 壓縮之后少了的那些東西.
png8 /png24 /png 32之間的區(qū)別 ?
- png8 -------- 256 色 + 支持透明( 256 即為 2 ^ 8 ,用8 bit 來存一個(gè)像素的內(nèi)容,占用空間更小)
- png24------- 2 ^ 24 色 + 不支持透明 (24bit)
- png32 ------ 2 ^ 24 色 + 支持透明 (有符號(hào) 32bit)
每種圖片格式都有自己的特點(diǎn) ,針對(duì)不同的業(yè)務(wù)場(chǎng)景選擇不同的圖片格式很重要.
jpg有損壓縮,壓縮率高,不支持透明 (大部分不需要透明圖片的業(yè)務(wù)場(chǎng)景)
-
png 支持透明,瀏覽器兼容好 ,(大部分需要透明圖片的業(yè)務(wù)場(chǎng)景)
怎么記住 ? 放個(gè)屁 是透明的 . 所以需要透明的地方用png
淘寶首頁的圖標(biāo).png
因?yàn)樾枰尘巴该?所以這個(gè)圖片就是png 的
image.png webp 壓縮程度更好,在ios webview 有兼容性問題,(在安卓中支持的好)
svg矢量圖 代碼內(nèi)嵌,相對(duì)較小 —— (圖片樣式相對(duì)簡單的業(yè)務(wù)場(chǎng)景)
圖片壓縮的幾種方法
針對(duì)真實(shí)圖片情況千所，舍棄一些相對(duì)無關(guān)緊要的色彩信息
1: CSS雪碧圖
把你的網(wǎng)站上用到的一些圖片整合到一張單獨(dú)的圖片中
這樣帶來的好處就是 減少你的網(wǎng)站的HTTP請(qǐng)求數(shù)量, 但是帶來的缺點(diǎn)就是合并之后的圖片大小比較大, 如果這個(gè)圖片沒有加載出來 ,那么整個(gè)頁面都顯示不出來.
看了一下facebook 的雪碧圖 . 沒有所有的都放一張圖片 而是分開放.
把他按照 9 10 11 的順序排列
那么涉及到怎么來摳這個(gè)圖.自己慢慢試也能試出來,用工具更方便.
總體就是把他分成3 塊
雪碧奶牛 老外還是會(huì)起名字 , 太形象
直接點(diǎn)下邊就生成出來了. 牛牛牛
.icon{
display: flex;
}
.icon9{
background: url('image/facebook.png') no-repeat -1px -67px;
width: 28px;
height: 28px;
}
.icon10{
background: url('image/facebook.png') no-repeat -1px -1px;
width: 28px;
height: 28px;
}
.icon11{
background: url('image/facebook.png') no-repeat -1px -34px;
width: 28px;
height: 28px;
}
<div class="icon">
<div class="icon9"></div>
<div class="icon10"></div>
<div class="icon11"></div>
</div>
最后效果
2: Image Inline
將圖片的內(nèi)容內(nèi)嵌到html 當(dāng)中, 從而減少網(wǎng)站的http 請(qǐng)求數(shù)量
淘寶首頁找了一圈沒看見
這種不適合大圖片.因?yàn)楸旧碛胋ase64 的數(shù)據(jù) ,不會(huì)對(duì)圖片進(jìn)行壓縮等等. 效率不如webp 高. 但是對(duì)于小的icon 這樣可以減少一次http 請(qǐng)求
3: 使用矢量圖
使用SVG進(jìn)行矢量圖的繪制,使用iconfont解決icon問題
看這里阿里的iconfont ,想用的 登錄之后 下載就可以了
其實(shí)矢量圖就是畫出來的 .參照w3c
4: 在安卓下使用webp
WebP 的優(yōu)勢(shì)體現(xiàn)在它具有更優(yōu)的圖像數(shù)據(jù)壓縮算法，能帶來更小的圖片體積魄鸦，而且擁有肉眼識(shí)別無差異的圖像質(zhì)量拷窜；同時(shí)具備了無損和有損的壓縮模式、Alpha 透明以及動(dòng)畫的特性，在 JPEG 和 PNG 上的轉(zhuǎn)化效果都非常優(yōu)秀、穩(wěn)定和統(tǒng)一茵典。
淘寶首頁中有很多 webp 格式的圖片 .不舉例子了
在線壓縮圖片: 網(wǎng)站
壓縮完之后的 這個(gè)圖片從 6 kb 壓縮到2 kb .
確實(shí)看不出來啥區(qū)別....圖片壓縮對(duì)性能優(yōu)化影響還是蠻大的.
