KI Website erstellen mit eigenen Fotos: Platzhalter-Workflow

Die Wahrheit über KI-Website-Baukästen im Jahr 2026: Sie sind fantastisch im Design und katastrophal im Umgang mit deinen Fotos.

Bitte ChatGPT, Claude oder Gemini, dir eine Restaurant-Website zu bauen, und du bekommst ein beeindruckendes Layout – die richtigen Abschnitte, eine schöne Farbpalette, responsive Typografie, ein funktionierendes Kontaktformular, das ganze Paket. Der Designteil ist im Grunde gelöst.

Aber sobald du deine eigenen Bilder einbinden willst – die, für die du einen Nachmittag lang dein echtes Essen, deine echte Ladenfront, dein echtes Team fotografiert hast –, geht es schief. Und zwar schnell.

Das Bildproblem, über das niemand spricht

Wenn du schon einmal ein Foto in einen KI-Prompt eingefügt und die KI gebeten hast, es in eine Website einzubauen, kennst du vermutlich die Ergebnisse:

• Bilder werden verzerrt. Die KI skaliert, beschneidet oder streckt deine Fotos so, dass sie kaum wiederzuerkennen sind.
• Gesichter werden entstellt. Teamfotos kommen mit gruseligen Bearbeitungen zurück – zusätzliche Finger, verzerrte Züge, verschmolzene Gesichter.
• Essen sieht ungenießbar aus. Deine perfekt angerichteten Gerichte werden zu etwas umgerendert, das in einen Horrorfilm gehört, nicht auf eine Speisekarte.
• Logos verlieren Details. Feine Markenelemente – Verläufe, dünne Linien, Transparenz – werden abgeflacht oder falsch nachgezeichnet.
• Die Dateiqualität sinkt. Selbst wenn das Bild „richtig aussieht“, wurde es in niedrigerer Auflösung neu kodiert, und die Artefakte sind auf jedem modernen Bildschirm sichtbar.

Das ist keine Kleinigkeit. Für ein Restaurant, einen Friseursalon, eine Bäckerei – jedes Unternehmen, dessen visuelle Identität das Produkt ist – sind von der KI zerstörte Bilder schlimmer als gar keine Bilder. Ein verschwommenes Foto deines Signature-Gerichts sagt deinen Kunden, dass dir Qualität egal ist.

Warum tut sich KI mit Bildern so schwer?

Die KI-Modelle, die Website-Code (HTML, CSS, JavaScript) erzeugen, sind Sprachmodelle. Sie sind auf Text trainiert. Wenn du sie bittest, „dieses Bild einzubauen“, bearbeiten sie nicht das Bild selbst – sie erzeugen Code, der auf ein Bild verweist, und versuchen manchmal, das Bild mit einem separaten Bildmodell neu zu beschreiben oder neu zu erzeugen.

Das Ergebnis ist ein Spiel wie „Stille Post“:

1. Du gibst ein hochwertiges Foto deines Restaurants vor.
2. Die KI beschreibt, was sie auf dem Foto „sieht“ (einen Tisch, ein paar Teller, warmes Licht).
3. Aus dieser Beschreibung erzeugt sie ein neues Bild – oder schlimmer, sie bettet eine von ihr neu verarbeitete Base64-Version ein.
4. Heraus kommt ein ungefähr ähnliches, aber im Kern völlig anderes Bild, das dein echtes Unternehmen nicht mehr zeigt.

Die KI ist brillant in Struktur. Sie ist nicht für Originaltreue gebaut. Von ihr zu verlangen, deine exakten Fotos in einer generierten Website originalgetreu wiederzugeben, ist, als würdest du einen Romanautor bitten, ein Porträt zu malen – das falsche Werkzeug für die Aufgabe.

Der smarte Workflow: erst das Design, dann die Bilder

Sobald du das Problem verstanden hast, liegt die Lösung auf der Hand: Lass die KI machen, was sie gut kann (Design), und kümmere dich selbst um die Bilder.

So sieht der Workflow aus, der wirklich funktioniert:

