Image to HTML कन्वर्टर

IMG2HTML किसी वेब पेज, ऐप स्क्रीन या कागज़ के स्केच तक की JPG, PNG या WebP फ़ाइल को Tailwind CSS से स्टाइल की गई एक HTML फ़ाइल में बदल देता है। लेआउट, टेक्स्ट, रंग और आइकन एडिट होने लायक कोड के रूप में दोबारा बनते हैं, इमेज की तरह चिपकाए नहीं जाते।

  • असली टेक्स्ट, हेडिंग, बटन और लिस्ट, उसी क्रम में जैसे इमेज में हैं।
  • spacing और रंग के लिए Tailwind classes, आइकन के लिए Font Awesome, फ़ोटो के लिए placeholders।
  • prompt से बदलाव करने के लिए एडिटर, और React, Vue या Angular में export।
AI से इमेज कन्वर्ट करें 4 असली कन्वर्ज़न देखें

हर कन्वर्ज़न में एक क्रेडिट लगता है। सबसे छोटा प्लान 3 क्रेडिट का ट्रायल है, कीमतें देखें।

मुफ़्त और तुरंत, बिना अकाउंट: किसी तस्वीर का टेक्स्ट निकालकर एक बेसिक HTML फ़ाइल में डालें। यह OCR से आपके ब्राउज़र में चलता है और लेआउट दोबारा नहीं बनाता।

मुफ़्त इमेज से HTML (सिर्फ़ टेक्स्ट)

Before और after: चार असली कन्वर्ज़न

नीचे की हर इमेज 23 सितंबर 2026 को IMG2HTML को भेजी गई और उसका लौटाया HTML बिना एक भी लाइन बदले Chrome में खोला गया। स्क्रीनशॉट upload-post.com का असली कैप्चर है, जो हमारा ही एक sister प्रोडक्ट है। wireframe की फ़ोटो, ऐप मॉकअप और डिज़ाइन फ़्रेम इस पेज के लिए एक इमेज मॉडल से बनाए गए थे। हर नतीजे के साथ: क्या सही आया और आपको अब भी हाथ से क्या ठीक करना होगा।

कागज़ पर बने wireframe की फ़ोटो

Northside Coffee नाम की कॉफ़ी शॉप साइट के लिए कागज़ पर हाथ से बने wireframe की फ़ोटो: नेविगेशन, "Slow coffee, fast mornings" हेडलाइन वाला hero, कीमतों के साथ तीन प्रोडक्ट बॉक्स और खुलने के समय वाला footer
इनपुट: हाथ से बने wireframe की फ़ोन से ली गई फ़ोटो (JPG, 1536 x 1152)
ब्राउज़र में रेंडर किया गया जनरेट HTML: Northside Coffee नेविगेशन, हेडलाइन और "See the menu" बटन वाला hero बॉक्स, 2.50, 3.20 और 2.80 कीमत वाले तीन प्रोडक्ट कार्ड, और खुलने का समय
आउटपुट: जनरेट किया गया HTML, Chrome में 1280px चौड़ाई पर रेंडर किया गया, बिना एडिट किए। Tailwind CSS के साथ HTML की 124 लाइनें, 11 सेकंड में मिलीं।

क्या सही बना

  • स्केच का हर टेक्स्ट, उसी क्रम में: लोगो, तीनों लिंक, हेडलाइन, बटन, तीनों प्रोडक्ट के नाम, कीमतें और खुलने का समय।
  • लेआउट: नीचे लाइन वाला nav bar, बॉक्स में बंद hero, एक पंक्ति में तीन बराबर कार्ड और बीच में footer की लाइन।
  • पेन के दोनों रंग: ढांचे और टेक्स्ट के लिए काला, लिंक, बटन और कीमतों के लिए नीला।

हाथ से क्या ठीक करना होगा

  • क्रॉस वाला बॉक्स (wireframe में इमेज का आम निशान) placehold.co इमेज बन गया, जिसका कैप्शन टेक्स्ट हेडलाइन के पीछे हल्का सा दिखता है। इसे अपनी असली फ़ोटो से बदलें।
  • हर प्रोडक्ट के नीचे की घसीटी हुई लाइनें पतली सजावटी लाइनें बन गईं। इनकी जगह वह विवरण लिखें जो आप लिखना चाहते थे।
