Bildbearbeitung

Foto von Sven Brandsma auf unsplash

Bildaufbereitung für die Website

Bilder wecken Emotionen – und sie werden vom Gehirn sehr viel schneller wahrgenommen als Texte. Gute Bilder sind daher die wichtigste Zutat für eine Website, die beim Besucher ankommen soll.

Für die Verwendung auf der Website müssen Bilder aber zuerst vorbereitet werden:

  • Bilder müssen die passende Breite & Höhe (in Pixel) haben.
  • Die Dateigröße soll möglichst klein sein, bei gleichzeitig guter Bildqualität.
  • Der richtige Bildausschnitt lenkt den Blick des Besuchers auf das Wesentliche.

Kümmern wir uns also um die Bildoptimierung! Los geht's!

Inhaltsverzeichnis

1. Bildgröße bearbeiten

Wenn wir von der Bearbeitung der Bildgröße sprechen, dann reden wir von drei verschiedenen Dingen:

  • Breite und Höhe verändern: von z.B. 4000 Pixel Breite/Höhe auf z.B. 800 Pixel Breite/Höhe
  • Ausschnitt festlegen: oft wird ja nicht das ganze Bild benötigt, sondern nur ein kleiner Ausschnitt
  • Proportionen festlegen: gängige Formate sind 16:9, 4:3, 3:2, 1:1

Diese drei Schritte können alle mit einem Standard-Bildbearbeitungsprogramm erledigt werden. Ich erkläre das am Beispiel Microsoft Paint 3D – wenn Sie ein anderes Programm verwenden wollen, versuchen Sie, die einzelnen Schritte damit nachzuvollziehen. Zur Bearbeitung mit iPhoto sehen Sie weiter unten noch eine Bildergalerie.

Welche Pixelmaße brauche ich für meine Bilder?

Welche Pixelmaße bzw. Proportionen Sie benötigen, können Sie im Backend im Navigationsbereich unter dem Punkt Dokumentation nachlesen.

Bildgröße bearbeiten mit Paint 3D

  • Öffnen Sie ein Foto mit MS Paint 3D und klicken Sie in der Menüleiste auf Zeichenbereich.
  • In der rechten Spalte sehen Sie nun die Breite und Höhe des Bildes in Pixel.
  • Falls die Checkbox Seitenverhältnis sperren noch nicht angehakt ist, machen Sie das bitte jetzt. Damit verhindern Sie, dass das Bild bei einer Größenänderung verzerrt wird.

1.1 Bildausschnitt/Proportionen anpassen

  • Klicken Sie in der hellen Menüleiste auf Zuschneiden.
  • In der rechten Spalte können Sie nun entweder einen Rahmen mit einer fixen Proportion auswählen oder ein eigenes (benutzerdefiniertes) Format eingeben bzw. mit der Maus markieren.
    ➜ Wichtig: wenn Sie ein benutzerdefiniertes Format verwenden, beachten Sie bitte, dass Sie damit einen Bildausschnitt definieren, das ist nicht dasselbe wie die Verkleinerung der Pixelmaße, die das gesamte Bild verkleinern (siehe Schritt 2).
  • Wählen Sie nun den gewünschten Rahmen (z.B. 4:3) und verändern Sie ggf. die Auswahl mit der Maus (nach oben/unten schieben, verkleinern).
  • Wenn Sie einen Rahmen wählen, bitte die Pixelmaße hier noch nicht verändern.
  • Wenn der Bildausschnitt passt, bestätigen Sie mit Fertig.

1.2 Pixelmaße verkleinern

Wenn der Bildausschnitt und die Proportionen passen, dann brauchen Sie jetzt nur mehr die Pixelmaße anzupassen:

  • Ändern Sie Breite ODER Höhe auf das gewünschte Maß und bestätigen Sie mit Enter. Da das Seitenverhältnis gesperrt ist, passt sich der zweite Wert automatisch an.
  • Speichern Sie das Bild ab – im nächsten Schritt werden wir dann noch die Dateigröße optimieren.

Kann Contao meine Bilder bearbeiten?

Kurze Antwort: Nein.

Contao ist ein Content-Management-System und kein Bildbearbeitungsprogramm. Grundsätzlich kann Contao Dateien beim Upload verkleinern, solange sie unterhalb der voreingestellten Grenzen liegen:

Diese Grenze liegt standardmäßig bei 3000 x 3000 Pixel und einer Dateigröße von 1.95313 MB.

Empfehlenswert ist das aber nicht, denn damit ist weder der richtige Ausschnitt defniert noch die Datei selbst für eine Darstellung auf der Website optimiert.

1.3 Bildgröße bearbeiten mit iPhoto

Danke Nina für die Erstellung der Screenshots!

nach oben

2. Dateigröße optimieren

Eine möglichst geringe Dateigröße bewirkt, dass das Bild schneller geladen werden kann.

Zur Verringerung der Dateigröße gibt es mittlerweile viele sehr gute (kostenlose) Online-Dienste. Das Prinzip ist immer mehr oder weniger gleich: Laden Sie ein oder mehrere Bilder hoch und nach der Verarbeitung können Sie die optimierten Dateien herunterladen und in Contao verwenden.

Programme zum Download (teilweise kostenpflichtig) für versiertere Benutzer, die viele Fotos bearbeiten müssen:

nach oben

3. Bildgrößen in Contao einstellen

Artikel ist in Arbeit

nach oben

4. Bildbearbeitungsprogramme

Wer noch tiefer in die Materie eintauchen will, kann diese Online-Tools probieren:

  • Edit Photo Bildausschnitt, Effekte, ...
  • remove.bg entfernt den Bildhintergrund
  • ojoy zu kleine Bilder vergrößern

Weitere Bildbearbeitunsprogramme:

  • Photopea – eine Art kleines Photoshop im Browser
  • Gimp – mittlerweile ein Klassiker
  • Affinity Photo – ernstzunehmende Photoshop-Alternative (ohne Abo, sehr gutes Preis-Leistungsverhältnis)
nach oben