Was hat das mit mir zu tun?
Unkomprimierte Bilder bläten Ihre Seiten mit unnötigen Bytes. Da Bilder Kandidaten für den Largest Contentful Paint (LCP) sein können, können diese unnötigen Byte die Ladedauer der Ressourcen des Bildes erhöhen, was möglicherweise zu längeren LCP-Zeiten führt.
Das Foto auf der rechten Seite ist 40% kleiner als das Foto links, würde aber für den durchschnittlichen Nutzer wahrscheinlich identisch aussehen.
|
|
|
|---|
Messen
Führen Sie Lighthouse aus, um nach Möglichkeiten zu suchen, den Seitenaufbau durch Komprimieren von Bildern zu verbessern. Diese Empfehlungen sind unter „Bilder effizient codieren“ aufgeführt:
Bildmin.
Imagemin ist eine hervorragende Wahl für die Bildkomprimierung, da es eine breite Image-Formaten erstellen und problemlos in Build-Skripts und Werkzeuge. „Imagemin“ ist sowohl als CLI und npm -Modul. Im Allgemeinen ist das npm-Modul da sie mehr Konfigurationsoptionen bietet, aber die Befehlszeile eine gute Alternative, wenn Sie Imagemin ausprobieren möchten, ohne Code zu berühren.
Plug-ins
Imagemin basiert auf „Plug-ins“. Ein Plug-in ist ein npm-Paket, bestimmtes Bildformat verwenden (z.B. "mozjpeg" komprimiert JPEGs). Beliebte Bildformate stehen möglicherweise mehrere Plug-ins zur Auswahl.
Der wichtigste Punkt bei der Auswahl eines Plug-ins ist, "verlustbehaftet" oder „verlustfrei“. Bei der verlustfreien Komprimierung gehen keine Daten verloren. Verlustbehaftet Komprimierung reduziert die Dateigröße, aber auf Kosten der möglichen Bildreduzierung. die Qualität zu verbessern. Wenn in einem Plug-in nicht angegeben ist, ob es „verlustbehaftet“ ist oder „verlustfrei“, ich an der API erkennen: Wenn Sie die Bildqualität der Ausgabe angeben können, ist „verlustbehaftet“.
Für die meisten Nutzer sind verlustbehaftete Plug-ins die beste Wahl. Sie bieten ein erhebliches größere Dateigrößeneinsparungen und Sie können die Komprimierungsstufen Ihren Bedürfnissen entsprechen. In der folgenden Tabelle sind beliebte Imagemin-Plug-ins aufgeführt. Dies sind nicht die einzigen Plug-ins, aber sie wären alle eine gute Wahl für Ihr Projekt.
| Bildformat | Verlustbehaftete Plug-ins | Verlustfreie Plug-ins |
|---|---|---|
| JPEG | imagemin-mozjpeg | imagemin-jpegtran |
| PNG | imagemin-pngquant | imagemin-optipng |
| GIF | imagemin-giflossy | imagemin-gifsicle |
| SVG | imagemin-svgo | |
| WebP | imagemin-webp | imagemin-webp |
ImageMin-Befehlszeile
Die Imagemin-Befehlszeile funktioniert mit fünf verschiedenen Plug-ins: imagemin-gifsicle, „imagemin-jpegtran“, „imagemin-optipng“, „imagemin-pngquant“ und „imagemin-svgo“. Imagemin verwendet das für das Bildformat des Eingabe.
Um die Bilder in der Spalte "images/" und speichern Sie sie im selben führen Sie den folgenden Befehl aus (überschreibt die Originaldateien):
$ imagemin images/* --out-dir=images
Imagemin-npm-Modul
Wenn Sie eines dieser Build-Tools verwenden, die Codelabs für Imagemin mit webpack, gulp oder Grunzen.
Sie können auch Imagemin allein als Node-Skript verwenden. In diesem Code wird das Tag „imagemin-mozjpeg“ verwendet. zur Komprimierung von JPEG-Dateien in einer von 50 ("0" steht für die schlechteste; "100" für die beste):
const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
(async() => {
const files = await imagemin(
['source_dir/*.jpg', 'another_dir/*.jpg'],
{
destination: 'destination_dir',
plugins: [imageminMozjpeg({quality: 50})]
}
);
console.log(files);
})();