Blogparade richtig bloggen: Bildoptimierung fürs Web

Montag, 13. April 2015

Es ist wieder Zeit für einen neuen Beitrag zur Bloggerparade "Richtig Bloggen" Teil 2 - und heute bin ich an der Reihe! Neben den Texten und dem Layout des Blogs sind auch die Bilder entscheidend für den ersten Eindruck, den ein Blog hinterlässt. Sie tragen viel zur Qualität des Blogs bei, können ihn aus der Masse herausstechen lassen und euch von einer Vielzahl anderer Blogs genauso abheben, wie guter Content und tolle Artikel. Damit eure Bilder auf eurem Blog auch genau so aussehen, wie ihr sie haben wollt, gibt es ein paar Dinge zu beachten, auf die ich euch heute aufmerksam machen möchte.

1. Das richtige Dateiformat
Die bekanntesten und häufigsten Bildformate sind wohl jpeg und png. Beide Formate haben Vor- und Nachteile, von denen ich euch die Wichtigsten hier zusammengestellt habe.
JPEG PNG Format Unterschiede
Es gibt daher eine Faustregel, die JPEG Dateien für Fotografien und farbreiche Bilder empfiehlt und das PNG Format für Logos und Grafiken, die mit weniger Farben arbeiten. Durch die verlustfreie Komprimierung bleiben Kontraste und scharfe Kanten besser erhalten, als bei JPEG Dateien. 
Überall da, wo ihr selbst aber keinen Einfluss auf eine spätere Komprimierung habt, zum Beispiel bei Facebook, empfehle ich auch bei Fotos den Upload im PNG Format, damit die Bildqualität erhalten bleibt.
Zusätzlich gibt es noch das Datenformat GIF, das genutzt wird, um Animationen zu erstellen. Da eine Grafik im GIF Format nur maximal 256 Farben zeigen kann, ist es für Fotos aber uninteressant. 

2. Die richtigen Bildmaße
Nachdem ihr euch entschieden habt, in welchem Dateiformat ihr eure Bilder hochladen wollt, bleibt noch die Frage nach den richtigen Maßen und der Auflösung. Grundsätzlich würde ich euch immer dazu raten, Bilder nie in der Originalgröße hochzuladen, sondern in der Größe, in der sie später angezeigt werden sollen. Für ein Foto auf meinem Blog wäre das also eine Breite von 900px, für meinen Header 1020px. Auch für Facebook gibt es empfohlene Maße für die Bilddarstellung. Dadurch habt ihr selbst die Kontrolle über die Änderung an eurem Bild und könnt die Qualität entsprechend überwachen. Wenn ihr das Bild in Originalgröße hochladet und Facebook, Blogger oder Wordpress das Bild an die Maße eures Blogs anpassen lasst, verliert ihr diese Kontrolle. Ein weiterer Vorteil davon ist der Urhebernachweis: sollte das Bild von jemand anderem verwendet werden, habt ihr allein das Original in voller Auflösung und könnt somit nachweisen, der Urheber zu sein.

Kostenlose Programme, mit denen ihr die entsprechende Änderungen an euren Bildern vornehmen könnt, sind zum Beispiel Photoscape oder GIMP (natürlich gibt es noch einige mehr). Natürlich sind diese Anpassungen auch mit Lightroom oder Photoshop möglich.

3. Bilder fürs Internet schärfen
Wenn ihr das Bild nun verkleinert habt, kann es sein, dass die Bildschärfe etwas nachgelassen hat. Bevor ihr nun mit dem Upload beginnt, empfehle ich euch, die Aufnahme fürs Web nachzuschärfen. Gerade die Details werden so besser sichtbar gemacht. Auch das geht mit fast jedem Bildbearbeitungsprogramm. Schärft eurer Bild mehrmals in kleinen Schritten, bis euch das Ergebnis gefällt. Dabei solltet ihr möglichst immer die 100% Ansicht des Bildes nutzen, denn so seht ihr schnell, wenn ihr zu stark nachgeschärft habt.

Vergleich komprimiert vs nachgeschärft
Ich habe hier ein Beispielbild für euch, einmal nach der Größenänderung und einmal nachgeschärft, um euch den Unterschied zu zeigen.

4. Automatische Bildkorrektur deaktivieren 
Diese Funktion hat Blogger mittlerweile automatisch geschaltet, wodurch Bilder, die ihr zu eurem Blog hinzufügt, automatisch in Farbe, Belichtung und Kontrast "verbessert" werden, wenn ihr diese Funktion nicht deaktiviert. Die Änderungen, die dadurch vorgenommen werden, sind teilweise extrem und können von euch nicht beeinflusst werden. Deshalb solltet ihr diese dringend abschalten! Wenn ihr die automatische Bildoptimierung ausschalten wollt, geht in eurem Google+ Konto auf Übersicht > Einstellung > Fotos. User bei Wordpress haben dieses Problem nicht.

Ich hoffe, ich konnte euch mit dieser Übersicht helfen! Wenn ihr noch Fragen habt, postet sie mir gerne in die Kommentare!

Wenn ihr den letzten Beitrag der Blogparade verpasst habt, schaut doch mal bei Jasmin vorbei, sie euch hier einige kostenlose Bildbearbeitungsprogramme vorstellt - morgen geht es bei Tanja mit dem Thema Videodreh weiter. Der Grafik könnt ihr alle Beiträge entnehmen!

Kommentare :

  1. Ihr habt eine super Blogparade gestartet! Ich habe schon jede Menge gute Tipps gefunden, vielen Dank dafür! :)
    Liebe Grüße

    Julia

    AntwortenLöschen
    Antworten
    1. Hallo Julia, vielen Dank für dein Lob! Freut mich sehr, dass sie dir geholfen hat!

      Löschen
  2. Sehr interessant, danke :)
    Habe einiges dazu gelernt, gerade das mit den Einstellungen bei FB & Co. wusste ich nicht. Das werde ich jetzt in Zukunft, für die wenigen Bilder, die ich da mal hochlade, berücksichtigen :)

    AntwortenLöschen
    Antworten
    1. Freut mich, dass dir die Tipps helfen! Dafür ist die Blogparade ja da :)

      Löschen

Ich freue mich auf deine Nachricht!