Dieser Artikel hilft Ihnen zu verstehen, wie Sie Bilder innerhalb der Booston-Plattform verwalten. Wir erklären, wie Sie Bilder hochladen, wie Sie sie verwenden und wie Sie sicherstellen, dass sie in jedem Anwendungsszenario gut aussehen.

Inhalt

• Ein Bild hochladen
• Ihr Motiv mit einem Fokuspunkt auswählen
• Ein Bild zur Verwendung auswählen
• Bilder wiederverwenden
• Fazit
• Profi-Tipp: im Batch arbeiten
• FAQ

Ein Bild hochladen

Zunächst müssen wir ein Bild hochladen, um es verwenden zu können. Sie können ein Bild während der Einrichtung eines Website-Seitenelements oder einer Kampagne auswählen. In diesem Fall laden wir das Bild vorab über den Dateimanager hoch.

Navigieren Sie zu: Medien > Dateimanager. Wählen Sie einen Ordner aus, in den Sie Ihr Bild hochladen möchten, und klicken Sie auf "Hochladen". Wählen Sie dann das oder die Bild(er) aus, die Sie hochladen möchten, und kehren Sie zum Ordner zurück. Ihr Bild ist nun in Booston hochgeladen.

Ihr Motiv mit einem Fokuspunkt auswählen

Mit den richtigen Werkzeugen kann jeder ein Bild für einen bestimmten Anwendungsfall optimieren. Dies bedeutet, ein Bild mit den gewünschten Abmessungen, der richtigen Dateigröße, Schärfe und Motivplatzierung zu erstellen. Sie können also jederzeit ein maßgeschneidertes Bild hochladen. Falls dies zutrifft, können Sie die Bildoptimierung von Booston deaktivieren:

Navigieren Sie zu: Einstellungen > Allgemein > Bildauflösung Qualität > auf "Aus: Keine Bildoptimierung" stellen.

Booston kann Bilder jedoch auch automatisch für das Web optimieren. Dazu wird zuerst das Hauptmotiv Ihres Bildes über ein "Fokuspunkt"-Werkzeug ausgewählt.

Navigieren Sie zu Ihrem hochgeladenen Bild > klicken Sie auf das Fokuspunkt-Symbol. Ein Pop-up-Fenster zeigt Ihr Bild sowie verschiedene Vorschaubilder in unterschiedlichen Formaten. Diese Vorschaubilder zeigen, wie Ihr Bild ohne Fokuspunkt dargestellt würde. Aktivieren Sie nun die Fokuspunkt-Funktion und setzen Sie ihn auf die gewünschte Stelle. Sie sehen sofort, wie die Vorschauen neu auf den gesetzten Punkt ausgerichtet werden.

Unabhängig vom Einsatzfall wird Ihr Bild nun immer das gewünschte Motiv zeigen, während die Dateigröße reduziert wird, was schnellere Ladezeiten ermöglicht.

Ein Bild zur Verwendung auswählen

Jetzt können wir das Bild für verschiedene Szenarien verwenden, zum Beispiel für Kampagnen oder Website-Seitenelemente. In diesem Beispiel fügen wir das Bild einem Seitenelement hinzu.

Um ein Bild einem Seitenelement hinzuzufügen, navigieren Sie zu: Inhalt > Seitenelemente > ein Seitenelement bearbeiten. Klicken Sie bei "Bild" auf "Datei suchen oder hochladen". Der Dateimanager wird geöffnet. Gehen Sie zu Ihrem Bild und wählen Sie es aus. Speichern Sie anschließend das Seitenelement.

(Hinweis: Während dieses Schrittes können Sie auch das Hochladen eines Bildes, das Setzen eines Fokuspunktes und das Auswählen des Bildes in einem Vorgang kombinieren.)

Nachdem das Bild ausgewählt wurde, erfolgen mehrere Optimierungsschritte automatisch, die sich am besten durch Betrachtung der Anzeige auf der Website erklären lassen.

Das Bild wird automatisch auf das gewählte Motiv fokussiert und bleibt sehr scharf dargestellt.

