Skip to main content

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

TopicRecommendation
VideosShort loops for backgrounds; compress with HandBrake before uploading – recommended: saved preset "cockpitOS (Tiles)" (see HandBrake).
ImagesAppropriate resolution (not 6000 px wide for a tile); formats WebP/JPEG/PNG/SVG depending on the subject.
Sound for pure background videosIf no sound is needed: export without audio track – saves file size.
CMSAfter 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

  1. Download the version for Windows or macOS from handbrake.fr.
  2. Run the installer and start HandBrake.

2. Open Video

  1. Click “Open Source” / “Open File”.
  2. Select the original file (e.g., .mp4, .mov).
  3. Wait for the preview to load.

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):

  1. Select the preset “Fast 720p30” under “Preset” (General → Fast 720p30).
  2. Open the “Video” tab and set the following values (deviations only after consultation with IT):
FieldValue
Video EncoderH.264 (x264)
Frame Rate (FPS)25 (PAL Film/Video) (or adjust to the source; 25 is typical for D/material)
ModePeak Frame Rate (VFR)
Color RangeLimited
QualityConstant Quality
RF30 (strong compression, small files – ideal for tiles and small background loops)
Encoder Presetslower (takes longer, but better compression at the same RF than “fast”)
TuningNone
Profilemain
Level3.1
Fast Decodingoff
  1. Check the “Summary” tab: confirm format is MP4.
  2. Audio tab: For silent background videos, remove or disable the audio track – often saves significantly MB.
  3. Click “Save New Preset…” at the top (next to the preset selection).
  4. Assign a name: cockpitOS (Tiles) (and optionally a description for the team).
  5. 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

  1. Open source (see “Open Video”).
  2. Select the “cockpitOS (Tiles)” preset (or your saved name).
  3. Check destination path, verify audio for silent clips.
  4. Click “Start” / “Encode”.
  5. 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).

SettingMeaning
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).

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /en/content-creator-handbuch/center-website-medien-best-practices