css mask 05/18/2020
最近更新于:

使用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

最终效果


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