Bilder fürs Web optimieren

Bilder gehören zur Online-Welt, keine Frage. Dass man nicht einfach die Fotos von der Kamera hochladen sollte, ist wahrscheinlich klar, aber das genaue Prozedere bis das Bild zwar scharf ist aber trotzdem nur wenig Speicher braucht, quasi optimiert ist, da hat jeder so seine Vorgehensweise. Ich erklär dir hier mein Prozedere, wie ich Bilder für Webseiten optimiere.

Bilder bzw. Fotos werden in der Regel im jpeg-Format ins Netz gestellt, denn jpeg lässt sich am besten komprimieren. Grafiken dagegen werden meist als png gespeichert. Beim PNG werden vor allem die Farben komprimiert. Das macht daher bei Fotos wenig Sinn, die sehen schnell unnatürlich aus. Bei einer Grafik, die meist eh weniger Farben hat, ist diese Form aber umso besser, denn hier kann man richtig komprimieren.

Wie gehe ich nun im Einzelnen vor?

Hier sind meine Schritte im Überblick, wie ich Bilder optimiere:

  1. Format auswählen: hoch oder quer oder vielleicht quadratisch? Oder ist das vielleicht ganz egal und Du kannst einfach das passende Motiv auswählen?
  2. Wie groß muss das Bild wenigstens sein? Das heißt fürs Web: wie viele Pixel pro Seite?
  3. Bild entsprechend des Formates auswählen und eventuell zuschneiden.
  4. Bild auf die passende Pixelgröße verkleinern
  5. Bild mit TinyJPG komprimieren
  6. Bild auf meinen Webspace / in die Mediathek hochladen

Hier die Schritte im Detail:

Zu 1. Es kommt immer mal vor, dass ich ein schönes Hochformat-Foto habe, der Blogbeitrag aber ein Feature-Bild im Querformat verlangt. Das solltest Du unbedingt beachten, sonst fehlen vom Hochkannt-Foto dann wichtige Teile und das Bild ist quasi sinnlos. Also zunächst überlegen, welches Format bzw. Seitenverhältnis brauche ich?

Zu 2. Wenn das klar ist, weiß ich meist auch schon welche Mindestgröße das Bild haben muss. Ein Featurebild, welches als großes Foto über dem Blogbeitrag steht, sollte zum Beispiel 1000 Pixel breit sein und 500 bis 750 Pixel hoch, damit es noch ein Querformat-Foto ist. Das ist abhängig von den Vorgaben Deines Themes oder anderer Bildeinstellungen. Eventuelle brauchst Du ein Bild, was eben genau x mal y Pixel hat.

Zu 3. Dan wähle ich das Foto also entsprechend des benötigten Formates und der Bildgröße aus. Eventuell verwende ich nur einen Ausschnitt aus dem Bild, sodass aus einem Hochformat ein Querformat werden kann. Dann muss ich das Bild zuschneiden.

Für die Bildbearbeitung benutze ich oft das Programm Photoshop Elements, damit kann ich ein Bild wunderbar bearbeiten und verbessern. Ja, es ist quasi fast Photoshop und daher nicht so intuitiv zu bedienen aber für mich hat es sich allemal gelohnt, hier ein bisschen Zeit zu investieren und mich in das Programm einzuarbeiten. Dazu erzähl ich später mehr.

Wenn ich das Bild nicht verbessern will, nehme ich einfach das Programm IrfanView, welches sehr beliebt und für den privaten Gebrauch kostenlos ist. Für die kommerzielle Benutzung habe ich einmalig für 10 Euro eine Lizenz gekauft, das geht ganz einfach über das Hilfemenü im Programm oder auf der Webseite bei Support: http://www.irfanview.de/

Mit IrfanView kann ich ganz simpel ein Foto beschneiden, indem ich mit der Maus einen Teil des Bildes ausschneide und als neues Bild speicher.

