Bild in HTML umwandeln

IMG2HTML macht aus einem JPG, PNG oder WebP einer Webseite, eines App-Screens oder sogar einer Skizze auf Papier eine einzelne HTML-Datei mit Tailwind CSS. Layout, Text, Farben und Icons werden als bearbeitbarer Code nachgebaut, nicht als Bild eingefügt.

Echter Text, Überschriften, Buttons und Listen, in der Reihenfolge wie im Bild.
Tailwind-Klassen für Abstände und Farben, Font Awesome für Icons, Platzhalter für Fotos.
Ein Editor, in dem du per Prompt Änderungen machst und nach React, Vue oder Angular exportierst.

Bild mit KI umwandeln 4 echte Umwandlungen ansehen

Jede Umwandlung kostet einen Credit. Der kleinste Plan ist ein Test mit 3 Credits, siehe Preise.

Kostenlos, sofort und ohne Konto: den Text eines Bildes in eine einfache HTML-Datei extrahieren. Läuft per OCR in deinem Browser und baut das Layout nicht nach.

Kostenlos: nur den Text eines Bildes in HTML umwandeln

Bild hochladen

Screenshot hierher ziehen oder klicken zum Hochladen

Unterstützt: JPG, PNG, WebP

Sprache des Screenshots:

Vorher und nachher: vier echte Umwandlungen

Jedes Bild unten wurde am 23. September 2026 an IMG2HTML geschickt, und das zurückgelieferte HTML wurde in Chrome geöffnet, ohne eine Zeile zu ändern. Der Screenshot ist eine echte Aufnahme von upload-post.com, einem Schwesterprodukt von uns. Das Wireframe-Foto, das App-Mockup und der Design-Frame wurden für diese Seite mit einem Bildmodell erstellt. Neben jedem Ergebnis steht, was gut geklappt hat und was du noch von Hand korrigieren würdest.

Ein Foto von einem Wireframe auf Papier

Foto eines handgezeichneten Wireframes auf Papier für die Website eines Cafés namens Northside Coffee: Navigation, ein Hero-Bereich mit der Überschrift „Slow coffee, fast mornings“, drei Produktkästen mit Preisen und ein Footer mit Öffnungszeiten — **Eingabe:** Handyfoto eines handgezeichneten Wireframes (JPG, 1536 x 1152)

Das generierte HTML im Browser: Navigation von Northside Coffee, ein Hero-Kasten mit Überschrift und dem Button „See the menu“, drei Produktkarten mit den Preisen 2.50, 3.20 und 2.80 und die Öffnungszeiten — **Ergebnis:** das generierte HTML, unverändert in Chrome bei 1280px Breite gerendert. 124 Zeilen HTML mit Tailwind CSS, geliefert in 11 Sekunden.

Was gut geklappt hat

Der komplette Text der Skizze in derselben Reihenfolge: Logo, die drei Links, Überschrift, Button, drei Produktnamen, Preise und Öffnungszeiten.
Das Layout: Navigationsleiste mit Trennlinie darunter, ein umrahmter Hero-Bereich, drei gleich breite Karten nebeneinander und eine zentrierte Footer-Zeile.
Die zwei Stiftfarben: Schwarz für Struktur und Text, Blau für Links, Button und Preise.

Was du von Hand korrigieren musst

Der durchgestrichene Kasten (das übliche Wireframe-Zeichen für ein Bild) wurde zu einem placehold.co-Bild, dessen Beschriftung blass hinter der Überschrift durchscheint. Ersetze es durch dein echtes Foto.
Die gekritzelten Linien unter jedem Produkt wurden zu dünnen Deko-Linien. Ersetze sie durch die Beschreibungen, die dort eigentlich stehen sollten.

