Ratgeber · Web & Content
Bilder fürs Web vorbereiten.
Scharf, schnell und sauber.
Ein Handyfoto hat heute schnell 10 Megabyte. Davon fünf auf einer Seite, und die Website lädt auf dem Handy quälend langsam. Hier steht, wie groß ein Bild fürs Web sein sollte, welches Format wofür passt, warum Farben im Browser manchmal flau wirken und was du vor dem Hochladen noch aus dem Bild nehmen solltest.
Ich arbeite mit
Du siehst Wege ohne Bildprogramm: Handy, Windows, Mac.
Vorweg: Im Web zählen Pixel, nicht dpi
Druck
Beim Druck rechnet man in Zentimetern und dpi: 300 dpi bei 10 cm Breite. Die Angabe „dpi“ steckt nur als Notiz in der Datei und sagt dem Drucker, wie groß das Bild auf Papier werden soll.
Web
Der Browser liest diese Notiz nicht. Er zeigt ein Bild so groß, wie es Pixel hat und wie die Website es vorsieht. Für das Web zählt nur die Breite und Höhe in Pixeln. „72 dpi fürs Web“ ist eine alte Faustregel ohne Wirkung: Ein 2.000-Pixel-Bild sieht mit 72 dpi genauso aus wie mit 300 dpi.
Fehler 1
Das Bild ist viel zu groß
Was passiert
Ein Foto aus der Kamera oder dem Handy ist 4.000 bis 8.000 Pixel breit und mehrere Megabyte groß. Auf der Website wird es auf 800 Pixel verkleinert angezeigt, geladen wird aber die ganze Datei. Die Seite lädt langsam, besonders im Mobilfunk, und Suchmaschinen werten das negativ. Viele Websites verkleinern Bilder zwar automatisch, aber das Original liegt trotzdem auf dem Server und wird oft doch ausgeliefert.
Faustregel
So groß wie nötig, so klein wie möglich. Bild über die volle Breite: höchstens 2.000 Pixel breit. Bild im Text oder in einer Spalte: 800 bis 1.200 Pixel. Vorschaubild, Teammitglied, Logo-Kachel: 400 bis 600 Pixel.
Ziel: ein normales Foto unter 200 KB, ein Vollbreiten-Bild unter 400 KB.
So machst du es richtig · ohne Bildprogramm
- Windows: Foto in der App Fotos öffnen, oben rechts die drei Punkte, Größe ändern, Breite in Pixeln eintragen, als Kopie speichern.
- Mac: Foto in Vorschau öffnen, Werkzeuge → Größenkorrektur, Breite in Pixeln eintragen, exportieren.
- iPhone: Beim Versenden per Mail fragt das Gerät nach der Bildgröße. Groß reicht meist fürs Web. Android: In der Galerie über Bearbeiten oder beim Teilen die Größe wählen; die genaue Stelle unterscheidet sich je nach Hersteller.
- Immer das Original behalten und nur eine Kopie verkleinern. Kleiner geht immer, größer nicht mehr.
So machst du es richtig · Profi
- Photoshop: Datei → Exportieren → Exportieren als, Breite in Pixeln setzen, Qualität etwa 70 bis 80 %, In sRGB konvertieren anhaken.
- Lightroom: Beim Export Bildgröße: Lange Kante in Pixeln begrenzen, Qualität 70 bis 80, Farbraum sRGB, Für Bildschirm schärfen.
- Affinity Photo: Datei → Exportieren, Format wählen, Größe in Pixeln eintragen, ICC-Profil sRGB.
- Für Bildschirme mit hoher Pixeldichte lieber die doppelte Anzeigebreite bei niedriger Qualität als die einfache Breite bei hoher Qualität. Das wirkt schärfer und ist oft kleiner.
Fehler 2
Das falsche Dateiformat
Was passiert
Ein Foto als PNG wird riesig, weil PNG jedes Pixel verlustfrei speichert. Ein Logo oder eine Grafik als JPG bekommt unsaubere Ränder und verliert die Transparenz. Ein Bild als PDF oder HEIC kann der Browser gar nicht anzeigen.
Faustregel
- JPG für Fotos, wenn WebP nicht geht
- PNG für Grafiken mit wenigen Farben, Flächen und Transparenz
- WebP für beides: deutlich kleiner als JPG und PNG, kann Transparenz, jeder aktuelle Browser zeigt es an
- SVG für Logos und Symbole, bleibt in jeder Größe scharf
- HEIC, TIFF, PDF, PSD nicht fürs Web, vorher umwandeln
So machst du es richtig · ohne Bildprogramm
- iPhone-Fotos kommen oft als HEIC. Unter Einstellungen → Kamera → Formate → Maximale Kompatibilität speichert das Handy künftig JPG. Vorhandene Fotos werden beim Teilen per Mail meist automatisch umgewandelt.
- Windows Fotos und Mac Vorschau können beim Speichern unter / Exportieren das Format wählen: JPG für Fotos, PNG für Grafiken.
- WebP erzeugen viele Website-Systeme beim Hochladen von selbst. Lade dann JPG oder PNG hoch und lass das System den Rest machen.
So machst du es richtig · Profi
- Fotos direkt als WebP exportieren, Qualität 75 bis 85. Photoshop, Lightroom und Affinity können das inzwischen. JPG nur noch als Rückfall.
- Grafiken mit Transparenz als WebP oder PNG-24, nicht als PNG-8 mit harten Kanten.
- Logos als SVG mit Schrift in Pfaden, ohne eingebettete Pixelbilder.
- Keine Fotos als PNG, auch wenn es „verlustfrei“ klingt. Die Datei wird fünf- bis zehnmal so groß, ohne dass man es sieht.
Fehler 3
Die Farben wirken flau oder falsch
Was passiert
Das Bild sah im Bildprogramm satt aus, im Browser ist es blass oder hat einen Stich. Ursache: Das Bild ist in CMYK (aus den Druckdaten) oder in einem großen Farbraum wie Adobe RGB gespeichert, und das Farbprofil fehlt oder wird vom Browser ignoriert.
Faustregel
Bilder fürs Web in sRGB. Das ist der Farbraum, den jeder Bildschirm und jeder Browser versteht. Kein CMYK, kein Adobe RGB, kein ProPhoto. Das Profil darf eingebettet bleiben, nötig ist es bei sRGB nicht.
So machst du es richtig · ohne Bildprogramm
- Handyfotos und normale Kamerafotos sind von Haus aus in sRGB. Hier musst du nichts tun.
- Bilder aus Druckdaten (Flyer, Broschüre) oder vom Gestalter sind oft CMYK. Frag dort nach einer Web-Fassung in sRGB, statt das Druckbild zu verwenden.
- Sieht das Bild im Browser anders aus als am Handy, ist meist genau das der Grund.
So machst du es richtig · Profi
- Beim Export In sRGB konvertieren oder Farbraum sRGB wählen, nicht nur das Profil zuweisen. Konvertieren rechnet die Farben um, Zuweisen ändert nur das Etikett.
- Aus CMYK: erst nach sRGB konvertieren, dann exportieren. Leuchtende Druckfarben gewinnen dabei sogar wieder Sättigung.
- Wenn du mit Adobe RGB oder ProPhoto arbeitest: Das ist für die Bearbeitung in Ordnung, aber die Web-Ausgabe immer in sRGB.
Fehler 4
Versteckte Daten und nichtssagende Dateinamen
Was passiert
Handyfotos speichern unsichtbar mit, wann und wo sie aufgenommen wurden, oft auf wenige Meter genau. Lädst du so ein Foto hoch, kann jeder diese Daten auslesen. Dazu heißt die Datei IMG_4711.jpg, und der Alternativtext fehlt. Suchmaschinen und Menschen mit Vorlesehilfe wissen dann nicht, was auf dem Bild ist.
Faustregel
Vor dem Hochladen: Ortsdaten entfernen, Datei sinnvoll benennen, Alternativtext eintragen. Dateiname klein, ohne Umlaute und Leerzeichen: werkstatt-luebbecke-plotter.webp. Alternativtext: ein kurzer Satz, was zu sehen ist.
So machst du es richtig · ohne Bildprogramm
- Windows: Rechtsklick auf die Datei, Eigenschaften → Details → Eigenschaften und persönliche Informationen entfernen.
- iPhone: Beim Teilen oben auf Optionen tippen und Standort ausschalten. Android: In der Galerie beim Teilen oder in den Bilddetails den Standort entfernen; die genaue Stelle unterscheidet sich je nach Hersteller.
- Das Verkleinern in Windows Fotos oder Mac Vorschau entfernt die Ortsdaten nicht unbedingt. Lieber einmal gezielt prüfen.
- Dateiname vor dem Hochladen ändern. Nachträglich umbenennen geht in den meisten Website-Systemen nicht.
So machst du es richtig · Profi
- Beim Export Metadaten auf Nur Copyright oder Keine stellen. Lightroom: Metadaten → Nur Copyright. Photoshop „Exportieren als“: Metadaten Keine oder Copyright und Kontaktinformationen.
- Urheberangabe darf bleiben, Ortsdaten nicht. Bei Fotos mit erkennbaren Personen vorher an die Einwilligung denken.
- Dateinamen und Alternativtexte gleich beim Export vergeben, nicht erst im Website-System.
Checkliste vor dem Hochladen
- Ist das Bild nur so breit wie nötig (Vollbreite höchstens 2.000 Pixel, im Text 800 bis 1.200)?
- Ist die Datei klein (Foto unter 200 KB, Vollbreite unter 400 KB)?
- Stimmt das Format (WebP oder JPG für Fotos, WebP oder PNG für Grafiken, SVG für Logos)?
- Ist das Bild in sRGB?
- Sind Ortsdaten entfernt?
- Hat die Datei einen sprechenden Namen, klein, ohne Umlaute und Leerzeichen?
- Ist ein Alternativtext eingetragen?
Stand: Oktober 2026 Menüs und Bezeichnungen der Programme können sich mit Updates ändern. Text mit KI-Unterstützung entworfen, von Andrej Herber geprüft.