.NET Core Tipp: Bilder komprimieren mit Magick.NET

.NET Core Tipp: Bilder komprimieren mit Magick.NET

Problem

Bei der Analyse der .NET User Group Bern – Seite zeigt der Bericht folgende Meldung «Optimize images» mit einer Kennzahl von D (65). Die Bilder sind in hoher Auflösung von einem Smartphone oder Kamera gemacht.

Abbildung zeigt den Reportausschnitt Optimize Images

Die Gesamtkennzahlen zeigen folgende Ausgangslage:

Abbildung zeigt die PageSpeed Score mit 93% und YSlow mit 82%

Aktion

Mit der Library Magick.NET können die Bilder komprimiert werden. Auch die Qualität lässt sich auf den Bildschirm abstimmen.

In unserem Beispiel generieren wir drei Grössen mit einer Qualitätseinstellung von 70%, damit die Dateigrösse kleiner wird.

private void OptimizeImage(FileInfo file, int size, string destPath)
{
    var image = new MagickImage(file);
    image.Resize(size, 0);
    var newFile = Path.Combine(destPath, $"{Path.GetFileNameWithoutExtension(file.Name)}-{size}{file.Extension}");
    image.Quality = 70;
    image.Write(newFile);
}

Damit die Dateigrösse weiter reduziert wird, verwenden wir den ImageOptimizer zur Komprimierung.

private void CompressFile(FileInfo file)
{
    ImageOptimizer optimizer = new ImageOptimizer();
    optimizer.OptimalCompression = true;
    optimizer.Compress(file);
    file.Refresh();
}

Dies optimiert die Dateigrösse nochmals.

Resultat

Nach dieser Anpassung hat die Kennzahl «Optimize Images» den Wert A (97).

Abbildung zeigt das Resultat der AnpassungBei den Performanzkennzahlen hat sich durch die Anpassung die PageSpeed-Kennzahl verbessert.

Abbildung zeigt die neuen Werte von PageSpeed mit 97% und YSlow unverändert mit  82%

Mit Magick.NET sind in .NET Core Anwendungsfälle zur Optimierung von Bildern realisierbar, wie sie zum Beispiel in WordPress mit dem Smush-Plugin beim Upload von Dateien zur Anwendung kommen.

Ein weiterer Anwendungsfall kann auch die Konvertierung in das WebP-Format sein, um die Dateigrösse weiter zu reduzieren. Aktuell sind jedoch Fallback-Szenarien für Browser notwendig, die dieses Format noch nicht unterstützen. Dies erhöht die Komplexität im HTML.

 

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Fill out this field
Fill out this field
Bitte gib eine gültige E-Mail-Adresse ein.

Menü