Was bedeutet es, Bilder zu optimieren?

Große Bilder verlangsamen deine Webseiten, was zu einem nicht optimalen Benutzererlebnis führt. Die Optimierung von Bildern ist der Prozess der Verringerung der Dateigröße, entweder mit einem Plug-in oder einem Skript, was wiederum die Ladezeit der Seite beschleunigt. Verlorene und verlustfreie Kompression sind zwei gängige Methoden.

Die Vorteile der Formatierung Deiner Bilder.

Erstens, warum musst du deine Bilder formatieren? Was sind die Vorteile? Es gibt zahlreiche Vorteile bei der Optimierung deiner Bilder für die Leistung. Laut HTTP Archive machen Bilder durchschnittlich circa 21 % des Gesamtgewichts einer Webseite aus. Wenn es also darum geht, deine Homepage zu optimieren, nach Video Content, sind Bilder der erste Anlaufpunkt!

Sie sind wichtiger als Skripte und Schriften. Und ironischerweise ist ein guter Bildoptimierungsarbeitsablauf eines der am einfachsten zu implementierenden Mittel, aber viele Webseitenbetreiber übersehen dies.

Das richtige Dateiformat auswählen

Bevor Du anfängst, deine Bilder zu bearbeiten, stelle sicher, dass Du den besten Dateityp ausgewählt hast.


Es gibt mehrere Arten von Dateien, die Du verwenden kannst:

• PNG – erzeugt Bilder in höherer Qualität, hat aber auch eine größere Dateigröße. Wurde als verlustfreies Bildformat erstellt, kann aber auch verlustbehaftet sein.
• JPEG – verwendet verlustbehaftete und verlustfreie Optimierung. Die Qualitätsstufe kann für ein ausgewogenes Verhältnis von Qualität und Dateigröße angepasst werden.
• GIF – verwendet nur 256 Farben. Es ist die beste Wahl für animierte Bilder. Es wird strikt verlustfreie Kompression verwendet.

Es gibt noch einige andere wie JPEG XR und WebP, aber sie werden nicht von allen Browsern unterstützt. Im Idealfall solltest Du JPEG oder JPG für Bilder mit viel Farbe und PNG für simple Bilder verwenden.

Kompressionsqualität vs. Größe

Was kann passieren, wenn Du ein Bild zu stark komprimierst. Das Bild unter Verwendung einer sehr niedrigen Kompressionsrate führt zu höchster Qualität (aber größerer Dateigröße). Wiederum arbeitet man mit einer sehr hohen Komprimierungsrate, was zu einer sehr geringen Bildqualität (aber auch einer geringeren Dateigröße) führt.

Es ist im Allgemeinen am besten, wenn Du das Gesamtgewicht einer Webseite unter 1 oder 2 MB Größe halten kannst. 590 KB für ein Bild wäre schon ein Viertel davon. Ein Bild, was zu stark komprimiert wird, sieht schrecklich aus, aber dann sind es nur noch z.B. nur 68 KB. Was Du tun solltest, ist, eine goldene Mitte zwischen der Kompressionsrate (Qualität) und der Dateigröße zu finden.

Also nimmt man eine mittlere Kompressionsrate, sieht die Qualität jetzt gut aus und die Dateigröße, was für ein hochauflösendes Foto akzeptabel ist. Dies ist circa 4x kleiner als das Originalfoto bei geringer Kompression. Normalerweise sollten einfachere Bilder wie PNG's unter 100 KB oder weniger liegen, um die beste Leistung zu erzielen.

Verlustbehaftete vs. verlustfreie Optimierung

Wichtig ist es auch zu verstehen, dass es zwei Arten von Kompression gibt, die Du verwenden kannst, verlustbehaftet und verlustfrei.

Verlustfrei – dies ist ein Filter, der die Daten komprimiert. Dies verringert nicht die Qualität, aber es erfordert, dass die Bilder dekomprimiert werden, bevor sie gerendert werden können. Du kannst eine verlustfreie Kompression auf Deinem Desktop mit Tools wie Photoshop, FileOptimizer oder ImageOptim durchführen.

Verlustbehaftet – dies ist ein Filter, der einen Teil der Daten eliminiert. Dies führt zu einer Verschlechterung des Bildes, sodass man darauf achten muss, wie stark man das Bild verkleinern kann. Die Dateigröße kann um ein Vielfaches reduziert werden. Mit Werkzeugen wie Adobe Photoshop, Affinity Photo oder anderen Bildbearbeitungsprogrammen kann man die Qualitätseinstellungen eines Bildes einstellen.

Am besten probierst Du deine verschiedenen Kompressionstechniken aus, um zu sehen, was für jedes Bild oder Format am besten funktioniert. Wenn deine Tools die Option haben, stelle sicher, dass Du das Bild für das Web speicherst. Diese Option ist in vielen Bildbearbeitungsprogrammen enthalten und bietet Dir die Möglichkeit, die Qualität anzupassen, damit Du eine optimale Komprimierung durchführen kannst. Qualitätsverluste sind meist unausweichlich, also experimentiere, um die beste Balance zu finden, ohne die Bilder zu sehr zu verzerren.