Bilder für Website und Onlineshop: Der vollständige Leitfaden für Benennung, Größe, Format und Barrierefreiheit

1. Der Dateiname – die Basis für Auffindbarkeit

In der Praxis werden Bilder trotzdem oft direkt vom Handy hochgeladen – mit Dateinamen wie IMG_2847.jpg und ohne Alt-Text. Dieser Leitfaden zeigt dir, wie du das änderst. Nach dem Lesen weißt du, wie Dateinamen, Formate, Größen, Alt-Texte und Bildrechte zusammenspielen. Und du kennst drei Tools, mit denen du das ohne Photoshop-Abo umsetzen kannst.

Suchmaschinen lesen Dateinamen. Ein Bild mit dem Namen IMG_2847.jpg sagt Google nichts. Ein Bild mit bio-olivenseife-lavendel-100g.jpg beschreibt präzise, was drauf ist – und taucht in der Bildersuche deutlich besser auf.

Sechs Regeln für gute Dateinamen:

1. Beschreibend statt kryptisch. Der Name erklärt, was im Bild ist. Nicht produkt1.jpg, sondern schreibtischlampe-schwarz-led.jpg.
2. Relevante Keywords einbauen. Verwende Begriffe, nach denen deine Kundschaft sucht – aber keine Keyword-Stopfung.
3. Kurz halten. Ziel: unter 60 Zeichen. Jedes Wort braucht einen Zweck.
4. Bindestriche statt Leerzeichen oder Unterstrichen. Google interpretiert Bindestriche als Worttrennung, Unterstriche nicht.
5. Keine Sonderzeichen, Umlaute oder Großbuchstaben. ä, ö, ü, ß, Leerzeichen und Zeichen wie ()!& machen Probleme beim Hochladen oder in URLs. Also muesli-bio statt Müsli Bio!.
6. Konsistentes Schema. Einmal festgelegt, immer gleich. Zum Beispiel produktname-variante-groesse.jpg.

2. Das richtige Bildformat wählen

Nicht jedes Bild ist gleich. Das falsche Format macht Dateien entweder unnötig groß oder unscharf.

JPG (JPEG) – Standard für Fotos. Kleine Dateigröße, gute Qualität, keine Transparenz. Nimm JPG für Produktfotos, Lifestyle-Bilder und Blog-Header.

PNG – für Grafiken, Logos und Bilder mit Transparenz (also durchsichtigem Hintergrund). Dateien sind deutlich größer als JPG. Nur einsetzen, wenn du Transparenz wirklich brauchst.

WebP und AVIF – moderne Formate, die bei gleicher Qualität 25–50 % kleiner sind als JPG. Alle aktuellen Browser unterstützen sie. Shopify und WooCommerce konvertieren hochgeladene Bilder oft automatisch in WebP. Wenn du die Wahl hast, lade gleich in WebP hoch.

SVG – für Logos, Icons und einfache Grafiken. SVGs sind Vektorgrafiken, also unendlich skalierbar und meist unter 10 KB groß. Nie für Fotos verwenden.

Entscheidungshilfe:

3. Bildgrößen und Dimensionen

Zweite große Fehlerquelle: Bilder, die viel zu groß hochgeladen werden. Ein 4.000 × 3.000 Pixel großes Handyfoto wird auf deiner Website vielleicht mit 800 × 600 Pixel angezeigt – der Rest ist verschwendete Ladezeit.

Richtwerte für typische Einsatzzwecke:

• Produktbild-Thumbnail: 600 × 600 bis 800 × 800 Pixel
• Produkt-Hauptbild: 1.200 × 1.200 bis 2.000 × 2.000 Pixel (für Zoom-Funktionen)
• Hero-Bild auf Startseite: 1.920 × 800 bis 2.560 × 1.200 Pixel
• Blog-Headerbild: 1.600 × 900 Pixel (16:9-Format)
• Logo im Header: 400 × 100 Pixel als PNG oder SVG ohne feste Größe

Die meisten Shopsysteme skalieren Bilder automatisch. Trotzdem solltest du beim Upload nicht das 20-Megapixel-Original einliefern – das belastet Speicher und Backup ohne sichtbaren Nutzen.

4. Dateigröße und Komprimierung – Ladezeit entscheidet über Umsatz