coffee-wireframe.html (erste Zeilen des Body)

 <body class="bg-white">
  <!-- Header -->
  <header class="max-w-6xl mx-auto px-4 py-6 flex justify-between items-center border-b-2 border-black mt-4">
   <div class="text-2xl font-bold tracking-widest">
    NORTHSIDE COFFEE
   </div>
   <nav class="space-x-8">
    <a class="text-blue-700 font-semibold tracking-wide hover:underline" href="#">
     MENU
    </a>
    <a class="text-blue-700 font-semibold tracking-wide hover:underline" href="#">
     VISIT
    </a>
    <a class="text-blue-700 font-semibold tracking-wide hover:underline" href="#">
     ORDER
    </a>
   </nav>
  </header>
  <!-- Hero Section -->
  <section class="max-w-6xl mx-auto px-4 mt-6">
   <div class="relative h-[500px] sketch-border flex flex-col items-center justify-center text-center bg-gray-50 overflow-hidden">
    <!-- Placeholder for Hero Image -->
    <img alt="A cozy coffee shop interior with wooden tables and natural light coming through large windows" class="absolute inset-0 w-full h-full object-cover opacity-20" src="https://placehold.co/1200x500?text=Cozy+Coffee+Shop+Interior+with+Natural+Light"/>
    <div class="relative z-10 px-4">
     <h1 class="text-5xl md:text-6xl font-bold tracking-tighter mb-8 uppercase">
      SLOW COFFEE,

Komplette generierte Seite öffnen (124 Zeilen)

Ein Screenshot einer echten Landingpage

Screenshot der Startseite von Upload-Post: Navigation mit Dropdowns, die Überschrift „Social Media API, One Call, Every Platform“, Reihen von Social-Media-Icons, ein Terminalfenster mit einem curl-Befehl und der Button „Create your free account“ — **Eingabe:** Browser-Screenshot von upload-post.com (PNG, 1280 x 800)

Das generierte HTML im Browser: dieselbe Navigation, zweifarbige Überschrift, Social-Media-Icons, das Terminal mit dem curl-Befehl, Feature-Liste, Call-to-Action-Button und Integrations-Chips — **Ergebnis:** das generierte HTML, unverändert in Chrome bei 1280px Breite gerendert. 463 Zeilen HTML mit Tailwind CSS, geliefert in 27 Sekunden.

Was gut geklappt hat

Die Navigation mit den Dropdown-Pfeilen, dem Dark-Mode-Button, der Sprachauswahl und dem Button „Try for free“.
Die zweifarbige Überschrift, das grüne Zähler-Badge, die Feature-Liste mit ihren kleinen Icons und der Button „Create your free account“.
Das Terminalfenster mit allen acht Zeilen des curl-Befehls, als echter, bearbeitbarer Text und nicht als Bild.
Erkennbare Marken-Icons aus Font Awesome für TikTok, Instagram, LinkedIn, YouTube, Facebook, Pinterest, Reddit, Discord, Telegram, Slack, Mastodon, WordPress, DEV und Google.

Was du von Hand korrigieren musst

Marken, die es in Font Awesome 5 nicht gibt, wurden angenähert: X zeigt den alten Twitter-Vogel, Threads ein @-Zeichen und Bluesky eine Wolke. Setz dort die offiziellen SVGs ein.
Die Nutzer-Avatare und die Flagge wurden zu placehold.co-Platzhaltern (U1, U2, U3).
Die Icons brechen in drei statt zwei Reihen um, und der Hero-Bereich sitzt etwas tiefer als im Original. Die Abstände brauchen also noch eine Runde Feinschliff.

