Bilder – Qualität & technische Hinweise

Gute Bilder wirken professionell – schlechte Bilder kosten Zeit (Nachbearbeitung), Performance (Ladezeit) und im Zweifel auch Barrierefreiheit. Diese Seite hilft Ihnen, Bilder so vorzubereiten, dass sie im TYPO3-Frontend scharf, schnell und robust funktionieren – auch responsiv.

• Passendes Seitenverhältnis gewählt? (Sonst wird später „kaputt“ gecroppt.)
• Dateiformat passt? JPG für Fotos, PNG für Grafiken/Transparenz, animiert nur wenn nötig.
• Pixel statt dpi: Für Webdarstellung zählt Pixelgröße, nicht „dpi“.
• Dateigröße vernünftig? Mehrere MB pro Bild sind fast immer ein Warnsignal.
• Responsiv getestet? Mindestens Desktop/Tablet/Smartphone prüfen (Cropping!).
• Barrierefreiheit:Alternative Bildbeschreibung (Alt-Text) ist sinnvoll gepflegt; Text im Bild ist möglichst vermieden.

Bilder sollten:

• scharf und gut erkennbar sein (auch auf großen Bildschirmen),
• nicht unnötig riesig hochgeladen werden (Ladezeit!),
• sich sauber croppen lassen (wichtige Bildteile dürfen nicht „abgeschnitten“ werden).

Praxisregel: Lieber ein gutes Ausgangsbild in passendem Seitenverhältnis als später „retten“ müssen.

• JPEG/JPG: Standard für Fotos. Gute Qualität bei kleinerer Dateigröße.
• PNG: Für Grafiken mit Transparenz oder wenn harte Kanten (z. B. Logos) sauber bleiben müssen. Häufig größer als JPG.
• GIF/animiert: Nur wenn Animation wirklich nötig ist (siehe Sonderfall unten).
• PDF: Für Downloads, nicht für Bilder im Seiteninhalt.

Im Web zählt Pixelgröße, nicht „dpi“. Ein Bild kann 72 oder 300 dpi haben – im Browser ist entscheidend, wie viele Pixel es hat.

• Für die Webdarstellung: Pixelgröße passend zum Einsatzzweck.
• Für druckfähige Downloads (z. B. Plakat als Download): höhere Qualität sinnvoll; dann eher über PDF/Download bereitstellen.

Merksatz: dpi ist ein Druckthema – Pixel sind das Webthema.

TYPO3-Templates arbeiten oft responsiv: Je nach Bildschirmbreite kann ein Bild anders wirken, und Cropping greift.

Darauf sollten Sie achten:

• Wichtige Bildteile (Gesichter, Text, zentrale Objekte) müssen auch nach Cropping sichtbar bleiben.
• Wenn ein Bild im Element zugeschnitten wird: mindestens Desktop, Tablet, Smartphone prüfen.
• Vermeiden Sie Motive, die nur in einem sehr schmalen Ausschnitt funktionieren.

Tipp: Wenn ein Bild „nur ganz exakt“ funktioniert, ist es meist das falsche Motiv für responsive Teaser/Bühne.

Große Bilder sind einer der häufigsten Gründe für langsame Seiten.

Gute Praxis:

• Laden Sie Bilder nicht als „Original aus der Kamera“ hoch.
• Reduzieren Sie Bilder vor dem Upload auf eine sinnvolle Pixelgröße.
• Vermeiden Sie extrem große PNGs, wenn ein JPG genügt.

Warnsignal: Wenn ein einzelnes Bild mehrere Megabyte groß ist, lohnt sich fast immer Optimierung.

Text im Bild ist problematisch, weil er:

• auf Mobilgeräten schnell zu klein wird,
• bei Cropping abgeschnitten werden kann,
• für Screenreader nicht automatisch verfügbar ist.

Wenn Text im Bild unvermeidbar ist:

• sorgen Sie für hohen Kontrast,
• halten Sie Text kurz,
• und übernehmen Sie die wesentliche Textinformation in die Alternative Bildbeschreibung (Alt-Text) oder in den umgebenden Inhalt (je nach Zweck).

Bilder sind nur dann barrierearm, wenn die wesentliche Information zugänglich ist.

• Alternative Bildbeschreibung (Alt-Text): beschreibt die Bildinformation im Kontext der Seite (kurz, präzise).
• Dekorative Bilder: nur dann Alt-Text leer lassen, wenn sie wirklich keine Information tragen.

Faustregel: Ein schönes Foto ohne Informationswert ist oft dekorativ – ein Lageplan, Diagramm, Screenshot oder Plakat ist fast immer informativ und braucht eine Alternative Bildbeschreibung.

Wenn Bilder veröffentlicht werden, muss die Quelle/Urheber:in korrekt gepflegt sein (je nach Lizenz/Regelung Ihres Projekts).

Empfehlung:

• Quelle/Urheber immer an der Datei als Metadatum pflegen (FAL), damit es bei Mehrfachverwendung konsistent bleibt.
• Bei Unsicherheit lieber vor Veröffentlichung klären, statt später korrigieren zu müssen.

Animierte Bilder können in TYPO3 grundsätzlich funktionieren – aber: Wenn das System beim Einbinden croppen oder skalieren muss, kann die Animation je nach Verarbeitung verloren gehen.

Praxisempfehlung:

• Animation nur einsetzen, wenn sie wirklich nötig ist.
• Wenn Animation wichtig ist: Bild möglichst schon in passender Zielgröße vorbereiten und nach dem Einbinden testen (Desktop + Mobile).

• Ist das Bildformat passend (JPG für Fotos, PNG für Grafiken)?
• Ist die Dateigröße vernünftig (nicht unnötig groß)?
• Funktioniert der Zuschnitt auch mobil (kein abgeschnittenes Gesicht/Text)?
• Sind Metadaten gepflegt (Quelle/Urheber:in, Alternative Bildbeschreibung, ggf. Bildunterschrift)?
• Enthält das Bild Text – und ist dieser auch außerhalb des Bildes sinnvoll abgedeckt?