Jede Sekunde zusätzliche Ladezeit senkt die Conversion messbar (QUELLE BENÖTIGT: Studie zur Korrelation von Ladezeit und Conversion, z. B. Google/SOASTA oder Portent). Bilder sind auf den meisten Websites der größte Ladezeit-Faktor.

Zielwerte:

• Produktbilder und Blog-Bilder: unter 200 KB pro Bild
• Hero-Bilder auf Startseiten: unter 400 KB
• Icons und Logos: unter 20 KB

Das erreichst du durch Komprimierung:

• Verlustbehaftet (JPG, WebP): reduziert die Dateigröße stark, bei Fotos meist ohne sichtbaren Qualitätsverlust
• Verlustfrei (PNG, WebP lossless): behält 100 % der Qualität, reduziert die Dateigröße moderat

Ein gut optimiertes Bild wirkt sich direkt auf die Core Web Vitals aus – also die Messwerte, mit denen Google die technische Qualität deiner Website bewertet und ins Ranking einfließen lässt.

5. Alt-Texte – Pflicht für Barrierefreiheit und SEO

Der Alt-Text (auch: Alternativtext) beschreibt, was auf einem Bild zu sehen ist. Menschen, die einen Screenreader nutzen, bekommen diesen Text vorgelesen. Google liest ihn ebenfalls und nutzt ihn, um Bilder einzuordnen.

Seit Inkrafttreten des Barrierefreiheitsgesetzes (EAA) sind Alt-Texte für die meisten Onlineshops in der EU Pflicht. Details dazu findest du in unserem ausführlichen Artikel zum Barrierefreiheitsgesetz.

So schreibst du gute Alt-Texte:

• Beschreibe, was im Bild passiert, nicht nur was es ist. „Frau trinkt Kaffee im Wiener Kaffeehaus“ ist besser als „Kaffee“.
• Kurz halten. 80–125 Zeichen sind ein guter Richtwert.
• Keyword natürlich einbauen, wenn es inhaltlich passt. Nicht stopfen.
• Kein „Bild von …“ oder „Foto zeigt …“ – Screenreader kündigen Bilder selbst an.
• Bei Produktbildern: Produktname plus beschreibende Details. Beispiel: Bio-Olivenseife mit Lavendel, handgemacht in Österreich, 100 Gramm.

Alt-Text vs. Bildtitel vs. Bildbeschreibung: Der Alt-Text ist der einzige Eintrag, der für Barrierefreiheit und SEO wirklich zählt. Titel und Beschreibung sind optional.

6. Bildrechte – was du auf der Website nutzen darfst

Ein unterschätzter Bereich mit hohem Abmahnrisiko. Jedes Bild auf deiner Website braucht eine geklärte Nutzungsgrundlage.

Die drei häufigsten Fälle:

Eigene Fotos. Du hast sie selbst gemacht oder dein Unternehmen hat sie beauftragt – dann liegen die Rechte bei dir. Achte bei beauftragten Shootings darauf, dass der Vertrag die Nutzungsrechte für Website, Shop und Social Media klar regelt. Sonst kann es Jahre später teuer werden.

Stockfotos. Plattformen wie Unsplash, Pexels, Adobe Stock, Shutterstock oder Getty Images lizenzieren Bilder. Prüfe immer die konkrete Lizenz:

• Royalty-free: einmal bezahlen, dauerhaft nutzen – meist mit Mengenbegrenzung je Projekt
• Rights-managed: Einzellizenz für eine spezifische Nutzung (Dauer, Medium, Region)
• Creative Commons: frei nutzbar, oft mit Namensnennungspflicht. Die CC-Varianten unterscheiden sich stark. CC0 ist vollständig frei, CC BY-NC verbietet kommerzielle Nutzung.

KI-generierte Bilder. Tools wie Midjourney, DALL-E oder Stable Diffusion produzieren individuelle Bilder. Die Rechtslage ist aber nicht vollständig geklärt. Manche Anbieter erlauben kommerzielle Nutzung nur in bezahlten Plänen. Und: Wenn das KI-Modell erkennbar mit urheberrechtlich geschütztem Material trainiert wurde und das Ergebnis einem geschützten Werk zu ähnlich sieht, kann die Nutzung trotzdem problematisch werden. Prüfe die Nutzungsbedingungen deines Tools, bevor du KI-Bilder kommerziell einsetzt.

