Design · Gestaltung
Bilder für Websites: Auswahl, Rechte und Optimierung
Bilder entscheiden mit über den ersten Eindruck, und sie sind meist der größte Grund für langsame Websites. Wie man passende Motive findet, Rechte klärt und Bilder richtig einbindet.
Kurz beantwortet
Gute Bilder für Websites zeigen echte Menschen, Orte und Arbeiten des Unternehmens oder passen zumindest erkennbar zur Marke. Sie müssen rechtlich sauber nutzbar sein, in modernen Formaten wie WebP vorliegen, in der passenden Größe ausgeliefert werden und einen Alternativtext haben, der den Inhalt beschreibt. So laden sie schnell und helfen auch bei der Suche.
Woher die Bilder kommen
| Quelle | Stärken | Schwächen |
|---|---|---|
| Eigene Fotos | echt, unverwechselbar, schaffen Vertrauen | brauchen Zeit oder einen Fotografen, Qualität schwankt |
| Stockfotos | schnell verfügbar, große Auswahl | austauschbar, Wettbewerber nutzen oft dieselben Bilder |
| KI-generiert | passgenau zur Marke, schnell | dürfen keine echten Arbeiten oder Personen vortäuschen |
| Grafiken und Illustrationen | erklären abstrakte Leistungen gut | wirken ohne Bezug schnell beliebig |
Für das Vertrauen sind echte Bilder kaum zu ersetzen: das Team, die Werkstatt, abgeschlossene Projekte. Wo sie fehlen, können gut gewählte Stockbilder oder generierte Motive die Gestaltung tragen, solange sie nicht so tun, als wären sie echte Arbeiten des Unternehmens.
Rechte klären
- Nutzungsrechte: Bei Stockfotos die Lizenz lesen. Erlaubt sie die Nutzung auf einer Unternehmenswebsite und in Werbung?
- Abgebildete Personen: Wer erkennbar zu sehen ist, muss in der Regel einverstanden sein, bei Mitarbeitenden am besten schriftlich.
- Fotografen: Bei beauftragten Fotos die Nutzungsrechte vertraglich festhalten, auch für spätere Verwendungen.
- Urhebernennung: Manche Lizenzen verlangen einen Bildnachweis, etwa im Impressum.
- Kennzeichnung: Generierte oder bearbeitete Bilder sollten nicht als echte Fotos ausgegeben werden, wo das täuschen könnte.
Bilder technisch optimieren
Bilder sind auf vielen Websites der größte Teil der Datenmenge. Unoptimiert machen sie eine Seite langsam, besonders auf dem Handy. Die wichtigsten Maßnahmen:
Modernes Format
WebP oder AVIF sind bei gleicher Qualität deutlich kleiner als JPEG oder PNG. Ältere Formate dienen nur noch als Rückfall.
Passende Größe
Kein Bild mit 4.000 Pixeln Breite für eine Fläche von 800 Pixeln. Mit
srcsetbekommt jedes Gerät die passende Größe.Feste Maße im Code
Breite und Höhe angeben, damit der Platz reserviert ist und die Seite beim Laden nicht springt.
Später laden
Bilder außerhalb des sichtbaren Bereichs mit
loading="lazy"erst laden, wenn sie gebraucht werden. Das Hauptbild oben dagegen sofort und bevorzugt.Komprimieren
Mit vernünftiger Qualitätsstufe speichern. Der Unterschied ist meist nicht sichtbar, die Dateigröße schon.
Was diese Maßnahmen für die Ladezeit bedeuten, erklärt der Artikel Technisches SEO.
Alternativtexte schreiben
Der Alternativtext beschreibt, was auf einem Bild zu sehen ist. Screenreader lesen ihn vor, Suchmaschinen nutzen ihn, um das Bild einzuordnen. Ein guter Alternativtext beschreibt den Inhalt in einem Satz.
| Schwach | Gut |
|---|---|
| Bild1.jpg | Neu gefliestes Bad mit bodengleicher Dusche und Holzwaschtisch |
| Badsanierung Augsburg Bad Sanierung günstig | Monteur setzt eine Duschwanne in einem sanierten Badezimmer ein |
Rein dekorative Bilder ohne Inhalt bekommen einen leeren Alternativtext, damit Screenreader sie überspringen.
Aus der Praxis von KKM-Design
Häufige Fragen
Lohnt sich ein professioneller Fotograf?
Für Team, Räume und Arbeitsproben fast immer. Echte Bilder unterscheiden ein Unternehmen von seinen Wettbewerbern stärker als jede Gestaltung.
Darf ich KI-generierte Bilder auf meiner Website verwenden?
Grundsätzlich ja, wenn die Nutzungsbedingungen des Werkzeugs das erlauben. Sie sollten aber keine echten Projekte, Personen oder Referenzen vortäuschen und keine fremden Marken zeigen.
Welches Format ist das beste?
Für Fotos WebP oder AVIF, mit JPEG als Rückfall. Für Logos und Symbole SVG, weil es in jeder Größe scharf bleibt.
Kay Strack · Webdesigner und Cloud Engineer · KKM-Design