Bilder richtig optimieren (2025 Guide)
Bilder sind das Herz deiner Künstler-Website. Sie entscheiden, ob jemand „schön“ denkt – oder „haben will“. Das Dilemma: Kunst braucht Tiefe, Textur, Farben – gleichzeitig sollen Seiten mobil schnell sein.
Die gute Nachricht: Mit ein paar klaren Regeln bekommst du beides hin.
Worum es wirklich geht
Online sehen Menschen deine Arbeiten nicht im White Cube, sondern auf Displays mit sehr unterschiedlichen Größen und Verbindungen. Darum brauchst du gute Ausgangsbilder, passende Dateiformate und clever gewählte Pixelgrößen. Der Rest ist Hygiene: Benennung, Alt-Texte, saubere Auslieferung.
(Praktisch: In Creator-Systemen wie Favori Flow pflegst du Werkbilder, Werkdaten und Alt-Texte an einem Ort – so bleiben Galerie, Journal und Shop konsistent, ohne doppelte Pflege.)
Formate, die Kunst gut aussehen lassen
- JPEG/JPG – Standard für Gemälde, Zeichnung, Fotografie. Hohe Qualität bei moderater Dateigröße.
- WEBP – moderne Alternative mit meist 30–40 % weniger Gewicht als JPEG bei ähnlicher Qualität.
- AVIF – noch kleiner, sehr gut für große Hero- und Detailbilder; nicht jeder Browser gleich schnell, daher als Option nutzen, nicht als Zwang.
- PNG – nur wenn du echte Transparenz brauchst (z. B. Logos, Grafiken). Für Kunstrepros meist unnötig.
- SVG – für Logos/Icons, nie für Fotos oder Gemälde.
Farbprofil: Web = sRGB. Alles andere (AdobeRGB/CMYK) führt oft zu matten, falschen Farben im Browser.
Pixelgrößen: realistisch & wirkungsvoll
Das Ziel sind scharfe Bilder ohne Ballast. Nutze für jedes Motiv 2–3 Größen (für Mobil/Tablet/Desktop). Richtwerte:
- Hero/Teaser (quer): 1920–2400 px Breite
- Galerie-Thumbnail (Kachel): 600–900 px Kantenlänge
- Werkdetail (Hauptbild): 1600–2000 px längste Kante
- Lightbox/Zoom (optional): 2400–3000 px längste Kante
Diese Spanne deckt Retina-Displays gut ab, ohne unnötig groß zu werden. Nie hochskalieren – immer vom großen Original sinnvoll herunterrechnen.
Dateigrößen als Daumenregel:
Thumbnail < 200 KB, Werkdetail 300–800 KB, große Hero < 1 MB.
WEBP/AVIF halten das meist leicht ein.
Zuschnitt & Verhältnis: ruhig im Raster
Kacheln wirken am besten, wenn sie gleich zugeschnitten sind (z. B. 4:5 oder 1:1). Auf der Werkdetailseite zeigst du das Motiv ohne harten Beschnitt, damit Proportionen und Ränder korrekt bleiben. Lieber ein ruhiges Raster als springende Kästen – es lässt die Kunst wirken.
Dateinamen & Alt-Texte: kleine Details, große Wirkung
- Dateiname:
kuenstlername_titel_2025_technik_format.jpg
– maschinen- und menschenlesbar. - Alt-Text (knapp & wahr): „Abstrakte Acrylmalerei in Ocker und Schwarz, 120×90 cm, 2025, von [Name].“
Auf Vorschaubildern reichen Titel/Medium, auf Werkseiten darfst du präziser werden.
Hilfreich: Systeme wie Favori Flow erinnern an Alt-Texte bei Uploads und halten Titel/Serie/Technik zusammen – das spart dir Zeit und verhindert Fehler.
Auslieferung: schnell, aber nicht hektisch
- Responsive Images: Für wichtige Bilder 2–3 Größenvarianten ausgeben (z. B. 800/1600/2000 px). Browser wählen dann automatisch die passende.
- Lazy Loading: Alles unterhalb des sichtbaren Bereichs „faul“ laden. Aber: Das erste Hero/Werkbild hat Vorfahrt (nicht lazy).
- Breite/Höhe angeben:
width
&height
vermeiden Layout-Sprünge (CLS). - Preload/Prio-Hint: Für dein Hero lohnt sich ein Preload – die Seite wirkt sofort.
Aufbereitung: kurz & liebevoll
- Vom großen Original starten (kameraintern oder TIFF/PSD).
- In sRGB konvertieren, behutsam nachschärfen.
- WEBP oder JPEG exportieren (Qualität 70–85), ggf. zusätzlich AVIF.
- 2–3 Größen schreiben (z. B. 800/1600/2000 px).
- Sinnvoll benennen, Alt-Text setzen, hochladen.
Häufige Stolpersteine
- Zu große PNGs für Malerei → nutze WEBP/JPEG.
- Falsche Farben im Browser → Farbprofil war nicht sRGB.
- Unscharf trotz großer Datei → hochskaliert statt sauber verkleinert.
- Langsame Galerie → nur eine 4000 px-Version für alles; lieber Varianten.
- „Springende“ Kacheln → fehlende Breite/Höhe oder uneinheitliche Zuschnitte.
Mini-Checkliste fürs Veröffentlichen
- sRGB ✔︎ | WEBP/JPEG ✔︎ | 2–3 Größen ✔︎
- Dateiname & Alt-Text ✔︎ | Hero nicht lazy ✔︎
- Einheitliche Kachel-Formate ✔︎ | Werkdetail mit ruhigem Rand ✔︎
Und ja: einmal sauber eingerichtet, dann läuft es im Alltag fast nebenher – besonders, wenn Shop, Galerie und Journal zusammenarbeiten, z. B. in Favori Flow.)