upload-post-screenshot.html (erste Zeilen des Body)

 <body class="text-slate-900">
  <!-- Navigation -->
  <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex items-center justify-between">
   <div class="flex items-center gap-2">
    <div class="bg-indigo-600 p-1.5 rounded-lg">
     <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      </path>
     </svg>
    </div>
    <span class="text-xl font-extrabold tracking-tight">
     Upload-Post
    </span>
   </div>
   <div class="hidden md:flex items-center space-x-8 text-sm font-medium text-slate-600">
    <a class="hover:text-indigo-600" href="#">
     Add to your SaaS
    </a>
    <div class="flex items-center gap-1 cursor-pointer hover:text-indigo-600">
     Platforms
     <i class="fas fa-chevron-down text-[10px]">
     </i>
    </div>
    <div class="flex items-center gap-1 cursor-pointer hover:text-indigo-600">
     Integrations
     <i class="fas fa-chevron-down text-[10px]">

Komplette generierte Seite öffnen (463 Zeilen)

Ein Mockup einer mobilen App

Eingabe: Mockup eines App-Screens (PNG, 864 x 1536)

Das generierte HTML bei 390 Pixel Breite: Begrüßung, Fortschrittsring, Gewohnheitszeilen mit abgehakten und offenen Kästchen und eine fixierte Tab-Leiste unten — **Ergebnis:** das generierte HTML, unverändert in Chrome bei 390px Breite gerendert. 191 Zeilen HTML mit Tailwind CSS, geliefert in 19 Sekunden.

Was gut geklappt hat

Die Begrüßung mit dem Namen in der türkisen Akzentfarbe, das Datum und die abgerundete Übersichtskarte.
Der Fortschrittsring, als SVG gezeichnet und passend zu 3 von 5 gefüllt, mit der Nachricht „Keep going!“ daneben.
Fünf Gewohnheitszeilen mit den richtigen abgehakten und offenen Zuständen und eine Tab-Leiste unten mit Font-Awesome-Icons und unterstrichenem aktiven Tab.

Was du von Hand korrigieren musst

Die Emoji-Icons der Gewohnheiten wurden als placehold.co-Bilder mit dem Emoji als Text geschrieben und erscheinen als leere Quadrate. Nutze die Emojis direkt oder deine eigenen Icons.
Die Tab-Leiste ist unten am Bildschirm fixiert, aber die Liste hat kein Padding, deshalb verdeckt die Leiste die letzte Gewohnheit. Gib der Liste unten ein Padding in der Höhe der Leiste.

habit-app-mockup.html (erste Zeilen des Body)

 <body class="text-[#0a2533] min-h-screen flex flex-col">
  <div class="max-w-md mx-auto w-full px-6 pt-12 pb-24 flex-grow">
   <!-- Header -->
   <header class="mb-8">
    <h1 class="text-4xl font-bold leading-tight">
     Good morning,
     <br/>
     <span class="text-[#006d6d]">
      Ana
     </span>
    </h1>
    <p class="text-[#708090] mt-2 text-lg">
     Tuesday, 23 September
    </p>
   </header>
   <!-- Progress Card -->
   <div class="bg-[#eef7f6] rounded-3xl p-6 mb-8 flex items-center">
    <div class="relative flex items-center justify-center w-32 h-32 mr-6">
     <svg class="w-full h-full">
      <circle class="text-[#d1e5e3]" cx="64" cy="64" fill="transparent" r="48" stroke="currentColor" stroke-width="10">
      </circle>
      <circle class="text-[#006d6d] progress-ring__circle" cx="64" cy="64" fill="transparent" r="48" stroke="currentColor" stroke-dasharray="301.59" stroke-dashoffset="120.63" stroke-linecap="round" stroke-width="10">
      </circle>
     </svg>
     <div class="absolute inset-0 flex flex-col items-center justify-center text-center">
      <span class="text-3xl font-bold text-[#006d6d]">

Komplette generierte Seite öffnen (191 Zeilen)

Ein Desktop-Design-Frame, als PNG exportiert

Design-Frame einer Landingpage für eine Rechnungs-App namens Ledgerly: Navigation, die Überschrift „Send invoices in two clicks“, zwei Buttons und eine Dashboard-Karte mit offenem Betrag, einem Balkendiagramm und drei Rechnungen mit den Status „Paid“, „Due“ und „Overdue“, darunter eine Reihe Kundenlogos — **Eingabe:** Design-Frame einer Landingpage (PNG, 1536 x 864)

