Bilder für Web und Performance optimieren

Zusammenfassung

Eine Website wird schneller, wenn sie kleiner wird. Nicht durch winzige Schrift, sondern durch weniger Bytes! Mehr als die Hälfte des Gewichts einer durchschnittlichen Website entfällt auf Bilder. Trotzdem optimieren nur sehr wenige Leute ihre Bilder für Web und Performance. Zeit herauszufinden, wie viele Bytes du sparen kannst!

Volltext

Optimiere deine Website

Eine optimierte Website lädt schneller. Weil viele Menschen schnelle Websites bevorzugen, hat Google angefangen, die Ladezeit zu messen und in das Ranking in den Suchergebnissen einzubeziehen.

Durchschnittliche Seitengröße

Viele Webentwickler kümmern sich zuerst um HTML und Skripte, aber den größten Teil des Gewichts einer durchschnittlichen Website machen Bilder aus (Quelle: HttpArchive, Seitengewicht September 2018).

Eine wirksame Bildoptimierung kann deshalb enorme Auswirkungen auf die Geschwindigkeit deiner Website haben.

Was ist Bildoptimierung?

Ein digitales Bild ist wie ein Schachbrett, ein Rechteck mit 8x8 schwarzen und weißen Feldern. Würdest du das Schachbrett unkomprimiert speichern, müsstest du die Farbe jedes Feldes einzeln aufschreiben („Feld eins ist weiß, Feld zwei ist schwarz, Feld drei ist weiß, Feld fünf ist schwarz usw.“). Für das ganze Brett wären das 64 Zeilen. Das ist zwar genau, aber nicht besonders effizient.

Bildoptimierung heißt, effizientere Wege zu finden, die Farben eines Bildes zu beschreiben. Das ganze Schachbrett passt in eine Zeile: „abwechselnd schwarz und weiß, mit weiß beginnen“, oder noch kürzer: „wiederhole weiß, schwarz“. Bei digitalen Bildern nennt man das Kompression: Der Algorithmus sucht nach Folgen von Farben, die sich wiederholen.

Es gibt verschiedene Algorithmen, jeder mit Stärken und Schwächen. Manche sind bei Fotos besser (mit Millionen von Farben), andere bei Bildern mit wenigen Farben (wie eine PowerPoint-Folie). Der richtige Algorithmus ist dein erster Performance-Schub.

Gängige Bildformate

• JPG ist ein sehr verbreitetes Bildformat mit wirksamer Kompression für Bilder mit vielen verschiedenen Farben, etwa Fotos. Das Format gibt es seit 1992 und es wird von fast jedem Gerät unterstützt.
• GIF ist ein weiteres altes Bildformat, entwickelt 1987. Es ist beliebt, weil es Animationen unterstützt. Technisch ist es sehr begrenzt: nur 256 verschiedene Farben pro Bild.
• PNG wurde 1994 als Ersatz für GIF entwickelt, nachdem es Streit um den Kompressionsalgorithmus von GIF gegeben hatte. Es ist beliebt, weil fast jedes Gerät es unterstützt und PNG Millionen von Farben samt Transparenz kann. Die Kompression ist verlustfrei, sodass Text und Linien scharf bleiben. Damit eignet sich das Format perfekt für Diagramme und Logos.

Vor Kurzem kamen neue Bildformate von Google (webP) und Apple (HEIF) dazu, die noch besser komprimieren als JPG, GIF und PNG. Sie sind aber noch nicht weit verbreitet.

Das richtige Bildformat wählen

Welches Format am besten ist, hängt vom Inhalt des Bildes ab. Eine allgemeingültige Regel für das beste Format gibt es nicht. Probier es am besten selbst aus und schau, wie sich die Dateigröße ändert, wenn du dein Bild in verschiedenen Formaten speicherst. Viele Programme bieten dir die Formatwahl bei „Speichern unter“ an.

Fang mit JPG für Fotos und PNG für Bilder mit weniger Farben an, zum Beispiel ein Logo, eine Grafik oder eine PowerPoint-Folie. Formate wie JPG haben Qualitätseinstellungen, die Bildqualität und Dateigröße beeinflussen. Eine niedrigere Qualität senkt die Bildqualität zugunsten einer kleineren Datei. Such dir die goldene Mitte zwischen Qualität und Größe.

Verlustbehaftete und verlustfreie Kompression

Algorithmen, die Qualität gegen Dateigröße tauschen, nennt man verlustbehaftete Kompression. Algorithmen, die die ursprüngliche Bildqualität erhalten, heißen verlustfreie Kompression.