7. Empfohlene Tools

Du brauchst keine teure Software, um Bilder richtig vorzubereiten. Diese drei Tool-Empfehlungen decken die meisten Anwendungsfälle ab.

Canva

Für Zuschnitte, einfache Bearbeitung, Vorlagen und Textgrafiken. Die kostenlose Version reicht für die meisten Shopbetreibenden. Die Pro-Version (etwa 12 € im Monat) bietet Markenvorlagen, einen Hintergrund-Entferner und Export in gängige Formate. Ideal, wenn mehrere Personen im Team Bilder aufbereiten und ein einheitlicher Look wichtig ist. → canva.com

Squoosh oder TinyPNG

Beide Tools komprimieren Bilder direkt im Browser, kostenlos. Squoosh (von Google) bietet mehr Kontrolle über Formate und Qualitätsstufen. TinyPNG ist schneller für Batch-Bearbeitung mit vielen Bildern auf einmal. Unsere Faustregel: Squoosh für einzelne Hero-Bilder, TinyPNG für viele Produktbilder. → squoosh.app · tinypng.com

Adobe Express oder Photopea

Für erweiterte Bearbeitung ohne Photoshop-Abo. Adobe Express ist in der Basisversion kostenlos. Photopea ist eine kostenlose Photoshop-Alternative direkt im Browser, inklusive Ebenen, Masken und Filtern. Gut geeignet, wenn du mehr als zuschneiden willst. → express.adobe.com · photopea.com

8. Häufige Stolpersteine

Diese Fehler sehen wir in fast jedem Shop, der zu uns kommt:

• Handyfotos direkt hochladen. Ein Foto mit 8 MB statt 150 KB bremst den Shop aus und belegt unnötig Speicher. → Vor dem Upload immer komprimieren und auf Zielgröße zuschneiden.
• Screenshots statt echter Bilder. Screenshots sind fast immer zu groß und in schlechter Qualität. → Echte Exporte aus dem Quell-Tool nutzen.
• Umlaute und Leerzeichen in Dateinamen. Führt zu kaputten URLs und Upload-Problemen. → Nur Kleinbuchstaben, Zahlen und Bindestriche.
• Ein Bild für alle Zwecke. Ein 3.000-Pixel-Hero-Bild als Thumbnail einzusetzen ist Verschwendung. → Pro Einsatzzweck eine eigene Variante.
• Alt-Text vergessen oder kopiert. „Bild1″, „Bild2″ oder derselbe Text für alle Bilder hilft weder SEO noch Barrierefreiheit. → Jedes Bild bekommt einen eigenen, beschreibenden Alt-Text.

9. Du willst das nicht selbst machen? Wir übernehmen.

Wenn du Hunderte Produktbilder hast oder dein Team keine Zeit für manuelle Vorbereitung hat, richten wir dir einen automatisierten Workflow ein. Was wir liefern:

• Benennungsschema und Größen-Templates, zugeschnitten auf deinen Shop
• Automatische Komprimierung und WebP-Konvertierung direkt beim Upload
• Alt-Text-Routine für neue Bilder, inklusive Teamschulung

10. Fazit

Gute Bilder auf der Website sind Fleißarbeit, aber keine Raketenwissenschaft. Wer einmal ein Schema festlegt – für Benennung, Formate, Größen und Alt-Texte – spart sich später stundenlange Korrekturschleifen. Nächster konkreter Schritt: Nimm dir ein Testbild, geh diesen Leitfaden Punkt für Punkt durch und lade es korrekt vorbereitet in deinen Shop. Danach kannst du dein Schema für alle weiteren Bilder wiederverwenden.

Quellen

1. Google Web.dev – Bildoptimierung und Core Web Vitals: https://web.dev/learn/images/
2. W3C Web Content Accessibility Guidelines (WCAG) 2.2 – Images Tutorial: https://www.w3.org/WAI/tutorials/images/
3. European Accessibility Act – offizielle EU-Seite: https://ec.europa.eu/social/main.jsp?catId=1202
4. Canva Help Center: https://www.canva.com/help/
5. Squoosh – Google Image Compression: https://squoosh.app/
6. (QUELLE BENÖTIGT: Studie zur Korrelation von Ladezeit und Conversion – z. B. Google/SOASTA-Daten oder Portent-Studie)