Schritt 1: Website mit Platzhaltern erstellen

Nutze den SiteDrop Prompt Creator, um deinen Website-Prompt zu erstellen. Wenn du beim Schritt zur Bildstrategie ankommst, wähle Platzhalterbilder. Damit sagst du der KI, dass sie saubere, richtig dimensionierte Platzhalterboxen mit beschreibendem Alt-Text verwenden soll, statt echte Fotos zu erzeugen oder einzubinden.

Der vom Tool erzeugte Prompt enthält Anweisungen wie:

Verwende überall Platzhalterbilder mit beschreibendem Alt-Text. Verwende für den Hero-Bereich einen Platzhalter mit der Beschriftung „Restaurant-Innenraum, warmes Ambientelicht“. Verwende für die Speisekarten-Galerie Platzhalter, die mit dem jeweiligen Gerichtsnamen beschriftet sind.

Die KI erstellt eine wunderbar gestaltete Website – perfektes Layout, responsiv auf jedem Gerät, genau das Farbschema, das du gewählt hast – mit grauen Platzhalterboxen dort, wo später die Fotos hinkommen.

Schritt 2: Zu SiteDrop hochladen

Nimm die von der KI erzeugte HTML-Datei (oder das ZIP) und ziehe sie auf SiteDrop. Deine Website geht in Sekunden live – samt Platzhaltern. So hast du eine echte, funktionierende URL, die du auf dem Handy öffnen, einem Freund schicken und mit der du das Layout in Aktion sehen kannst, bevor du Zeit in Bilder steckst.

Schritt 3: Platzhalter durch deine echten Fotos ersetzen

Öffne jetzt dein SiteDrop-Dashboard. Du siehst jedes Platzhalterbild aufgelistet, jeweils mit seiner Beschreibung beschriftet (z. B. „Hero-Bild – Restaurant-Innenraum“ oder „Gericht – Pizza Margherita“). Klicke auf einen beliebigen Platzhalter und lade dein eigenes Foto hoch. SiteDrop übernimmt Größenanpassung, Komprimierung und Veröffentlichung automatisch.

Deine Originalbilder landen unberührt von der KI direkt auf der Live-Website. Kein Neu-Kodieren, keine Verzerrung, kein Qualitätsverlust. Das Foto, das du hochlädst, ist das Foto, das deine Kunden sehen.

Warum dieser Ansatz besser ist

Der Platzhalter-zuerst-Workflow ist nicht nur eine Notlösung. Er ist tatsächlich der bessere Weg, mit KI eine Website zu bauen:

• Tempo. Du hast in unter zehn Minuten eine fertig gestaltete, live geschaltete Website – noch bevor deine Bilder fertig sind. Du musst nicht mehr warten, bis du „alle Fotos sortiert“ hast, bevor du anfängst.
• Qualität. Deine echten Fotos erscheinen in voller Auflösung, genau so, wie du sie aufgenommen hast. Die KI gestaltet um sie herum statt durch sie hindurch.
• Nachbessern. Du kannst Bilder jederzeit austauschen. Neue Saisonkarte? Neues Teammitglied? Neuer Standort? Aktualisiere ein Bild im Dashboard, und die Live-Website ist sofort auf dem neuesten Stand.
• Klare Aufgabenteilung. Die KI kümmert sich um Struktur, Layout, Texte, SEO und Responsivität. Du kümmerst dich um die visuelle Identität – das, was nur du liefern kannst. Jedes Werkzeug macht, was es am besten kann.
• Keine technischen Kenntnisse nötig. Du musst das HTML nicht öffnen, das Bild-Tag suchen, den Dateipfad ändern, per FTP neu hochladen oder einen Cache leeren. Du klickst, lädst hoch, fertig.

Ein echtes Beispiel: ein Imbiss-Restaurant

Gehen wir ein konkretes Beispiel durch. Angenommen, du betreibst in Manchester einen Imbiss namens Flame & Spice und möchtest eine Website.

Ohne den Platzhalter-Workflow

