Quantcast
Channel: 前端性能 –张鑫旭-鑫空间-鑫生活
Viewing all articles
Browse latest Browse all 7

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

0
0

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9398
本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。

一、无法进一步压缩的PNG图片

例如有如下所示的PNG图片(尺寸1/2显示了),使用顶级的PNG工具压缩后还有122K。

卡片图片示意

原图地址这里:https://image.zhangxinxu.com/image/blog/202005/card.png

PNG尺寸大小示意如下:
PNG图片尺寸示意

如果项目就一张这样的图还好,要是页面一下子有很多这么个尺寸的PNG,那对首次加载的性能影响就非常明显了,例如下图4张卡片图就有500K。

多个卡片图尺寸

由于卡片的背景也是复杂图形,边边角角必须要透明,改成JPG格式肯定不行(边角会变成纯色),就没有什么可以进一步优化的方法吗?

边角需要透明

有,那就是借助CSS mask遮罩显著优化PNG图片的尺寸。

二、mask-image与PNG尺寸优化

mask-image遮罩有这样一个功能,只有遮罩图片存在的区域才显示,那岂不是如果是一个边角透明的任意遮罩图,就可以让JPG图片边角的白色透明了。

方法可行,demo这里

具体做法如下。

1. PNG转JPG

先把PNG图片保持成JPG,图片质量50%就足够了,如下图所示:

卡片图片示意

此时,图片的尺寸可以减小超过50%!

JPG图片的尺寸

2. 根据PNG轮廓制作纯色PNG

PNG图片之所以尺寸大,就是因为色彩过于丰富,如果我们变成纯色,尺寸可以降低100倍不止。

轮廓纯色填充

此时的纯黑色颜色填充PNG图片的尺寸不足1K:

填充PNG图片尺寸

3. 使用遮罩让JPG边角白色透明

假设JPG卡片图使用的是<img>元素,HTML代码如下:

<img src="card.jpg">

使用如下的CSS代码:

img {
    -webkit-mask-image: url(card-mask.png);
    mask-image: url(card-mask.png);
}

就可以有和原始122K大小PNG图片一样的效果的了,边角透明,尺寸还小。

因为card-mask.png的4个边角是透明的,所以card.jpg应用card-mask.png作为遮罩图片后,边角也跟着透明了。

4. 遮罩图片的跨域限制

随着Chrome等浏览器的安全升级,遮罩图片目前有跨域访问限制,会有类似下面的错误提示:

Access to image at ‘https://image.zhangxinxu.com/…/card-mask.png’ from origin ‘https://www.zhangxinxu.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

我们可以把纯色遮罩图变成base64格式的,例如:

img {
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZQAAAJ8BAMAAAArFErhAAAAFVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAASAQCkAAAABnRSTlMKPam81se4yTyxAAADc0lEQVR42uzYMUqDQRRG0SSC9R8La0WwFgWX4DqM4Ox/CbZaOGnvJOfs4FaP7+3+OrytY9tNHcY6Hq4m5Was40zK7VjHy+WkfM5T7sc6zqQ8j3Wc5invYx1f85SxkmnJfqxku5Sz8t9h+RgL+5YSJKVISpGUIilFUoqkFP1O2a806Scb7Hj3NFb3+njcb0u9i6ZOUoKkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpRVKKpBRJKZJSJKVISpGUIilFUoqkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpRVKKpBRJKZJSJKVISpGUIilFUoqkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpRVKKpBRJKZJSJKVISpGUIilFUoqkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpRVKKpBRJKZJSJKVISpGUIilFUoqkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpRVKKpBRJKZJSJKVISpGUIilFUoqkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpP+zPsQAAAADAIH/raXQsg0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0S1Yy8nDAMxEIZnE8h53YFJIOeQIlJH/FL/JRjfjA06z6zn6+C/SEhOYeQURk2loHSvUPftKio25R3K5oqdXwhb4BQ+TmHkFEZOYeQURk5h5BRGC3B2DyU9EiWUVGRCyISU0mU8tpMyICP1Svoj9QgduxT1afxpJ6VH6hY6LpTy1HFc9isiYS/oBPlGYwAAAABJRU5ErkJggg==);
}

眼见为实,您可以狠狠地点击这里:PNG图片使用CSS遮罩尺寸优化demo

JPG格式卡片最终实现效果如下图所示(四个角透明了):

实现的效果截图

三、优化后的效果对比

优化前后4张图大小对比如下:

图片大小前后对比

原来4张图片支持是458K,优化后的图片尺寸是197K+1K,大小减小了56.8%

酷儿~

mask-image这种移动端很早很早就已经支持了,这里使用的又是传统语法,完全没有任何兼容性问题,大家可以放心使用。

是不是又学到了一招?

欢迎转发,欢迎分享。

本文为原创文章,欢迎分享,勿全文转载,如果实在喜欢,可收藏,永不过期,且会及时更新知识点及修正错误,阅读体验也更好。
本文地址:https://www.zhangxinxu.com/wordpress/?p=9398

(本篇完)


Viewing all articles
Browse latest Browse all 7

Latest Images

Trending Articles





Latest Images