Größe von PNG-Bildern mit CSS-Maske deutlich optimieren (empfohlen)

Dieser Artikel darf gerne geteilt und zusammengefasst werden. Es ist nicht erforderlich, den vollständigen Text erneut abzudrucken. Bitte respektieren Sie das Urheberrecht. Der Kreis ist so klein. Wenn Sie ihn dringend benötigen, können Sie uns für eine Genehmigung kontaktieren.

1. PNG-Bilder, die nicht weiter komprimiert werden können

Beispielsweise ist das unten gezeigte PNG-Bild (in halber Größe dargestellt) nach der Komprimierung mit den besten PNG-Tools immer noch 122 KB groß.

Die Adresse des Originalbildes lautet: https://image.zhangxinxu.com/image/blog/202005/card.png

Die PNG-Größe ist wie folgt:

Wenn das Projekt nur ein solches Bild hat, ist das in Ordnung. Wenn sich jedoch viele PNGs dieser Größe gleichzeitig auf der Seite befinden, sind die Leistungseinbußen beim ersten Laden sehr deutlich. Beispielsweise sind die vier Kartenbilder in der Abbildung unten 500 KB groß.

Da der Hintergrund der Karte ebenfalls eine komplexe Grafik ist, müssen die Kanten und Ecken transparent sein. Eine Konvertierung ins JPG-Format wird definitiv nicht funktionieren (die Kanten und Ecken werden einfarbig). Gibt es keine Möglichkeit, das noch weiter zu optimieren?

Ja, das heißt, die Größe von PNG-Bildern mit Hilfe einer CSS-Maske lässt sich deutlich optimieren.

2. Maskenbild- und PNG-Größenoptimierung

mask-image hat die Funktion, dass nur der Bereich angezeigt wird, in dem das Maskenbild vorhanden ist. Wenn es sich also um ein beliebiges Maskenbild mit transparenten Ecken handelt, können die weißen Ecken des JPG-Bildes transparent gemacht werden.

Die Methode ist durchführbar, die Demo gibt es hier.

Die einzelnen Schritte sind wie folgt.

1. PNG in JPG konvertieren

Speichern Sie zunächst das PNG-Bild als JPG. 50 % der Bildqualität reichen aus, wie unten gezeigt:

An dieser Stelle kann die Bildgröße um mehr als 50 % reduziert werden!

2. Erstellen Sie ein einfarbiges PNG basierend auf der PNG-Kontur

Der Grund, warum PNG-Bilder groß sind, liegt darin, dass die Farben zu kräftig sind. Wenn wir sie in Volltonfarben umwandeln, kann die Größe um mehr als das Hundertfache reduziert werden.

Derzeit beträgt die Größe des rein schwarz gefüllten PNG-Bildes weniger als 1 KB:

3. Verwenden Sie eine Maske, um die JPG-Ecken weiß und transparent zu machen

Vorausgesetzt, das JPG-Kartenbild verwendet das Element <img> , lautet der HTML-Code wie folgt:

<img src="Karte.jpg">

Verwenden Sie den folgenden CSS-Code:

img {
    -webkit-mask-image: URL (Kartenmaske.png);
    Maskenbild: URL (Kartenmaske.png);
}

Sie können denselben Effekt wie mit dem ursprünglichen 122K-PNG-Bild erzielen, mit transparenten Ecken und kleinerer Größe.

Da die vier Ecken von card-mask.png transparent sind, werden die Ecken ebenfalls transparent, nachdem card.jpg card-mask.png als Maskenbild angewendet hat.

4. Domänenübergreifende Einschränkungen für Maskenbilder

Mit dem Sicherheitsupgrade von Chrome und anderen Browsern gibt es derzeit domänenübergreifende Zugriffsbeschränkungen für Maskenbilder und es werden Fehlermeldungen ähnlich der folgenden angezeigt:

Der Zugriff auf das Bild unter „https://image.zhangxinxu.com/…/card-mask.png“ vom Ursprung „https://www.zhangxinxu.com“ wurde durch die CORS-Richtlinie blockiert: Auf der angeforderten Ressource ist kein Header „Access-Control-Allow-Origin“ vorhanden.

Wir können das Bild der Vollfarbmaske beispielsweise in das Base64-Format konvertieren:

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

Sehen heißt glauben. Klicken Sie hier: Demo zur Optimierung der PNG-Bildgröße mithilfe der CSS-Maske

Der endgültige Effekt der Karte im JPG-Format ist in der folgenden Abbildung dargestellt (die vier Ecken sind transparent):

3. Vergleich optimierter Effekte

Der Größenvergleich der vier Bilder vor und nach der Optimierung sieht wie folgt aus:

Die Originalgröße der 4 Bilder beträgt 458 K, und die optimierte Bildgröße beträgt 197 K+1 K, was einer Größenreduzierung von 56,8 % entspricht!

Schwul~

mask-image wird auf Mobilgeräten schon seit langem unterstützt und hier wird die traditionelle Syntax verwendet. Es gibt überhaupt keine Kompatibilitätsprobleme, Sie können es also bedenkenlos verwenden.

Zusammenfassen

Dies ist das Ende dieses Artikels darüber, wie man die Größe von PNG-Bildern mithilfe von CSS-Masken deutlich optimieren kann. Weitere relevante CSS-Maskeninhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!