PDF, PNG, SVG, DOCX – die Wahl des richtigen Dateiformats entscheidet im Alltag oft darüber, ob ein Design gestochen scharf wirkt, ein Dokument überall gleich aussieht oder eine Website schnell lädt. Ich bin Justin und zeige dir hier praxisnah, welche Dateiformate du wofür nutzt – und welche Fehler ich in Projekten am häufigsten sehe.
TL;DR – meine Schnell-Empfehlung (Justin)
- Logo/Icons: SVG (Web), PDF/SVG (Print), PNG nur als Fallback
- Fotos: WebP/AVIF (Web), JPEG (Fallback), TIFF (High-End Print)
- Transparenz: PNG oder WebP (mit Alpha)
- Dokumente: PDF für Versand/Archiv, DOCX für Bearbeitung
- Professioneller Druck: PDF/X (z. B. PDF/X‑4) + CMYK + Schriften eingebettet
Warum Dateiformate im Design so wichtig sind
„Sieht bei mir gut aus“ ist in Design- und Marketing-Teams einer der teuersten Sätze. Dateiformate steuern u. a. Qualität (Vektor vs. Pixel), Dateigröße (Performance/SEO), Farbmanagement (RGB/CMYK) und Kompatibilität (Adobe, Office, Browser, Druckerei).
Web / UI
- kleine Dateien = schnellere Ladezeit = besseres SEO
- retina-fähig, responsiv, barrierearm
- Browser-Kompatibilität beachten
- CMYK, Beschnitt, PDF/X-Standards
- Schriften einbetten/kurven, Overprint prüfen
- 300 dpi (Faustregel) für Bilder
Die wichtigsten Formate – kurz erklärt (mit Design-Fokus)
SVG (Vektor)
Perfekt für Logos, Icons, UI-Illustrationen. Skaliert ohne Qualitätsverlust und ist im Web oft die beste Wahl.
- Pro: super klein, scharf, animierbar
- Contra: komplexe Illustrationen können groß werden
- Justin-Tipp: SVG optimieren (SVGO) und Farben als CSS steuerbar halten
PNG (Raster, verlustfrei)
Gut für Transparenz, UI-Assets, Screenshots. Für Fotos aber selten ideal, weil es groß wird.
- Pro: Alpha-Transparenz, scharf bei Kanten
- Contra: große Dateien
- Justin-Tipp: im Web oft lieber WebP (mit Alpha) nutzen
JPEG/JPG (Raster, verlustbehaftet)
Der Klassiker für Fotos. Wenn du komprimierst, achte auf Banding/Artefakte (Himmel, Haut, Verläufe).
- Pro: klein, kompatibel
- Contra: keine Transparenz, Qualitätsverlust
- Justin-Tipp: Qualität ~70–85 ist oft der Sweet Spot
WebP / AVIF (Web-Optimierung)
Moderne Formate für schnellere Websites. Besonders relevant für Core Web Vitals und SEO.
- Pro: sehr kleine Dateien bei guter Qualität
- Contra: Tooling/Workflows müssen passen
- Justin-Tipp: immer sinnvolle Fallbacks/Kompatibilität prüfen
PDF (Dokument/Print/Web)
Standard für Austausch, Freigaben und Druck. Kann Vektor + Raster enthalten.
- Pro: überall lesbar, „finale“ Version
- Contra: nicht ideal zum kollaborativen Bearbeiten
- Justin-Tipp: für Druck: PDF/X‑4, Schriften einbetten, Output Intent
TIFF (Print/Archiv)
Sehr hochwertig für Druck, Fotografie, Scans. In Web-Projekten praktisch nie notwendig.
- Pro: hohe Qualität, Farbtiefe, verlustfrei möglich
- Contra: riesige Dateien
- Justin-Tipp: nur verwenden, wenn die Druckerei/Produktion es wirklich verlangt
Weitere wichtige Design-Dateiformate (die häufig fehlen)
EPS (Legacy-Vektor)
Kommt oft aus älteren Workflows. Heute meist durch PDF/SVG ersetzt – aber manche Druckereien fragen noch danach.
- Wann nutzen? wenn ein Dienstleister es explizit verlangt
- Alternative: PDF/X oder AI
AI / PSD (Arbeitsdateien)
Keine Lieferformate für Kunden/Entwicklung, sondern Bearbeitungsdateien. Für Übergaben immer Export/Package machen.
- Pro: Ebenen, Non-Destructive Editing
- Justin-Tipp: Übergabe: zusätzlich PDF (Preview) + Assets als SVG/PNG/WebP
INDD (InDesign)
Für Layout/Print. Auslieferung fast immer als druckfertiges PDF, plus „Package“ bei Übergabe.
- Justin-Tipp: Verknüpfte Bilder sauber sammeln, Schriften lizensieren
Figma / XD (UI/Prototyping)
Für Teams und Entwickler super – aber nicht jedes Element ist automatisch „ready“. Exporte bewusst steuern.
- Justin-Tipp: Icons als SVG, Bilder als WebP/JPEG; Naming-Konventionen verwenden
SEO & Performance: Dateiformate richtig einsetzen
- Bildformate: Wo möglich AVIF/WebP nutzen, sonst JPEG/PNG als Fallback.
- Bildgrößen: nie „Original 6000px“ hochladen – stattdessen passende Größen + responsive srcset.
- Kompression: sichtbare Qualität testen (nicht nur „max. klein“).
- Alt-Texte: beschreibend, nicht keyword-stuffing (hilft SEO + Barrierefreiheit).
- SVG: nur vertrauenswürdige Quellen, unnötige Metadaten entfernen.
Häufige Fehler (die ich immer wieder sehe)
- Logo als JPEG (unsaubere Kanten, keine Transparenz)
- PNG-Foto mit 5–10 MB auf der Website (Ladezeit/SEO leidet)
- RGB-PDF an die Druckerei ohne Abstimmung (Farben „kippen“)
- Schriften nicht eingebettet → Ersatzfonts im Druck/PDF
- „Alles als PDF“ – obwohl SVG/Assets für Web besser wären
Mini-Checkliste: Welches Format soll ich exportieren?
Autor: Justin (OIT) – Schwerpunkt: Design-Workflows, Web-Performance & saubere Übergaben zwischen Design und Entwicklung.
Verwandte Artikel
Hast du eine Frage zu diesem Artikel?
Schreib uns – wir antworten in der Regel innerhalb eines Werktages.