Bilder & Medien

TYPO3 unterstützt verschiedene Medienformate. Für den Einsatz auf Webseiten eignen sich jedoch nur bestimmte Formate. Diese Übersicht hilft bei der Auswahl:

Geeignete Bildformate

• .jpg / .jpeg: gut für Fotos und großflächige Bilder
• .png: für Grafiken, Logos und Bilder mit Transparenz
• .svg: ideal für skalierbare Vektorgrafiken (z. B. Icons)
• .webp: wird automatisch erzeugt, um Bilder im Web effizienter auszuliefern

Videos

• Nur Youtube- oder Vimeo-Links werden eingebunden. Ein direktes Hochladen in TYPO3 ist nicht vorgesehen.

Audio

• .mp3: geeignet für Podcasts oder andere Audiobeiträge

Nicht empfehlenswerte Formate

• Formate wie .bmp, .tiff, .heic sind technisch ungeeignet oder für das Web nicht optimiert
• Office-Dateien wie .docx oder .xlsx sollten nur im geschützten Downloadbereich verwendet werden
• PDFs eignen sich nicht als Ersatz für echte Seiteninhalte

➡️ TYPO3 passt Bilder bei Bedarf automatisch an. Um dabei keine wichtigen Inhalte abzuschneiden, empfiehlt es sich:

• Motive zentriert und mit ausreichend Rand aufzunehmen
• Bilder nicht zu klein hochzuladen (vermeidet Unschärfen oder verpixelte Darstellung)
• Dateigröße sinnvoll zu wählen – meist reichen bis zu 2 MB aus
• Für responsive Layouts lieber im Querformat als im Hochformat arbeiten

💡 Tipp: Für Slider oder Teaser wirken Bilder mit passenden Proportionen besonders harmonisch – am besten in der Vorschau testen.

Damit Bilder barrierefrei, suchmaschinenfreundlich und rechtlich einwandfrei verwendet werden können, sind einige Angaben notwendig – je nach Einsatzzweck.

✅ Diese Felder sind wichtig:

• Alt-Text (Alternativtext)
  Wird vorgelesen, wenn Bilder nicht angezeigt werden oder ein Screenreader im Einsatz ist.
  ➤ Beschreibt den Bildinhalt in einem Satz
  Beispiel: „Studierende sitzen in einer Vorlesung im Hörsaal.“
• Bildtitel (optional)
  Wird als Tooltip angezeigt, wenn der Mauszeiger über dem Bild schwebt. Kann zur Strukturierung genutzt werden.
• Copyright / Quelle
  Wenn ein Bild nicht selbst erstellt wurde, muss die Quelle korrekt angegeben werden.
  Beispiel: „Foto: Max Mustermann / h_da“

🔶 Was gilt für Barrierefreiheit?

💡 Eine Übersicht mit allen Anforderungen bietet der Beitrag Barrierearme Inhalte.

• Der Alt-Text ist Pflicht – auch bei rein dekorativen Bildern sollte ein kurzer Platzhalter wie „leer lassen“ nur in begründeten Fällen verwendet werden.
• Vermeide Formulierungen wie „Bild von“ oder „Hier sieht man“.
• Der Alt-Text beschreibt nicht die Funktion, sondern den Inhalt des Bildes.

Tipp: Wenn mehrere ähnliche Bilder verwendet werden (z. B. in Galerien), sollte jeder Alt-Text individuell angepasst sein.

Große Dateien verlangsamen den Seitenaufbau – besonders auf mobilen Geräten. Daher ist es wichtig, Bilder, Videos und Audiodateien so klein wie möglich, aber so groß wie nötig bereitzustellen.

✅ Empfohlene Richtwerte:

• Bilder: max. 1–2 MB (bei vielen Bildern auf einer Seite: kleiner)
• Audiodateien: möglichst < 5 MB
• PDF-Dateien: nur im Ausnahmefall > 5 MB

💡 Tipp: Auch wenn TYPO3 Bildgrößen automatisch anpasst, wird die Ursprungsdatei immer auf den Server geladen. Deshalb lohnt sich eine vorherige Optimierung.

Was hilft bei der Optimierung?

• Bilder vor dem Upload mit Tools zur Bildbearbeitung komprimieren
• Keine unnötig hohen Auflösungen verwenden (z. B. > 4000 px Breite)
• Bei PDFs: Bilder verkleinern, Textebenen beibehalten, unnötige Anhänge entfernen

Nicht alle Medien sind für den direkten Upload ins TYPO3-System geeignet. Neben technischen Anforderungen gelten auch rechtliche Einschränkungen.

✅ Diese Medien dürfen hochgeladen werden:

• Eigene Bilder und Grafiken (z. B. aus Fotoshootings oder Screenshots)
• Dateien mit eindeutig geklärten Nutzungsrechten
• PDFs, wenn keine bessere Alternative als Seiteninhalt möglich ist
• Audiodateien (z. B. Interviews, Podcasts) mit klarer Quellenangabe

🚫 Diese Inhalte gehören nicht auf den Server:

• Urheberrechtlich geschützte Medien ohne Genehmigung
• Dateien aus unbekannter Quelle (z. B. aus Google-Bildersuche)
• Videos: Diese sollen nicht hochgeladen, sondern über Youtube oder Vimeo eingebunden werden

💡 Tipp: Vor dem Hochladen immer prüfen, ob das Medium selbst erstellt oder lizenziert wurde – und ob es wirklich als Datei bereitgestellt werden muss.

• Nur relevante Medien hochladen – keine Dubletten oder Testbilder im System lassen
• Dateien richtig benennen, z. B. studierende-vorlesung.jpg statt IMG_3045.JPG
• Passende Formate wählen: .jpg für Fotos, .png für Grafiken, .svg für Icons
• Alt-Texte immer pflegen – für Barrierefreiheit und SEO
• Bilder vor dem Upload verkleinern und optimieren
• Keine Videos direkt hochladen, sondern über Youtube oder Vimeo einbinden
• Bilder thematisch in Ordnern ablegen, z. B. nach Projekt oder Seitenstruktur

Detaillierte Hinweise zur barrierefreien Gestaltung bietet der Beitrag Barrierearme Inhalte

Tipps zur Dateiverwaltung und sinnvollen Ablagestruktur finden sich im Beitrag Dateiliste

Informationen zur Einbindung von Bildern in Kombination mit Text bietet der Beitrag Text & Medien