coffee-wireframe.html (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,
पूरा जनरेट किया गया पेज खोलें (124 लाइनें)

लाइव लैंडिंग पेज का स्क्रीनशॉट

Upload-Post होम पेज का स्क्रीनशॉट: ड्रॉपडाउन वाला नेविगेशन, "Social Media API, One Call, Every Platform" हेडलाइन, सोशल नेटवर्क आइकन की पंक्तियां, curl कमांड वाली टर्मिनल विंडो और "Create your free account" बटन
इनपुट: upload-post.com का ब्राउज़र स्क्रीनशॉट (PNG, 1280 x 800)
ब्राउज़र में रेंडर किया गया जनरेट HTML: वही नेविगेशन, दो रंगों वाली हेडलाइन, सोशल आइकन, curl कमांड वाला टर्मिनल, फ़ीचर लिस्ट, call to action बटन और इंटीग्रेशन चिप्स
आउटपुट: जनरेट किया गया HTML, Chrome में 1280px चौड़ाई पर रेंडर किया गया, बिना एडिट किए। Tailwind CSS के साथ HTML की 463 लाइनें, 27 सेकंड में मिलीं।

क्या सही बना

  • नेविगेशन, ड्रॉपडाउन के तीरों, dark mode बटन, भाषा चुनने वाले मेन्यू और "Try for free" बटन के साथ।
  • दो रंगों वाली हेडलाइन, हरा काउंटर बैज, छोटे आइकन वाली फ़ीचर लिस्ट और "Create your free account" बटन।
  • curl कमांड की सभी आठ लाइनों वाली टर्मिनल विंडो, एडिट होने लायक असली टेक्स्ट के रूप में, इमेज के रूप में नहीं।
  • TikTok, Instagram, LinkedIn, YouTube, Facebook, Pinterest, Reddit, Discord, Telegram, Slack, Mastodon, WordPress, DEV और Google के लिए Font Awesome के पहचाने जाने लायक ब्रैंड आइकन।

हाथ से क्या ठीक करना होगा

  • जो ब्रैंड Font Awesome 5 में नहीं हैं, उनके लिए मिलते-जुलते आइकन लगाए गए: X पर पुरानी Twitter चिड़िया, Threads पर @ का निशान और Bluesky पर बादल दिखता है। ऑफ़िशियल SVG लगा दें।
  • यूज़र अवतार और झंडा placehold.co प्लेसहोल्डर (U1, U2, U3) बन गए।
  • आइकन दो की जगह तीन पंक्तियों में आते हैं और hero ओरिजिनल से थोड़ा नीचे है, इसलिए spacing एक बार ठीक करनी होगी।
upload-post-screenshot.html (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]">
पूरा जनरेट किया गया पेज खोलें (463 लाइनें)

मोबाइल ऐप का मॉकअप

habit tracker ऐप की होम स्क्रीन का मॉकअप: "Good morning, Ana", 5 में से 3 आदतें पूरी दिखाने वाला progress ring, चेकबॉक्स वाली पांच habit पंक्तियां और नीचे "Today", "Stats", "Habits" और "Profile" वाला tab bar
इनपुट: मोबाइल ऐप स्क्रीन का मॉकअप (PNG, 864 x 1536)
390 पिक्सल चौड़ाई पर रेंडर किया गया जनरेट HTML: अभिवादन, progress ring, टिक और बिना टिक वाले बॉक्स के साथ habit पंक्तियां और नीचे फ़िक्स्ड tab bar
आउटपुट: जनरेट किया गया HTML, Chrome में 390px चौड़ाई पर रेंडर किया गया, बिना एडिट किए। Tailwind CSS के साथ HTML की 191 लाइनें, 19 सेकंड में मिलीं।

क्या सही बना

  • teal accent रंग में नाम के साथ अभिवादन, तारीख और गोल कोनों वाला summary कार्ड।
  • SVG में बना progress ring, 5 में से 3 के हिसाब से भरा हुआ, और बगल में "Keep going!" मैसेज।
  • सही टिक और बिना टिक वाली स्थिति के साथ पांच habit पंक्तियां, और Font Awesome आइकन वाला नीचे का tab bar, जिसमें active टैब के नीचे लाइन है।

हाथ से क्या ठीक करना होगा

  • हर आदत के emoji आइकन placehold.co इमेज के रूप में लिखे गए, emoji को उनका टेक्स्ट बनाकर, इसलिए वे खाली चौकोर बॉक्स दिखते हैं। emoji सीधे इस्तेमाल करें या अपने आइकन लगाएं।
  • tab bar स्क्रीन के नीचे फ़िक्स्ड है लेकिन लिस्ट में padding नहीं है, इसलिए वह आख़िरी आदत को ढक देता है। लिस्ट में bar की ऊंचाई जितनी bottom padding जोड़ें।
habit-app-mockup.html (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]">
पूरा जनरेट किया गया पेज खोलें (191 लाइनें)

PNG में export किया गया डेस्कटॉप डिज़ाइन फ़्रेम

Ledgerly नाम के इनवॉइसिंग ऐप के लैंडिंग पेज का डिज़ाइन फ़्रेम: नेविगेशन, "Send invoices in two clicks" हेडलाइन, दो बटन, और बकाया रकम, bar chart और "Paid", "Due" और "Overdue" मार्क की गई तीन इनवॉइस वाला dashboard कार्ड, उसके नीचे ग्राहकों के लोगो की पंक्ति
इनपुट: लैंडिंग पेज का डिज़ाइन फ़्रेम (PNG, 1536 x 864)
ब्राउज़र में रेंडर किया गया जनरेट HTML: नेविगेशन, दो रंगों वाली हेडलाइन, "Start free" और "Book a demo" बटन, sidebar, bar chart और रंगीन status बैज वाली इनवॉइस लिस्ट के साथ dashboard कार्ड, और ग्राहकों के लोगो की पंक्ति
आउटपुट: जनरेट किया गया HTML, Chrome में 1280px चौड़ाई पर रेंडर किया गया, बिना एडिट किए। Tailwind CSS के साथ HTML की 320 लाइनें, 23 सेकंड में मिलीं।

क्या सही बना

  • पूरा hero: pill लेबल, दो रंगों वाली हेडलाइन, पैराग्राफ़, और भरा हुआ व outline वाला बटन, डिज़ाइन के violet रंग में।
  • dashboard कार्ड असली HTML के रूप में: active आइटम वाला sidebar मेन्यू, बकाया रकम, divs से बना bar chart, और हरे, नारंगी और लाल रंग के "Paid", "Due" और "Overdue" बैज वाली तीन इनवॉइस पंक्तियां।
  • ग्राहकों के लोगो की पंक्ति, हर नाम टेक्स्ट के रूप में।

हाथ से क्या ठीक करना होगा

  • लोगो सिर्फ़ जगह भरने के लिए हैं: Ledgerly का निशान एक आम stacked-layers SVG है, Globex और Northwind में Font Awesome आइकन हैं, और Stark Industries वाली टाइल में bg-dark क्लास है जो पेज में कहीं डिफ़ाइन नहीं है, इसलिए वह दिखती ही नहीं। इन्हें अपने SVG से बदलें।
  • pill लेबल का sparkle आइकन fa-sparkles है, जो Font Awesome 5 के free सेट में नहीं है, इसलिए वहां कुछ भी रेंडर नहीं होता।
  • 1280 पिक्सल पर इनवॉइस पंक्तियां तंग हैं और INV-0042 दो लाइनों में टूट जाता है। दाएं कॉलम को ज़्यादा जगह दें या तारीख वाला कॉलम छोटा करें।
ledgerly-frame.html (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="#">
पूरा जनरेट किया गया पेज खोलें (320 लाइनें)

इमेज को HTML में कैसे बदलें

  1. इमेज चुनें। अपने नैचुरल साइज़ वाला स्क्रीनशॉट सबसे अच्छा चलता है। ब्राउज़र बार और जो कुछ भी डिज़ाइन का हिस्सा नहीं है, उसे crop कर दें, क्योंकि मॉडल जो भी देखता है वह सब दोबारा बनाता है।
  2. अपलोड करें और कन्वर्ट करें। पहला वर्ज़न 10 से 30 सेकंड में आता है और पेज के लाइव प्रीव्यू के साथ एडिटर में खुलता है।
  3. prompt से या हाथ से बदलें। सीधे शब्दों में बदलाव मांगें ("header को sticky बना दो", "dark background लगाओ") या कोड सीधे एडिट करें, फिर अगर आपका प्रोजेक्ट Tailwind इस्तेमाल नहीं करता तो आउटपुट को inline CSS, React, Vue या Angular में बदल दें।
  4. placeholders बदलें। फ़ोटो, लोगो और ब्रैंड आइकन placeholders के रूप में आते हैं, साथ में यह विवरण कि वहां क्या था। अपनी फ़ाइलें लगाएं और काम पूरा।

क्या अच्छी तरह कन्वर्ट होता है, और क्या नहीं

लैंडिंग पेज, dashboards, pricing टेबल, फ़ॉर्म, ब्लॉग लेआउट और ऐप स्क्रीन ओरिजिनल के सबसे करीब आते हैं, क्योंकि ये टेक्स्ट, बॉक्स और आइकन से बने होते हैं जो सीधे HTML में बदल जाते हैं। Charts सादे div या SVG आकार बन जाते हैं। Illustrations, फ़ोटो और custom लोगो कभी trace नहीं किए जाते, वे placeholders बन जाते हैं। बहुत लंबे पेज को एक या दो स्क्रीन वाले हिस्सों में बांटकर अलग-अलग कन्वर्ट करना बेहतर है।

यह HTML एक डेवलपर के लिए शुरुआती बिंदु है, तैयार साइट नहीं: spacing रिव्यू करनी होगी, इमेज बदलनी होंगी और जो भी interactive है उसे जोड़ना होगा। वही पेज शुरू से लिखने की तुलना में, हर हेडिंग, लिस्ट आइटम और बटन लेबल टाइप करने का काम पहले ही हो चुका होता है।

किसी ख़ास तरह की इमेज को कन्वर्ट करना

  • स्क्रीनशॉट से कोड: ब्राउज़र में दिख रहे पेज को दोबारा बनाना, Upload-Post उदाहरण के पूरे विवरण के साथ।
  • इमेज से कोड: मोबाइल और ऐप मॉकअप, habit tracker उदाहरण के साथ।
  • Figma से HTML: फ़्रेम को PNG में export करके कन्वर्ट करना।

पहले से HTML है और उसे चेक या साफ़ करना है? मुफ़्त HTML व्यूअर उसे फ़ोन और डेस्कटॉप चौड़ाई पर प्रीव्यू करता है, और HTML फ़ॉर्मेटर उसे दोबारा indent करता है। पहले डिज़ाइन से ब्रैंड के सटीक रंग चाहिए? इमेज कलर पिकर इस्तेमाल करें।

Image to HTML से जुड़े सवाल

कौन से इमेज फ़ॉर्मेट HTML में बदले जा सकते हैं?

PNG, JPG और JPEG, WebP, GIF और BMP। स्क्रीनशॉट, डिज़ाइन export, स्केच की फ़ोन फ़ोटो और स्कैन, सब चलते हैं। इमेज में टेक्स्ट जितना साफ़ होगा, उतना ज़्यादा HTML में असली टेक्स्ट बनकर आएगा।

मुझे असल में क्या मिलता है?

Tailwind CSS (उसके CDN से लोड) से स्टाइल की गई एक HTML फ़ाइल, आइकन के लिए Font Awesome, और जहां इमेज में फ़ोटो या लोगो थे वहां placehold.co placeholders। हर placeholder में विवरण वाला alt text होता है, ताकि आपको पता रहे कि वहां क्या लगाना है।

क्या HTML responsive होता है?

लेआउट Tailwind की flex और grid utilities इस्तेमाल करता है, इसलिए वह स्क्रीन के हिसाब से ढलता है, लेकिन मॉडल आपकी इमेज की चौड़ाई के लिए बनाता है। डेस्कटॉप स्क्रीनशॉट से desktop-first पेज बनता है। मोबाइल व्यू चेक करें और जहां ज़रूरत हो breakpoints ठीक करें।

क्या Tailwind की जगह सादा CSS, React या Vue मिल सकता है?

हां। कन्वर्ज़न के बाद एडिटर में आउटपुट को inline CSS वाले HTML, ReactJS, VueJS या AngularJS में बदल सकते हैं, या किसी और framework का नाम टाइप कर सकते हैं। Tailwind HTML डिफ़ॉल्ट है क्योंकि इससे फ़ाइल अपने आप में पूरी रहती है।

एक कन्वर्ज़न में कितना समय लगता है?

इस पेज के चारों उदाहरणों में API से हर एक को 11 से 27 सेकंड लगे। ज़्यादा भरे हुए, टेक्स्ट वाले पेज सादे पेज से ज़्यादा समय लेते हैं।

क्या इमेज को HTML में बदलने का कोई मुफ़्त तरीका है?

इस पेज के ऊपर वाला सिर्फ़-टेक्स्ट कन्वर्टर मुफ़्त है और आपके ब्राउज़र में चलता है: यह OCR से इमेज का टेक्स्ट निकालता है और उसे एक बेसिक HTML फ़ाइल में रखता है। लेआउट, रंग और components दोबारा बनाने के लिए AI कन्वर्टर चाहिए, जिसमें क्रेडिट लगते हैं।

अपनी इमेज को HTML में बदलें

प्लान चुनें, स्क्रीनशॉट, मॉकअप या फ़ोटो अपलोड करें और एक मिनट से कम में HTML पाएं।

प्लान देखें और कन्वर्ट करें