Das Wichtigste in Kürze

  • Große Bilder bremsen deine Website und kosten Kunden.
  • Richtiges Format und Kompression sind entscheidend.
  • Alt-Texte helfen SEO und Menschen mit Sehbehinderung.

Stell dir vor: Ein Interessent klickt auf deinen Google-Eintrag, deine Seite lädt und lädt – und nach fünf Sekunden ist er weg. Häufig liegt das an riesigen Bilddateien, die der Browser erst herunterladen muss. Gerade im Handwerk oder Einzelhandel zeigen viele Betriebe ihre Arbeiten oder Produkte mit Fotos, die direkt von der Kamera kommen. Eine einzelne Datei kann dabei mehrere Megabyte groß sein – viel zu viel für das Internet.

Das Problem: Langsame Seiten kosten dich Platz in den Suchergebnissen und verärgern Besucher. Dabei ist die Lösung gar nicht kompliziert. In diesem Artikel zeigen wir dir, wie du Bilder Website optimieren kannst – mit den drei Hebeln Größe, Format und Alt-Text. Du bekommst konkrete Schritte, die du morgen umsetzen kannst, ohne dass du ein Technik-Profi sein musst. Am Ende lädt deine Seite schneller, und du tust auch noch etwas für deine Sichtbarkeit bei Google.

Warum Bildgröße über Ladezeit und Ranking entscheidet

Die Ladezeit deiner Website ist ein entscheidender Faktor für die Nutzererfahrung. Wenn eine Seite länger als drei Sekunden braucht, springen viele Besucher ab – das belegen Studien immer wieder. Gleichzeitig berücksichtigt Google die Ladezeit bei der Bewertung deiner Seite. Je schneller deine Seite lädt, desto besser sind deine Chancen, in den Suchergebnissen weit oben zu erscheinen. Bilder machen oft den größten Teil des Datenvolumens einer Seite aus.

Ein typisches Beispiel: Ein Fotograf lädt ein 12-Megapixel-Foto direkt von der Kamera hoch. Das sind schnell 5 Megabyte. Auf einer Seite mit zehn solcher Bilder kommen da 50 Megabyte zusammen. Das ist so, als würdest du einen LKW für einen Briefumschlag schicken. Dabei reichen für das Web meist 100 bis 300 Kilobyte pro Bild völlig aus. Der Unterschied in der Ladezeit ist enorm – und das merken deine Besucher sofort.

  • Prüfe die Dateigröße deiner Bilder: Alles über 500 Kilobyte ist für das Web meist zu groß.
  • Verwende Bildbearbeitungsprogramme wie Photoshop, GIMP oder kostenlose Online-Tools, um Bilder zu verkleinern.
  • Richte die Breite des Bildes an der maximalen Anzeigegröße aus – oft reichen 1200 bis 1600 Pixel.
  • Komprimiere jedes Bild, bevor du es hochlädst – viele Tools machen das automatisch.
  • Kontrolliere nach dem Hochladen die Ladezeit deiner Seite mit Tools wie PageSpeed Insights.
Praxistipp: Richte eine feste Regel ein: Kein Bild darf unkomprimiert auf die Website – schon das spart oft 80 Prozent der Datenmenge.

Das richtige Bildformat für jeden Zweck

Neben der Größe spielt das Format eine große Rolle. Die gängigsten Formate sind JPEG, PNG und WebP. JPEG ist ideal für Fotos mit vielen Farben und Verläufen – etwa Produktbilder oder Teamfotos. PNG eignet sich besser für Grafiken mit transparentem Hintergrund, wie Logos oder Icon-Darstellungen. Der Nachteil: PNG-Dateien sind oft deutlich größer als JPEGs. Für Fotos ist PNG daher meist die falsche Wahl.

WebP ist ein moderneres Format, das bei gleicher Qualität deutlich kleiner ist als JPEG oder PNG. Es wird von allen gängigen Browsern unterstützt. Wenn dein Website-System oder dein Hoster WebP unterstützt, solltest du es bevorzugen. Viele Baukasten-Systeme wie Wix oder Jimdo konvertieren Bilder automatisch in WebP. Wenn du WordPress nutzt, gibt es Plugins, die das übernehmen. So bekommst du die beste Qualität bei minimaler Dateigröße.

  • Nutze JPEG für Fotos und Bilder mit vielen Farbabstufungen.
  • Verwende PNG nur für Grafiken mit Transparenz, zum Beispiel Logos.
  • Wechsle zu WebP, wenn dein System es unterstützt – das spart oft 30 bis 50 Prozent Platz.
  • Vermeide das GIF-Format für Fotos – es ist veraltet und erzeugt riesige Dateien.
  • Benenne deine Bilddateien sprechend, zum Beispiel 'handwerker-arbeitet-an-wand.jpg' statt 'IMG_1234.jpg'.
