HTTP ArchieveStatistiken zufolge macht Bildinhalt bereits 62 % des gesamten Inhalts im Internet aus, was bedeutet, dass mehr als die Hälfte des Datenverkehrs und der Zeit für das Herunterladen von Bildern aufgewendet wird. Aus Sicht der Performance-Optimierung sind Bilder definitiv einer der Hotspots und Kernpunkte. Google PageSpeed oder Yahoos 14 Regeln zur Performance-Optimierung betrachten die Bildoptimierung allesamt als wichtige Optimierungsmethode. Dieser Artikel behandelt alle Aspekte der Web-Bildoptimierung, von der grundlegenden Auswahl des Bildformats bis hin zu responsiven Bildern, die noch nicht breit unterstützt werden.
Ich finde sehr gut, was Google Web Fundamentals sagt:
Die Bildoptimierung ist sowohl Kunst als auch Wissenschaft. Sie ist Kunst, weil es keine einzige beste spezifische Lösung für die Komprimierung eines einzelnen Bildes gibt. Sie ist Wissenschaft, weil viele ausgereifte Methoden und Algorithmen die Bildgröße deutlich reduzieren können. Um die optimalen Einstellungen für ein Bild zu finden, ist eine sorgfältige Analyse über viele Dimensionen hinweg erforderlich: Formatmöglichkeiten, Inhalt der kodierten Daten, Pixelabmessungen und mehr.
Müssen Sie wirklich Bilder verwenden?
Brauchen Sie wirklich ein Bild, um den gewünschten Effekt zu erzielen? Das ist die erste Frage, die Sie sich stellen sollten. Browser und Webstandards haben sich extrem schnell weiterentwickelt. Ich erinnere mich, dass vor ein paar Jahren, als ich einen Videoplayer mit Microsoft Silverlight 1.0 schrieb, chinesischer Text nicht mit benutzerdefinierten Schriftarten angezeigt werden konnte, also schrieb ich eine Menge schrecklichen Code, der den benötigten Text als Bilder auf dem Server generierte und sie zwischenspeicherte. Sie waren für Benutzer langsam herunterzuladen, und Suchmaschinen konnten diesen Text überhaupt nicht indexieren.
Aber jetzt ist alles anders. Viele Effekte (Verläufe, Schatten, abgerundete Ecken usw.) können mit reinem HTML, CSS, SVG usw. umgesetzt werden. Die Umsetzung dieser Effekte erfordert nur wenige Zeilen Code oder höchstens das Laden einer zusätzlichen Bibliothek (ein gewöhnliches Foto im Vergleich zueine sehr leistungsstarke Effektbibliothekist ebenfalls viel größer). Diese Effekte beanspruchen nicht nur sehr wenig Platz, sondern funktionieren auch gut auf verschiedenen Geräten und Auflösungen und können auf älteren Browsern elegant degradiert werden. Daher sollten alternative Technologien, wenn sie existieren, zuerst gewählt werden, und echte Bilder sollten nur hinzugefügt werden, wenn Bilder unvermeidbar sind.
Alternative Technologien
- CSS-Effekte und CSS-Animationen. Sie bieten auflösungsunabhängige Effekte, werden bei jeder Auflösung und Zoomstufe klar angezeigt und beanspruchen sehr wenig Platz.
- Webfonts. Mittlerweile werden sogar viele Icon-Bibliotheken in Form von Schriftarten bereitgestellt, wodurch die Durchsuchbarkeit von Text erhalten bleibt und gleichzeitig die Anzeigestile erweitert werden.
Frontend-Entwickler sollten idealerweise die Kommunikation mit Designern und Produktmanagern aufrechterhalten,um ihnen zu helfen zu verstehen, welche Effekte "einfach, effizient und wartbar" sind. Schließlich kann bei CSS die Änderung des Radius eines abgerundeten Rechtecks in Echtzeit gesehen werden; bei Bildern muss man zumindest das Bild neu generieren, ausschneiden und das Asset ersetzen. Retina-Displays, hochauflösende Bildschirme und Multi-Size-Geräte haben alle die Entwicklung von Nicht-Bild-Effekten beschleunigt. Denken Sie nur daran, wie schrecklich Windows 7 auf hochauflösenden Bildschirmen aussieht, und Sie wissen, dass native Bildressourcen definitiv nicht je mehr, desto besser sind.
Auswahl eines Bildformats
Wenn wirklich ein Bild benötigt wird, um den Effekt auszudrücken, dann ist die Wahl des Bildformats der erste Optimierungsschritt. Begriffe, die wir oft hören, sind Vektorgrafiken, Rastergrafiken, SVG, verlustbehaftete Komprimierung, verlustfreie Komprimierung usw. Lassen Sie uns zunächst die Eigenschaften der verschiedenen Bildformate erläutern.
| Bildformat | Komprimierungsmethode | Transparenz | Animation | Browser-Kompatibilität | Geeignete Szenarien |
|---|---|---|---|---|---|
| JPEG | Verlustbehaftete Komprimierung | Nicht unterstützt | Nicht unterstützt | Alle | Komplexe Farben und Formen, insbesondere Fotos |
| GIF | Verlustfreie Komprimierung | Unterstützt | Unterstützt | Alle | Einfache Farben, Animation |
| PNG | Verlustfreie Komprimierung | Unterstützt | Nicht unterstützt | Alle | Wenn Transparenz benötigt wird |
| APNG | Verlustfreie Komprimierung | Unterstützt | Unterstützt | Firefox Safari iOS Safari | Animationen, die Halbtransparenz erfordern |
| WebP | Verlustbehaftete Komprimierung | Unterstützt | Unterstützt | Chrome Opera Android Chrome Android Browser | Komplexe Farben und Formen; vorhersehbare Browser-Plattform |
| SVG | Verlustfreie Komprimierung | Unterstützt | Unterstützt | Alle (IE8 und höher) | Einfache Grafiken, gutes Skalierungserlebnis, dynamische Steuerung von Bildeffekten erforderlich |
Unter ihnen erschienen die Formate APNG und WebP relativ spät,und wurden noch nicht in Webstandards aufgenommen.Sie sollten nur verwendet werden, wenn die spezifische Plattform- oder Browserumgebung vorhersehbar ist. Obwohl beide in nicht unterstützten Umgebungen einen eleganten Rückfall bieten können, werden in diesem Abschnitt diese beiden Formate vorerst nicht behandelt. Der Auswahlprozess für das Bildformat ist wie folgt:
Für Fotos mit kräftigen Farben ist JPG die universelle Wahl.
- Die Struktur des menschlichen Auges eignet sich gut zum Betrachten von JPG-komprimierten Fotos; das Auge kann Details vollständig ignorieren und sie gedanklich ergänzen.
- JPG behält Details ziemlich gut bei, wenn die Komprimierungsrate nicht hoch ist.
- WebP kann die Dateigröße im Vergleich zu JPG um 30% reduzieren, aber derzeithat es eine schlechte Browser-Kompatibilität.
Wenn ein universelleres Animationsformat benötigt wird, ist GIF die einzige nutzbare Wahl.
- GIF unterstützt einen Farbbereich von 256 Farben und unterstützt nur vollständig transparent / vollständig undurchsichtig.
- Bei der Anzeige von Animationen mit satten Farben kann GIF Probleme wie fehlende Farben und gezackte Kanten aufweisen.
Wenn das Bild aus standardmäßigen geometrischen Formen besteht oder Sie seine Anzeigeeffekte programmgesteuert dynamisch steuern müssen, können Sie das SVG-Format in Betracht ziehen.
- SVG sind Vektorgrafiken, die mit XML definiert werden, und die resultierenden Bilder können in jeder Auflösung frei skaliert werden.
- In SVG können Sie Bildeffekte über Schnittstellen wie JavaScript frei ändern und freie Drehung, Bewegung, Farbänderungen usw. einiger Elemente erreichen.
Wenn Sie Bilder mit satten Farben klar anzeigen müssen, ist PNG besser.
- PNG-8 kann 256 Farben anzeigen, unterstützt aber auch 256 Transparenzstufen. Daher kann PNG-8 für Szenarien mit weniger Farben, die jedoch Halbtransparenz erfordern (z. B. animierte WeChat-Emoticons), in Betracht gezogen werden.
- PNG-24 kann Echtfarben anzeigen, unterstützt jedoch keine Transparenz. Es wird für Bilder mit satten Farben empfohlen (z. B. Screenshots, UI-Design-Mockups).
- PNG-32 kann Echtfarben anzeigen und unterstützt 256 Transparenzstufen. Es hat den besten Effekt, aber auch die größte Dateigröße.
Auswahl der Bildabmessungen
Abmessungen waren früher das am wenigsten diskutierte Thema, aber die Welt ist seit dem Erscheinen von Retina viel komplizierter geworden. Das Thema Pixel und Abmessungen auf Mobilgeräten reicht für eine ganze Abhandlung. Ich empfehle Lernenden, die Details wünschen, den folgenden Artikel zu lesen:
Ein kurzer Vortrag zur mobilen Webentwicklung (Teil 1): Eingehende Konzepte
Hier sprechen wir nur über die Teile und Schlussfolgerungen, die uns interessieren. Wir müssen zwischen verschiedenen Pixeltypen unterscheiden: CSS-Pixel und Gerätepixel. Ein CSS-Pixel kann mehrere Gerätepixel enthalten. Für Bilder benötigt man auf High-DPI-Bildschirmen Bilder mit höherer Auflösung. Wenn wir von Retina sprechen, dann benötigt man Bilder mit 2x-Auflösung (fast 4x so groß). Es gibt kaum Raum für Abkürzungen: Der Bildschirm ist eben so groß, und das benötigte Bild ist, unnötig zu sagen, ebenso groß. (Warum ist die Taube so groß? ^_^)
Was wir steuern können, ist, ein Bild in „genau“ der benötigten Größe anzuzeigen. Zum Beispiel auf dem Bildschirm, durch CSS oderdie width/height-Attribute des <img>-Tags, ein 200x200-Bild auf 100x100 zu skalieren, dann sind (200x200)-(100x100)=30000 Pixel verschwendet, was 75% der Bildgröße ausmacht!
Der Grund für eine so enorme Verschwendung ist, dass die Dateigröße eines Bildes im Wesentlichen proportional zur Fläche und damit proportional zum Quadrat von Breite und Höhe ist. Daher kann die Berechnung der tatsächlich angezeigten Bildgröße auf Client-Seite die Bildgröße stark reduzieren. Selbst wenn nur 10px an Breite und Höhe verschwendet werden, wird dieser Teil bei ausreichend großem Bild immer noch einen erheblichen Einfluss haben.
Responsive Bilder
Früher haben wir erwähnt, Bilder in „genau“ der Größe anzuzeigen, die der Client benötigt. Das klingt einfach, nicht wahr? Aber nach dem Aufkommen responsiver Layouts wurde dies extrem schwierig. Wir müssen unzählige Geräte von 1920px Breite bis hinunter zu 320px Breite unterstützen. Wenn wir 1920px breite Bilder verwenden, dann zahlt jeder Nutzer auf kleinen Geräten (die oft empfindlicher auf Netzwerkgeschwindigkeit und Datenverbrauch reagieren) zusätzliche Bandbreite und Wartezeit. Wenn wir 320px breite Bilder verwenden, dann ist das auf einem 1920px-Bildschirm so inakzeptabel wie DOS auf einem HD-Bildschirm auszuführen.
Natürlich müssen Bilder auch "responsiv" geladen werden, wobei je nach Gerät unterschiedliche Bildgrößen geladen werden. Responsive-Bilder sind noch nicht in Webstandards aufgenommen worden, und ihre Implementierung bringt viele Unannehmlichkeiten und Kompatibilitätseinschränkungen mit sich. Ich empfehle, diesen Artikel des Baidu-EFE-Teams zu lesen:
Responsive-Bilder in der Praxis
Obwohl Responsive-Bildernoch nicht zum Standard geworden sind,sind sie ein leistungsstarkes Werkzeug für die Web-Bildoptimierung. Sobald sie breit unterstützt werden, gibt es keine effektivere Optimierungsmethode als die Verringerung der Bildgröße.Optimierung von JPG und PNG
Nachdem das richtige Bildformat ausgewählt und das Bild in der richtigen Größe erzeugt wurde, müssen wir das Bild noch weiter optimieren. Diese Optimierung erfolgt im Allgemeinen in zwei Schritten:
- Verlustbehaftete Optimierung: Entfernen Sie Farben, die nie oder sehr selten vorkommen, und führen Sie benachbarte ähnliche Farben zusammen. Dieser Schritt ist nicht unbedingt erforderlich; beispielsweise kann das PNG-Format direkt zum nächsten Schritt übergehen.
- Verlustfreie Optimierung: Daten komprimieren und unnötige Informationen entfernen.
Nach der Erzeugung von Bildern in den Formaten JPG und PNG gibt es normalerweise noch Raum für weitere Optimierungen. Beispielsweise können JPG-Fotos Kamera-Exif-Informationen enthalten, und PNG-Bilder können Ebeneninformationen aus Software wie Fireworks enthalten. Nach dem Entfernen dieser zusätzlichen Informationen können Sie auch optimieren, indem Sie die Bildpalette reduzieren, Farben entfernen, die nie vorkommen, und benachbarte identische Farben zusammenführen. Auf die theoretischen Details gehe ich hier nicht ein; ich stelle nur praktische Optimierungswerkzeuge vor, die in der technischen Praxis eingesetzt werden können.
Es gibt eine Reihe von Werkzeugen für verschiedene Bildformate, und diese Werkzeuge bieten viele weitere Optionen zur Parameteranpassung. Einige gängige Anpassungswerkzeuge sind:
| Tool | Zweck |
|---|---|
| jpegtran | JPG-Bilder optimieren |
| OptiPNG | Verlustfreie PNG-Optimierung |
| AdvPNG | Verlustfreie PNG-Optimierung |
| PNGQuant | Verlustbehaftete PNG-Optimierung |
Wenn Sie wirklich eine extreme Komprimierung verschiedener Bilder anstreben, können Sie die Dokumentation dieser Tools heranziehen. Für typische Webanwendungen sind die vorkommenden Bildtypen jedoch vielfältig, und es ist in der Praxis nahezu unmöglich, jedes Tool einzeln zu konfigurieren. Daher wird empfohlen, die folgenden Tools zur Optimierung zu verwenden. Diese Tools nutzen häufig eines oder mehrere der Optimierungstools aus der obigen Tabelle.
ImageOptim (Mac)
Startseite:https://imageoptim.com/
Ein sehr schönes Bildoptimierungstool auf der Mac-Plattform. Sie müssen die zu optimierenden Bilder nur in ImageOptim ziehen, und die Optimierung ist erledigt. Die Einstellungen sind ebenfalls umfangreich, und es unterstützt derzeit die Optimierung von JPG und PNG. Dies ist das Tool, das ich beim Schreiben von Artikeln am häufigsten verwende: Ziehen Sie die auf der Website verwendeten Bilder hinein, und die Optimierung ist abgeschlossen~
Kraken (Web)
Startseite:https://kraken.io/
Im kostenlosen Modus können Sie Bilder hochladen, und nach der Optimierung werden sie als Paket zum Download bereitgestellt. Viele ausländische Unternehmen wählen auch den kostenpflichtigen Dienst. Ich habe Krakens Bildoptimierungsergebnisse persönlich getestet; sie sind im Allgemeinen etwa 3% kleiner als bei ImageOptim. Das Ergebnis ist gut, und natürlich ist auch der Preis gut. Es eignet sich für gelegentliche Bildoptimierungsanforderungen oder Situationen, in denen auf dem Entwicklungsrechner keine Optimierungssoftware verfügbar ist.
Zhitu (Web)
Startseite:http://zhitu.tencent.com/
Das Tencent-ISUX-Team hat einen Artikel, der Zhitu vorstellt:http://isux.tencent.com/zhitu.html
Es ist Zeit, dass heimische Produkte hervorstechen. Tencents Zhitu-Tool ist noch nicht lange auf dem Markt, aber tatsächliche Tests zeigen, dass es gut funktioniert, und es bietetGulp-AutomatisierungsunterstützungDieser Teil wird später im Abschnitt zur automatischen Optimierung vorgestellt. Ich möchte nur eines anmerken: Krakens Startseite ist hundertmal schöner als die von Zhitu ... Und ist es wirklich in Ordnung, das komprimierte PNG und das komprimierte JPG zum Größenvergleich nebeneinanderzustellen?
SVG optimieren
Alle neueren Browser unterstützen Scalable Vector Graphics (SVG). SVG ist ein XML-basiertes Bildformat, das für zweidimensionale Bilder geeignet ist. SVG-Markup kann direkt in Webseiten eingebettet oder als externe Ressource eingebunden werden. SVG-Dateien können mit den meisten vektorbasierten Zeichenprogrammen erstellt werden. Hier ist eine einfache SVG-Grafik:
Dieser Kreis hat eine schwarze Kontur und einen roten Hintergrund und wurde direkt aus Adobe Illustrator exportiert. Man kann darin viele Metadaten sehen, wie Ebeneninformationen, Kommentare, XML-Namespaces und so weiter. Diese Daten werden normalerweise nicht benötigt, wenn Ressourcen im Browser gerendert werden. Daher müssen wir einige Tools verwenden, um diese unnötigen Metadaten zu entfernen und nur das erforderliche Markup zu behalten.
SVGOTools können die Größe von SVG-Dateien reduzieren. In diesem Beispiel kann SVGO die Größe einer von Illustrator erzeugten SVG-Datei um 58 % reduzieren, von 470 Bytes auf 199 Bytes. Da SVG ein XML-basiertes Format und im Wesentlichen Klartext ist, kann auch GZIP-Komprimierung verwendet werden, um die Übertragungsgröße zu reduzieren. Natürlich erfordert dies eine gewisse Serverkonfiguration, z. B. die folgende Einstellung in einem Apache-Server:
AddType image/svg+xml .svg AddOutputFilterByType DEFLATE image/svg+xml
um die GZip-Komprimierung für SVG-Dateien zu aktivieren (natürlich müssen Sie auch das deflate-Modul laden und es ordnungsgemäß konfigurieren; die GZip-Konfiguration geht über den Rahmen dieses Artikels hinaus, also googeln Sie diesen Teil bitte selbst)
GIF und APNG optimieren
GIF hat viele Vorteile: Wenn die Anzahl der Farben gering ist, kann es die Bildgröße stark reduzieren, und es ist auch das einzige Bildformat, das Animationen auf relativ universelle Weise anzeigen kann. Mit den Optimierungsprinzipien des GIF-Formats bin ich nicht sehr vertraut; in der Praxis verwende ich direkt ausgereifte Kompressionstools. Im späterenautomatische OptimierungAbschnitt zu Grunt werde ich eine Methode zur automatischen Optimierung durch Grunt-Aufgaben vorstellen.
Was APNG betrifft, ist die aktuelle Browser-Unterstützung dafür noch nicht gut genug. In Szenarien, die HTML5 unterstützen, gibt es jedoch ein ausgereiftes Open-Source-Toolapng-canvas, das zur Unterstützung von APNG verwendet werden kann.
Das Tencent ISUX-Team hat einen Artikel, deriSpartaTools vorstellt:http://isux.tencent.com/introduction-of-apng.htmlDies ist derzeit fast das einzige Tool, das APNG-Dateien im Batch verarbeiten kann. Interessierte können aus diesem Artikel mehr erfahren.
Automatische Optimierung
Ich habe oben zu viel über Methoden und Tools zur Optimierung von Bildern verschiedener Formate gesagt. Das Optimieren von Bildern erfordert viel repetitive Arbeit. Als Ingenieure können wir das offensichtlich nicht tolerieren, daher wurden viele Tools entwickelt, um Bilder automatisch zu optimieren. Hier stelle ich hauptsächlich drei Methoden vor: CDN, Grunt/Gulp und Google PageSpeed.
Automatische Optimierung: CDN
Verwendung eines CDN zur automatischen Optimierung von Bildern. Bei ausländischen CDN-Anbietern habe ich diese Art von Service selten gesehen, aber die beiden aufstrebenden inländischen CDN-MarktführerQiniuundUpyunhaben in dieser Hinsicht viel Arbeit geleistet. Die Funktionsweise ist: Wenn ein Bild vom CDN angefordert wird, enthalten die URL-Parameter Bildverarbeitungsparameter (Format, Breite und Höhe usw.). Der CDN-Server generiert das angeforderte Bild gemäß der Anfrage und sendet es an den Browser des Benutzers.
Qiniu Cloud StoragesBildverarbeitungsschnittstelleist extrem umfangreich und deckt die meisten grundlegenden Bildoperationen ab, wie zum Beispiel:
- Bildzuschnitt, mit Unterstützung mehrerer Zuschnittmethoden (wie nach langer Kante, kurzer Kante, Füllen, Strecken usw.)
- Bildformatkonvertierung, Unterstützung von JPG, GIF, PNG, WebP usw., mit unterschiedlichen Bildkomprimierungsraten
- Bildverarbeitung, Unterstützung von Bildwasserzeichen, Gaußschem Weichzeichner, Fokusverarbeitung usw.
Die Bildverarbeitungsschnittstelle von Qiniu Cloud Storage ist nicht kompliziert zu verwenden. Nehmen Sie zum Beispiel das folgende Originalbild:
Wir fordern die folgende URL an, um den mittleren Teil zuzuschneiden und proportional zu skalieren, um ein 200x200-Thumbnail zu erzeugen:
http://qiniuphotos.qiniudn.com/gogopher.jpg?imageView2/1/w/200/h/200
Automatische Optimierung: Grunt/Gulp
Hier stelle ich Grunt-Komponenten vor, die zur Bildoptimierung verwendet werden:grunt-imageDie repetitive Arbeit von Frontend-Entwicklern, wie das Zusammenführen statischer Ressourcen, das Komprimieren von JS- und CSS-Dateien, das Kompilieren von SASS usw., kann mit Automatisierungswerkzeugen wie Grunt stapelweise erledigt werden. Bildoptimierung ist keine Ausnahme.
grunt-image ist sehr leistungsstark. Laut Einführung des Autors umfassen die intern geladenen Bildoptimierungswerkzeuge pngquant, optipng, advpng, zopflipng, pngcrush, pngout, mozjpeg, jpegRecompress, jpegoptim, gifsicle und svgo. Es unterstützt die automatische Stapeloptimierung von PNG, JPG, SVG und GIF, und auch die Geschwindigkeit ist gut. Die Konfiguration unterstützt die Optimierung einzelner Bilder und die Optimierung ganzer Verzeichnisse:
module.exports = function (grunt) {
grunt.initConfig({
image: {
// 指定单独的图片优化
static: {
options: {
pngquant: true,
optipng: true,
advpng: true,
zopflipng: true,
pngcrush: true,
pngout: true,
mozjpeg: true,
jpegRecompress: true,
jpegoptim: true,
gifsicle: true,
svgo: true
},
files: {
'dist/img.png': 'src/img.png',
'dist/img.jpg': 'src/img.jpg',
'dist/img.gif': 'src/img.gif',
'dist/img.svg': 'src/img.svg'
}
},
// 指定图片目录进行优化
dynamic: {
files: [{
expand: true,
cwd: 'src/',
src: ['**/*.{png,jpg,gif,svg}'],
dest: 'dist/'
}]
}
}
});
grunt.loadNpmTasks('grunt-image');
};
Automatische Optimierung: Google PageSpeed
Googles Arbeitsweise ist ziemlich gründlich. Wenn es eine Software sieht, die nicht gut zu benutzen ist, forkt es direkt eine neue Version oder schreibt sie einfach neu. Für die Weboptimierung hat GoogleGoogle PageSpeed veröffentlichtdieses Servermodul, das in Apache oder Nginx geladen werden kann, und die automatische Optimierung erfolgt durch Einstellungen in der Serverkonfigurationsdatei. Es gibt zugehörige Optionen für Bildformatkonvertierung, Bildoptimierung und sogar Lazy Loading von Bildern. Dieses Thema wäre sehr lang auszuführen, daher lesen Sie bitte in Googles Handbuch nach, wenn Sie interessiert sind.
Quelle: http://blog.cabbit.me/web-image-optimization