1. Du fügst deine Essensfotos in ChatGPT ein und bittest es, eine Website zu bauen.
2. Die KI erzeugt deine Fotos neu – dein Chicken Tikka sieht jetzt aus wie ein Ölgemälde eines vage orangefarbenen Tellers.
3. Du verbringst eine Stunde damit, die Bilder in Folge-Prompts zu reparieren.
4. Du gibst auf und nutzt die Website mit verzerrten Bildern – oder du gibst ganz auf.

Mit dem Platzhalter-Workflow

1. Du nutzt den Prompt Creator – gib Unternehmensnamen, Gerichte, Preise und Farben ein und wähle „Platzhalterbilder“.
2. Füge den Prompt in ChatGPT ein. Es erzeugt eine saubere, professionelle Website mit beschrifteten Platzhaltern: „Hero – Restaurant-Außenansicht“, „Chicken Tikka Masala“, „Lamm-Biryani“ usw.
3. Lade sie zu SiteDrop hoch. Die Website ist in 30 Sekunden live.
4. Öffne das Dashboard, klicke auf jeden Platzhalter und lade deine eigenen Essensfotos hoch. Fertig.

Gesamtdauer: unter fünfzehn Minuten. Die KI hat die Website gestaltet. Du hast die Seele geliefert.

Und was ist mit Stockfotos?

Du fragst dich vielleicht: Kann ich nicht einfach Stockfotos statt Platzhalter verwenden? Das kannst du – aber es gibt einen Grund, warum wir den meisten Unternehmen davon abraten.

Stockbilder sind für allgemeine Bereiche in Ordnung (ein dekorativer Hintergrund, ein abstraktes Muster). Aber bei allem, was dein Unternehmen darstellt – dein Essen, dein Geschäft, dein Team –, merken es die Kunden. Ein Stockfoto einer lächelnden Person hinter einem Tresen schafft nicht dasselbe Vertrauen wie ein echtes Foto von dir hinter deinem eigenen Tresen.

Der Platzhalter-Ansatz drängt dich dazu, dort echte Bilder zu verwenden, wo es zählt, und das Dashboard macht das kinderleicht.

Tipps für großartige Website-Fotos

Du brauchst keinen professionellen Fotografen. Moderne Handys machen unglaubliche Fotos. Ein paar Tipps:

• Natürliches Licht ist alles. Fotografiere am Fenster oder draußen. Vermeide Leuchtstoff-Deckenlicht – es lässt Essen grau und Räume steril aussehen.
• Räum den Hintergrund auf. Nimm Krimskrams aus dem Bild. Ein unordentlicher Tresen hinter einem wunderschönen Gericht schwächt das Foto.
• Querformat für Hero-Bilder. Die meisten Hero-Bereiche sind breit und niedrig. Fotografiere deine wichtigsten Bilder im Querformat.
• Quadratisch für Gerichte und Galerien. Einheitlichkeit zählt. Wenn jedes Gerichtfoto ungefähr quadratisch ist, wirkt das Raster hochwertig.
• Nicht übermäßig filtern. Etwas mehr Helligkeit und Kontrast ist in Ordnung. Filter im Instagram-Stil lassen Fotos auf einer professionellen Website veraltet wirken.

Das Fazit

KI ist der beste Website-Designer, zu dem die meisten kleinen Unternehmen je Zugang haben werden. Sie schreibt sauberen Code, baut responsive Layouts, kümmert sich um SEO und erledigt das alles in Minuten. Aber sie kann deine Fotos nicht originalgetreu wiedergeben – und so zu tun, als ginge es doch, verschwendet deine Zeit und schadet deiner Marke.

Die Antwort ist nicht, KI zu meiden. Die Antwort ist, sie für das zu nutzen, was sie gut kann, und sich selbst um die Bilder zu kümmern.

Mit SiteDrop ist der Ablauf einfach: mit Platzhaltern erstellen, hochladen und live gehen, dann im Dashboard deine echten Fotos einsetzen. Deine Website profitiert vom KI-Design und von der Authentizität deiner eigenen Fotografie – das Beste aus beiden Welten.