Bildbearbeitung: Internet-Bildoptimierung

Bilder bearbeiten, vergrößern und verkleinern ist die eine Sache. Dabei jedoch Webkonform zu bleiben und die Bilder für das Internet richtig zu optimieren, ist eine andere.

Video Tutorial am Ende des Artikels

Da ich immer wieder Probleme damit habe, Bilder zu bearbeiten, das richtige Format zu finden, diese zuzuschneiden und dann die Frage zu klären „unter welcher Dateiendung diese abzuspeichern ist“, habe ich das Thema näher recherchiert.

Im Grunde muss man sich nur an ein paar Regeln halten und ein minimales Grundwissen über Dateiformate mitbringen. Und genau diese möchte ich euch hier aufzeigen!

Die Dateiformate:

JPEG/JPG

JPEG ist wohl das bekannteste Dateiformat. Dieses eignet sich für realistische Fotos bzw. für Fotos welche mit vielen Details und Farbverläufen bzw. Farbübergängen versehen sind.

GIF

Gifs sind wahre Meister in der Komprimierungsrate, das liegt daran dass maximal 256 Farben abgespeichert werden können, nichts für Fotos. Gifs eignen sich daher ideal für einfache Bilder mit klaren Linien und wenig Farben. Gif kann aber noch mehr: Damit können animierte Bildreihen und transparente Hintergründe erstellt werden.

PNG

PNG ist der Allrounder, dieses gibt es mit 256 Farben, aber auch mit mehr als 17 Millionen Farben, wie beim JPG-Format. Daher kann man dieses für beide Varianten benutzen. Ebenfalls kann man im PNG-Format transparente Hintergründe realisieren.

Grundregeln zur Bildbearbeitung

Regel 1: Bildspeichern

Fotos werden in JPG/JPEG gespeichert. Einfache Grafiken mit klaren Kanten und wenigen Farben werden in GIF gespeichert.

Wird ein GIF mit vielen Farbabstufungen benötigt, dann nimmt man PNG.

Dies stellt übrigens keine fixe Muss-Regel auf, vielmehr ist dies mein Vorgehen, welches sich – seit meiner Recherche – bewährt hat.

Regel 2: verkleinere immer vom Original

Bilder sollten immer vom Originalfoto verkleinert werden, keine Wiederholten Verkleinerungen. Ein Beispiel: Ich verkleinere ein Bild – ausgegangen vom Original – auf 50 % und speichere es ab. Dieses Bild verkleinere ich dann wieder um 50 % und speichere es ab. … Gescheiter wäre, dass man wieder das Original öffnet und dieses auf 25 % verkleinert.

Diese Regel gründet ebenfalls auf Erfahrungswerten. Denn ich habe den Eindruck gewonnen, dass bei erneuter Verkleinerung das volle Potential in – Abwägung zwischen Dateigröße und Qualität – nicht mehr voll genutzt werden kann. Im Gegenteil, ich habe schon gesehen, dass die Datei dann wieder im Speichervolumen gestiegen ist.

Weiterhin versteht sich von selbst, dass Bilder immer im Verhältnis verkleinert werden müssen. So wird ein 400×800 Bild beispielsweise zu einem 200×400 Bild, jedoch auf gar keinen Fall zu einem 300×400 Bild. Dies hätte hässliche Verzerrungen zur Folge.

Regel 3: Vermeide Vergrößerungen

In jedem Fall, solltest du Bildvergrößerungen vermeiden. Das gilt nicht nur für das Bildverarbeitungsprogramm selbst, sondern ebenfalls für die automatische Anpassung auf der Webseite.

Hat man bspw. ein Template, welches Artikelbilder immer auf eine Höhe von 400 Pixel Staucht, so wird ein Bild das nicht 400 Pixel hoch ist, vergrößert. Das sollte um jeden Preis verhindert werden.

Regel 4: Qualität 70 %

Da man Abwägen muss zwischen Qualität und Speichergröße, hat sich die 70%-Qualität-Faustregel etabliert. Nach dem exportieren bzw. speichern in JPEG, kann man zumeist die Qualität der Datei anpassen. Hier solltest du fürs Erste 70 % wählen.

Regel 5: Faustregel 70 KB

Um eine gute Ladezeit der Webseite zu erreichen, sollte man sich an der 70 KB-Regel orientieren. Diese besagt, dass dein veröffentlichtes Bild nicht mehr als 70 KB groß sein soll. Dies aber nur am Rande, denn hier solltest du dich nicht ärgern wenn es nicht kleiner geht und du nicht auf 70 KB kommst. Diese 70 KB sind eher relativ zusehen.

Gehen die Bildspeicher-Größen jedoch in Richtung größer 0,5 MB, dann sollte man dringend etwas unternehmen.

Der Vergleich

Du solltest unbedingt dein Original und bearbeitetes Foto gegenüberstellen. Wenn du mit bloßem Auge und ohne Vergrößerung, keinen Unterschied erkennen kannst, bist du auf dem richtigen Weg. Checke jetzt noch, ob das Speichervolumen der Datei stimmt.

Video Tutorial