Bildschirm
Leuchtet
Additive Farbmischung: Rot, Grün und Blau ergeben zusammen Weiß. Der darstellbare Farbraum ist groß, kräftige Töne sind kein Problem.
- Farbraum sRGB
- Auflösung in Pixeln, nicht in dpi
- Dateigröße ist Ladezeit
Der Unterschied
Ein Bild, das auf dem Bildschirm brillant aussieht, wird im Druck stumpf und auf dem Handy zur Ladebremse. Nicht weil es schlecht ist, sondern weil jeder Ausgabeweg eigene Anforderungen hat.
Bildschirm
Additive Farbmischung: Rot, Grün und Blau ergeben zusammen Weiß. Der darstellbare Farbraum ist groß, kräftige Töne sind kein Problem.
Druck
Subtraktive Mischung: Vier Farben auf weißem Papier. Der Farbraum ist deutlich kleiner – besonders bei satten Blau-, Orange- und Grüntönen fehlt schlicht die Möglichkeit.
Mobil
Kleiner Bildschirm, oft schlechte Verbindung, wenig Geduld. Hier entscheidet die Dateigröße darüber, ob das Bild überhaupt gesehen wird.
Der häufigste Fehler: ein Bild für alles. Die Druckdatei mit 8000 Pixeln landet auf der Website, wird dort auf 600 Pixel heruntergerechnet – und der Browser lädt trotzdem die vollen 12 Megabyte. Auf dem Handy sind das mehrere Sekunden Wartezeit für ein einziges Bild.
Web
Bilder machen bei den meisten Websites den größten Teil der Datenmenge aus. Fünf Maßnahmen, die zusammen oft mehr bringen als jede andere Optimierung.
| Maßnahme | Richtwert | Wirkung |
|---|---|---|
| Format | WebP statt JPEG SVG für Logos, Icons und Grafiken – bleibt bei jeder Größe scharf. | Bei gleicher Qualität rund 25 bis 35 Prozent kleiner. Von allen aktuellen Browsern unterstützt. |
| Maximale Kantenlänge | 1600–2000 px | Reicht für jede übliche Darstellung. Alles darüber wird ohnehin heruntergerechnet. |
| Qualitätsstufe | 75–85 | Der Unterschied zu 100 ist praktisch unsichtbar, die Datei aber halb so groß. |
| Zielgröße je Bild | unter 200 KB | Bei zwanzig Bildern auf einer Seite ist das der Unterschied zwischen 4 MB und 15 MB. |
| Mehrere Größen | srcset mit 2–3 Varianten | Das Handy lädt die kleine Fassung, der große Bildschirm die große. Spart mobil oft die Hälfte. |
| Nachladen | loading="lazy" | Bilder weit unten laden erst beim Scrollen. Die erste Ansicht ist dadurch spürbar schneller. |
| Maße im Markup | width und height setzen | Verhindert, dass der Inhalt beim Laden springt – das wertet Google als eigenen Messwert. |
Zu AVIF: Das Format komprimiert noch besser als WebP, wird aber langsamer erzeugt und nicht überall gleich gut unterstützt. Sinnvoll als zusätzliche Variante mit WebP als Rückfall – nicht als alleiniges Format.
Farbe & Lesbarkeit
Farbabweichungen zwischen Website, Broschüre und Messewand haben fast immer dieselbe Ursache: Es gibt keine definierten Werte je Ausgabeweg.
Jede Markenfarbe braucht vier Angaben, weil jeder Weg anders funktioniert. Wer nur den HEX-Wert hat, überlässt die Umrechnung dem Zufall – und jede Druckerei rechnet anders.
Barrierefreiheit ist keine Kür mehr. Seit Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz für viele digitale Angebote – Kontrast ist dabei der am leichtesten prüfbare Punkt.
Häufiges Problem in der Praxis: helles Orange auf Weiß. Sieht gut aus, erreicht aber selten 4,5 : 1 – dann braucht es einen abgedunkelten Ton für Text.
Praktischer Tipp: Legen Sie neben der Markenfarbe gleich eine textfähige Variante fest – meist dieselbe Farbe, [15] bis [20] Prozent dunkler. Dann muss niemand im Alltag entscheiden, ob der Kontrast noch reicht.
Leistung
Oft ist das vorhandene Material besser als sein Ruf – es ist nur für den falschen Weg aufbereitet. Vier Pakete, je nachdem wo es klemmt.
Womit es sich meist lohnt anzufangen: mit den Bildern auf der Startseite. Dort ist die Wirkung am größten, der Aufwand am kleinsten – und Sie sehen am Messwert sofort, ob es etwas gebracht hat.