这篇文章主要介绍如何借助CSS面具遮罩显著优化PNG图片的尺寸,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>一、无法进一步压缩的PNG图片
例如有如下所示的PNG图片(尺寸半显示了),使用顶级的PNG工具压缩后还有122 k。
原图地址这里:https://image.zhangxinxu.com/image/blog/202005/card.png
PNG尺寸大小示意如下:
如果项目就一张这样的图还好,要是页面一下子有很多这么个尺寸的PNG,那对首次加载的性能影响就非常明显了,例如下图4张卡片图就有500 k。
由于卡片的背景也是复杂图形,边边角角必须要透明,改成JPG格式肯定不行(边角会变成纯色),就没有什么可以进一步优化的方法吗?
有,那就是借助CSS面具遮罩显著优化PNG图片的尺寸。
<强>二,mask-image与PNG尺寸优化
<代码> mask-image 遮罩有这样一个功能,只有遮罩图片存在的区域才显示,那岂不是如果是一个边角透明的任意遮罩图,就可以让JPG图片边角的白色透明了。
方法可行,演示这里。
具体做法如下。
1。PNG转JPG
先把PNG图片保持成JPG,图片质量50%就足够了,如下图所示:
此时,图片的尺寸可以减小超过50% !
2。根据PNG轮廓制作纯色PNG
PNG图片之所以尺寸大,就是因为色彩过于丰富,如果我们变成纯色,尺寸可以降低100倍不止。
此时的纯黑色颜色填充PNG图片的尺寸不足1 k:
3。使用遮罩让JPG边角白色透明
假设JPG卡片图使用的是<代码> & lt; img> 元素,HTML代码如下:
使用如下的css代码:
就可以有和原始122 k大小PNG图片一样的效果的了,边角透明,尺寸还小。
因为card-mask.png的4个边角是透明的,所以card.jpg应用card-mask.png作为遮罩图片后,边角也跟着透明了。
4。遮罩图片的跨域限制
随着Chrome等浏览器的安全升级,遮罩图片目前有跨域访问限制,会有类似下面的错误提示:
获取图像,而https://image.zhangxinxu.com/&白马王子/card-mask.png&,从起源,而https://www.zhangxinxu.com&,,已经被歌珥政策:不,只要Access-Control-Allow-Origin&,头存在alt="如何借助CSS面具遮罩显著优化PNG图片的尺寸">
<强>三、优化后的效果对比
优化前后4张图大小对比如下:
原来4张图片支持是458 k,优化后的图片尺寸是197 k + 1 k,大小减小了<大> 56.8% !
酷儿~
<代码> mask-image 这种移动端很早很早就已经支持了,这里使用的又是传统语法,完全没有任何兼容性问题,大家可以放心使用。
以上是“如何借助CSS面具遮罩显著优化PNG图片的尺寸”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
如何借助CSS面具遮罩显著优化PNG图片的尺寸
