Einzelne Bilder schnell und einfach komprimieren

Bilder, die man von der eigenen Kamera oder vom Smartphone auf den Computer überträgt, haben üblicherweise eine fürs Web zu große Dateigröße. Genauso verhält es sich bei Stock-Fotos. Das ist auch sinnvoll, sofern man die Bilder bearbeiten möchte. Doch sollen diese Bilder so wie sie sind (oder nach der Bearbeitung) auf der eigenen Website veröffentlicht werden, sprechen viele Gründe dafür, diese vorher zu verkleinern:

Komprimierung von Bildern ist gut für die Performance (Quelle: Jimmy Tran – Shutterstock)
  • Kleinere Bilder laden schneller – nicht nur in Zeiten zunehmender mobiler Internetnutzung ist das wichtig. Gerade in ländlichen Gegenden ist immer noch kein Breitbandinternet verfügbar, hier würde der Download einer großen Bilddatei unzumutbar lange dauern.
  • Die Serverlast wird verringertsomit kann die gesamte Website schneller ausgeliefert werden. Mit der Zeit sammeln sich eine Menge Bilddateien an, sind diese auch noch unkomprimiert, kann das die eigene Website verlangsamen.
  • Nur maximal 120 ppi auf Desktop-Bildschirmen – Moderne Bildschirme für Desktop Computer können derzeit Bilder nur mit ca. 120 ppi darstellen. Die Displays werden zwar besser, doch auch die Bildschirme immer größer. Ein 24-Zoll-Bildschirm z. B. mit einer Auflösung von 1920×1080 Pixel (Full HD) zeigt das Bild mit ca. 92 ppi.
  • Geringe Bandbreite auf mobilen Endgeräten – Smartphones und Tablets haben auch hochauflösende Displays, aber auf kleinen Bildschirmen. Daher könnten hier rein theoretisch die tollsten Bilder dargestellt werden. Doch ist hier das Problem mit der (bisher noch zu geringen) Bandbreite im mobilen Internet, um große Bilddateien auf Websites herunterzuladen -> also doch wieder komprimieren.

CMS komprimieren üblicherweise nicht automatisch

Content Management Systeme wie WordPress oder Joomla! verkleinern die Bilder beim Upload nicht, sofern man kein spezielles Plugin dafür installiert hat. WordPress speichert das hochgeladene Bild in drei verschiedenen Abmessungen ab (Vorschaubild, mittelgroß und groß) doch eine Komprimierung des hochgeladenen Originalbildes erfolgt nicht. Ist das hochgeladene Bild größer als die in den Einstellungen definierte Maximalgröße, hat man vier verschiedene Versionen eines Bildes auf dem Server liegen (und braucht womöglich nur eine oder zwei).

In welchen Größen die Bilder abgespeichert werden, erfährt man im Backend von WordPress unter „Einstellungen“ -> „Medien“. Hier kann man auch die Einstellungen an die eigenen Bedürfnisse anpassen.

Dateigröße verringern in zwei Schritten

Für Bilder, die im Inhaltsbereich untergebracht sind, sollte eine maximale Größe von 200 KB ausreichen. Als Beispiel nehme ich oben eingefügtes jpg-Bild, das ich von Shutterstock habe. Nach dem Download hat es eine Größe von 5,87 MB und Abmessungen von 4288 x 2676 Pixel. Folgende Werkzeuge empfehle (und nutze) ich, um schnell und einfach Bilder komprimieren zu können:

Schritt 1: Abmessungen reduzieren mit Paint (oder Vorschau)

Es empfiehlt sich, zunächst die Abmessungen des Bildes zu reduzieren. Würde ein Bild dieser Größe auf einem Standard Full-HD Bildschirm mit 1920×1080 Pixel dargestellt, müsste man hin- und herscrollen, um das Bild vollständig zu sehen. Daher reduziere ich zunächst die Abmessungen des Bildes, das reduziert auch die Dateigröße. Hierfür verwende ich ein Standardwerkzeug, dass mit Windows mitgeliefert wird: Paint. Anhand dessen erkläre ich die Vorgehensweise.

Für Mac-Besitzer gibt es ähnliches Programm, dass im System enthalten ist: Vorschau. Auf folgender Supportseite von Apple gibt es eine Anleitung, wie man die Größe der Bilder anpasst (ca. zur Mitte scrollen) Mac-Grundlagen: Mit dem Programm Vorschau Bilder und PDFs anzeigen und bearbeiten

Mit Paint lässt sich die Abmessung von Bildern einfach reduzieren (Quelle: Screenshot Paint Windows 7)

Doch nun zurück zu Paint: Zunächst öffnet man das Bild in Paint. Am einfachsten geht das, indem man einen Rechtsklick auf das Bild ausführt und im Dialog „Öffnen mit“ Paint auswählt. Ist das Bild geöffnet, wählt man oben links „Größe ändern“ aus. Hier kann man nun zwischen Prozentsatz und Pixel wählen.

