Center Website: Media & Performance (Editorial)
This page is aimed at Content Editors and anyone who uploads images and videos to the public Center Website from the cockpit (Hero, tiles/bento, backgrounds, silent autoplay clips).
Categorization: There are many thematic guides (e.g., Editing Pages, SEO & Visibility). A central "Best Practices for the entire website" does not exist as a single document – here we focus on media quality, file size, and loading time, as large videos can noticeably slow down the page.
Brief: What to consider before uploading
| Topic | Recommendation |
|---|---|
| Videos | Short loops for backgrounds; compress with HandBrake before uploading – recommended: saved preset "cockpitOS (Tiles)" (see HandBrake). |
| Images | Appropriate resolution (not 6000 px wide for a tile); formats WebP/JPEG/PNG/SVG depending on the subject. |
| Sound for pure background videos | If no sound is needed: export without audio track – saves file size. |
| CMS | After uploading, check if Hero/tile loads appropriately on smartphones (large files are most noticeable there). |
You can find technical details about the app under Center Website – Overview.
HandBrake – Short Guide for Web Videos (Editorial)
Goal: Make MP4 files smaller and faster-loading – for Hero, tiles, and background videos in the cockpit.
Software: HandBrake (free, Mac & Windows)
1. Installation
- Download the version for Windows or macOS from handbrake.fr.
- Run the installer and start HandBrake.
2. Open Video
- Click “Open Source” / “Open File”.
- Select the original file (e.g.,
.mp4,.mov). - Wait for the preview to load.
3. Recommended: create your own preset “cockpitOS (Tiles)” (one-time setup)
The team should once take the predefined preset “Fast 720p30” as a basis, set the values below exactly as specified, and save it as a custom preset. Afterwards, it's sufficient to select it – no repeated fine-tuning.
Steps (once per computer/HandBrake installation):
- Select the preset “Fast 720p30” under “Preset” (General → Fast 720p30).
- Open the “Video” tab and set the following values (deviations only after consultation with IT):
| Field | Value |
|---|---|
| Video Encoder | H.264 (x264) |
| Frame Rate (FPS) | 25 (PAL Film/Video) (or adjust to the source; 25 is typical for D/material) |
| Mode | Peak Frame Rate (VFR) |
| Color Range | Limited |
| Quality | Constant Quality |
| RF | 30 (strong compression, small files – ideal for tiles and small background loops) |
| Encoder Preset | slower (takes longer, but better compression at the same RF than “fast”) |
| Tuning | None |
| Profile | main |
| Level | 3.1 |
| Fast Decoding | off |
- Check the “Summary” tab: confirm format is MP4.
- Audio tab: For silent background videos, remove or disable the audio track – often saves significantly MB.
- Click “Save New Preset…” at the top (next to the preset selection).
- Assign a name:
cockpitOS (Tiles)(and optionally a description for the team). - The preset will then appear in the list – in the future just select
cockpitOS (Tiles)and encode.
Note: RF 30 may be too strong for large Hero areas or very detailed subjects. For large Hero videos, IT may provide a second preset “cockpitOS (Hero)” with the same settings but RF 24–26.
Output Location: At the bottom, select “Destination” / “Save As” – choose folder and new filename (e.g., tile-current-web.mp4).
4. Daily: Encoding with the saved preset
- Open source (see “Open Video”).
- Select the “cockpitOS (Tiles)” preset (or your saved name).
- Check destination path, verify audio for silent clips.
- Click “Start” / “Encode”.
- Upload completed MP4 in the cockpit.
5. Background: Why the file isn't smaller despite “720p”
Only resolution (e.g., 1280×720) is not enough – you primarily control the file size with RF and encoder speed (slower).
| Setting | Meaning |
|---|---|
| Constant Quality (RF) | Higher RF number = smaller file. RF 21 is still quality-oriented; RF 30 (cockpitOS Tiles) aims for small files for many parallel videos. |
| Encoder “slower” | Often produces smaller output than “fast” at the same RF, but results in longer processing time. |
Source already highly compressed? Then re-encoding yields little or the file will not be smaller – consider shortening, exporting without sound, or producing a consistent web file with cockpitOS (Tiles) anyway.
Alternatives without custom presets
- “Fast 1080p30” – if the video should remain sharp and large (desktop Hero).
- “Fast 720p30” – only if you have not saved a cockpitOS preset; then set RF to 24–30 and encoder slower manually (same values as in the table under “cockpitOS (Tiles)”).
If something goes wrong
- Too large: Use preset cockpitOS (Tiles) or increase RF (e.g., 28 → 30).
- Too blocky / unclear: Lower RF one level (e.g., 30 → 28) or create Hero preset with higher quality (RF 24–26).
- Encoding too slow: The slower encoder is intentional; only switch to “slow” or “medium” under time pressure (file may then be slightly larger).
- No sound needed: Remove audio track (see above).
Related Documentation
- Center Website – Overview – feature catalog, SEO area
- Editing Pages (Workflow) – tabs, Hero, configuration
- SEO, AI Visibility & GEO – texts & search engines
Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /en/content-creator-handbuch/center-website-medien-best-practices