Bildgrößen bestimmen und Ausgangsmaterial vorbereiten
Finde die maximale Größe heraus, in der das Foto auf deiner Website dargestellt werden soll. Beachte dabei auch die responsiven Größen: Je nach Ausgabegerät kann die Größe variieren. Zum Beispiel werden Bilder manchmal am Smartphone, wenn das Layout auf eine Spalte umbricht, größer dargestellt als in einem mehrspaltigen Layout am Desktop.
In unserem weiteren Beispiel haben wir als Ausgangsbasis ein Bild im Hochformat, dass wir auf eine maximalen Größe von 300 x 300 Pixel zuschneiden möchten.
Für die weiteren Bearbeitungsschritte stelle sicher, dass du möglichst vom Originalfoto wegarbeitest, also von der qualitativ besten Version deines Bildes. Zumindest muss das Ausgangsformat die Pixelmaße haben, die du für die Darstellung auf der Website brauchst, um eine passende Auflösung zu haben.
Erstelle ein neues Dokument & wähle das richtige Format
Wähle dort den Modus „Grafikdesigner“ und dann „Leere Arbeitsfläche“.
Im Menü auf der linken Seite kannst du das Format wählen.
Damit dein Bild auch auf hochauflösenden Bildschirmen – wie Retina-Displays bei Apple oder vergleichbaren HiDPI-Screens – gestochen scharf wirkt, wähle als Format das Doppelte der maximalen Anzeiggröße. Der Grund: Diese Displays stellen doppelt so viele Pixel pro Zoll dar wie ein Standard-Bildschirm. Ein Bild, das nur in der Anzeigegröße exportiert wird, wirkt dort unscharf.
In unserem Beispiel wären das also 300 Pixel × 2 auf jeder Seite, das heißt ein Format von 600 × 600 Pixel. Trage das gewählte Format ein und klicke auf „Erstellen“.
Optional kannst du eine Hintergrundfarbe definieren, falls du dein Foto nicht abfallend platzieren möchtest oder zum Beispiel ein freigestelltes Produkt auf die immer gleiche Hintergrundfarbe setzen möchtest.
Klicke dazu auf das Regler-Icon in der linken Seitenleiste, um das Menü „Anpassen“ zu öffnen. Wenn du ein Farbfeld anklickst, kannst du mittels dem Farbregler die gewünschte Farbe wählen oder mit dem Tropfen-Icon einen transparenten Hintergrund einstellen.
Optional: Hilfslinien zur Orientierung einrichten
Damit du immer einen guten Blick behältst, wie du dein Foto platzieren sollst, kannst du dir Hilfslinien einrichten. Das ist zum Beispiel praktisch, wenn du mehrere ähnliche Produktfotos oder auch Portraitbilder hast, die alle einen möglichst gleichen Bildausschnitt bekommen sollen.
In BeFunky kannst du die Hilfslinien anzeigen lassen, indem du auf das kleine Fenster-Icon am unteren Rand klickst und in den nun erscheinenden Einstellungen die Option „Guides“ aktivierst. Wir empfehlen auch die anderen beiden Optionen unter „Ausrichtung“ zu aktivieren. Sie unterstützen dich bei der Platzierung deines Fotos.
In unserem Beispiel richten wir nun eine vertikale und eine horizontale Hilfslinie ein, um die Mitte der Arbeitsfläche zu markieren. Das funktioniert, indem du auf das jeweilige Lineal klickst, die Maus gedrückt hältst und nach innen ziehst. So nimmst du eine Hilfslinie auf und mit Maustaste loslassen kannst du sie festsetzen.
Wenn du deine Hilfslinien sperren möchtest, klicke auf das Schloss-Icon im rechten oberen Eck der Lineale.
Wenn du mehrere Bilder im gleichen Format exportieren möchtest, ist jetzt der optimale Zeitpunkt gekommen um um eine Vorlage abzuspeichern.
Klicke dazu in BeFunky auf den „Speichern“-Button am oberen Rand des Fensters und wähle „als Projekt speichern“. Diese leere Vorlage kannst du in Zukunft wieder verwenden, um schnell und unkompliziert Bilder im selben Format aufzubereiten.
Das Foto einfügen
Wir fügen nun ein Foto auf unserer Arbeitsfläche ein, damit wir es später vergrößern oder verkleinern und platzieren können. Klicke dazu in BeFunky auf das Foto-Icon in der linken Seitenleiste, um den Fotomanager zu öffnen.
Lade nun mittels dem Button „Computer“ ein Foto in den Fotomanager. Keine Sorge, das Foto bleibt auf deinem Computer und wird auch nirgendwo anders hochgeladen. Klicke nun auf das Foto im Fotomanager und anschließend auf „Als Ebene hinzufügen“, um das Bild über deiner Arbeitsfläche im Dokument einzufügen.
Das Foto zuschneiden und platzieren
Du kannst dein Foto auf der Arbeitsfläche via Drag&Drop verschieben (anklicken, verschieben, Klick lösen) und skalieren (halte die Maustaste gedrückt während du an den Ecken des Bildes ziehst), damit es dein gewähltes Format optimal ausfüllt. Die Hilfslinien unterstützen dich bei der exakten Ausrichtung.
Ein kleiner Gestaltungs-Tipp: Platziere das Objekt, das in deinem Bild mittig stehen soll, etwas oberhalb der geometrischen Mitte des Bildes. Dann sitzt es in der optischen Mitte und wirkt ausgewogener.
Manchmal stellt sich erst nachdem das Bild auf der Website eingebaut ist heraus, dass der Bildausschnitt doch nicht optimal passt. Damit du das Bild später korrigieren kannst, ohne es nochmal neu erstellen zu müssen, speichere dein Bild ebenfalls als Projekt ab. So kannst du es jederzeit wieder öffnen, nachbessern und erneut exportieren.
Das Bild exportieren und komprimieren
Achte immer darauf, die Dateigrößen deiner Website-Bilder so gering wie möglich zu halten. Das sorgt für die optimale Performance deiner Website.
In BeFunky kannst du das Komprimieren gleich beim Speichern miterledigen. Wenn du deine Bilder in einem anderen Programm zuschneidest, kannst du sie auch nachträglich mit einschlägigen Tools wie zum Beispiel ImageOptim komprimieren.
Um dein Bild zu exportieren, klicke in BeFunky auf den „Speichern“-Button am oberen Rand des Fensters und wähle „Computer“.
Für den Export wähle am besten gleich einen für die Darstellung im Web optimieren Dateinamen.
Achte auf:
- nur Kleinbuchstaben
- keine Leerzeichen (stattdessen Unterstriche oder Minus/Bindestriche)
- ein aussagekräftiger, beschreibender Titel
Anschließend wähle JPG für Bilder ohne transparenten Hintergrund oder PNG für Bilder mit transparentem Hintergrund. JPGs können keine Transparenzen speichern, haben dafür üblicherweise aber eine geringere Dateigröße.
Wähle nun auch die Bildqualität aus. Um die Dateigröße gering zu halten ohne bei der Schärfe deines Bildes unliebsame Kompromisse eingehen zu müssen, empfehlen wir „60“ bei der Qualität zu wählen.
Um dein Bild zu exportieren klicke auf den „Speichern“-Button am oberen Rand des Fensters und wähle „Computer“. Im Anschluss kontrolliere dein Bild. Gegebenenfalls kannst du bei der Qualität noch etwas optimieren.
Geschafft!
Gratulation, du hast dein erstes Bild erfolgreich zugeschnitten und komprimiert! Wie du siehst, ist die richtige Bildaufbereitung keine Raketenwissenschaft, es braucht nur etwas Aufmerksamkeit für die Details.
Wer von Anfang an auf die richtigen Maße, eine kleine Dateigröße und das passende Exportformat achtet, legt den Grundstein für eine schnelle, professionell wirkende Website. Nimm dir also immer die Zeit, deine Bilder sauber aufzubereiten, bevor du sie hochlädst, nicht nur für deine Besucher:innen, sondern auch für ein optimale Performance.
