Bilder und Medien in Cloudbeds Websites verwalten

Zweck Bilder und andere Medien für deine Cloudbeds-Website hochladen, organisieren, wiederverwenden und optimieren.
Am besten geeignet für Manager/General Manager und Administratoren, die Website-Medien verwalten oder Bilder für eine Cloudbeds-Website vorbereiten.
Verwende dies, wenn du wiederverwendbare Website-Medien hinzufügen oder organisieren, Bildabmessungen oder -formate auswählen oder die Bildleistung verbessern möchtest.
Voraussetzungen Eine Cloudbeds-Website und Zugriff auf den Cloudbeds-Websites-Editor.
Erwartetes Ergebnis Deine Medien sind im Media Manager organisiert und bereit zur Wiederverwendung im Editor, wobei die Bilder passend für ihren vorgesehenen Einsatz dimensioniert und formatiert sind.

Einführung

Verwende den Media Manager in Cloudbeds Websites, um Website-Medien hochzuladen, zu organisieren und aus einer zentralen Bibliothek wiederzuverwenden. Der Media Manager unterstützt Bilder, Symbole, Videos, Audio und Dateien. Dieser Artikel enthält außerdem Bildspezifikationen und Optimierungshinweise, damit du Dateien auswählen kannst, die gut dargestellt werden, ohne die Seitenleistung unnötig zu beeinträchtigen.

Nutze den Media Manager, wenn du deine wiederverwendbare Medienbibliothek aufbauen oder organisieren möchtest. Wenn du eine Seite bearbeitest und ein vorhandenes Asset platzieren willst, verwende Hinzufügen > Medien im Cloudbeds-Websites-Editor.

Hotelpool und Außenbereich des Resorts

Inhaltsverzeichnis

Zugriff auf den Media Manager

Öffnen Sie den Media Manager im Cloudbeds Websites Editor, wenn Sie wiederverwendbare Website-Assets anzeigen oder verwalten möchten.

  1. Gehen Sie im Cloudbeds PMS Hauptmenü Symbol Hauptmenü zu Cloudbeds Digital Marketing und wählen Sie Websites aus.
  2. Wählen Sie Meine Website bearbeiten, um den Cloudbeds Websites Editor zu öffnen.
  3. Wählen Sie im Editor-Panel auf der linken Seite CMS und dann Media Manager aus.

Die Editor-Navigation zeigt Media Manager unter CMS im linken Panel an:

Cloudbeds Websites Editor linkes Panel mit erweitertem CMS und ausgewähltem Media Manager

Medien hochladen und organisieren

Der Media Manager sammelt wiederverwendbare Website-Assets an einem Ort. Sie können Bilder, Symbole, Videos, Audio und Dateien aus derselben Bibliothek verwalten.

Mit dem Media Manager können Sie:

  • Medien hochladen oder importieren: Fügen Sie Inhalte von Ihrem Computer oder unterstützten Cloud-Diensten hinzu, darunter Facebook, Dropbox, Google Drive, Google Fotos und Instagram.
  • Ordner erstellen: Gruppieren Sie verwandte Assets in Kategorien wie Logos, Außenbilder oder bestimmte Zimmertypen, damit sie leichter zu finden und wiederzuverwenden sind.
  • Dateien und Ordner umbenennen: Verwenden Sie klare Namen, die das spätere Identifizieren des Assets oder der Kategorie erleichtern.
  • Nach Inhaltstyp organisieren: Nutzen Sie die Bereiche Bilder, Symbole, Videos, Audio und Dateien, um mit dem benötigten Medientyp zu arbeiten.

 Für Cloudbeds Website-Baukasten-Abonnements, die ab Ende Mai 2026 gestartet werden, werden vorhandene Bilder aus dem Unterkunftsprofil und den Zimmer-Einstellungen im Cloudbeds PMS automatisch in die Editor-Bibliothek importiert.

Verwenden Sie die Steuerungen im Media Manager, um Ihre wiederverwendbaren Website-Assets hinzuzufügen und zu organisieren:

  • Wählen Sie Neues Bild, um ein Bild von Ihrem Computer hochzuladen.
  • Wählen Sie Bilder importieren, um Bilder aus unterstützten externen Quellen hinzuzufügen.
  • Wählen Sie + Ordner hinzufügen, um Kategorien für verwandte Assets zu erstellen, wie Logos, Außenaufnahmen oder Zimmertypen.
  • Verwenden Sie die Registerkarten Bilder, Symbole, Videos, Audio und Dateien, um zwischen Medientypen zu wechseln.
  • Nutzen Sie die verfügbaren Sortieren- und Ansichtskontrollen, um Assets in der Bibliothek zu organisieren und zu finden.

