Tutonaut
Im Internet solltet Ihr die Bildgröße reduzieren.
Im Internet solltet Ihr die Bildgröße reduzieren.

Ganz einfach Bilder und Fotos für die Website verkleinern

Fotos direkt von der Kamera sind riesig. Im Internet solltet Ihr die Bildgröße noch vor dem Upload reduzieren. Wir zeigen, wie es geht.

Wenn Ihr Eure Website oder Euer WordPress-Blog mit Tools wie GTMetrix oder Google Pagespeed testet, werdet Ihr schnell merken, dass auf Websites Bilder die größten Geschwindigkeitsbremsen sind. Bilddateien sind eben groß, weshalb es sich anbietet, sie vor oder beim Upload zu verkleinern. Wir zeigen Euch einige Möglichkeiten, Fotos für das Web zu verkleinern.

Warum sollte ich Bilder für die Website verkleinern?

Grundsätzlich sind Bilddateien eine recht sperrige Angelegenheit. Maßgebliche Faktoren für die Größe von Bildern sind das Auflösung, der Dateityp und natürlich das Kompressionslevel. Wenn Ihr Bilder direkt von Eurer Kamera hochladet, sind diese riesig: Bei JPEGs mit 24 Megapixeln (6000 x 4000 Pixel), wie sie zum Beispiel meine Fuji X100F liefert, kommen schnell 12 Megabyte pro Foto zusammen.

Das Originalbild aus der Kamera hat 13 MB – viel zu viel für's Internet.
Das Originalbild aus der Kamera hat 13 MB – viel zu viel für’s Internet.

Hohe Qualität = lange Ladezeiten

Schließlich gilt: Je höher die Bildqualität, desto länger die Ladezeiten. Deshalb sind derart riesige Bilder im Web auch fehl am Platz: Selbst große, hochauflösende Displays wie das des iMac Pro haben „nur“ 5120 x 2880 Pixel, können im Idealfall also „nur“ 15 Megapixel darstellen. Wobei durch Apples Retina-Technologie eigentlich nur 2560 x 1440 Pixel, also ca. 3,6 Megapixel gezeigt werden. Die meisten Notebooks, Smartphones und Tablets liegen deutlich unter diesem Wert.

Riesige Bilder sind im Web fehl am Platz

24, 15 oder auch nur 3,6 Megapixel braucht im Web natürlich auch kein Mensch. Gängige Websites haben eine Content-Area von rund 1000 Pixeln. Bei Querformat-Bildern im 4:3-Format hieße das: 1000 x 750 Pixel können dargestellt werden, also rund 0,75 Megapixel. Genau hier liegt das Problem: Bindet Ihr im Worst-Case an dieser Stelle den 24-Megapixel-Brecher mit 12 Megabyte aus der Kamera ein, wird dieser pro Seitenaufruf auch geladen, aber nur im Kleinformat angezeigt. Das belastet sowohl das Datenvolumen Eures Servers, als auch Eurer Leser massiv. Das Bild bremst die Ladezeit – und Google straft Euch ab. Zudem dauert bei diesen Riesen-Bildern natürlich auch das Hochladen deutlich länger.

Das richtige Bildformat für’s Web

Genau deshalb solltet Ihr Bilder schon vor dem Upload verkleinern. Einerseits durch ein Beschneiden („Crop“) auf die wichtigsten Bildinhalte, andererseits durch Verkleinerung des übrigen Bildformats auf eine für das Web akzeptable Größe. Übrigens gilt das nicht nur für Websites, sondern auch für Facebook, Instagram und andere Dienste: Zwar verkleinern die die Bilder selbst, den großen Upload müsst Ihr allerdings stemmen, was Zeit und Datenvolumen kostet. Deshalb solltet Ihr Bilder vor dem Upload mit den folgenden Schritten vorbereiten. Wichtig: Erstellt vorher eine Arbeitskopie Eures Bildes, damit Ihr das Original nicht verändert, denn die folgenden Schritte sind verlustbehaftet:

1. Foto für die Website beschneiden („croppen“)

Zunächst solltet Ihr das Bild auf den relevanten Inhalt beschneiden. Hierfür gibt es reihenweise Tools. Der Screenshot zeigt Apples Vorschau, auf dem PC könnt Ihr zum Beispiel IrfanView benutzen. Natürlich tut es auch jede andere Bildbearbeitung, etwa Gimp. Schneidet den Bereich aus, der für Eure Internetseite relevant ist. Dadurch wird das Bild bereits verkleinert: Im Beispiel-Screenshot von 6000 x 4000 und 23 MB auf rund 4000 x 3000 Pixel und 7,5 MB. Was immer noch viel zu viel ist.

