Bildbearbeitung vor dem Hochladen auf deine Webseite

Wunderst du dich über zu lange Ladezeiten auf deinem Blog/deiner Webseite ?
Daran könnten die Bilder Schuld sein !!

Ich zeige dir, wie du Bilder so bearbeitest, dass sie perfekt auf deine Webseite passen und nicht zu lange laden.

Zwei wichtige Faktoren sind bei der Bildbearbeitung zu beachten:

  • der richtige Ausschnitt bzw. das Format des Bildes (z.B. 1400×800 px)
  • die Qualität bzw. die Pixelmenge (z.B. 3,2 MB) des Bildes

Beides muss passen, der richtige Ausschnitt ist dafür zuständig, dass es gut aussieht, die Qualität des Bildes ist verantwortlich für die Ladezeit des Bildes.

Beginnen wir mit einem geeigneten Bildbearbeitungprogramm:

Wenn du noch kein Programm zum Bearbeiten deiner Fotos besitzt, solltest du dir erst mal ein geeignetes Programm herunterladen. Kosten muss das nichts ! Natürlich ist es schön mit Photoshop (oder auch Photoshop Elements) zu arbeiten, aber für den „normalen“ Webseiten- und Blogbesitzer genügt ein kostenloses Programm durchaus ! Ich habe gute Erfahrungen mit PICASA und Zoner gemacht, oder wenn du mit Ebenen arbeiten möchtest gibt es GIMP als Freeware. Aber auch Photoscape oder Magix Foto Designer kommen in Frage.
Nach dem Herunterladen solltest du dich mit dem Programm vertraut machen und damit ein bisschen herumspielen. Je besser du dich auskennst, um so leichter wird hinterher die Bildbearbeitung im täglichen Geschäft. Meine Screenshot sind von PICASA

Ausschnitt/Format des Bildes wählen:

Abhängig von dem Zweck deines Bildes musst du nun den Bildausschnitt festlegen: Hochformat, Querformat, quadratisch – erlaubt ist, was passt !

Hier zwei Beispiele für den Zuschnitt eines Headers:

bildbearbeitung beispiel1

bildbearbeitung beispiel2
Header dürfen z.B. nicht zu hoch sein, Bilder für Blogposts sollten über die gesamte Breite des Texts gehen…etc. Oder du möchtest ein Detail mehr in den Mittelpunkt rücken ? Machmal hast du auch schon eine Vorgabe, wie z.B. bei den Facebook-Profilbildern (180x180px).
Ich handhabe das wie folgt: habe ich eine Vorgabe, dann gebe ich das bei PICASA so ein und habe automatisch das richtige Verhältnis (aber noch nicht die richtige Größe !), habe ich keine Vorgabe schneide ich nach Augenmaß.
Die Verkleinerung auf die richtige Pixelgröße/Qualität erfolgt bei PICASA in einem 2.Schritt.
Beispiel: Ich habe das Headerbild so zugeschnitten, dass es mir gefällt, die Dateigröße beträgt jetzt 1,41MB – das ist zum Hochladen viel zu groß !!

Größe bzw. Qualität des Bildes anpassen:

Die Breite des (Header)Bildes lege ich auf 1400px fest, da das so in mein WordPress-Theme passt, das verringert die Größe der Datei schon mal erheblich (im Original ist die Breite 4000px). Außerdem kann ich noch festlegen wie hoch die Qualität des Bildes sein soll. Hohe Qualität = große Dateigröße, geringe Qualität = geringe Dateigröße.
Ich verkleinere das Bild also auf 1400px, mittlere Qualität – jetzt befinde ich mich schon bei einer Dateigröße von ca. 60 kb !

bildbearbeitung beispiel3
Diese Funktion, die auch die Qualität des Bildes verändert, heißt in jedem Programm etwas anders, bei PICASA z.B. findet man sie unter „Bild in Ordner exportieren“, in Photoshop heißt sie „Für Web speichern“ und bei Zoner „JPEG für Web speichern“…

Wenn du dein Bild so bearbeitet hast, kannst du es unbesorgt hochladen !

Hier noch ein Link zu einem ähnlichen Artikel von Thomas Meurer.
unter

Hast du Fragen ? Welches Programm nutzt du zur Bildbearbeitung ??

Das könnte dich auch interessieren:

No Comments

Post A Comment