| Purpose | Upload, organize, reuse, and optimize images and other media for your Cloudbeds Website. |
| Best for | Manager/GM and Admin users who manage website media or prepare images for a Cloudbeds Website. |
| Use this when | You need to add or organize reusable website media, choose image dimensions or formats, or improve image performance. |
| Requirements | A Cloudbeds Website and access to open its Cloudbeds Websites Editor. |
| Expected result | Your media is organized in Media Manager and ready to reuse in the editor, with images sized and formatted appropriately for their intended use. |
Introduction
Use Media Manager in Cloudbeds Websites to upload, organize, and reuse website media from one centralized library. Media Manager supports images, icons, videos, audio, and files. This article also provides image specifications and optimization guidance so you can choose files that display well without unnecessarily affecting page performance.
Use Media Manager when you need to build or organize your reusable media library. When you are editing a page and want to place an existing asset, use Add > Media in the Cloudbeds Websites Editor.
Table of contents
- Access Media Manager
- Upload and organize media
- Use media in the website editor
- Image requirements and optimization
- Recommended image sizes
- Image guidance by use
- Image performance and responsive design
Access Media Manager
Open Media Manager from the Cloudbeds Websites Editor when you need to view or manage reusable website assets.
- From the Cloudbeds PMS Main Menu
go to Cloudbeds Digital Marketing and select Websites.
- Select Edit my website to open the Cloudbeds Websites Editor.
- In the left-side editor panel, select CMS, then Media Manager.
The editor navigation shows Media Manager under CMS in the left-side panel:
Upload and organize media
Media Manager keeps reusable website assets in one place. You can manage Images, Icons, Videos, Audio, and Files from the same library.
You can use Media Manager to:
- Upload or import media: Add content from your computer or supported cloud services, including Facebook, Dropbox, Google Drive, Google Photos, and Instagram.
- Create folders: Group related assets into categories such as logos, exterior images, or specific room types so they are easier to find and reuse.
- Rename files and folders: Use clear names that make it easier to identify the asset or category later.
- Organize by content type: Use the Images, Icons, Videos, Audio, and Files areas to work with the type of media you need.
For Cloudbeds Website Builder subscriptions initialized from the end of May 2026 onward, existing images from the property profile and accommodation settings in Cloudbeds PMS are automatically imported into the editor library.
Use the controls in Media Manager to add and organize your reusable website assets:
- Select New Image to upload an image from your computer.
- Select Import Images to bring in images from supported external sources.
- Select + Add Folder to create categories for related assets, such as logos, exterior images, or room types.
- Use the Images, Icons, Videos, Audio, and Files tabs to switch between media types.
- Use the available Sort and view controls to organize and locate assets in the library.
The Media Manager below shows these controls and the reusable assets already available in the library:
Use media in the website editor
Media added to Media Manager becomes available for reuse while editing your site. When you are ready to place an existing asset on a page, use Add > Media in the Cloudbeds Websites Editor and select the media you want to use.
The Media panel shows reusable Site Media and Free Media assets, with + Add Media available after you select the media you want:
Image requirements and optimization
Cloudbeds Websites automatically creates smaller versions of uploaded images when needed so an appropriately sized image can be delivered on desktop, tablet, and mobile devices. The original image is not enlarged, and smaller versions are created only when the uploaded image is large enough to require them.
| Requirement | Limit |
|---|---|
| Files per site | Up to 15,000 files, including images, videos, audio clips, and other files |
| Maximum file size | 200 MB per file |
| Maximum image area | 3,145,728 pixels. Multiply the image width by its height to calculate the total area. |
Images that exceed supported limits may fail to upload, fail to display a thumbnail, or fail to load in the editor or on the live site.
Image optimization can be disabled for supported background images, the Image widget, and the Photo Gallery widget. Disabling optimization can affect page speed and performance.
Expand the sections below for supported image file types and WebP compatibility details.
Supported image file types
Cloudbeds Websites supports the following image file types:
- PNG
- JPG
- JPEG
- GIF
- SVG
- SVG+XML
- ICO
- X-icon
- WebP
WebP compatibility
The current image guidance supports WebP images on the following:
- iPhone: version 14 and later
- Mac/Safari: latest version
- Chrome: all versions
- Android: all versions
Recommended image sizes
Use these dimensions as general guidance when preparing images for common website placements. Choose the size that matches how the image will be used rather than uploading a much larger file than the layout requires.
| Image use | Recommended size |
|---|---|
| Background image width | 2880 px |
| Desktop | 1920 px |
| Tablet | 1280 px |
| Mobile | 640 px |
| Blog thumbnail | 160 px or 300 px |
Image guidance by use
Different website components use images in different shapes and sizes. Expand the relevant section when you are preparing an image for a specific placement.
Slider images
Slider images are usually displayed at larger sizes and may stretch across a wide area of the page. Use images with enough width and padding around the main subject so important content is not cropped when the image is resized.
- Common aspect ratios: 16:9 and 3:4
- Common resolutions: 1600x900, 1280x720, and 1280x960 px
For square sliders, use a 1:1 aspect ratio. Keep image ratios consistent within the same slider for a more consistent design.
Photo Gallery images
Photo Gallery layouts support a wide range of image proportions. Match the image ratio to the gallery style you want to use and keep ratios consistent when the layout depends on uniform image dimensions.
- Square-style galleries: 1:1 ratio
- Tall-image galleries: for example, 2:5 or 200x500 px
- Common resolution guidance: use the resolution needed for the layout, but avoid images larger than 1500 px when possible to support page speed.
Icons
Icons can use transparent PNG, JPEG, or SVG files.
- Common aspect ratio: 1:1, although other ratios can be used.
- Common resolutions: 200x200 px or 80x80 px. SVG files can scale without a fixed resolution.
SVG files can add more code to a page than standard image files. Using many complex SVG files on the same page can affect loading or functionality. When needed, convert some SVG icons to standard image formats such as PNG or JPEG.
Favicons
Favicons appear in the browser tab rather than on the website page. ICO format is recommended.
- Required aspect ratio: 1:1
- Allowed resolutions: 24x24, 36x36, and 48x48 px
Logos
SVG format is recommended for logos because it can scale without losing image quality.
Image performance and responsive design
Use images that are large enough for their intended placement, but avoid uploading files that are much larger than needed. Oversized images can reduce page performance without producing a noticeable visual improvement after the image is scaled down.
Match the source image to its intended use. For example, if an image is displayed at approximately 300x300 px, avoid uploading a 4000x4000 px version unless that larger source is required elsewhere.
Aspect ratio describes the relationship between an image's width and height. A 16:9 image could be 1600x900 px, 1280x720 px, or another resolution with the same ratio.
Images that look suitable on a wide desktop layout may need different treatment on smaller devices. Use the available device-specific visibility or sizing controls when you need a different image treatment for tablet or mobile layouts.
Related articles
Now that you know how to manage reusable media and prepare images for your Cloudbeds Website, use these resources for broader Editor navigation, image FAQs, and background-image workflows:
Comments
Please sign in to leave a comment.