本文欢迎分享与聚合，全文 转载 就不必了，尊重版权， 圈子 就这么大，若急用可以联系授权。
一、无法进一步压缩的 png图片
例如有如下所示的PNG图片（ 尺寸 1/2显示了），使用顶级的PNG工具压缩后还有122K。
原图地址这里： https://image.zhangxinxu .COM /image/ blog /202005/card.png
PNG尺寸大小示意如下：
如果项目就一张这样的图还好，要是页面一下子有很多这么个尺寸的PNG，那对首次加载的性能影响就非常明显了，例如下图4张卡片图就有500K。
由于卡片的背景也是复杂图形，边边角角必须要透明，改成 jpg 格式肯定不行（边角会变成纯色），就没有什么可以进一步优化的方法吗？
有，那就是借助CSS mask遮罩显著优化PNG图片的尺寸。
二、mask -i mage与PNG尺寸优化
mask-image 遮罩有这样一个功能，只有遮罩图片存在的区域才显示，那岂不是如果是一个边角透明的任意遮罩图，就可以让JPG图片边角的 白色 透明了。
方法可行，demo这里。
具体做法如下。
1. PNG转JPG
先把PNG图片保持成JPG，图片 质量 50%就足够了，如下图所示：
此时，图片的尺寸可以减小超过50%！
2. 根据PNG轮廓 制作 纯色PNG
PNG图片之所以尺寸大，就是因为色彩过于丰富，如果我们变成纯色，尺寸可以降低100倍不止。
此时的纯黑色颜色填充PNG图片的尺寸不足1K：
3. 使用遮罩让JPG边角白色透明
假设JPG卡片图使用的是 < img > 元素，HT ML 代码如下：
<img src="card.jpg">
使用如下的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. 遮罩图片的跨域限制
随着Ch rom e等浏览器的安全升级，遮罩图片目前有跨域访问限制，会有类似下面的 错误提示 ：
Access to image at ‘https://image.zhangxinxu测试数据/&helli p; /card-mask.png’ From ori gin ‘https://HdhCmsTestzhangxinxu测试数据’ has been blocked by CORS policy : No ‘Access-Control-Allow-Origin’ header is PR esent on the requested resource.
我们可以把纯色遮罩图变成base64格式的，例如：
img {
-webk IT -mask-image: url(data:image/png;base64,i vb ORw0KGgoAAAANSUhEUgAAAZQAAAJ8B am AAAArFErhAAAAFVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAASAQCkAAAABnRSTlMK PAM 81se4yTyxAAADc0lEQVR42uzYMUqDQRRG0SSC9R8La0WwFgWX4DqM4Ox/CbZaOGnvJOfs4FaP7+3+OrytY9tNHcY6Hq4m5Was40zK7VjHy+WkfM5T7sc6z QQ 8j3Wc5invYx1f85SxkmnJfqxku5Sz8t9h+RgL+5YSJKVISpGUIilFUoqkFP1O2a806Scb7Hj3NFb3+njcb0u9i6ZOUoKkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpRVKKp br JKZJSJKVISpGUIilFUoqkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpRVKKpBRJKZJSJKVISpGUIilFUoqkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpRVKKpBRJKZJSJKVISpGUIilFUoqkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpRVKKpBRJKZJSJKVISpGUIilFUoqkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpRVKKpBRJKZJSJKVISpGUIilFUoqkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpP+zPsQAAAAD ai H/raXQsg0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0S1 yy 8nDAMx ei ZnE8h53YFJIOeQIlJH/FL/JRjfjA06z6zn6+C/SEhOYeQURk2loHSvUPftKio25R3K5oqdXwhb4BQ+TmHkFEZOYeQURk5h5BRGC3B2DyU9EiWUVGRCyISU0mU8tpMyICP1Svoj9QgduxT1af xp J6VH6hY6LpTy1H fc 9isiYS/oBPlGYwAAAABJRU5ErkJggg == );
}
眼见为实，您可以狠狠地点击这里： PNG图片使用CSS遮罩尺寸优化demo
JPG格式卡片最终实现效果如下图所示（四个角透明了）：
三、优化后的效果对比
优化前后4张图大小对比如下：
原来 4张图片支持是458K，优化后的 图片尺寸 是197K+1K，大小减小了 56.8%@H_427_ 126 @ ！
酷儿~
mask-image 这种移动端很早很早就已经支持了，这里使用的又是传统语法，完全没有任何兼容性问题，大家可以放心使用。
总结
到此这篇关于借助CSS mask遮罩显著优化PNG图片的尺寸的 文章 就介绍到这了,更多相关css mask 遮罩内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 借助CSS mask遮罩显著优化PNG图片的尺寸(推荐) 全部内容，希望文章能够帮你解决 借助CSS mask遮罩显著优化PNG图片的尺寸(推荐) 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于借助CSS mask遮罩显著优化PNG图片的尺寸(推荐)的详细内容...