So optimierst du Bilder

Hast du dein JPG- oder PNG-Bild, optimierst du es mit den richtigen Einstellungen für den Kompressionsalgorithmus. Keine Sorge, das musst du nicht von Hand machen: Mit Optimierungssoftware findest du automatisch die besten Einstellungen für ein Bild.

JPG-Bilder optimieren

Mit Photoshop kannst du die eingebaute Funktion Für Web speichern nutzen und bekommst ein ordentlich optimiertes JPG.

Du kannst auch ein Kommandozeilenprogramm wie jpegoptim nehmen. Es verkleinert JPG-Dateien, indem es die internen Huffman-Tabellen optimiert und so den Kompressionsalgorithmus verbessert. Im Schnitt sind 10-15% Ersparnis ohne Qualitätsverlust drin.

Eine weitere Möglichkeit ist ein Online-Optimierer wie TinyJPG oder ImageOptim.

Mit WordPress kannst du ein Plugin für die Bildoptimierung verwenden, zum Beispiel Imagify von xtremerain.

PNG-Bilder optimieren

PNG-Dateien lassen sich mit Photoshop und der Funktion Für Web speichern optimieren. Noch besser geht es mit einer spezialisierten App wie ImageAlpha für den Mac oder PNGGauntlet für Windows.

Auch für PNG gibt es Online-Optimierer, zum Beispiel TinyPNG und Compressor.io.

Oder du nimmst Kommandozeilenprogramme wie optipng, pngcrush oder pngquant. Es lohnt sich, sich mit diesen PNG-Werkzeugen näher zu beschäftigen.

Test: optipng, pngcrush und pngquant im Vergleich

Als Webentwickler baue ich Bildoptimierung in Content-Management-Systeme ein, damit meine Kunden ihre Bilder automatisch optimieren lassen können. Weil die Zahl meiner Kunden stark gewachsen ist, bekam ich Performance-Probleme.

Um mehr Leistung herauszuholen, habe ich optipng, pngcrush und pngquant getestet. Ich hoffte auf gute Bildoptimierung bei weniger Rechenleistung auf dem Server. Das würde meinen Kunden zugutekommen.

PACE-CME

Ein solcher Kunde ist PACE-CME, eine Website mit Material für die kardiovaskuläre Weiterbildung von Ärzten. Auf dieser Website liegen Tausende PowerPoint-Folien als PNG-Dateien.

Für den Test habe ich ein spezielles Testbild genommen, das größer und schwerer ist als eine typische PowerPoint-Folie. Es ist ein hochaufgelöstes Bild mit gemischtem Inhalt: teils Fotos, teils Text, teils einfarbige Flächen.

Methode

Die Tests liefen auf einem Quad-Core-Intel-Xeon-Server mit 8GB RAM. Pro PNG-Werkzeug habe ich sowohl die extremsten Einstellungen verwendet (um zu sehen, wie klein die Datei werden kann) als auch die Standardeinstellung (um zu sehen, wie viel schneller sie ist und wie ihr Ergebnis im Vergleich zur besten Kompression abschneidet).

Ergebnisse

• Original des Testbildes: 2897KB
• optipng extrem (-o7): 2510KB in 2 Minuten 36 Sekunden / Standard: 2536KB in 4,9 Sekunden
• pngcrush extrem (-brute): 2510KB in 1 Minute 42 Sekunden / Standard: 2531KB in 9,2 Sekunden
• pngquant extrem (-s 1): 744KB in 5,2 Sekunden / Standard: 746KB in 4,2 Sekunden

Die Leistung von pngquant ist erstaunlich: Es ist viel schneller und liefert dazu eine viel kleinere Datei. Das ist keine Zauberei, denn pngquant arbeitet mit einem anderen, verlustbehafteten Kompressionsalgorithmus. Mit pngquant optimierte Bilder verlieren also ein wenig Qualität. Ich habe sie genau verglichen und keinen Unterschied bemerkt.

Fazit

Bilder für Web und Performance zu optimieren ist wirklich wichtig. Wie meine Tests zeigen, kann der richtige Algorithmus den Unterschied machen.

Für mich hieß das pngquant, aber deine Wahl kann anders ausfallen, je nachdem, welche Bilder du optimieren willst.

Die wichtigste Erkenntnis aus diesem Beitrag: Kümmere dich um deine Bilder. Deine Website wird viel schneller, und wer liebt schnelle Websites nicht?