Bilder und Medien einfügen

<p>Bilder machen den Unterschied zwischen einer lebendigen Website und einer Textwand. In TYPO3 fügst du Bilder über die Dateiliste oder direkt im Inhaltselement ein. Hier lernst du beide Wege, die wichtigsten Einstellungen für Bildgröße und Beschnitt sowie den richtigen Umgang mit Alt-Texten.</p>

<h3>Bild in ein Inhaltselement einfügen</h3>

<p>Der gängigste Weg: Du bearbeitest ein bestehendes Inhaltselement vom Typ „Text und Bild" oder „Bild" und fügst dort ein Bild hinzu.</p>

1. Öffne das Inhaltselement im Modul „Seite" (Stift-Symbol).
2. Wechsle zum Tab „Bilder" oder „Medien".
3. Klicke auf „Datei hinzufügen". Es öffnet sich ein Auswahlfenster.
4. Navigiere in der Dateiliste zum gewünschten Ordner und wähle das Bild aus.
5. Klicke auf „Speichern".

<p>Alternativ kannst du ein Bild direkt hochladen: Klicke auf „Datei hochladen" statt „Datei hinzufügen" und wähle die Datei von deinem Computer. TYPO3 lädt sie in den aktuellen Ordner der Dateiliste hoch und fügt sie gleichzeitig ins Element ein.</p>

<h3>Bildgröße und Beschnitt</h3>

<p>TYPO3 skaliert Bilder automatisch auf die passende Größe für das jeweilige Layout. Du kannst die Darstellung zusätzlich steuern:</p>

<p><strong>Breite und Höhe:</strong> In den Bild-Einstellungen des Inhaltselements kannst du maximale Maße in Pixeln angeben. TYPO3 verkleinert das Bild proportional auf diese Maße. Vergrößern solltest du Bilder nie – das führt zu unscharfer Darstellung.</p>

<p><strong>Bildmanipulation (Cropping):</strong> Über das Beschnitt-Symbol neben dem Bild öffnest du das Cropping-Tool. Hier wählst du einen Bildausschnitt, ohne die Originaldatei zu verändern. Je nach Konfiguration stehen verschiedene Seitenverhältnisse zur Verfügung – zum Beispiel 16:9 für Headerbilder oder 1:1 für Teamfotos.</p>

<p><strong>Bildposition:</strong> Bei „Text und Bild"-Elementen bestimmst du, wo das Bild relativ zum Text erscheint: oben, unten, links oder rechts neben dem Text. Die Option findest du unter „Erscheinungsbild" im Inhaltselement.</p>

<h3>Alt-Text und Bildtitel</h3>

<p>Jedes Bild sollte einen Alt-Text haben. Der Alt-Text (Alternativtext) beschreibt, was auf dem Bild zu sehen ist. Er hat drei Funktionen:</p>

• Barrierefreiheit: Screenreader lesen den Alt-Text vor, damit sehbehinderte Nutzer den Bildinhalt verstehen.
• SEO: Suchmaschinen verwenden den Alt-Text, um den Bildinhalt zu verstehen und in der Bildersuche anzuzeigen.
• Fallback: Wenn ein Bild nicht geladen werden kann, zeigt der Browser stattdessen den Alt-Text an.

<p>Den Alt-Text pflegst du entweder direkt im Inhaltselement (Tab „Bilder", Feld „Alternativtext") oder zentral in der Dateiliste bei den Metadaten der Datei.</p>

<p><strong>Guter Alt-Text:</strong> Beschreibend, kurz und konkret. Statt „Bild1" schreibe „Teamfoto der RHEINFORMAT-Schulung im Büro". Wenn das Bild rein dekorativ ist (z. B. ein Trennlinie-Grafik), lass den Alt-Text leer.</p>

<p>Der <strong>Bildtitel</strong> erscheint je nach Konfiguration als Tooltip, wenn Besucher mit der Maus über das Bild fahren. Er ist optional, aber nützlich für zusätzlichen Kontext.</p>

<p><strong>Bildunterschrift:</strong> Wird unter dem Bild angezeigt und eignet sich für Quellenangaben, Erläuterungen oder Bildnachweise.</p>

<h3>Mehrere Bilder und Galerien</h3>

<p>Ein einzelnes Inhaltselement kann mehrere Bilder enthalten. Füge einfach weitere Bilder über „Datei hinzufügen" hinzu. Die Reihenfolge änderst du per Drag and Drop innerhalb der Bildliste.</p>

<p>Je nach Template deiner Website werden mehrere Bilder als Galerie, Slider oder Raster dargestellt. Die Darstellungsoption findest du unter „Erscheinungsbild" im Inhaltselement – dort wählst du das passende Layout.</p>

<h3>Bilder richtig vorbereiten</h3>

<p>Damit Bilder schnell laden und gut aussehen, bereite sie vor dem Hochladen vor:</p>

• Format: WebP oder JPG für Fotos, PNG für Grafiken mit Transparenz
• Dateigröße: Unter 200 KB pro Bild, bei Headerbildern bis 500 KB
• Maße: Mindestens so groß wie die größte Darstellung auf der Website (typisch: 1200–1600 px Breite)
• Dateiname: Beschreibend, mit Bindestrichen: team-workshop-koeln-2026.webp statt IMG_4711.jpg

<p>Ausführliche Tipps zur Dateivorbereitung findest du unter Bilder und PDFs richtig vorbereiten.</p>

<p><strong>Aus der Schulungspraxis:</strong> Die zwei häufigsten Bildfehler: Fotos direkt von der Kamera hochladen (5 MB und 4000 px breit – bremst die Seite aus) und fehlende Alt-Texte. Beides lässt sich mit 30 Sekunden Vorbereitung pro Bild vermeiden.</p>