Praxistipp: Teste, ob dein Website-Baukasten automatisch WebP ausliefert – wenn nicht, kannst du Bilder vor dem Upload mit einem Online-Konverter umwandeln.

Alt-Texte: Unsichtbar fürs Auge, wichtig für SEO und Barrierefreiheit

Alt-Texte sind Beschreibungen, die im HTML-Code eines Bildes stehen. Sie werden angezeigt, wenn das Bild nicht geladen werden kann, und sie werden von Screenreadern vorgelesen – also von Programmen, die Blinden und Sehbehinderten den Inhalt einer Website vorlesen. Gleichzeitig nutzt Google diese Texte, um zu verstehen, was auf dem Bild zu sehen ist. Ein guter Alt-Text kann also dazu beitragen, dass deine Seite bei relevanten Suchanfragen besser gefunden wird.

Viele Betriebe lassen das Feld für den Alt-Text einfach leer oder schreiben etwas wie 'Bild1'. Das ist eine vertane Chance. Ein guter Alt-Text beschreibt das Bild konkret und natürlich – so, wie du es einem Kollegen am Telefon beschreiben würdest. Statt 'Foto von unserer Arbeit' besser 'Zwei Elektriker montieren eine Unterverteilung in einem Neubau'. So verstehen Suchmaschinen und Menschen mit Sehbehinderung, worum es geht.

  • Beschreibe das Bild so, dass jemand es sich vorstellen kann, der es nicht sieht.
  • Integriere dein Hauptkeyword natürlich in den Alt-Text, wenn es zum Bild passt.
  • Halte den Alt-Text kurz – in der Regel reichen 5 bis 15 Wörter.
  • Vermeide Keyword-Stuffing: 'Bild optimieren, Website optimieren, Bilder optimieren' ist schlecht.
  • Bei rein dekorativen Bildern kannst du den Alt-Text leer lassen – aber setze das Feld auf 'dekorativ'.
Praxistipp: Schreibe Alt-Texte immer aus Sicht des Nutzers: Was will er wissen, wenn er das Bild nicht sieht? Das hilft dir, natürlich zu formulieren.

So setzt du die Optimierung in deinem Betrieb um

Die Theorie ist klar, jetzt geht es an die Umsetzung. Beginne mit einer Bestandsaufnahme: Schau dir deine Website an und notiere, welche Bilder besonders groß sind. Bei vielen Baukasten-Systemen siehst du die Dateigröße direkt im Medienmanager. Wenn du WordPress nutzt, gibt es Plugins, die dir eine Liste aller Bilder mit Größenangabe zeigen. So bekommst du in kurzer Zeit einen Überblick, wo der größte Handlungsbedarf liegt.

Danach gehst du systematisch vor: Erstelle eine Checkliste für neue Bilder, die du hochlädst. Dazu gehören: Bild zuschneiden auf das benötigte Seitenverhältnis, auf eine maximale Breite von 1600 Pixeln verkleinern, als JPEG oder WebP speichern und mit einer Komprimierungsstufe von 70 bis 80 Prozent exportieren. Das kannst du mit kostenlosen Tools wie GIMP oder Online-Diensten wie TinyPNG erledigen. So stellst du sicher, dass kein unoptimiertes Bild mehr auf deine Seite kommt.

  • Erstelle einen Ordner auf deinem Rechner für 'Web-optimierte Bilder' – so hast du sie immer griffbereit.
  • Lege eine Schritt-für-Schritt-Anleitung für Mitarbeiter an, die Bilder hochladen.
  • Nutze bei WordPress ein Plugin wie Smush oder ShortPixel zur automatischen Komprimierung.
  • Kontrolliere einmal im Monat die Ladezeit deiner Seite – zum Beispiel mit PageSpeed Insights.
  • Achte darauf, dass alle Bilder auf deiner Seite einen Alt-Text haben – auch die alten.
