Bildbearbeitung für Deine Website

Vorabinformationen

Bevor ein Bild fürs 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 nicht zerstört wird. Für Deine Website findest Du diese Angabe in der Contao Dateiverwaltung des Backends.

Titelbilder (header) sind in der Regel 1920 Pixel breit und Bilder im Content (Inhalt der Seite) sollten nicht breiter als 1200 Pixel sein.

JPG oder PNG?

Generell kann man sagen, dass JPG besser für Fotografien und Bilder mit vielen Farben und weichen Farbübergängen verwendet werden sollte. Man kann viele Bilder stark komprimieren, ohne dass ein großer Qualitätsverlust sichtbar ist. Das wirkt sich positiv auf die Seitenladezeit der Website aus.

PNG ist dagegen für Logos, Grafiken mit Text oder Bilder mit harten Farbübergängen besser geeignet. Außerdem lassen sich mit PNG Transparenzen und Semitransparenzen darstellen.

Bildbearbeitungsprogramme

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

iloveimg.com

1. iloveimg.com/de/foto-editor öffnen und Bild hochladen
2. Oben in der Leiste auf „Zuschneiden“ klicken und in den Feldern „Breite“ und „Höhe“ die entsprechenden Werte eintragen. Das helle Fenster kann verschoben und kleiner bzw. größer gezogen werden. Durch Klicken auf „Anwenden“ wird dieser Bereich ausgeschnitten.

3. Danach in der oberen Leiste auf „Skalieren“ klicken und wieder die Breite und Höhe eintragen, falls die Werte nicht mehr stimmen sollten. Es kann sein, dass ein Wert um ein paar Pixel abweicht. In diesem Fall einfach das Häckchen bei „Bildformat beibehalten“ entfernen und Breite und Höhe erneut eintragen. Anschließend auf „Anwenden“ klicken.

4. Weitere Bearbeitungsmöglichkeiten gibt es oben in der Leiste. Unter anderem Fotofilter, Bilder drehen / spiegeln oder Texte hinzufügen.
5. Rechts in der Spalte bei „save png“ das entsprechende Dateiformat auswählen (in der Regel jpg) 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.

3. 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 Backend (Contao) ein?

1. Ins Backend 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

TIPP: Im folgenden Link findest Du die Bildformate für Social-Media-Plattformen

^{Download: PDF-Version (0,8 MB)}

^{Bildquellen: cppzone}