Der unten gezeigte Media Manager zeigt diese Steuerungen und die bereits verfügbaren wiederverwendbaren Assets in der Bibliothek:

Cloudbeds Websites Media Manager zeigt die Registerkarten Bilder, Symbole, Videos, Audio und Dateien sowie die Steuerungen Neues Bild, Bilder importieren, Ordner hinzufügen und Sortieren

Medien im Website-Editor verwenden

Medien, die im Media Manager hinzugefügt werden, stehen während der Bearbeitung deiner Website zur Wiederverwendung bereit. Wenn Sie ein vorhandenes Asset auf einer Seite platzieren möchten, verwenden Sie Hinzufügen > Medien im Cloudbeds Websites Editor und wählen Sie die gewünschten Medien aus.

Das Medienfenster zeigt wiederverwendbare Website-Medien und freie Medien Assets, mit + Medien hinzufügen, das verfügbar ist, nachdem Sie die gewünschten Medien ausgewählt haben:

Cloudbeds Websites Editor Medienfenster zeigt die Registerkarten Website-Medien und freie Medien, verfügbare Bild-Assets und den Button Medien hinzufügen

Bildanforderungen und Optimierung

Cloudbeds Websites erstellt automatisch kleinere Versionen hochgeladener Bilder, wenn dies erforderlich ist, damit eine passend große Bildversion auf Desktop-, Tablet- und Mobilgeräten ausgeliefert werden kann. Das Originalbild wird nicht vergrößert, und kleinere Versionen werden nur erstellt, wenn das hochgeladene Bild groß genug ist, um sie zu benötigen.

Anforderung Limit
Dateien pro Website Bis zu 15.000 Dateien, einschließlich Bilder, Videos, Audiodateien und andere Dateien
Maximale Dateigröße 200 MB pro Datei
Maximale Bildfläche 3.145.728 Pixel. Multiplizieren Sie die Bildbreite mit der Bildhöhe, um die Gesamtfläche zu berechnen.

Bilder, die die unterstützten Limits überschreiten, können beim Hochladen fehlschlagen, keine Miniaturansicht anzeigen oder im Editor bzw. auf der Live-Website nicht geladen werden.

 Die Bildoptimierung kann für unterstützte Hintergrundbilder, das Bild-Widget und das Foto-Galerie-Widget deaktiviert werden. Das Deaktivieren der Optimierung kann die Seitenladegeschwindigkeit und Leistung beeinträchtigen.

Erweitern Sie die folgenden Abschnitte für unterstützte Bilddateitypen und Details zur WebP-Kompatibilität.

Unterstützte Bilddateitypen

Cloudbeds-Websites unterstützen die folgenden Bilddateitypen:

  • PNG
  • JPG
  • JPEG
  • GIF
  • SVG
  • SVG+XML
  • ICO
  • X-icon
  • WebP

WebP-Kompatibilität

Die aktuellen Bildrichtlinien unterstützen WebP-Bilder auf folgenden Geräten:

  • iPhone: Version 14 und höher
  • Mac/Safari: neueste Version
  • Chrome: alle Versionen
  • Android: alle Versionen

Verwenden Sie diese Abmessungen als allgemeine Orientierung bei der Vorbereitung von Bildern für gängige Website-Platzierungen. Wählen Sie die Größe, die der Verwendung des Bildes entspricht, anstatt eine deutlich größere Datei hochzuladen, als das Layout erfordert.

Bildverwendung Empfohlene Größe
Breite des Hintergrundbilds 2880 px
Desktop 1920 px
Tablet 1280 px
Mobilgerät 640 px
Blog-Vorschaubild 160 px oder 300 px

Bildanleitung nach Verwendung

Verschiedene Website-Komponenten verwenden Bilder in unterschiedlichen Formen und Größen. Klappen Sie den entsprechenden Abschnitt auf, wenn Sie ein Bild für eine bestimmte Platzierung vorbereiten.

