借助CSS mask遮罩显著优化PNG图片的尺寸(推荐)

本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 一、无法进一步压缩的PNG图片 例如有如下所示的PNG图片(尺寸1/2显示了),使用顶级的PNG工具压缩后还有122K。 原图地址这里: https://image.zhangxinxu.com/image/blog/202005/card.png PNG尺寸大小示意如下: 如果项目就一张这样的图还好,要是页面一下子有很多这么个尺寸的PNG,那对首次加载的性能影响就非常明显了,例如下图4张卡片图就有500K。 由于卡片的背景也是复杂图形,边边角角必须要透明,改成JPG格式肯定不行(边角会变成纯色),就没有