這篇文章主要介紹如何借助CSS mask遮罩顯著優(yōu)化PNG圖片的尺寸，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設,柞水企業(yè)網(wǎng)站建設,柞水品牌網(wǎng)站建設,網(wǎng)站定制,柞水網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,柞水網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

一、無法進一步壓縮的PNG圖片

例如有如下所示的PNG圖片（尺寸1/2顯示了），使用頂級的PNG工具壓縮后還有122K。

原圖地址這里： https://image.zhangxinxu.com/image/blog/202005/card.png

PNG尺寸大小示意如下：

如果項目就一張這樣的圖還好，要是頁面一下子有很多這么個尺寸的PNG，那對首次加載的性能影響就非常明顯了，例如下圖4張卡片圖就有500K。

由于卡片的背景也是復雜圖形，邊邊角角必須要透明，改成JPG格式肯定不行（邊角會變成純色），就沒有什么可以進一步優(yōu)化的方法嗎？

有，那就是借助CSS mask遮罩顯著優(yōu)化PNG圖片的尺寸。

二、mask-image與PNG尺寸優(yōu)化

mask-image 遮罩有這樣一個功能，只有遮罩圖片存在的區(qū)域才顯示，那豈不是如果是一個邊角透明的任意遮罩圖，就可以讓JPG圖片邊角的白色透明了。

方法可行，demo這里。

具體做法如下。

1. PNG轉(zhuǎn)JPG

先把PNG圖片保持成JPG，圖片質(zhì)量50%就足夠了，如下圖所示：

此時，圖片的尺寸可以減小超過50%！

2. 根據(jù)PNG輪廓制作純色PNG

PNG圖片之所以尺寸大，就是因為色彩過于豐富，如果我們變成純色，尺寸可以降低100倍不止。

此時的純黑色顏色填充PNG圖片的尺寸不足1K：

3. 使用遮罩讓JPG邊角白色透明

假設JPG卡片圖使用的是 元素，HTML代碼如下：

使用如下的CSS代碼：

img {
    -webkit-mask-image: url(card-mask.png);
    mask-image: url(card-mask.png);
}

就可以有和原始122K大小PNG圖片一樣的效果的了，邊角透明，尺寸還小。

因為card-mask.png的4個邊角是透明的，所以card.jpg應用card-mask.png作為遮罩圖片后，邊角也跟著透明了。

4. 遮罩圖片的跨域限制

隨著Chrome等瀏覽器的安全升級，遮罩圖片目前有跨域訪問限制，會有類似下面的錯誤提示：

Access to image at ‘https://image.zhangxinxu.com/…/card-mask.png’ from origin ‘https://www.zhangxinxu.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

我們可以把純色遮罩圖變成base64格式的，例如：

img {
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZQAAAJ8BAMAAAArFErhAAAAFVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAASAQCkAAAABnRSTlMKPam81se4yTyxAAADc0lEQVR42uzYMUqDQRRG0SSC9R8La0WwFgWX4DqM4Ox/CbZaOGnvJOfs4FaP7+3+OrytY9tNHcY6Hq4m5Was40zK7VjHy+WkfM5T7sc6zqQ8j3Wc5invYx1f85SxkmnJfqxku5Sz8t9h+RgL+5YSJKVISpGUIilFUoqkFP1O2a806Scb7Hj3NFb3+njcb0u9i6ZOUoKkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpRVKKpBRJKZJSJKVISpGUIilFUoqkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpRVKKpBRJKZJSJKVISpGUIilFUoqkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpRVKKpBRJKZJSJKVISpGUIilFUoqkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpRVKKpBRJKZJSJKVISpGUIilFUoqkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpRVKKpBRJKZJSJKVISpGUIilFUoqkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpP+zPsQAAAADAIH/raXQsg0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0S1Yy8nDAMxEIZnE8h63YFJIOeQIlJH/FL/JRjfjA06z6zn6+C/SEhOYeQURk2loHSvUPftKio25R3K5oqdXwhb4BQ+TmHkFEZOYeQURk5h6BRGC3B2DyU9EiWUVGRCyISU0mU8tpMyICP1Svoj9QgduxT1afxpJ6VH6hY6LpTy1HFc9isiYS/oBPlGYwAAAABJRU5ErkJggg==);
}

眼見為實，您可以狠狠地點擊這里： PNG圖片使用CSS遮罩尺寸優(yōu)化demo

JPG格式卡片最終實現(xiàn)效果如下圖所示（四個角透明了）：

三、優(yōu)化后的效果對比

優(yōu)化前后4張圖大小對比如下：

原來4張圖片支持是458K，優(yōu)化后的圖片尺寸是197K+1K，大小減小了56.8% ！

酷兒~

mask-image 這種移動端很早很早就已經(jīng)支持了，這里使用的又是傳統(tǒng)語法，完全沒有任何兼容性問題，大家可以放心使用。

以上是“如何借助CSS mask遮罩顯著優(yōu)化PNG圖片的尺寸”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：如何借助CSSmask遮罩顯著優(yōu)化PNG圖片的尺寸-創(chuàng)新互聯(lián)
標題URL：http://weahome.cn/article/dcgiog.html