Durch das Croppen wird der wichtige Bildbereich hervorgehoben.
Durch das Croppen wird der wichtige Bildbereich hervorgehoben.

2. Foto für den Upload verkleinern („skalieren“)

In einem nächsten Schritt solltet Ihr Euch anschauen, wie groß das Bild noch in Pixeln ist. Vergleicht diesen Wert mit Eurer Website: Ihr braucht im Netz normalerweise keine so riesigen Bilder, ein Wert von maximal 2000 x 1500 Pixeln dürfte selbst mit „Sicherheitsnetz“ für die meisten Websites und Dienste mehr als ausreichend sein. Wählt also die Größenkorrektur-Funktion, gebt ca. 2000 x 1500 Pixel ein und speichert das Bild ab. Mutige können auch direkt auf die 1000er-Breite gehen. Die Dateigröße liegt jetzt nur noch bei rund 1,9 Megabyte, was allerdings immer noch zu viel ist.

Skaliert das Bild, um seine Dateigröße zu verbringen.
Skaliert das Bild, um seine Dateigröße zu verbringen.

3. Bild mit reduzierter Qualität als JPEG abspeichern

Öffnet das Bild erneut und speichert es anschließend erneut als JPEG ab. Dafür haben die meisten Foto-Tools eine Funktion, die die Einstellung der Kompressionsstufe ermöglicht. Wählt eine Kompressionsstufe zwischen 60 und 75 Prozent, dadurch reduziert sich die Bildgröße deutlich, ohne dass der Qualitätsverlust zu hoch ist. Klar seht Ihr im Direktvergleich mit dem Original, dass das Bild jetzt viel pixeliger und unschärfer ist – das ist jedoch gewollt, denn im Web gilt ja nicht Postergröße, sondern die maximale Darstellung auf den relativ kleinen Bildschirmen.

Zusätzliche Kompression reduziert die Foto-Dateigröße weiter.
Zusätzliche Kompression reduziert die Foto-Dateigröße weiter.

4. Foto für das Web optimieren

Als letzten Schritt könnt Ihr das Bild noch durch einen sogenannten Bild-Optimierer jagen: Dabei handelt es sich um ein Programm, dass die Bildqualität erhält, aber die Komprimierung der Bilddatei optimiert. Je nach Rohmaterial könnt Ihr auf diese Weise noch einmal zwischen 5 und 80 Prozent der Dateigröße reduzieren. Eines dieser Tools ist Image Optimizer für den Mac, für Windows und Linux gibt es zudem E-Mage. Zieht die Bilder in das Tool und ihre Dateigröße wird noch einmal schön reduziert.

Ein Image-Optimizer holt noch das letzte Quäntchen Dateigröße heraus.
Ein Image-Optimizer holt noch das letzte Quäntchen Dateigröße heraus.

Bei WordPress: Direkt auf dem Server mit Ewww Image Optimizer

Anschließend sind Eure Fotos für das Web vorbereitet, sie nehmen kaum noch Bandbreite auf dem Webserver weg und auch der Upload geht viel schneller. Übrigens benutzen wir hier bei Tutonaut.de zusätzlich noch ein serverbasiertes Bildoptimierer für WordPress, den kostenlosen Ewww Image Optimizer.

Die Einstellungen des Ewww Image Optimizers für WordPress sind nicht ohne.
Die Einstellungen des Ewww Image Optimizers für WordPress sind nicht ohne.

Dieser kann die Bilder nach dem Upload auf dem Server verkleinern und ins richtige Format bringen. Das bietet sich an, wenn Ihr viele Bilder hochladen wollt und nicht alle Schritte auf dem Rechner durchführen wollt oder könnt. Die Einstellungen des Ewww Image Optimizers sind allerdings nicht ohne, weshalb wir Euch empfehlen, für den Einstieg die beschriebene Variante auf dem heimischen Rechner zu bevorzugen.

Christian Rentrop

Christian Rentrop

Freier Journalist, Baujahr 1979. Erste Gehversuche 1986 am Schneider CPC. 1997 ging es online. Seither als Blogger und Journalist in Totholzwäldern, auf digitalen Highways und mit der Vespa GTS 300 oder meinem Hund in der echten Welt unterwegs.
Spendier‘ mir einen Kaffee.

Kommentar schreiben

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Do NOT follow this link or you will be banned from the site!