Bilder und PDFs vorbereiten

Formate, Dateigrößen und Namenskonventionen fürs Web

Bevor du eine Datei in die TYPO3 Dateiliste hochlädst, lohnen sich 30 Sekunden Vorbereitung. Richtig vorbereitete Bilder laden schneller, sehen auf allen Geräten gut aus und werden von Suchmaschinen besser gefunden. Hier erfährst du, welche Formate, Größen und Namenskonventionen du einhalten solltest.

<h3>Bildformate: WebP, JPG oder PNG?</h3>

Nicht jedes Format passt für jeden Einsatzzweck:

WebP: Das modernste Format. Kleinste Dateigröße bei guter Qualität. Von allen aktuellen Browsern unterstützt. Meine Empfehlung für die meisten Bilder auf der Website.

JPG (JPEG): Der Klassiker für Fotos. Gute Kompression, breite Kompatibilität. Verwende JPG, wenn WebP nicht möglich ist oder du Bilder für externe Verwendung bereitstellst.

PNG: Für Grafiken mit Transparenz (z. B. Logos auf transparentem Hintergrund) oder Grafiken mit scharfen Kanten und Text. PNG-Dateien sind größer als WebP und JPG – verwende sie nur, wenn Transparenz oder Pixelgenauigkeit nötig ist.

SVG: Für Vektorgrafiken wie Icons und Logos. SVGs sind beliebig skalierbar und extrem klein. Dein Administrator muss den SVG-Upload in TYPO3 freigegeben haben.

<h3>Optimale Bildgrößen</h3>

Die richtige Bildgröße hängt davon ab, wo das Bild auf der Website erscheint:

Headerbild / Hero-Image: 1600–1920 px Breite, maximal 500 KB
Inhaltsbild im Text: 1200 px Breite, maximal 200 KB
Teaser-Bild / Vorschaubild: 800 px Breite, maximal 100 KB
Team-Foto / Portrait: 600–800 px Breite, maximal 150 KB

TYPO3 verkleinert Bilder automatisch auf die vom Template vorgegebene Größe. Trotzdem solltest du kein 5000 px breites Kamerafoto hochladen – die Originaldatei bleibt auf dem Server und belegt unnötig Speicherplatz.

Vergrößern vermeiden: Lade Bilder immer mindestens so groß hoch wie die größte Darstellung auf der Website. Zu kleine Bilder werden von TYPO3 hochskaliert und sehen unscharf aus.

<h3>Bilder komprimieren</h3>

Komprimierung reduziert die Dateigröße, ohne die sichtbare Qualität wesentlich zu verändern. Zwei empfehlenswerte Tools:

Squoosh (squoosh.app): Kostenlos, direkt im Browser. Ziehe ein Bild hinein, wähle das Zielformat (WebP empfohlen), stelle die Qualität auf 75–85% und lade das komprimierte Bild herunter.

TinyPNG (tinypng.com): Komprimiert JPG und PNG automatisch. Einfach per Drag and Drop hochladen. Bis zu 20 Bilder gleichzeitig kostenlos.

Aus der Schulungspraxis: Der Unterschied zwischen einem unkomprimierten und einem komprimierten Bild ist mit bloßem Auge kaum sichtbar – die Dateigröße sinkt aber oft um 60–80%. Eine Seite mit 10 optimierten Bildern lädt in 2 Sekunden statt in 8. Das ist spürbar für jeden Besucher.

<h3>Dateinamen: Beschreibend und SEO-freundlich</h3>

Der Dateiname ist für Suchmaschinen relevant – besonders für die Google Bildersuche. Benenne Dateien vor dem Upload beschreibend:

Gut: typo3-backend-seitenbaum-uebersicht.webp

Schlecht: IMG_4711.jpg, bild-neu-final2.png, Screenshot 2026-04-10.png

Regeln für Dateinamen:

Kleinbuchstaben, Bindestriche statt Leerzeichen oder Unterstriche
Keine Umlaute, Sonderzeichen oder Leerzeichen
Beschreibend: Was zeigt das Bild? In welchem Kontext wird es verwendet?
Bei Bedarf ein Keyword einbauen (ohne Keyword-Stuffing)

<h3>Alt-Texte und Metadaten vorbereiten</h3>

Bereite am besten schon vor dem Upload eine kurze Beschreibung vor, die du als Alt-Text in der Dateiliste einträgst. Gute Alt-Texte sind:

Beschreibend: Was ist auf dem Bild zu sehen?
Kurz: 5–15 Wörter reichen
Ohne „Bild von…" oder „Foto eines…" – Screenreader kündigen automatisch an, dass es ein Bild ist

Warum Alt-Texte so wichtig sind: Sie verbessern die Barrierefreiheit und SEO deiner Website gleichzeitig. Google nutzt Alt-Texte, um Bilder in der Suche einzuordnen. Screenreader lesen sie sehbehinderten Nutzern vor.

<h3>PDFs richtig vorbereiten</h3>

PDFs sind der Standard für Dokumente zum Download – Preislisten, Flyer, Anleitungen. Beachte beim Vorbereiten:

Dateigröße: Unter 2 MB pro PDF. Größere Dateien komprimierst du mit Tools wie smallpdf.com oder der „Exportieren"-Funktion deines PDF-Programms (Qualität „Web" oder „Optimiert").

Dateiname: Beschreibend und aktuell: preisliste-dienstleistungen-2026.pdf statt Preisliste_NEU_FINAL.pdf.

Barrierefreiheit: Achte darauf, dass der Text im PDF durchsuchbar ist (also kein reines Bild-PDF). Das hilft sowohl Besuchern als auch Suchmaschinen.

Aus der Schulungspraxis: Viele Redakteure laden PDFs direkt aus Word oder InDesign hoch, ohne die Dateigröße zu prüfen. Ein 15-MB-PDF bremst den Download aus und vergrault Besucher – besonders auf dem Smartphone. 30 Sekunden Komprimierung machen den Unterschied.