Das Bild wurde zugeschnitten. Das bedeutet, dass ungenutzte Bereiche des Bildes entfernt werden, wodurch die Datei kleiner wird und die Ladezeiten schneller sind. Wenn wir dasselbe Bild in ein anderes Seitenelement einfügen, das möglicherweise vertikaler ausgerichtet ist, werden selbstverständlich andere Bereiche des Bildes zugeschnitten. Für jedes Seitenelement wird automatisch eine optimierte Version erstellt. Ein Beispiel für ein vertikaleres Bild könnte so aussehen:

Das Bild wird anschließend auf die benötigten Abmessungen (in Pixel) angepasst. Zum Beispiel wird das erste Bild auf 348 × 377 Pixel und das zweite auf 288 × 377 Pixel angepasst. Das ursprüngliche Bild hatte eine Größe von 1200 × 1200 Pixeln. Anders ausgedrückt: Die Gesamtreduktion beträgt etwa 80 bis 90 %, was die Ladegeschwindigkeit erhöht, ohne Qualitätsverluste zu verursachen.

Das Bild wird in das WebP-Format konvertiert. Dieses Bildformat wurde von Google entwickelt, um die Dateigröße ohne Qualitätsverlust zu minimieren.

Abschließend wird Lazy Loading angewendet: Bilder werden erst geladen, wenn sie im sichtbaren Bereich der Seite erscheinen (oberhalb der Falz), was die initiale Ladezeit der Seite verkürzt.

Fazit

In diesem Artikel haben wir ein Bild hochgeladen, einen Fokuspunkt gesetzt und es einem Seitenelement hinzugefügt. Dadurch wird automatisch sichergestellt, dass das Motiv gut sichtbar bleibt, die Ladezeit gering ist und die visuelle Präsentation optimal erfolgt – ohne dass Sie manuell zuschneiden oder optimieren müssen.

Die Dateigröße des Bildes wurde automatisch von etwa 2 MB auf 12 kB reduziert – eine Reduktion von etwa 97 %. Je nach Gerät kann diese Einsparung sogar noch größer sein. Für mobile Nutzer werden automatisch kleinere Versionen bereitgestellt, was für schnellere Websites, bessere Leistung bei langsameren Netzwerken und ein höheres Ranking in Suchmaschinen wie Google (SEO) sorgt.

Profi-Tipp: im Batch arbeiten

Möchten Sie viele Bilder gleichzeitig verwalten und Ihre Arbeit beschleunigen? Dann wählen Sie beim Hochladen mehrere Bilder auf einmal aus. Gehen Sie anschließend zu:

Medien > Fokuspunkt > "Ihr Bilderordner" > klicken Sie auf ein Bild > Fokuspunkt setzen > schnell zum nächsten Bild wechseln und so weiter.

Auf diese Weise können Sie alle Ihre Bilder in einem Durchgang einstellen. Sobald Sie anschließend ein Bild zu einer Kampagne oder Website hinzufügen, wird alles automatisch optimiert, ohne dass zusätzliche Schritte erforderlich sind.

FAQ

• Welche Bildformate sind erlaubt?
  .jpeg und .png sind optimal. Diese Formate können automatisch optimiert werden, indem ein Fokuspunkt gesetzt und die Dateigröße reduziert wird. Andere Formate wie .svg und .gif können ebenfalls hochgeladen und verwendet werden, werden jedoch nicht automatisch optimiert.
• Welche Abmessungen sollte ich für ein Bild verwenden?
  Halten Sie die Dateigröße unter 10 MB und verwenden Sie eine möglichst hohe Auflösung. Booston passt die Abmessungen automatisch entsprechend dem Nutzungsszenario an. Das Bild wird in das WebP-Format konvertiert und verkleinert. Es wird empfohlen, einen Fokuspunkt zu setzen, um sicherzustellen, dass das Hauptmotiv immer sichtbar bleibt.
• Kann ich die automatische Bildoptimierung deaktivieren?
  Ja. Sie können dies deaktivieren über: Einstellungen > Allgemein > Bildauflösung Qualität > auf „Aus: Keine Bildoptimierung“ stellen.
  Bitte beachten Sie, dass Sie dann für jede Anwendung eine optimierte Version des Bildes manuell bereitstellen und auf eine geringe Dateigröße achten müssen, um eine gute Performance sicherzustellen.