Zu 4. Anschließend, wenn das Bild noch zu groß ist, was meist der Fall sein wird, kann ich es mit der Batch-Funktion verkleinern. Dabei reicht es, wenn ich die Länge EINER Seite festlege, die andere wird dann automatisch errechnet. Ich lege fest, wo das Bild gespeichert werden soll. Auch die Komprimierung, also die Qualität des jpegs kann ich hier schon festlegen. Meist wähle ich sehr wenig Komprimierung aus, denn dafür gibt es ein besseres Tool, wie ich finde.

Zu 5. Und schon sind wir beim letzten Verkleinerungs-Schritt. Nun gehe ich im Netz auf die Seite tinyJPG. Dort werden sowohl Bilder (jpeg) als auch Grafiken (png) komprimiert. Einfach das Bild per Drag and Drop auf das markierte Feld schieben und so hochladen, kurz warten und schon kann ich das fertig komprimierte Bild wieder downloaden und auf meiner Festplatte speichern. Netterweise sehe ich um wieviel Prozent die Datenmenge reduziert werden konnte. Das beste: Man sieht echt keinen Unterschied in der Bildqualität.

Bilder verkleinern mit TinyJPG

So sieht die Webseite TINYJPG aus, auf der ich meine Fotos verkleinere. Einsparung hier beim Titelbild 83 %. Du siehst, das hat sich gelohnt. Jetzt ist das Bild noch ganze 70 kb groß.

Das klingt jetzt vielleicht komplizierter als es ist. Aber wenn Du das ein paar Mal gemacht hast, wirst Du sehen, es geht relativ schnell und ist nicht weiter kompliziert.

Hier nochmal die Zusammenfassung der Bildoptimierung:

  1. Format festlegen
  2. Bild bzw. Bildausschnitt wählen und dieses neue Bild abspeichern
  3. Dann das Bild auf die richtige Pixelgröße verkleinern, wieder speichern
  4. Und danach noch im Netz komprimieren.

Voilà – fertig ist das Web-optimierte Foto, was Du bedenkenlos in die Mediathek bzw. auf Deine Seite laden kannst.

Photoshop Elements – So hol ich das Beste aus Fotos raus

Jetzt noch ein kurzer Ausflug zum Thema Bildbearbeitung. Dafür nehme ich in der Tat am liebsten Photoshop Elements. Dieses Programm hat ein geniales Feature. Ich kann dort nämlich normale jpegs als CameraRaw öffnen. Was heißt das? Bilder im RAW Format machen meist Fotografen, weil sie diese Bilder hinterher sehr umfangreich bearbeiten können. Weißabgleich, Farbtemperatur, Dynamik und mehr kann angepasst werden.

Und wer mal versucht hat, ein jpeg zu optimieren ohne diese Mittel, der weiß, wie mühsam das ist. Zumindest für mich als Nicht-Profi. Im RAW Format kann ich wunderbar Bilder aufhellen, den Weißabgleich ändern, die Farbtemperatur anpassen und so Bilder auch mal relativ schnell verfremden oder farblich anpassen. Es gibt außerdem eine Automatik-Funktion die mir das Ganze sehr erleichtert. Bestenfalls bin ich also nach dem Klick auf „automatisch“ schon bei einem deutlich optimierten Foto angelangt und kann dieses dann speichern. Wie gesagt, das funktioniert bei Elements nicht nur mit Fotos im RAW-Format sondern auch mit jpeg Bildern.

Und noch etwas Cooles: während die Profi-Programme wie Photoshop oder Indesign inzwischen nur noch per ABO über die Adobe-Cloud zu beziehen sind und dann monatlich eine Gebühr kosten, kann man Elements noch als Programm kaufen. Es kostet um die 70 Euro – for life!!!! Dieses Geld ist wirklich super investiert, ich jedenfalls habe damit schon aus so manchem Bild quasi eine Poster-Qualität gezaubert.

 

Und wie sieht Deine Fotoroutine aus? Hast Du weitere Tipps und Tricks, dann schreib mir gern einen Kommentar, ich freu mich immer über Verbesserungsvorschläge.

0 Kommentare

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.