Bilder – Qualität & technische Hinweise

Diese Seite hilft Ihnen, Bilder so vorzubereiten und zu verwenden, dass Darstellung, Ladezeit und Barrierefreiheit stimmen. Viele Probleme entstehen nicht im Inhaltselement, sondern schon bei Dateiformat, Zuschnitt oder Dateigröße.

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, prüfen Sie die Darstellung mindestens in:
  • Desktop,
  • Tablet,
  • Smartphone.
• Vermeiden Sie Motive, bei denen der zentrale Inhalt nur in einem sehr schmalen Ausschnitt funktioniert.

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 Alt-Text oder im umgebenden Inhalt (je nach Zweck).

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

• 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.

Hinweis: Ein schönes Foto ohne Informationswert ist oft dekorativ – ein Lageplan, Diagramm, Screenshot oder Plakat ist fast immer informativ und braucht Alt-Text.

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, Alt-Text, ggf. Bildunterschrift)?
• Enthält das Bild Text – und ist dieser auch außerhalb des Bildes sinnvoll abgedeckt?