Significantly optimize the size of PNG images with CSS mask (recommended)

This article is welcome to be shared and aggregated. There is no need to reprint the full text. Please respect copyright. The circle is so small. If you need it urgently, you can contact us for authorization.

1. PNG images that cannot be further compressed

For example, the PNG image shown below (shown at 1/2 size) is still 122K after being compressed using the top PNG tools.

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

The PNG size is as follows:

If the project has only one such picture, it is fine. However, if there are many PNGs of this size on the page at once, the performance impact on the first load will be very obvious. For example, the four card pictures in the figure below are 500K.

Since the background of the card is also a complex graphic, the edges and corners must be transparent. Changing it to JPG format will definitely not work (the edges and corners will become a solid color). Is there no way to further optimize it?

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

2. Mask-image and PNG size optimization

mask-image mask has such a function that only the area where the mask image exists is displayed. So if it is an arbitrary mask image with transparent corners, then the white corners of the JPG image can be made transparent.

The method is feasible, demo is here.

The specific steps are as follows.

1. Convert PNG to JPG

First save the PNG image to JPG, 50% of the image quality is enough, as shown below:

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

2. Make a solid color PNG based on the PNG outline

The reason why PNG images are large in size is because the colors are too rich. If we turn them into solid colors, the size can be reduced by more than 100 times.

At this time, the size of the pure black filled PNG image is less than 1K:

3. Use a mask to make the JPG corners white and transparent

Assuming that the JPG card image uses the <img> element, 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 get the same effect as the original 122K PNG image, with transparent corners and smaller size.

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

4. Cross-domain restrictions on mask images

With the security upgrade of Chrome and other browsers, there are currently cross-domain access restrictions on mask images, and there will be error prompts 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 convert the solid color mask image into base64 format, for example:

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 the JPG format card is shown in the following figure (the four corners are transparent):

3. Comparison of optimized effects

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

The original size of 4 pictures is 458K, and the optimized picture size is 197K+1K, which is a 56.8% reduction in size!

Queer~

mask-image has been supported on mobile devices for a long time, and the traditional syntax is used here. There are no compatibility issues at all, so you can use it with confidence.

Summarize

This is the end of this article about how to significantly optimize the size of PNG images with the help of CSS mask. For more relevant CSS mask content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!