Zum Hauptinhalt springen

Medien & Dateien

In TYPO3 verwalten Sie Bilder und Dokumente zentral in der Dateiliste. Dort laden Sie Dateien hoch, strukturieren sie in Ordnern und pflegen Datei-Metadaten (z. B. Alt-Text, Quelle, Bildunterschrift), die beim Einbinden in Inhaltselemente automatisch übernommen werden

Schnellstart: Was möchten Sie tun?

Dateien hochladen & benennen

Dateien hochladen (mit sauberem Dateinamen)

Regeln zu Upload, Dateinamen und typischen Stolpersteinen.

Ordnerstruktur im Projektverzeichnis

Ordnung schaffen (Ordnerstruktur anlegen)

Empfohlene Mindeststruktur und sinnvolle zweite Ebene, wenn es wächst.

Datei-Metadaten pflegen (FAL)

Metadaten korrekt pflegen (Alt-Text/Quelle/Bildunterschrift)

Metadaten an der Datei pflegen (Standard) vs. im Inhaltselement überschreiben (Ausnahme).

Metadaten übersetzen (Dateien)

Metadaten übersetzen (bei Mehrsprachigkeit)

Einmal übersetzen, überall korrekt – und wann Überschreiben sinnvoll ist.

Bilder: Qualität & technische Hinweise

Bildqualität & Technik verstehen (Format, Größe, „dpi“)

Pixel sind im Web entscheidend; Formate richtig wählen, unnötige Dateigrößen vermeiden.

Bildausschnitt (Cropping)

Bildausschnitt / Bildformate (Cropping & Seitenverhältnisse)

Cropping im Backend ist derzeit nur in Bühne und Teaser-Karte verfügbar; sonst vorab passend zuschneiden. Außerdem: Mindestmaße/Seitenverhältnisse je Inhaltselement.

Fotos zuschneiden

Fotos zuschneiden (extern vorbereiten)

Wenn Backend-Cropping nicht verfügbar ist oder das Motiv kritisch ist: Zuschnitt sauber vorbereiten.

Logos zuschneiden

Logos zuschneiden (Transparenz & Kanten sauber halten)

Logos richtig zuschneiden/exportieren, damit Transparenz stimmt und nichts unscharf wirkt.

Der empfohlene Workflow in 5 Schritten

  1. Ordner anlegen (mindestens bilder/ und dokumente/) und – wenn nötig – nach Themen/Zweck weiter gliedern.
  2. Datei hochladen: im richtigen Projektordner, nicht „irgendwo“. (Upload ist auf 20 MB begrenzt.)
  3. Datei robust benennen: keine Leerzeichen/Umlaute/Sonderzeichen; kurz, sprechend, konsistent.
  4. Metadaten an der Datei pflegen (FAL): Quelle/Urheber:in, Bildunterschrift, Alt-Text – damit Wiederverwendung funktioniert.
  5. Im Frontend prüfen: insbesondere bei Bildern einmal mobil/desktop checken (Ausschnitt, Lesbarkeit, Ladezeit). (Cropping-Optionen sind je Element unterschiedlich.)

Grundregeln

  • Projektbezogen und geordnet ablegen: Das spart später sehr viel Zeit.
  • Metadaten möglichst an der Datei pflegen (nicht jedes Mal im Inhaltselement neu).
  • Seitenverhältnis vor Pixelzahl: Ein Bild im falschen Verhältnis wird fast immer ungünstig beschnitten.
  • So groß wie nötig, so leicht wie möglich: Im Web zählen Pixel (nicht „dpi“) – unnötig große Dateien bremsen die Seite.
  • Video/Audio über die vorgesehenen Elemente (z. B. Video.UP), nicht als „Download-Datei“ in der Dateiliste.

Wenn Sie schnell ein passendes Bild brauchen: Vorlagenordner nutzen

Neben Ihrem Projektverzeichnis gibt es den Ordner „000 up-images2021“ mit zentral bereitgestellten, bereits zugeschnittenen Motiven. Sie können diese Bilder verwenden, ohne sie selbst neu aufzubereiten.

Fotos und Logos zuschneiden: Wann extern vorbereiten?

Nicht jedes Inhaltselement erlaubt Cropping im Backend. Wenn der Bildausschnitt wirklich wichtig ist (z. B. Gesichter, Text im Bild, Logo mit klaren Kanten), sollten Sie das Motiv vor dem Upload passend zuschneiden und exportieren.

Wann ist externes Zuschneiden sinnvoll oder nötig?

  • Cropping im Backend fehlt beim gewünschten Inhaltselement.
  • Das Motiv muss in mehreren Elementen gleich aussehen (z. B. Teaser-Karten + Galerie + Text-mit-Bild).
  • Das Bild enthält Text, der sonst abgeschnitten oder unlesbar wird.
  • Es geht um Logos: Kanten, Proportionen und Transparenz müssen sauber bleiben.

Mini-Check: Fotos zuschneiden

  • Ziel-Seitenverhältnis aus „Bildformate je Inhaltselement“ wählen (zuerst Verhältnis, dann Pixel).
  • Motiv so setzen, dass der „wichtige Bereich“ auch bei schmalen Screens nicht verloren geht.
  • Export als JPG (Fotos) oder PNG (wenn Transparenz nötig ist).
  • Dateigröße im Blick behalten: so leicht wie möglich, so groß wie nötig.

Mini-Check: Logos zuschneiden

  • Wenn möglich, Logo mit Transparenz als PNG (oder geeignetes Format gemäß Vorgaben).
  • Genug Rand/Schutzzone lassen, damit es nicht „gequetscht“ wirkt.
  • Keine Verzerrung: immer proportional skalieren.
  • Kanten prüfen (hell/dunkel auf kontrastierenden Hintergründen).