Das generierte HTML im Browser: Navigation, die zweifarbige Überschrift, die Buttons „Start free“ und „Book a demo“, die Dashboard-Karte mit Seitenleiste, Balkendiagramm und Rechnungsliste mit farbigen Status-Badges sowie die Reihe der Kundenlogos — **Ergebnis:** das generierte HTML, unverändert in Chrome bei 1280px Breite gerendert. 320 Zeilen HTML mit Tailwind CSS, geliefert in 23 Sekunden.

Was gut geklappt hat

Der komplette Hero-Bereich: Pill-Label, zweifarbige Überschrift, Absatz und die gefüllten und umrandeten Buttons, im Violett des Designs.
Die Dashboard-Karte als echtes HTML: Seitenmenü mit aktivem Eintrag, der offene Betrag, ein Balkendiagramm aus divs und drei Rechnungszeilen mit den Badges „Paid“, „Due“ und „Overdue“ in Grün, Orange und Rot.
Die Reihe der Kundenlogos, jeder Name als Text.

Was du von Hand korrigieren musst

Die Logos sind Platzhalter: Das Ledgerly-Zeichen ist ein generisches SVG mit gestapelten Ebenen, Globex und Northwind nutzen Font-Awesome-Icons, und die Kachel von Stark Industries verwendet eine Klasse bg-dark, die auf der Seite nirgends definiert ist, sodass sie unsichtbar bleibt. Ersetze sie durch deine SVGs.
Das Funkel-Icon im Pill-Label ist fa-sparkles, das im kostenlosen Set von Font Awesome 5 fehlt, deshalb wird dort nichts angezeigt.
Bei 1280 Pixeln sind die Rechnungszeilen eng, und INV-0042 bricht auf zwei Zeilen um. Gib der rechten Spalte mehr Platz oder kürze die Datumsspalte.

ledgerly-frame.html (erste Zeilen des Body)

 <body class="min-h-screen">
  <!-- Navigation -->
  <nav class="max-w-7xl mx-auto px-6 py-6 flex items-center justify-between">
   <div class="flex items-center space-x-12">
    <div class="flex items-center space-x-2">
     <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
      <svg class="w-5 h-5" fill="white" viewbox="0 0 24 24">
       <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5">
       </path>
      </svg>
     </div>
     <span class="text-xl font-bold text-dark">
      Ledgerly
     </span>
    </div>
    <div class="hidden md:flex space-x-8 text-muted font-medium">
     <a class="hover:text-primary transition" href="#">
      Features
     </a>
     <a class="hover:text-primary transition" href="#">
      Pricing
     </a>
     <a class="hover:text-primary transition" href="#">
      Customers
     </a>
     <a class="hover:text-primary transition" href="#">

Komplette generierte Seite öffnen (320 Zeilen)

So wandelst du ein Bild in HTML um

Bild auswählen. Ein Screenshot in Originalgröße funktioniert am besten. Schneide Browserleisten und alles weg, was nicht zum Design gehört, denn das Modell baut alles nach, was es sieht.
Hochladen und umwandeln. Die erste Version kommt nach 10 bis 30 Sekunden und öffnet sich im Editor, mit einer Live-Vorschau der Seite.
Per Prompt oder von Hand anpassen. Bitte in normalen Worten um Änderungen („Header fixieren“, „dunklen Hintergrund verwenden“) oder bearbeite den Code direkt. Stell die Ausgabe dann auf Inline-CSS, React, Vue oder Angular um, falls dein Projekt kein Tailwind nutzt.
Platzhalter ersetzen. Fotos, Logos und Marken-Icons kommen als Platzhalter mit einer Beschreibung dessen zurück, was dort war. Tausch sie gegen deine eigenen Dateien, fertig.