Um genauere Ergebnisse zu erreichen, wähle ich hier Pixel aus und ändere den Wert bei „Horizontal“ auf 800 Pixel. Der Haken bei „Seitenverhältnis beibehalten“ muss gesetzt sein, dann passt sich der vertikale Wert automatisch an. Nach Klick auf OK ändern sich die Abmessungen von 4288 x 2676 Pixel auf 800 x 499 Pixel. Nun speichere ich das Bild unter neuem Namen wieder als JPG-Datei ab.

Mit „Auswählen“ kann man auch einen bestimmten Bereich des Bildes markieren und diesen mit „Zuschneiden“ freistellen und danach erst die Verkleinerung der Abmessungen durchführen, so lässt sich die Dateigröße noch mehr verringern.

Im Fall meines Beispielbildes hat sich die Dateigröße nun von 5,87 MB auf 280 KB verringert, das ist beträchtlich und der Qualitätsverlust ist noch akzeptabel.

Schritt 2: JPG-Dateien mit JPEGmini komprimieren

JPEGmini holt noch Einiges heraus (Quelle Screenshot JPEGmini.com)

Um noch mehr herauszuholen, wende ich noch das Online-Tool JPEGmini an. Es gibt verschiedene (auch kostenpflichtige) Versionen des Tools, doch für einzelne Bilder kann man das kostenlose Online-Angebot unter http://www.jpegmini.com/main/shrink_photo nutzen. Das Programm ist sehr benutzerfreundlich, mit Drag-and-Drop fügt man sein Bild hinzu und es wird automatisch komprimiert.

Mein Beispielbild reduziert sich nun von 280 KB auf 158 KB und behält dabei die Abmessungen von 800 x 499 Pixel. JPEGmini arbeitet ausgezeichnet, einen Qualitätsverlust des Bildes kann ich nicht wirklich erkennen.

TinyPNG für PNG-Dateien

Den Trick zur Reduzierung der Abmessungen mit Paint kann man bei PNG-Dateien leider nicht anwenden. Paint kann mit Transparenzen nicht umgehen und wandelt alles Transparente einfach in weiß um. Hier muss man ein Bildbearbeitungsprogramm wie z. B. Photoshop oder GIMP heranziehen. Das Programm Vorschau auf dem Mac hingegen kann mit Transparenzen umgehen.

Zur Komprimierung von PNG-Dateien eignet sich TinyPNG (Quelle: Screenshot TinyPNG.com)

Doch es gibt auch ein empfehlenswertes Online-Tool zur Komprimierung von PNG-Dateien: TinyPNG. Es lässt sich genauso einfach bedienen wie JPEGmini. Man zieht einfach die Dateien in den entsprechenden Bereich und sie werden komprimiert. Mit TinyPNG kann man bis zu 20 Dateien gleichzeitig komprimieren. JPG-Dateien kann man auch verkleineren, doch sind die Ergebnisse hier nicht so gut, wie bei JPEGmini. Mein Beispielbild konnte hier „nur“ auf 237.2 KB reduziert werden. Daher verwende ich das Tool nur für PNG-Dateien.

Fazit

Möchte man Bilder im Netz publizieren, ist Komprimierung sehr wichtig, hauptsächlich um den Besuchern lange Ladezeiten zu ersparen. Gleichzeitig soll die Qualität des Bildes nicht zu sehr unter der Reduzierung leiden.

Für CMS-Systeme gibt es zahlreiche Plugins zur Komprimierung. Es gilt, herauszufinden, welches am besten zu den eigenen Bedürfnissen passt. Doch um die Serverlast zu reduzieren und das CMS nicht unnötig aufzublähen, empfiehlt es sich dennoch, die Dateigröße vorab „manuell“ zu reduzieren. Mit o. g. Methode habe ich eine Reduzierung der Dateigröße von 5,87 MB auf 158 KB erreicht. Der Qualitätsverlust ist akzeptabel und ich bleibe unter der empfohlenen Dateigröße von 200 KB.

Zusätzlich habe ich das WordPress-Plugin Crazy Lazy installiert. Es komprimiert die Bilddateien nicht, sondern sorgt dafür, dass die Bilder erst vom Server geladen werden, wenn sie sich auch tatsächlich jemand ansieht. Sie werden also erst geladen, wenn jemand dorthin scrollt. Das steigert die Performance der ganzen Website und „unnötiges“ Nachladen wird vermieden. Dieses Plugin eignet sich meines Erachtens auch gut für Fotografen, die ihre Bilder auf der eigenen Website natürlich in möglichst guter Qualität publizieren wollen.

Welche weiteren Plugins sind empfehlenswert? Welche Tools oder Methoden sind sonst noch hilfreich, um Bilder zu komprimieren? Wer möchte, kann seine Erfahrungen gerne mitteilen.