Bildbearbeitung für Deine Website

Mit welchen Tools Du Deine Bilder für das Web bearbeiten kannst

von Christian Adler

Vorabinformationen

Bevor ein Bild für das Web vorbereitet wird, ist es wichtig die richtige Bildgröße zu kennen. Bitte richte Dich bei der Bearbeitung der Bildgröße an vorhandene Größenverhältnisse, damit das Layout der Website stimmig bleibt. Für Deine Website findest Du diese Angabe in der Contao Dateiverwaltung des Back-End.

Titelbilder (Header) sind in der Regel 1920 Pixel breit. Bilder die im Fließtext erscheinen sollten nicht breiter als 1200 Pixel sein.

JPG oder PNG?

Generell kann man sagen, dass das Format: JPG besser für Fotografien sowie Bilder mit vielen Farben und weichen Farbübergängen verwendet werden sollte. Man kann viele Bilder für das Web komprimieren, ohne dass die Qualitätsminderung online sichtbar wird. Die Dateikomprimierung wirkt sich positiv auf die Seitenladezeit der Website aus.

Das Format: PNG sollte für Logos, Grafiken mit Text oder Bilder mit harten Farbübergängen verwendet werden. Außerdem lassen sich mit diesem Format Transparenzen und Semitransparenzen darstellen.

Bildbearbeitungsprogramme

Wir stellen zwei Möglichkeiten zur Bildbearbeitung vor. Zuerst das kostenlose Tool: „iloveimg“ und danach die kostenpflichtige Variante: "Adobe Photoshop".

iloveimg.com

  1. iloveimg.com/de/foto-editor öffnen und Bild hochladen
  2. Oben in der Leiste auf "Skalieren" klicken und in dem Feld "Breite" oder "Höhe" das größte der benötigten beiden Maße eintragen. Auf "Anwenden" klicken.
  1. Danach oben in der Leiste auf „Zuschneiden“ klicken und in den Feldern „Breite“ oder „Höhe“ (je nachdem, welcher Wert beim "Skalieren" bereits korrekt eingetragen wurde) den entsprechend korrekten Wert eintragen. Das helle Fenster kann verschoben werden, um den gewünschten Bildausschnitt zu erhalten. Durch Klicken auf „Anwenden“ wird dieser Bereich ausgeschnitten.
  1. Weitere Bearbeitungsmöglichkeiten sind in der oberen Leiste zu finden. Unter anderem: Fotofilter, Bilder drehen/ spiegeln oder Texte hinzufügen.
  2. Rechts in der Spalte bei „Save PNG“ auf das Dateiformat "Save JPG" ändern und speichern. Durch das Speichern wird das Bild automatisch komprimiert (kleiner gerechnet). Das ist wichtig für die Ladezeit der Website, weil der Rechner bzw. das Handy dadurch weniger Informationen laden muss.

Photoshop

  1. Bild öffnen
  2. Freistellungswerkzeug   in der linken Leiste auswählen und oben links die gewünschten Werte für Breite und Höhe eintragen. Der helle Bereich kann verschoben und an den Ecken vergrößert bzw. verkleinert werden. Anschließend oben in der Mitte auf das Häckchen klicken oder mit „Enter“ bestätigen.
  1. Danach auf „Datei > Exportieren > Für Web speichern“ klicken. Oben rechts das Dateiformat ausgewählen (in der Regel JPEG) und darunter die Bildqualität einstellen. Hier reicht „Hoch“ vollkommen aus. Unten rechts noch die entsprechende Bildgröße eintragen und anschließend speichern.

Wie füge ich Bilder im Back-End (Contao) ein?

  1. Ins Back-End Deiner Website einloggen
  2. In der linken Leiste auf „Dateiverwaltung“ klicken
  3. Jetzt den entsprechenden Ordner öffnen und durch klicken auf das Symbol das gewünschte Bild hochladen

Ein Tipp für Dich: Unter dem folgenden Link findest Du die richtigen Bildformate für Social-Media-Plattformen

 

Download: PDF-Version (0,8 MB)

Bildquelle: cppzone

Einen Kommentar schreiben

Bitte rechnen Sie 8 plus 4.