Was sich gut umwandeln lässt und was nicht

Landingpages, Dashboards, Preistabellen, Formulare, Blog-Layouts und App-Screens kommen dem Original am nächsten, weil sie aus Text, Boxen und Icons bestehen, die sich direkt auf HTML abbilden lassen. Diagramme werden zu einfachen div- oder SVG-Formen. Illustrationen, Fotos und eigene Logos werden nie nachgezeichnet, sie werden zu Platzhaltern. Sehr lange Seiten teilst du besser in Abschnitte von ein bis zwei Bildschirmhöhen auf und wandelst sie einzeln um.

Das HTML ist ein Ausgangspunkt für Entwickler, keine fertige Website: Rechne damit, Abstände zu prüfen, Bilder auszutauschen und alles Interaktive selbst anzubinden. Verglichen damit, dieselbe Seite von null zu schreiben, ist das Abtippen jeder Überschrift, jedes Listenpunkts und jeder Button-Beschriftung schon erledigt.

Bestimmte Arten von Bildern umwandeln

Screenshot zu Code: eine Seite nachbauen, die du im Browser siehst, mit dem Upload-Post-Beispiel im Detail.
Bild zu Code: Mockups für Mobile und Apps, mit dem Habit-Tracker-Beispiel.
Figma zu HTML: einen Frame als PNG exportieren und umwandeln.

Du hast schon HTML und willst es prüfen oder aufräumen? Der kostenlose HTML-Viewer zeigt es in Handy- und Desktop-Breite, und mit HTML formatieren rückst du es neu ein. Du brauchst vorher die exakten Markenfarben aus einem Design? Nimm die Farbpipette für Bilder.

Fragen zu Bild zu HTML

Welche Bildformate kann ich in HTML umwandeln?

PNG, JPG und JPEG, WebP, GIF und BMP. Screenshots, Design-Exporte, Handyfotos einer Skizze und Scans funktionieren alle. Je klarer der Text im Bild, desto mehr davon landet als echter Text im HTML.

Was genau bekomme ich zurück?

Eine HTML-Datei mit Tailwind CSS (vom CDN geladen), Font Awesome für Icons und Platzhaltern von placehold.co, wo das Bild Fotos oder Logos hatte. Jeder Platzhalter hat einen beschreibenden Alt-Text, damit du weißt, was dort hingehört.

Ist das HTML responsiv?

Das Layout nutzt die Flex- und Grid-Utilities von Tailwind und passt sich daher dem Bildschirm an, aber das Modell baut für die Breite deines Bildes. Ein Desktop-Screenshot ergibt eine Desktop-first-Seite. Prüf die mobile Ansicht und pass die Breakpoints an, wo nötig.

Bekomme ich statt Tailwind auch reines CSS, React oder Vue?

Ja. Nach einer Umwandlung kannst du die Ausgabe im Editor auf HTML mit Inline-CSS, ReactJS, VueJS oder AngularJS umstellen oder ein anderes Framework eintippen. Tailwind-HTML ist der Standard, weil die Datei damit in sich geschlossen bleibt.

Wie lange dauert eine Umwandlung?

Die vier Beispiele auf dieser Seite haben über die API jeweils zwischen 11 und 27 Sekunden gebraucht. Volle, textlastige Seiten dauern länger als einfache.

Kann ich ein Bild kostenlos in HTML umwandeln?

Der Nur-Text-Konverter oben auf dieser Seite ist kostenlos und läuft in deinem Browser: Er liest den Text des Bildes per OCR aus und packt ihn in eine einfache HTML-Datei. Um Layout, Farben und Komponenten nachzubauen, brauchst du den KI-Konverter, und der kostet Credits.

Mach aus deinem eigenen Bild HTML

Plan wählen, Screenshot, Mockup oder Foto hochladen und das HTML in weniger als einer Minute bekommen.

Pläne ansehen und umwandeln