Bilder und Fotos professionell auf die Website stellen - so geht's

Elisabeth Herynek
vor 3 Tagen
3 Min. Lesezeit

bilder richtig auf der website einpflegen

Bilder richtig einpflegen: So machst du deine Website zum Hingucker

Bilder sind das Salz in der Suppe jeder Website. Sie wecken Emotionen, transportieren Botschaften und sorgen dafür, dass deine Inhalte im Gedächtnis bleiben. Aber: Falsch eingebundene Bilder sind ein häufiger Grund für lange Ladezeiten, unsaubere Darstellungen und schlechte Sichtbarkeit in Suchmaschinen.

In diesem Artikel zeige ich dir Schritt für Schritt, wie du Bilder optimal aufbereitest, bevor du sie auf deine Website hochlädst - von der Wahl des richtigen Formats bis zum sauberen Workflow beim Einpflegen.

1. Die wichtigsten Bildformate im Überblick

Nicht jedes Bildformat eignet sich für das Web. Hier die gängigsten Formate und ihre Vor- und Nachteile:

JPG (JPEG)
- Vorteile: Sehr gute Komprimierung, kleine Dateigröße, ideal für Fotos.
- Nachteile: Keine Transparenz, leichte Qualitätsverluste bei starker Kompression.
- Typischer Einsatz: Fotos, Bilder mit vielen Farben und Verläufen.

PNG
- Vorteile: Verlustfreie Qualität, unterstützt Transparenz.
- Nachteile: Größere Dateigrößen als JPG.
- Typischer Einsatz: Logos, Grafiken, Icons, Bilder mit Transparenz.

WebP
- Vorteile: Modernes Format von Google, kombiniert kleine Dateigröße mit hoher Qualität, unterstützt Transparenz.
- Nachteile: Wird von sehr alten Browsern nicht unterstützt (heute aber kaum noch relevant).
- Typischer Einsatz: Sowohl Fotos als auch Grafiken, ideal fürs Web.

Zusatzinfos für Wissbegierige:

SVG oder EPS
- Vorteile: Vektorformat, unendlich skalierbar ohne Qualitätsverlust, sehr kleine Dateien.
- Nachteile: Nur für Grafiken/Logos geeignet, nicht für Fotos.
- Typischer Einsatz: Logos, Icons, Illustrationen.

2. Auflösung, Größe & Farbraum

Damit deine Bilder scharf, schnell und korrekt angezeigt werden, achte auf:

Auflösung: Für Web reicht 72–150 dpi (alles darüber verlangsamt nur).
Bildgröße: Bilder sollten maximal so groß sein, wie sie im Frontend dargestellt werden.
- Beispiel: Wenn ein Bild auf deiner Website max. 1200 px breit ist, braucht es keine 4000 px.
Farbraum: Für Web immer RGB (nicht CMYK, das ist für Druck).
Format: Querformat eignet sich oft besser für Banner, Hochformat für Porträts oder Detaildarstellungen.

3. Bilder fürs Web optimieren

Bevor du Bilder hochlädst:

Zuschneiden & anpassen: Passe das Bild auf die benötigte Breite/Höhe an.
Auflösung reduzieren: 72 dpi reichen.
Dateigröße optimieren: Mit Tools wie TinyPNG oder Photoshop speichern für Web.
Richtiges Format wählen: (siehe Tabelle oben).

Das Ziel ist also, so klein wie möglich, so groß wie nötig, ohne sichtbare Qualitätsverluste.

WORKFLOW

Schritt für Schritt: Bilder richtig auf der Website einpflegen

Damit deine Website professionell wirkt und von Google geliebt wird, folge diesem Ablauf:

Bild bearbeiten
- Größe & Format anpassen
- Auflösung optimieren
- Datei verkleinern
Dateiname vergeben
- aussagekräftig & SEO-freundlich
- statt IMG_1234.jpg besser mein-firmenname.jpg
Hochladen ins CMS (zB WordPress, Wix, …)
Tags vergeben
Bild/Foto auf der gewünschten Seite/Abschnitt/Spalte platzieren
Alt-Text setzen
Kurze Beschreibung des Bildes für Screenreader & SEO.
Title-Tag / Mouseover-Text einfügen
Wird beim Darüberfahren mit der Maus angezeigt.
Bildbeschreibung hinzufügen (falls sinnvoll)
Responsives Verhalten prüfen
Funktioniert das Bild auf Desktop, Tablet, Smartphone?

ZUSAMMENFASSUNG - Häufige Fehler beim Einpflegen von Bildern

Bilder sind zu groß (z B 5 MB statt 200 KB)
falscher Farbraum (CMYK > wirkt blass oder falsch im Browser)
leere oder nichtssagende Dateinamen
keine Alt-Texte - SEO-Nachteile und Barrierefreiheit fehlt
transparente Logos als JPG gespeichert (unschöner Hintergrund)

Richtig eingepflegte Bilder machen den Unterschied zwischen einer langsamen, unprofessionellen Website und einem modernen, nutzerfreundlichen Auftritt.

Wenn du diese Schritte beachtest, sorgst du dafür, dass deine Bilder schnell laden, gestochen scharf aussehen und von Suchmaschinen gefunden werden.

Du willst, dass deine Website-Bilder perfekt aussehen und schnell laden?

Ich unterstütze dich beim Einpflegen deiner Bilder - vom richtigen Format über optimale Größe bis zu Alt-Texten und SEO-freundlicher Umsetzung.

Kontaktiere mich jetzt und lass uns deine Website professionell auf Hochglanz bringen!

Jetzt anfragen