Welche Bilder helfen deinen Besuchern?
Beginne mit der Seite, auf der das Bild stehen soll. Ein Foto des Eingangs kann Menschen helfen, deinen Betrieb zu finden. Ein Porträt zeigt, mit wem sie sprechen werden. Eine Detailaufnahme kann Material, Verarbeitung oder eine angebotene Leistung verständlich machen. Drei brauchbare Fotos können für eine kleine Website mehr beitragen als eine große Galerie ohne erkennbare Aufgabe.
Notiere zu jedem geplanten Bild einen einfachen Satz: „Dieses Foto zeigt …, damit Besucher …“. Wenn dir nur „damit die Seite schöner aussieht“ einfällt, ist das Bild vermutlich Dekoration. Das darf es sein. Es sollte dann aber weder den wichtigsten Inhalt verdrängen noch als vermeintlicher Projektbeleg erscheinen.
Für die Vorbereitung schlage ich eine kleine Auswahl pro Seitentyp vor: ein ruhiges Motiv für den Einstieg, ein glaubwürdiges Personen- oder Betriebsfoto und Bilder, die deine konkrete Leistung erklären. Das ist eine Arbeitshilfe, keine feste Mindestanzahl. Welche Inhalte insgesamt fehlen, kannst du mit der Checkliste für deine Website-Anfrage durchgehen.
Original und Website-Version getrennt aufbewahren
Lege zunächst einen Ordner mit den unveränderten Originalen an. Wenn du die Website von jemandem erstellen lässt, übergib nach Möglichkeit diese Dateien. Ein bereits verkleinertes Messenger-Bild oder ein Screenshot aus einer Präsentation lässt sich später nur eingeschränkt für einen breiten Seitenkopf verwenden. Bitte bei fehlenden Originalen zuerst die Person, die fotografiert hat, um die Ausgangsdateien.
Ein zweiter Ordner enthält ausschließlich die freigegebenen Website-Versionen. Benenne sie so, dass du sie wiedererkennst, etwa atelier-eingang-aussen.webp statt IMG_4821-final-neu.webp. Beschreibende Dateinamen helfen auch bei der Einordnung durch Suchmaschinen; Google empfiehlt kurze, aussagekräftige Namen in seinen Hinweisen zu Website-Bildern.
Halte außerdem fest, woher ein Bild stammt und ob es bereits für die Veröffentlichung freigegeben ist. Ungeklärte Bilder kommen in einen separaten Ordner. Ein Bild, das noch geprüft werden muss, sollte nicht versehentlich zwischen den fertigen Dateien landen. Das gilt ebenso für Screenshots mit sichtbaren Namen, offenen Kundenunterlagen oder internen Daten.
Erst den Ausschnitt festlegen, dann verkleinern
Ein gutes Foto passt nicht automatisch in jedes Layout. Ein breiter Seitenkopf braucht einen anderen Ausschnitt als ein quadratisches Vorschaubild. Prüfe deshalb schon bei der Auswahl, wo das wichtige Motiv sitzt. Ein Gesicht ganz am Rand oder ein Schild knapp über der Bildkante kann auf dem Smartphone verschwinden.
Als gedankliches Beispiel: Du möchtest eine Werkbank zeigen. Am Desktop sind Werkzeug, Arbeitsfläche und Raum sichtbar. In einem schmalen mobilen Ausschnitt bleibt nur die leere Mitte übrig. Dann brauchst du einen anderen Bildfokus oder eine zweite zugeschnittene Version. Mehr Kompression löst dieses Problem nicht. Die technische Unterscheidung zwischen verschiedenen Bildgrößen und bewusst unterschiedlichen Ausschnitten erklärt web.dev anhand responsiver Bilder.
Wenn eine Überschrift über dem Foto liegen soll, muss auch der Textbereich im Ausschnitt funktionieren. Prüfe beide zusammen: Ist der Hintergrund dort ruhig genug? Bleibt die Schrift lesbar? Für kleine Websites ist es oft leichter, Text und Bild nebeneinander oder untereinander zu setzen. Dann kannst du das Foto später austauschen, ohne die Lesbarkeit der Überschrift neu lösen zu müssen.
Welche Bildgröße ist sinnvoll?
„Größe“ meint zwei verschiedene Dinge: die Abmessungen in Pixeln und die Dateigröße in Kilobyte oder Megabyte. Die Pixelzahl beschreibt, wie viel Bildinformation vorhanden ist. Die Dateigröße beschreibt, wie viele Daten übertragen werden. Ein Bild mit vielen Pixeln kann stark komprimiert sein und trotzdem sichtbar schlecht aussehen.
Eine pauschale Vorgabe wie „jedes Bild muss 1.200 Pixel breit sein“ passt daher nicht für alle Stellen. Entscheidend ist, wie breit es angezeigt wird und welche Bildschirmauflösung unterstützt werden soll. Ein Bild, das im Layout 600 Pixel breit erscheint, kann auf einem Bildschirm mit doppelter Pixeldichte eine 1.200 Pixel breite Variante nutzen. Dafür muss aber nicht jedes Gerät dieselbe Datei laden.
Die Website kann mehrere Größen bereitstellen, aus denen der Browser eine passende auswählt. Google beschreibt dieses Prinzip in der web.dev-Anleitung zu responsiven Bildgrößen. Als Betreiber musst du die dafür nötigen HTML-Angaben nicht selbst schreiben. Frage bei der Umsetzung konkret: „Erzeugt mein System kleinere Varianten für Mobilgeräte, oder liefert es immer die Originaldatei aus?“
Meine praktische Empfehlung: Stimme die benötigten Abmessungen vor einem größeren Export ab. Teste zunächst ein typisches Bild im fertigen Layout. Wenn der Ausschnitt und die Schärfe passen, überträgst du die Einstellungen auf ähnliche Motive. So vermeidest du, zwanzig Dateien zu verkleinern und anschließend wegen eines anderen Seitenaufbaus noch einmal beginnen zu müssen.
WebP oder JPEG – und wie stark komprimieren?
Für Fotos sind WebP und JPEG gebräuchliche Exportformate. Welche Datei bei ausreichender Qualität kleiner wird, hängt auch vom Motiv und den Einstellungen ab. Eine glatte Wand verhält sich anders als feine Blätter, Haare oder viele kleine Gegenstände. Google beschreibt in web.dev zur Bildverarbeitung, wie Systeme Formate, Kompression und mehrere Größen automatisiert erzeugen können.
Wenn dein Website-System diese Verarbeitung bereits übernimmt, kläre zuerst dessen Anforderungen. Es ist unnötig, jedes Bild von Hand in mehrere Formate umzuwandeln, wenn derselbe Schritt beim Hochladen zuverlässig passiert. Umgekehrt genügt es nicht, eine große Datei nur anders zu benennen: Aus einer JPEG-Datei wird durch die Endung .webp kein WebP-Bild.
Für einen manuellen Export arbeite an einer Kopie: Ausschnitt wählen, auf die vereinbarte Pixelgröße verkleinern, Format auswählen und die Qualität schrittweise reduzieren. Vergleiche das Ergebnis bei tatsächlicher Anzeigegröße mit dem Original. Achte besonders auf Gesichter, scharfe Kanten und feine Details. Sichtbare Flecken oder ausgefranste Konturen sprechen für eine zu starke Kompression.
Ein starres Kilobyte-Limit ist dafür kein Ersatz. Lege gemeinsam mit der Umsetzung ein sinnvolles Dateibudget für den jeweiligen Einsatz fest. Ein einzelnes großes Titelbild und zwölf kleine Galeriebilder belasten eine Seite unterschiedlich. Halte bei deinem Test fest, welche Version gut aussieht und wie groß sie ist; daraus entsteht eine nachvollziehbare Vorgabe für spätere Bildwechsel.
Alt-Texte beschreiben die Bedeutung des Bildes
Der Alt-Text ist eine Textalternative, die beispielsweise von Screenreadern ausgegeben werden kann. Entscheidend ist der Zusammenhang auf der Seite. Die Entscheidungshilfe der Web Accessibility Initiative des W3C unterscheidet informative, funktionale und rein dekorative Bilder.
Ein informatives Foto braucht eine knappe Beschreibung der relevanten Information. Beim Eingangsfoto könnte sie lauten: „Eingang zum Atelier im Innenhof, links neben dem grünen Tor.“ Bei einem rein dekorativen Bild kann ein leerer Alt-Text richtig sein. Ein Bild, das allein als Link oder Schaltfläche dient, muss dagegen sein Ziel oder seine Funktion verständlich machen.
Schreibe keine Suchwortliste in dieses Feld. „Webdesign günstig Website Niederösterreich beste Qualität“ erklärt kein Foto. Beschreibe auch keine Eigenschaft, die gar nicht erkennbar ist. Für die Übergabe kannst du neben jedem Dateinamen notieren, was das Bild an dieser Stelle vermitteln soll. Die passende Textalternative lässt sich dann im Zusammenhang mit dem Seitentext festlegen.
So übergibst du Bilder ohne Ratespiel
Eine kurze Tabelle reicht für die Abstimmung. Pro Bild sollte daraus hervorgehen, welche Datei gemeint ist, wo sie eingesetzt wird und was beim Zuschneiden erhalten bleiben muss. Beispielhafte Angaben wie „Startseite, Einstieg, Keramik vollständig sichtbar“ sind hilfreicher als „schönes Bild oben“.
- Datei: eindeutig benanntes Original und, falls vorhanden, freigegebener Export.
- Einsatzort: Seite und Abschnitt, beispielsweise „Über mich, Porträt“.
- Bildfokus: was auch auf kleinen Bildschirmen sichtbar bleiben muss.
- Inhalt: was das Bild tatsächlich zeigt und welche Information wichtig ist.
- Status: freigegeben, noch zu prüfen oder durch ein anderes Motiv zu ersetzen.
Öffne die fertige Seite abschließend am Smartphone und am Computer. Prüfe Ausschnitt, Schärfe und Lesbarkeit gemeinsam mit dem umgebenden Text. Werden Personen ungünstig angeschnitten? Ist ein wichtiges Detail zu klein? Verdrängt das Bild die eigentliche Antwort auf der Seite? Solche Fehler fallen im Layout schneller auf als im Bildordner.
Für deinen nächsten Bildwechsel genügt ein kleiner Anfang: Wähle ein Motiv, das auf der Website wirklich gebraucht wird, suche das Original und kläre den Einsatzort. Danach lassen sich Export und Einbindung gezielt erledigen. Wenn du gerade eine neue Website vorbereitest, kannst du bei deiner Website-Anfrage dazuschreiben, welches Bildmaterial schon vorhanden ist.
Quellen und Einordnung
Technische Grundlage sind die oben verlinkten Primärquellen von Google und W3C, geprüft am 18. September 2026. Die Auswahlfragen, der vorgeschlagene Ordneraufbau und die Übergabeliste sind redaktionelle Empfehlungen von Jacob Damböck. Die Beispiele beschreiben keine Kundenprojekte. Das Titelmotiv ist eine KI-generierte Illustration.