So reduzieren Sie Bilddateigrößen ohne Qualitätsverlust
Unser geliebter Robot /image/optimize und der Robot /image/resize sind unsere leistungsstärksten Werkzeuge gegen aufgeblähte Dateigrößen und lange Ausführungszeiten. Wir sehen uns heute einige Zahlen aus der Praxis an, um genau zu zeigen, wie stark diese Robots Ihre Dateigrößen reduzieren können.
Methode
Um die Daten für diesen Blogbeitrag zu sammeln, habe ich ein kleines Python-Skript geschrieben, das eine Assembly erstellt, um mehrere verschiedene Testbilder zu optimieren, wobei bei jeder Iteration ein einzelner Parameter angepasst wird. So ist jede Assembly von den vorherigen isoliert, was uns sauberere Ergebnisse liefert. Zudem gibt es für jeden getesteten Dateityp mindestens zwei Testbilder.
Den Code für das Skript finden Sie hier auf GitHub.
Zwei Templates wurden verwendet, um jeden Robot einzeln zu testen. Es ist wichtig, jeden Robot zu kapseln, damit unsere Daten ausschließlich die Wirkung widerspiegeln, die der jeweilige Robot hatte. Beide Templates sind unten dargestellt.
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"optimize": {
"use": ":original",
"robot": "/image/optimize",
"preserve_meta_data": false,
"priority": "conversion-speed"
}
}
}
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"quality": {
"use": ":original",
"robot": "/image/resize",
"result": true,
"quality": 20,
"imagemagick_stack": "{{stacks.imagemagick.recommended_version}}"
}
}
}
Außerdem sollten wir eine Kennzahl definieren, um die gesamte Reduktion der Dateigröße zu messen - prozentualer Größenunterschied. Sie ist die prozentuale Differenz zwischen Eingabe- und Ausgabedateigröße. Hier ist die Formel, mit der wir sie berechnen:
Werfen wir nun einen Blick auf einige der Daten.
Priorität
Der erste Parameter, den wir uns ansehen, ist priority. Wir haben die Wahl zwischen zwei
verschiedenen Algorithmen, compression-ratio und conversion-speed, je nachdem, ob wir ein etwas
niedrigeres Kompressionsverhältnis von ~18 % für schnellere Ausführungszeiten oder ein höheres
Kompressionsverhältnis von ~31 % für eine minimale Dateigröße möchten.
Compression-ratio
Wie Sie unten sehen können, führt die Priorität compression-ratio in der Regel zu einer stärkeren
Reduktion der Dateigröße als die Priorität conversion-speed.
Wenn Sie sich jedoch dagegen entscheiden, die Metadaten der Datei zu erhalten, verwenden beide Prioritäten denselben Kompressionsalgorithmus, was erklärt, warum die Größenreduktion bei beiden Prioritäten gleich ausfällt.
Conversion-speed
Die Priorität conversion-speed hilft, wie der Name andeutet, gegen lange Ausführungszeiten. Wie unten
gezeigt, sank bei den rund fünfzig ausgeführten Assemblies die
Gesamtausführungszeit im Durchschnitt um eine Sekunde, wenn die Priorität conversion-speed
verwendet wurde.
Eingabeformat
Natürlich ist das Ausmaß unserer Optimierungen durch den Dateityp begrenzt. Sehen wir uns an, bei welchen Dateitypen Sie den größten Gewinn erwarten können.
Größenunterschied
Wie unten deutlich zu erkennen ist, zeigen .webp-Dateien eine dramatisch höhere durchschnittliche Reduktion der Dateigröße, während .jpg-Dateien fast keine Größenreduktion aufweisen. Auch die Spanne zwischen .gif, .png, .svg und .jpg ist gering – die Ergebnisse können also je nach den von Ihnen verwendeten Dateien stärker variieren.
Ausführungszeit
Bei den Ausführungszeiten ist .gif der klare Sieger, dicht gefolgt von .webp. Das vielleicht überraschendere Ergebnis daran ist jedoch, wie viel länger die Verarbeitung von .svg- und .png-Dateien dauerte, möglicherweise weil beide eine verlustfreie Kompression verwenden.
Probieren Sie denselben Optimierungs-Workflow live in unserem GIF-Kompressor (English) aus.
Qualität
Dateigröße
Eine der besten Möglichkeiten, die Dateigröße zu reduzieren, besteht darin, die Qualität mit dem Robot /image/resize zu verringern. Wie Sie in der Grafik unten sehen, führt eine Qualität von 75 oder darunter zu erheblichen Reduktionen der Dateigröße. Qualitätswerte über 75 lassen die Dateigröße jedoch tatsächlich ansteigen.
Eine geringere Qualität verbessert außerdem die Gesamtausführungszeit einer Assembly. Die Unterschiede fallen in diesem Fall linearer aus.
Bildqualität
Welchen Einfluss hat die Qualität also tatsächlich auf das Aussehen eines Bildes?
Hier ist dasselbe Bild in vier verschiedenen Qualitäten. Bei niedrigeren Qualitäten wird die Anzahl der Farben reduziert, was zu dem Color Banding führt, das Sie unten sehen können.
Dies ist allerdings ein recht großes Bild mit vielen verschiedenen Farben. Bei einfacheren Bildern ist der Qualitätsunterschied praktisch unsichtbar – etwa beim Transloadit-Logo.
In diesem Bild gibt es nur zwei Farben, sodass Sie den Qualitätswert senken können, ohne einen Unterschied zu sehen.
Am besten führen Sie natürlich selbst ein paar kleine Experimente durch, um einen Qualitätswert zu finden, der einen guten Kompromiss zwischen Dateigröße und Bildqualität darstellt.
Fazit
Nachdem wir Sie mit all diesen Informationen überhäuft haben, nehmen wir uns nun Zeit, sie durchzugehen und zu sehen, wie Sie davon ab sofort profitieren können.
Das vielleicht wichtigste Detail, das Sie mitnehmen können, ist die Verwendung des Formats .webp. Ganz gleich, ob Sie Ausführungszeiten oder Dateigrößen reduzieren möchten, hier profitieren Sie in jedem Fall. Sie können das Ergebnis mit unseren Live-Konvertern PNG zu WebP (English) und JPG zu WebP (English) vergleichen. In Kombination mit einer leicht reduzierten Dateiqualität in einem einzigen Step mit /image/resize erzielen Sie damit wahrscheinlich die besten Ergebnisse.
Ein weiterer wichtiger Punkt ist die Wahl der passenden priority für Ihren Anwendungsfall. Ich
würde mich für den Algorithmus compression-ratio entscheiden, weil die Größenreduktion so deutlich
ausfallen kann. Aber auch hier gilt: Probieren Sie es gerne selbst aus.
Zum Schluss hoffe ich, dass dieser Blogbeitrag Sie zu einer Optimierungsrunde mit Ihren Templates inspiriert hat und ein gutes Sprungbrett für den Beginn Ihrer Reise ist. Wir unterstützen Sie gerne, wo wir können. Wenden Sie sich also auch über den Support oder Twitter an uns.