CSS マスクを使用して PNG 画像のサイズを大幅に最適化します (推奨)

この記事は共有および集約することを歓迎します。全文を転載する必要はありません。著作権を尊重してください。サークルはとても小さいです。緊急に必要な場合は、許可を得るためにご連絡ください。

1. それ以上圧縮できないPNG画像

たとえば、以下に示す PNG 画像 (1/2 サイズで表示) は、トップの PNG ツールを使用して圧縮した後でも 122K のままです。

元の画像のアドレスはこちらです: https://image.zhangxinxu.com/image/blog/202005/card.png

PNGのサイズは次のとおりです。

プロジェクトにこのような画像が 1 つだけであれば問題ありません。ただし、ページにこのサイズの PNG が一度に多数ある場合、最初の読み込みでパフォーマンスへの影響が非常に顕著になります。たとえば、下の図の 4 つのカード画像は 500K です。

カードの背景も複雑なグラフィックなので、端や角は透明にする必要があります。JPG 形式に変更しても確実に機能しません (端や角が単色になります)。さらに最適化する方法はありませんか?

はい、CSS マスクの助けを借りて PNG 画像のサイズを大幅に最適化します。

2. マスク画像とPNGサイズの最適化

mask-imageマスクは、マスク画像が存在する領域のみを表示する機能を持っています。そのため、透明な角を持つ任意のマスク画像であれば、JPG 画像の白い角を透明にすることができます。

この方法は実行可能です。デモはここにあります。

具体的な手順は以下のとおりです。

1.PNGをJPGに変換する

まず、PNG 画像を JPG に保存します。以下に示すように、画像品質の 50% で十分です。

この時点で、画像サイズは 50% 以上削減できます。

2. PNGアウトラインに基づいて単色のPNGを作成する

PNG画像のサイズが大きいのは、色が濃すぎるからです。単色にすれば、サイズは100分の1以下に縮小できます。

現時点では、純黒で塗りつぶされた PNG 画像のサイズは 1K 未満です。

3.マスクを使用してJPGの角を白く透明にする

JPG カード画像が<img>要素を使用していると仮定すると、HTML コードは次のようになります。

<img src="カード.jpg">

次の CSS コードを使用します。

画像 {
    -webkit-マスクイメージ: url(card-mask.png);
    マスク画像: url(card-mask.png);
}

角が透明でサイズが小さい、元の 122K PNG 画像と同じ効果が得られます。

card-mask.png の四隅は透明なので、card.jpg が card-mask.png をマスク画像として適用すると、四隅も透明になります。

4. マスク画像のクロスドメイン制限

Chrome などのブラウザのセキュリティ アップグレードにより、現在マスク画像へのクロスドメイン アクセスが制限されており、次のようなエラー プロンプトが表示されます。

'https://image.zhangxinxu.com/…/card-mask.png' にある画像へのアクセス (オリジン 'https://www.zhangxinxu.com') は CORS ポリシーによってブロックされました: 要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません。

ソリッドカラーマスクイメージを base64 形式に変換できます。次に例を示します。

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

百聞は一見にしかず、こちらをクリックしてください: CSSマスクを使用したPNG画像サイズの最適化デモ

JPG 形式のカードの最終的な効果は次の図に示されています (4 つの角は透明です)。

3. 最適化された効果の比較

最適化前後の 4 つの画像のサイズ比較は次のとおりです。

4 枚の画像の元のサイズは 458K ですが、最適化された画像のサイズは 197K+1K となり、サイズが56.8%削減されました。

クィア〜

mask-imageモバイル端末でも以前からサポートされており、ここでは従来の構文が使われています。互換性の問題も全くないので、安心して使えます。

要約する

CSS マスクを使用して PNG 画像のサイズを大幅に最適化する方法についての記事はこれで終わりです。CSS マスクに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。