Carrousel-Bilder

Carrousel-Bilder werden in der Regel in größeren Größen angezeigt und können sich über einen breiten Bereich der Seite erstrecken. Verwenden Sie Bilder mit ausreichender Breite und einem Abstand um das Hauptmotiv, damit wichtige Inhalte beim Skalieren des Bildes nicht abgeschnitten werden.

  • Gängige Rapport d'aspect: 16:9 und 3:4
  • Gängige Auflösungen: 1600x900, 1280x720 und 1280x960 px

Für quadratische Carrousels verwenden Sie ein Rapport d'aspect von 1:1. Halten Sie die Bildverhältnisse innerhalb desselben Carrousels konsistent für ein einheitlicheres Design.

Layouts für Fotogalerien unterstützen eine breite Palette von Bildproportionen. Passen Sie das Bildverhältnis an den gewünschten Galeriestil an und halten Sie die Verhältnisse konsistent, wenn das Layout auf einheitlichen Bildmaßen basiert.

  • Galerien im quadratischen Stil: 1:1 Verhältnis
  • Galerien mit hohen Bildern: zum Beispiel 2:5 oder 200x500 px
  • Empfohlene Auflösung: Verwenden Sie die für das Layout benötigte Auflösung, vermeiden Sie jedoch nach Möglichkeit Bilder größer als 1500 px, um die Seitenladegeschwindigkeit zu unterstützen.

Symbole

Symbole können transparente PNG-, JPEG- oder SVG-Dateien verwenden.

  • Gängiges Rapport d'aspect: 1:1, obwohl auch andere Verhältnisse verwendet werden können.
  • Gängige Auflösungen: 200x200 px oder 80x80 px. SVG-Dateien können ohne feste Auflösung skaliert werden.

SVG-Dateien können mehr Code auf einer Seite hinzufügen als Standardbilddateien. Die Verwendung vieler komplexer SVG-Dateien auf derselben Seite kann die Ladezeit oder Funktionalität beeinträchtigen. Wenn nötig, konvertieren Sie einige SVG-Symbole in Standardbildformate wie PNG oder JPEG.

Favicons

Favicons erscheinen im Browser-Tab und nicht auf der Webseite selbst. Das ICO-Format wird empfohlen.

  • Erforderliches Rapport d'aspect: 1:1
  • Erlaubte Auflösungen: 24x24, 36x36 und 48x48 px

Logos

Das SVG-Format wird für Logos empfohlen, da es ohne Qualitätsverlust skaliert werden kann.

Bildleistung und responsives Design

Verwenden Sie Bilder, die groß genug für ihre vorgesehene Platzierung sind, vermeiden Sie jedoch das Hochladen von Dateien, die deutlich größer als nötig sind. Überdimensionierte Bilder können die Seitenleistung verringern, ohne nach dem Herunterskalieren eine sichtbare Verbesserung zu erzielen.

 Ordnen Sie das Quellbild seiner vorgesehenen Verwendung zu. Wenn ein Bild beispielsweise etwa 300 x 300 px angezeigt wird, vermeiden Sie es, eine 4000 x 4000 px große Version hochzuladen, es sei denn, diese größere Quelle wird an anderer Stelle benötigt.

Das Seitenverhältnis beschreibt das Verhältnis zwischen der Breite und der Höhe eines Bildes. Ein Bild im Format 16:9 könnte 1600 x 900 px, 1280 x 720 px oder eine andere Auflösung mit demselben Verhältnis haben.

Bilder, die auf einem breiten Desktop-Layout passend aussehen, benötigen möglicherweise eine andere Behandlung auf kleineren Geräten. Verwenden Sie die verfügbaren gerätespezifischen Sichtbarkeits- oder Größensteuerungen, wenn Sie für Tablet- oder Mobilgeräte-Layouts eine andere Bildbehandlung benötigen.


Da Sie nun wissen, wie Sie wiederverwendbare Medien verwalten und Bilder für Ihre Cloudbeds-Website vorbereiten, nutzen Sie diese Ressourcen für eine umfassendere Navigation im Editor, FAQs zu Bildern und Workflows für Hintergrundbilder:

War dieser Beitrag hilfreich?
3 von 3 fanden dies hilfreich

Kommentare

0 Kommentare

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.