使用 CSS MASK 遮罩优化 PNG 图片

使用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://img.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

最终效果

以上，有问题评论留言反馈。