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.

Die Gesamtkennzahlen zeigen folgende Ausgangslage:

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).

Bei den Performanzkennzahlen hat sich durch die Anpassung die PageSpeed-Kennzahl verbessert.

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.