So optimieren Sie Bilder, um die Website-Leistung zu verbessern

Überblick

Bilder gehören zu den grundlegendsten Inhaltstypen im Web. Man sagt, ein Bild sagt mehr als tausend Worte. Aber wenn Sie nicht aufpassen, kann die Bildgröße manchmal mehrere zehn Megabyte erreichen.

Obwohl Webbilder scharf und klar sein müssen, können sie kleiner und komprimierter gemacht werden, um die Ladezeiten auf einem akzeptablen Niveau zu halten.

Auf meiner Website fiel mir auf, dass meine Homepage eine Seitengröße von über 1,1 MB hatte, wobei Bilder etwa 88 % davon einnahmen. Mir fiel auch auf, dass die von mir bereitgestellten Bilder größer waren als nötig (in Bezug auf die Auflösung). Es gab eindeutig viel Raum für Verbesserungen.

Ich begann, Addy Osmanis hervorragendes E-Book „Essential Image Optimization“ zu lesen und begann gemäß den Empfehlungen des Buches mit der Bildoptimierung auf meiner Website. , habe dann etwas zu reaktionsfähigen Bildern recherchiert und es angewendet.

Dadurch wird die Seitengröße auf 445 KB reduziert, also etwa 62 %!

Was ist Bildkomprimierung

Beim Komprimieren von Bildern geht es darum, die Dateigröße zu reduzieren und gleichzeitig eine akzeptable Auflösung des Bildes beizubehalten. Ich verwende Imagemin, um die Bilder auf meiner Site zu komprimieren.

Um Imagemin zu verwenden, stellen Sie sicher, dass Node.js installiert ist. Öffnen Sie dann ein Terminalfenster, wechseln Sie per CD in Ihr Projekt und führen Sie den folgenden Befehl aus:

npm installiere Imagemin

Erstellen Sie dann eine neue Datei namens imagemin.js und schreiben Sie den folgenden Inhalt:

const imagemin = erfordern('imagemin');
const PNGImages = "Assets/Bilder/*.png";
const JPEGImages = "assets/images/*.jpg";
const-Ausgabe = "Build/Images";

Sie können die Werte von PNGImages, JPEGImages und output entsprechend Ihren Anforderungen ändern, um sie an Ihre Projektstruktur anzupassen.

Darüber hinaus müssen Sie zum Durchführen einer Bildkomprimierung je nach Art des zu komprimierenden Bildes auch das entsprechende Plug-In installieren.

JPEG/JPG

Vorteile von JPG

Das größte Merkmal von JPG ist die verlustbehaftete Komprimierung. Dieser effiziente Komprimierungsalgorithmus macht es zu einem sehr leichten Bildformat. Andererseits ist die JPG-Komprimierung, auch wenn sie als „verlustbehaftete“ Komprimierung bezeichnet wird, immer noch eine Komprimierungsmethode mit hoher Qualität: Wenn wir die Bildgröße auf weniger als 50 % der Originalgröße komprimieren, kann JPG immer noch 60 % der Qualität beibehalten. Darüber hinaus speichert das JPG-Format ein einzelnes Bild in 24 Bit und kann bis zu 16 Millionen Farben darstellen, was in den meisten Szenarien ausreicht, um die Farbanforderungen zu erfüllen. Dies führt dazu, dass der Qualitätsverlust vor und nach der Komprimierung für unser menschliches Auge nicht leicht erkennbar ist – vorausgesetzt, Sie verwenden es im richtigen Geschäftsszenario.

JPG-Nutzungsszenarien

JPG eignet sich zur Darstellung farbenfroher Bilder. In unserer täglichen Arbeit erscheinen JPG-Bilder häufig als große Hintergrundbilder, Karussellbilder oder Bannerbilder.

Nachteile von JPG

Im oben gezeigten Karussell ist die verlustbehaftete Komprimierung tatsächlich schwer zu erkennen. Bei der Verarbeitung von Bildern mit starken Linien und starkem Farbkontrast, wie etwa Vektorgrafiken und Logos, ist die durch die künstliche Komprimierung verursachte Bildunschärfe jedoch recht deutlich zu erkennen.

Darüber hinaus unterstützen JPEG-Bilder keine Transparenzverarbeitung und transparente Bilder müssen PNG aufrufen, um dargestellt zu werden.

Komprimieren Sie JPEGs mit MozJPEG

Zum Einsatz kommt hierbei das Tool MozJPEG von Mozilla, welches über imagemin-mozjpeg als Imagemin-Plugin genutzt werden kann. Sie können es installieren, indem Sie den folgenden Befehl ausführen:

npm installiere imagemin-mozjpeg

Fügen Sie dann Folgendes zu imagemin.js hinzu:

const imageminMozjpeg = erfordern('imagemin-mozjpeg');
const optimizeJPEGImages = () =>
  imagemin([JPEGBilder], Ausgabe, {
    Plugins: [
      BildminMozjpeg({
        Qualität: 70,
      }),
    ]
  });
