文章摘要moonshot-v1-8k
本文介绍了使用CSS中的mask-image属性来优化PNG图片的方法。作者通过使用PS将PNG图像输出为JPEG图像并转换为低质量图像，然后使用填充轮廓为单色的方法将其转换为PNG格式，降低图像大小，并在相应图像元素中设置mask-image属性来看到效果。作者还提到，由于浏览器的跨域安全策略会导致直接引用遮罩图片失败，因此使用base64遮罩图片替代原始URL是一种解决方案，但会增加文件大小。最后，作者鼓励读者在评论中反馈问题。
使用CSS优化图片
当我们使用工具优化图片到不能再优化时，这时候可以使用CSS的 mask-image 来进行一些操作..
mask-image
正确的使用该属性能优化不少图片体积（不过过程繁琐，一般情况下还是没人用的），mask-image 相当于ps里的遮罩。
实践使用
为了验证该操作的可行性，下面走个流程，首先是原图（尺寸：500x500px 大小：21.8kb）
使用ps将png原图输出为jpg图片（输出较低质量，如50%即可）转为jpg会大幅降低png的大小（jpg大小：15kb）
接着使用ps将原图轮廓填充纯色（较少的色彩会大幅降低png图片的大小）并输出png图片（png大小：2.9kb）
然后在相应图片元素设置 mask-image(-webkit-mask-image) 属性即可看到效果。
img {
-webkit-mask-image: url(mask.png);
mask-image: url(mask.png);
}
遮罩图片的跨域限制
浏览器的跨域安全策略会导致直接引用遮罩图片失败，返回一些错误信息
Access to image at ‘https://imgs.2broear.com/notes/css-mask-image_200518/mask.png’ from origin ‘https://blog.2broear.com/’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
跨域解决方案
使用 base64 遮罩图片替代原有url即可（然而3kb的遮罩图转换成base64后还大了2kb..）
img {
mask-image: url('data:image/png;base64,iVBORw0KGgoAAAA...');
-webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAA...');
}
base64在线转换： 文件转 Base64
原图 2kb，转换 base64 后 5kb
最终效果
以上，有问题评论留言反馈。
