Leistungsstarke Bildkomprimierung für die WEB-Entwicklung

1. Reduzieren Sie die Bildgröße

Wenn viele Bilder vorhanden sind, ist das Reduzieren der Bildgröße der direkteste Weg, die Download-Geschwindigkeit zu erhöhen.
1. Verwenden Sie PNG8 anstelle von GIF (nicht animiertes Bild), da PNG8 den gleichen Effekt hat, die Bildgröße jedoch kleiner als GIF ist.

2. Verwenden Sie Fireworks, um PNG-Bilder zu verarbeiten. Viele PNG-Bilder in unseren Produkten werden von Künstlern direkt mit Photoshop exportiert.
Später habe ich den Künstler gebeten, Fireworks zum Verarbeiten des PNG zu verwenden (die ungefähre Methode besteht darin, es als PNG8 zu speichern und die Hintergrundfarbe zu löschen).
Nach der Verarbeitung wird die Größe des 100K-Bildes grundsätzlich um 3/4 reduziert, aber auch die Bildqualität wird leicht reduziert, es hängt davon ab, ob Sie das akzeptieren können.

3. Verwenden Sie Smush.it (http://www.smushit.com/ysmush.it/), um Bilder zu komprimieren. Smush.it ist eine Online-Bildkomprimierungs-Website des YUI-Teams.
Diese Website entfernt einige Metadaten aus dem Bild, ohne die Qualität des Originalbilds zu beeinträchtigen, sodass Sie diese Website sicher zur Komprimierung verwenden können.
Aber auch dieses Komprimierungsverhältnis ist relativ begrenzt.


2. Bilder zusammenführen und Bilder teilen

1 Jeder weiß, dass Sprites Bilder zusammenführen, um die Anzahl der Anfragen zu reduzieren und die Leistung zu verbessern. Aber führen Sie nicht zu viele Bilder zusammen,
beeinträchtigt die Anzeige dieser Seite aufgrund dieses einen Bildes.

2. Manchmal müssen wir ein großes Bild in mehrere kleine Bilder aufteilen. Beispielsweise gibt es nur wenige Bilder auf der Produkthomepage und nur ein großes Bannerbild.
Da Browser Bilder gleichzeitig herunterladen können, ist die Downloadgeschwindigkeit langsamer, wenn Sie sie nicht aufteilen und nur ein großes Bild verwenden.


3. Transparente Bildverarbeitung

IE6 kann keine transparenten PNG-Bilder anzeigen, was vielen Entwicklern Kopfzerbrechen bereitet. Im Folgenden werden die Vor- und Nachteile verschiedener Methoden vorgestellt.

1. Verwenden Sie AlphaImageLoader, IE6 unterstützt Filter, verwenden Sie den folgenden CSS-Code, damit IE6 PNG unterstützt

#some-element { 
background: url(image.png); 
_background: none; 
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', 
sizingMethod='crop'); 
}

Vorteile: Einfach zu verwenden
Nachteile: Der Leistungsverlust ist enorm, da AlphaImageLoader viele Ressourcen für die Verarbeitung transparenter Bilder verbraucht.
Darüber hinaus wird die gesamte Verarbeitung von AlphaImageLoader synchron im selben Thread ausgeführt. Wenn also zu viele AlphaImageLoader vorhanden sind, wird das Rendern der Benutzeroberfläche blockiert.
Mit _filter kann IE7 es auch erkennen. Tatsächlich kann IE7 transparente PNG-Bilder erkennen. Wenn Sie den obigen Code unter IE7 verwenden, verwendet IE7 das Bild nicht direkt, sondern verwendet AlphaImageLoader.
Hinweis: Es wird persönlich empfohlen, die Verwendung von AlphaImageLoader so weit wie möglich zu vermeiden

2
Mit DD_belatedPNG (http://www.dillerdesign.com/experiment/DD_belatedPNG/) können Sie alle transparenten Bilder auf der Benutzeroberfläche problemlos auf die gleiche Weise verarbeiten.
Vorteile: Einfach zu verwenden (einfacher als AlphaImageLoader)
Nachteile: Wenn auf der Seite viele Bilder verarbeitet werden müssen, ist die Geschwindigkeit relativ langsam und die Bilder können nicht dynamisch geändert werden.

3. VML
IE6 unterstützt VML, VML kann transparente Bilder verwenden, der Code lautet wie folgt:
Ändern Sie den HTML-Code-Header
html xmlns ="http://www.w3.org/1999/xhtml" xmlns:v > ="text/css" > style="color: rgb(128, 0, 0);">style > 0);">head >
body >
v:image src ="image.png" />
span style="color: rgb(128, 0, 0);">body > 0);">html >


Vorteile: gute Leistung, hohe Geschwindigkeit
Nachteile: Die Verwendung ist kompliziert und unterstützt keine Browser wie Firefox. Es muss festgestellt werden, ob verschiedene Browser unterschiedliche HTML-Codes ausgeben.

4. Laden Sie Bilder von mehreren Domainnamen herunter

Da jeder Browser beispielsweise nur feste Anfragen an denselben Domänennamen gleichzeitig senden kann, scheint IE6 zwei Anfragen zu haben, sodass Sie mehrere Domänennamen öffnen können, um Bildressourcen anzufordern.
Zum Beispiel img1.abc.com, img2.abc.com. Öffnen Sie jedoch nicht zu viele Domänennamen, da das Auflösen von Domänennamen und das Öffnen neuer Verbindungen einige Zeit in Anspruch nimmt. Wenn zu viele Domänennamen vorhanden sind, kann es langsamer sein. Im Allgemeinen reichen 2-4 Domainnamen aus.

5. Hintergrundbilder unter IE6 zwischenspeichern

Das Zwischenspeichern von IE6-Hintergrundbildern ist eine problematische Sache. Viele Leute wissen, dass sie das folgende JS verwenden müssen, um IE6-Hintergrundbilder zwischenspeichern zu lassen.
document.execCommand("BackgroundImageCache", false, true);
}catch(e){}
Aber der Effekt ist nicht sehr gut, wenn die Maus bewegt wird, um das Hintergrundbild zu ändern, sendet IE6 immer eine Bildanfrage (auch wenn das Hintergrundbild heruntergeladen wurde).
Obwohl das Rückgabeergebnis 304 ist, dauert es immer noch viel Zeit. In diesem Fall können Sie die folgende Problemumgehung verwenden:
Verwenden Sie ein DIV-Element direkt auf der Seite, um das Bild zu laden, damit das geladene Bild wirklich zwischengespeichert werden kann und keine Anfrage gesendet wird, wenn die Maus bewegt wird.

6. Bilder vorab laden

Verwenden Sie den folgenden Code, um Bilder für die nächste Seite vorzuladen, nachdem die Seite geladen wurde, ist es nicht erforderlich, Bilder herunterzuladen


Oben geht es um Bildkomprimierung und WEB-Entwicklung. Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!