optimizeJPEGImages()
  .catch(Fehler => console.log(Fehler));

Das Skript kann ausgeführt werden, indem Sie node imagemin.js in Ihrem Terminal ausführen. Dadurch werden alle JPEG-Bilder verarbeitet und optimierte Versionen im Ordner „Build/Images“ abgelegt.

Ich finde, dass eine Qualitätseinstellung von 70 in den meisten Fällen ein ausreichend scharfes Bild ergibt, die Anforderungen Ihres Projekts können jedoch abweichen, und Sie können diesen Wert Ihren Anforderungen entsprechend einstellen.

Standardmäßig generiert MozJPEG progressive JPEGs, was dazu führt, dass Bilder schrittweise von einer niedrigen zu einer hohen Auflösung geladen werden, bis das Bild vollständig geladen ist. Aufgrund der Art der Kodierung sind sie auch etwas kleiner als die Original-JPEGs.

Mit diesem Befehlszeilentool von Sindre Sorhus können Sie überprüfen, ob ein JPEG-Bild progressiv ist.

Addy Osmani hat die Vor- und Nachteile der Verwendung progressiver JPEGs gut zusammengefasst. Für mich überwiegen die Vorteile die Nachteile, daher bleibe ich bei den Standardeinstellungen.

Wenn Sie lieber das Original-JPEG verwenden möchten, können Sie „Progressive“ im Optionsobjekt auf „False“ setzen. Achten Sie außerdem darauf, bei einer Änderung der imagemin-mozjpeg-Version die entsprechende Dokumentation erneut zu prüfen.

PNG (PNG-8 und PNG-24)

PNG Vor- und Nachteile

PNG (Portable Network Graphics Format) ist ein hochpräzises Bildformat mit verlustfreier Komprimierung. 8 und 24, hier sind die Ziffernanzahlen einer Binärzahl. Gemäß der in unserem bisherigen Wissen erwähnten Korrespondenz unterstützt 8-Bit-PNG bis zu 256 Farben, während 24-Bit etwa 16 Millionen Farben darstellen kann.

PNG-Bilder verfügen über eine stärkere Farbdarstellung als JPG, eine feinere Linienverarbeitung und eine gute Transparenzunterstützung. Es gleicht die oben genannten Einschränkungen von JPG aus und hat als einzigen Nachteil die Größe.

PNG-Anwendungsszenarien

Wie bereits erwähnt, wäre die Verarbeitung komplexer Bilder mit satten Farben im PNG-Format aufwändiger, daher speichern wir diese normalerweise im JPG-Format.

Angesichts der Vorteile von PNG bei der Handhabung von Linien und Farbkontrasten verwenden wir es hauptsächlich, um kleine Logos, Bilder oder Hintergründe mit einfachen Farben und starkem Kontrast usw. darzustellen.

Optimieren von PNG-Bildern mit pngquant

pngquant ist mein bevorzugtes Tool zur Optimierung von PNG-Bildern. Sie können es über imagemin-pngquant verwenden:

npm installiere imagemin-pngquant

Fügen Sie dann Folgendes zu Ihrer Datei imagemin.js hinzu:

const imageminPngquant = erforderlich('imagemin-pngquant');
const optimizePNGImages = () =>
  imagemin([PNGImages], Ausgabe, {
    Plugins: [
      imageminPngquant({ Qualität: '65-80' })
    ],
  });
optimizeJPEGImages()
  .then(() => optimizePNGImages())
  .catch(Fehler => console.log(Fehler));

Ich finde, dass die Qualitätseinstellung auf 65-80 einen guten Kompromiss zwischen Dateigröße und Bildqualität darstellt.

Mit diesen Einstellungen konnte ich einen Screenshot meiner Site erstellen, der ohne merklichen visuellen Verlust von 913 KB auf 187 KB vergrößert wurde, eine erstaunliche Verringerung um 79 %!

WebP

Vorteile von WebP

WebP kann detaillierte Bilder wie JPEG verarbeiten, unterstützt Transparenz wie PNG und kann dynamische Bilder wie GIF anzeigen – es kombiniert die Vorteile mehrerer Bilddateiformate.
In der offiziellen Einführung von WebP finden Sie eine verbindlichere Erklärung zu diesem Punkt:

Verlustfreie WebP-Bilder sind im Vergleich zu PNG 26 % kleiner. Bei gleichem SSIM-Qualitätsindex sind verlustbehaftete WebP-Bilder 25–34 % kleiner als vergleichbare JPEG-Bilder. Verlustfreies WebP unterstützt Transparenz (auch als Alphakanäle bekannt) mit nur 22 % zusätzlichen Bytes. In Situationen, in denen verlustbehaftete RGB-Komprimierung akzeptabel ist, unterstützt verlustbehaftetes WebP auch Transparenz und bietet im Vergleich zu PNG normalerweise die dreifache Dateigröße.

