Significantly optimize PNG image size with CSS mask (recommended)

Time:2021-5-7

This article is welcome to share and aggregate, full text reprint is not necessary, respect copyright, the circle is so big, if urgent need can contact authorization.

1、 Png images that cannot be further compressed

For example, there is a PNG image as shown below (size 1 / 2 is shown), and there is still 122k after compression with top-level PNG tools.

The original address is here: https://image.zhangxinxu.com/image/blog/202005/card.png

The size of PNG is as follows:

If the project has only one picture like this, and if the page has many PNGS of this size all at once, the impact on the performance of the first loading will be very obvious. For example, the four card pictures in the figure below have 500K.

As the background of the card is also complex graphics, the corners must be transparent, and it is certainly not possible to change it to JPG format (the corners will become solid color). Is there no way to further optimize it?

Yes, that is to use CSS mask to significantly optimize the size of PNG images.

2、 Mask image and PNG size optimization

mask-imageThe mask has such a function that only the area where the mask image exists can be displayed. If it is an arbitrary mask image with transparent edges and corners, it can make the edges and corners of JPG image white and transparent.

The method is feasible, demo here.

The specific methods are as follows.

1. PNG to jpg

First, keep the PNG image as JPG, and 50% of the image quality is enough, as shown in the figure below:

At this point, the size of the picture can be reduced by more than 50%!

2. Make solid PNG according to the outline of PNG

The reason why PNG pictures are large in size is that they have too many colors. If we turn to solid colors, the size can be reduced by more than 100 times.

The size of PNG picture filled with pure black color is less than 1K

3. Use mask to make JPG corners white and transparent

Suppose that the JPG card chart uses the<img>The HTML code is as follows:


<img src="card.jpg">

Use the following CSS code:


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

You can have the same effect as the original 122k PNG image, with transparent edges and small size.

Because the four corners of card-mask.png are transparent, the corners of card.jpg become transparent after card-mask.png is used as a mask image.

4. Cross domain restriction of mask image

With the security upgrade of chrome and other browsers, the mask image currently has cross domain access restrictions, and there will be an error similar to the following:

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.

We can change the solid color mask graph into Base64 format

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==);
}

Seeing is believing, you can click here: PNG image size optimization demo using CSS mask

The final effect of JPG format card is shown in the figure below (four corners are transparent)

3、 Effect comparison after optimization

The size comparison of the four images before and after optimization is as follows:

The original 4 pictures support 458k, the optimized picture size is 197k + 1K, the size is reduced56.8%

Queer~

mask-imageThis kind of mobile terminal has been supported for a long time, and the traditional syntax is used here. There is no compatibility problem at all, so you can rest assured to use it.

summary

This article about using CSS mask to significantly optimize the size of PNG image is introduced here. For more relevant CSS mask content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!