Praxistipp: Mach es dir zur Gewohnheit: Jedes Bild, das du hochlädst, bekommt vorher einen Klick durch die Komprimierungs-Tools – das dauert nur Sekunden.

Häufige Fehler und wie du sie vermeidest

Auch wenn die Optimierung einfach klingt, passieren immer wieder typische Fehler. Einer davon ist das Hochladen von Bildern in Originalgröße – selbst wenn das System sie automatisch verkleinert. Viele Baukasten-Systeme zeigen zwar ein verkleinertes Bild an, aber die volle Datei wird trotzdem geladen. Das kann die Seite unnötig verlangsamen. Deshalb ist es wichtig, die Bilder schon vor dem Upload zu optimieren.

Ein weiterer Fehler ist das Vernachlässigen von Alt-Texten aus Zeitmangel. Das rächt sich später, wenn du bei Google nicht gefunden wirst oder eine Abmahnung wegen fehlender Barrierefreiheit bekommst. Seit einiger Zeit wird Barrierefreiheit in Deutschland stärker kontrolliert – auch für Unternehmen. Ein fehlender Alt-Text ist ein häufiger Verstoß. Nimm dir also die Zeit und pflege die Texte direkt beim Hochladen ein.

  • Lade niemals das Originalbild von der Kamera hoch – auch wenn das System es verkleinert.
  • Vergiss nicht, auch Bilder in Galerien oder Slidern zu optimieren – sie sind oft die größten Zeitfresser.
  • Nutze keine Screenshots als Produktbilder – sie sind oft unscharf und haben unnötige Ränder.
  • Achte darauf, dass die Bildbeschreibung im Alt-Text nicht mit dem Seitentitel identisch ist.
  • Teste deine Seite regelmäßig mit einem Barrierefreiheits-Checker, um Alt-Text-Lücken zu finden.
Praxistipp: Erstelle eine Vorlage für Alt-Texte, die du für verschiedene Bildtypen verwendest – das spart Zeit und sorgt für Konsistenz.

Fazit

Die Optimierung deiner Bilder ist keine Raketenwissenschaft, aber sie erfordert Disziplin. Wenn du die drei Hebel Größe, Format und Alt-Text konsequent anwendest, wirst du schnell eine Verbesserung der Ladezeit und der Sichtbarkeit feststellen. Du musst nicht alles auf einmal umsetzen – beginne mit den größten Bildern auf deiner Startseite. Jeder Schritt zählt. Und wenn du keine Zeit hast, dich darum zu kümmern, ist das eine typische Aufgabe, die du delegieren kannst – zum Beispiel an einen Dienstleister wie Reedify. Aber das Wichtigste ist: Fang an.

Passend dazu

Häufige Fragen

Was ist der beste Dateityp für Website-Bilder?

Für Fotos ist JPEG die beste Wahl, weil es bei guter Qualität eine kleine Dateigröße bietet. Für Grafiken mit Transparenz wie Logos verwendest du PNG. Das moderne WebP-Format ist noch effizienter und wird von allen aktuellen Browsern unterstützt – es lohnt sich, es zu nutzen, wenn dein System es kann.

Wie groß sollte ein Bild für eine Website sein?

Die ideale Dateigröße hängt von der Darstellung ab, aber als Faustregel gilt: Unter 200 Kilobyte pro Bild ist gut, unter 100 Kilobyte ist optimal. Die Pixelbreite sollte nicht mehr als 1600 Pixel betragen, es sei denn, du zeigst das Bild in einer Galerie oder als Hintergrundbild in voller Breite.

Was ist ein Alt-Text und warum ist er wichtig?

Ein Alt-Text ist eine kurze Beschreibung eines Bildes im HTML-Code. Er erscheint, wenn das Bild nicht geladen werden kann, und er wird von Screenreadern vorgelesen – das hilft Menschen mit Sehbehinderung. Zudem nutzt Google den Alt-Text, um den Inhalt des Bildes zu verstehen, was sich positiv auf dein SEO auswirken kann.

Kann ich Bilder automatisch optimieren lassen?

Ja, es gibt Tools und Plugins, die das für dich übernehmen. WordPress-Plugins wie Smush oder ShortPixel komprimieren Bilder automatisch beim Hochladen. Auch viele Baukasten-Systeme wie Wix oder Squarespace optimieren Bilder automatisch. Trotzdem solltest du die Alt-Texte selbst pflegen, denn das kann kein Programm für dich übernehmen.