Stellen Sie WebP-Bilder den Browsern zur Verfügung, die diese unterstützen

WebP ist ein relativ neues Format, das von Google eingeführt wurde und kleinere Dateigrößen ermöglichen soll, indem Bilder sowohl in verlustfreien als auch in verlustbehafteten Formaten kodiert werden. Damit stellt es eine gute Alternative zu JPEG und PNG dar.

Die Klarheit von WebP-Bildern ist im Allgemeinen mit JPEG und PNG vergleichbar, die Dateigröße ist jedoch viel kleiner. Als ich beispielsweise den Screenshot oben in WebP konvertierte, erhielt ich eine 88 KB große Datei, deren Qualität mit dem 913 KB großen Originalbild vergleichbar war – eine Reduzierung um 90 %!

Persönlich denke ich, dass die visuellen Ergebnisse vergleichbar sind und die Größeneinsparungen nicht zu vernachlässigen sind.

Nachdem wir nun erkannt haben, dass es sinnvoll ist, wenn möglich das WebP-Format zu verwenden, ist es wichtig zu beachten, dass es kein vollständiger Ersatz für JPEG und PNG ist, da die Browserunterstützung für WebP nicht universell ist.

Zum Zeitpunkt des Schreibens sind Firefox, Safari und Edge Browser, die WebP nicht unterstützen.

Laut caniuse.com verwenden jedoch mehr als 70 % der Benutzer weltweit Browser, die WebP unterstützen. Das bedeutet, dass Sie durch die Verwendung von WebP-Bildern etwa 70 % Ihrer Kunden schnellere Webseiten und ein besseres Erlebnis bieten können.

Um es zu installieren, führen Sie den folgenden Befehl aus:

npm installiere imagemin-webp

Fügen Sie dann Folgendes zu Ihrer Datei imagemin.js hinzu:

const imageminWebp = erfordern('imagemin-webp');
const convertPNGToWebp = () =>
  imagemin([PNGImages], Ausgabe, {
    verwenden: [
      BildminWebp({
        Qualität: 85,
      }),
    ]
  });
const convertJPGToWebp = () =>
  imagemin([JPGBilder], Ausgabe, {
    verwenden: [
      BildminWebp({
        Qualität: 75,
      }),
    ]
  });
optimizeJPEGImages()
  .then(() => optimizePNGImages())
  .then(() => konvertierePNGToWebp())
  .then(() => konvertiereJPGToWebp())
  .catch(Fehler => console.log(Fehler));

Ich habe festgestellt, dass bei einer Qualitätseinstellung von 85 WebP-Bilder erzeugt werden, die qualitativ mit PNGs vergleichbar, aber viel kleiner sind. Bei JPEGs finde ich, dass eine Qualitätseinstellung von 75 ein gutes Gleichgewicht zwischen Bildqualität und Dateigröße ergibt.

Bereitstellung von WebP-Bildern im HTML-Format

Sobald Sie über WebP-Bilder verfügen, können Sie sie mit der folgenden Auszeichnungssprache den Browsern bereitstellen, die sie verwenden können. Browsern, die nicht WebP-kompatibel sind, können Sie dagegen PNG oder JPEG bereitstellen.

<Bild>
    <Quelle srcset="Beispielbild.webp" Typ="Bild/webp">
    <Quelle srcset="Beispielbild.jpg" Typ="Bild/jpg">
    <img src="Beispielbild.jpg" alt="">
</Bild>

Mit diesem Tag laden Browser, die den Medientyp image/webp verstehen, das Webp-Bild herunter und zeigen es an, während andere Browser das JPEG-Bild herunterladen.

Jeder Browser, der <picture> nicht unterstützt, überspringt alle Quell-Tags und lädt das untere img-Tag. Daher haben wir unsere Seiten schrittweise verbessert, indem wir Unterstützung für alle Browserklassen bereitgestellt haben.

Beachten Sie, dass in allen Fällen das img-Tag tatsächlich auf der Seite gerendert wird und es sich daher tatsächlich um einen erforderlichen Teil der Syntax handelt. Wenn das img-Tag weggelassen wird, wird kein Bild gerendert.

Das <picture>-Tag und alle darin definierten Quellen sind vorhanden, damit der Browser den Pfad zum zu verwendenden Bild auswählen kann. Sobald ein Quellbild ausgewählt ist, wird seine URL an das img-Tag übergeben und angezeigt.

Dies bedeutet, dass Sie die <picture>- oder Quelltags nicht formatieren müssen, da der Browser sie nicht rendert. Daher können Sie den img-Tag wie bisher weiterhin zum Stylen verwenden.

Oben finden Sie Einzelheiten zur Optimierung von Bildern zur Verbesserung der Website-Leistung. Weitere Informationen zur Optimierung von Bildern zur Verbesserung der Website-Leistung finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!