Convertir imagen a HTML

IMG2HTML convierte un JPG, PNG o WebP de una página web, una pantalla de app o incluso un boceto en papel en un único archivo HTML con estilos de Tailwind CSS. La maquetación, el texto, los colores y los iconos se reconstruyen como código que puedes editar, no se pegan como imagen.

  • Texto real, títulos, botones y listas, en el orden en que aparecen en la imagen.
  • Clases de Tailwind para espaciados y colores, Font Awesome para los iconos y marcadores de posición para las fotos.
  • Un editor para hacer cambios con instrucciones y exportar a React, Vue o Angular.
Convertir una imagen con IA Ver 4 conversiones reales

Cada conversión gasta un crédito. El plan más pequeño es una prueba de 3 créditos; consulta los precios.

Gratis, al instante y sin cuenta: extrae el texto de una imagen en un archivo HTML básico. Funciona en tu navegador con OCR; no reconstruye la maquetación.

Imagen a HTML gratis (solo texto)

Antes y después: cuatro conversiones reales

Cada imagen de abajo se envió a IMG2HTML el 23 de septiembre de 2026 y el HTML devuelto se abrió en Chrome sin tocar ni una línea. La captura es real, de upload-post.com, un producto hermano nuestro; la foto del wireframe, el mockup de la app y el diseño de escritorio se crearon con un modelo de imagen para esta página. Junto a cada resultado: lo que salió bien y lo que todavía tendrías que corregir a mano.

Una foto de un wireframe en papel

Foto de un wireframe dibujado a mano en papel para la web de una cafetería llamada «Northside Coffee»: navegación, una cabecera con el titular «Slow coffee, fast mornings», tres cajas de producto con precios y un pie con el horario
Entrada: Foto con el móvil de un wireframe dibujado a mano (JPG, 1536 x 1152)
El HTML generado abierto en un navegador: la navegación de «Northside Coffee», una caja de cabecera con el titular y un botón «See the menu», tres tarjetas de producto a 2.50, 3.20 y 2.80, y el horario
Resultado: el HTML generado, abierto en Chrome a 1280px de ancho y sin retocar. 124 líneas de HTML con Tailwind CSS, devueltas en 11 segundos.

Lo que hizo bien

  • Todo el texto del boceto, en el mismo orden: logo, los tres enlaces, titular, botón, los tres nombres de producto, los precios y el horario.
  • La maquetación: barra de navegación con una línea debajo, una cabecera enmarcada, tres tarjetas iguales en fila y una línea centrada en el pie.
  • Los dos colores de bolígrafo: negro para la estructura y el texto, azul para los enlaces, el botón y los precios.

Lo que hay que corregir a mano

  • La caja tachada (el símbolo habitual de imagen en un wireframe) se convirtió en una imagen de placehold.co cuyo texto se ve tenue detrás del titular. Cámbiala por tu foto real.
  • Las rayas garabateadas bajo cada producto se convirtieron en líneas decorativas finas. Sustitúyelas por las descripciones que ibas a escribir.
coffee-wireframe.html (primeras líneas del 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,
Abrir la página generada completa (124 líneas)

Una captura de una landing publicada

Captura de la página de inicio de Upload-Post: navegación con desplegables, el titular «Social Media API, One Call, Every Platform», filas de iconos de redes sociales, una ventana de terminal con un comando curl y un botón «Create your free account»
Entrada: Captura del navegador de upload-post.com (PNG, 1280 x 800)
El HTML generado abierto en un navegador: la misma navegación, el titular a dos colores, los iconos sociales, la terminal con el comando curl, la lista de funciones, el botón de llamada a la acción y las etiquetas de integraciones
Resultado: el HTML generado, abierto en Chrome a 1280px de ancho y sin retocar. 463 líneas de HTML con Tailwind CSS, devueltas en 27 segundos.

Lo que hizo bien

  • La navegación, con las flechas de los desplegables, el botón de modo oscuro, el selector de idioma y el botón «Try for free».
  • El titular a dos colores, la insignia verde con el contador, la lista de funciones con sus iconos pequeños y el botón «Create your free account».
  • La ventana de terminal con las ocho líneas del comando curl, como texto real que puedes editar, no como imagen.
  • Iconos de marca reconocibles de Font Awesome para TikTok, Instagram, LinkedIn, YouTube, Facebook, Pinterest, Reddit, Discord, Telegram, Slack, Mastodon, WordPress, DEV y Google.

Lo que hay que corregir a mano

  • Las marcas que no están en Font Awesome 5 se aproximaron: X muestra el antiguo pájaro de Twitter, Threads una @ y Bluesky una nube. Pon los SVG oficiales.
  • Los avatares de usuario y la bandera se quedaron como marcadores de placehold.co (U1, U2, U3).
  • Los iconos ocupan tres filas en lugar de dos y la cabecera queda un poco más baja que en el original, así que hay que repasar los espaciados.
upload-post-screenshot.html (primeras líneas del 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]">
Abrir la página generada completa (463 líneas)

Un mockup de app móvil

Mockup de la pantalla principal de una app de hábitos: «Good morning, Ana», un anillo de progreso con 3 de 5 hábitos hechos, cinco filas de hábitos con casillas y una barra de pestañas inferior con «Today», «Stats», «Habits» y «Profile»
Entrada: Mockup de una pantalla de app móvil (PNG, 864 x 1536)
El HTML generado abierto a 390 píxeles de ancho: saludo, anillo de progreso, filas de hábitos con casillas marcadas y sin marcar y una barra de pestañas fija abajo
Resultado: el HTML generado, abierto en Chrome a 390px de ancho y sin retocar. 191 líneas de HTML con Tailwind CSS, devueltas en 19 segundos.

Lo que hizo bien

  • El saludo con el nombre en el color de acento verde azulado, la fecha y la tarjeta de resumen con esquinas redondeadas.
  • El anillo de progreso, dibujado en SVG y relleno según 3 de 5, con el mensaje «Keep going!» al lado.
  • Cinco filas de hábitos con los estados marcado y sin marcar correctos, y una barra de pestañas inferior con iconos de Font Awesome y la pestaña activa subrayada.

Lo que hay que corregir a mano

  • Los iconos emoji de cada hábito se escribieron como imágenes de placehold.co con el emoji como texto y salen como cuadrados vacíos. Usa el emoji directamente o tus propios iconos.
  • La barra de pestañas está fija abajo sin padding en la lista, así que tapa el último hábito. Añade un padding inferior de la altura de la barra.
habit-app-mockup.html (primeras líneas del 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]">
Abrir la página generada completa (191 líneas)

Un diseño de escritorio exportado como PNG

Diseño de una landing page para una app de facturación llamada Ledgerly: navegación, el titular «Send invoices in two clicks», dos botones y una tarjeta de panel con un importe pendiente, un gráfico de barras y tres facturas marcadas «Paid», «Due» y «Overdue», sobre una fila de logos de clientes
Entrada: Diseño de una landing page (PNG, 1536 x 864)
El HTML generado abierto en un navegador: navegación, el titular a dos colores, los botones «Start free» y «Book a demo», la tarjeta de panel con barra lateral, gráfico de barras y lista de facturas con etiquetas de estado de colores, y la fila de logos de clientes
Resultado: el HTML generado, abierto en Chrome a 1280px de ancho y sin retocar. 320 líneas de HTML con Tailwind CSS, devueltas en 23 segundos.

Lo que hizo bien

  • Toda la cabecera: la etiqueta tipo píldora, el titular a dos colores, el párrafo y los botones relleno y con borde, en el violeta del diseño.
  • La tarjeta del panel como HTML real: menú lateral con el elemento activo, el importe pendiente, un gráfico de barras hecho con divs y tres filas de facturas con etiquetas «Paid», «Due» y «Overdue» en verde, naranja y rojo.
  • La fila de logos de clientes, con cada nombre como texto.

Lo que hay que corregir a mano

  • Los logos son provisionales: el de Ledgerly es un SVG genérico de capas apiladas, Globex y Northwind usan iconos de Font Awesome y el de Stark Industries usa una clase bg-dark que la página no define, así que no se ve. Sustitúyelos por tus SVG.
  • El icono de destellos de la etiqueta tipo píldora es fa-sparkles, que no está en el set gratuito de Font Awesome 5, así que no se muestra nada.
  • A 1280 píxeles las filas de facturas van justas e INV-0042 se parte en dos líneas. Dale más espacio a la columna derecha o acorta la de la fecha.
ledgerly-frame.html (primeras líneas del 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="#">
Abrir la página generada completa (320 líneas)

Cómo convertir una imagen a HTML

  1. Elige la imagen. Lo mejor es una captura a su tamaño natural. Recorta las barras del navegador y todo lo que no forme parte del diseño; el modelo reconstruye todo lo que ve.
  2. Súbela y conviértela. La primera versión llega en 10 a 30 segundos y se abre en el editor, con una vista previa de la página en vivo.
  3. Ajusta con instrucciones o a mano. Pide cambios con tus palabras ("haz la cabecera fija", "usa un fondo oscuro") o edita el código directamente, y cambia la salida a CSS en línea, React, Vue o Angular si tu proyecto no usa Tailwind.
  4. Sustituye los marcadores de posición. Las fotos, los logos y los iconos de marca vuelven como marcadores con una descripción de lo que había. Pon tus archivos y listo.

Qué se convierte bien y qué no

Las landing pages, los paneles de control, las tablas de precios, los formularios, los blogs y las pantallas de apps son lo que sale más parecido al original, porque están hechos de texto, cajas e iconos que se traducen directamente a HTML. Los gráficos se convierten en formas sencillas con divs o SVG. Las ilustraciones, las fotos y los logos personalizados nunca se calcan; se convierten en marcadores de posición. Las páginas muy largas conviene dividirlas en secciones de una o dos pantallas y convertirlas por separado.

El HTML es un punto de partida para un desarrollador, no una web terminada: cuenta con revisar espaciados, cambiar imágenes y conectar todo lo interactivo. Comparado con escribir la misma página desde cero, ya tienes tecleados todos los títulos, elementos de lista y textos de botones.

IMG2HTML y otras herramientas de imagen a código

Las herramientas que más se comparan para pasar una imagen o una captura a código, y en qué se diferencian. Los datos de las demás herramientas son los que publican en sus propias webs; consúltalas para ver sus planes actuales.

HerramientaQué esResultadoPrecio
IMG2HTMLConversor alojado: app web, extensión de Chrome y APIHTML + Tailwind CSS; CSS en línea, React, Vue o Angular desde el editorDesde $1.99 al mes por 3 conversiones
screenshot-to-code (abi)Proyecto de código abierto que ejecutas con tu propia API key de OpenAI, Anthropic o Gemini; también existe una versión alojada de pagoHTML + Tailwind, React, Vue y otros stacksCódigo gratis; pagas la API del modelo
v0 de VercelCreador de apps con IA que parte de un prompt o de una imagenReact y Next.js con Tailwind y shadcn/uiPlan gratuito y planes de pago
FrontyServicio de imagen a HTML/CSS con editor visualHTML y CSSVer fronty.com
AnimaPlugin de Figma que pasa diseños a códigoReact, HTML y VueVer animaapp.com

Convertir un tipo de imagen concreto

  • Captura a código: reconstruir una página que ves en el navegador, con el ejemplo de Upload-Post en detalle.
  • Imagen a código: mockups de móvil y de apps, con el ejemplo de la app de hábitos.
  • Figma a HTML: exportar un marco como PNG y convertirlo.

¿Ya tienes el HTML y quieres revisarlo u ordenarlo? El visor HTML gratis lo muestra con ancho de móvil y de escritorio, y la herramienta para formatear HTML lo vuelve a indentar. ¿Necesitas antes los colores exactos de marca de un diseño? Usa la herramienta para extraer colores de una imagen.

Preguntas sobre imagen a HTML

¿Qué formatos de imagen puedo convertir a HTML?

PNG, JPG y JPEG, WebP, GIF y BMP. Funcionan capturas de pantalla, exportaciones de diseño, fotos de un boceto hechas con el móvil y escaneos. Cuanto más claro esté el texto en la imagen, más acaba como texto real en el HTML.

¿Qué recibo exactamente?

Un archivo HTML con estilos de Tailwind CSS (cargado desde su CDN), Font Awesome para los iconos y marcadores de placehold.co donde la imagen tenía fotos o logos. Cada marcador lleva un texto alternativo descriptivo para que sepas qué poner ahí.

¿El HTML es responsive?

La maquetación usa las utilidades flex y grid de Tailwind, así que se adapta a la pantalla, pero el modelo trabaja para el ancho de tu imagen. Una captura de escritorio da una página pensada primero para escritorio; revisa la vista móvil y ajusta los breakpoints donde haga falta.

¿Puedo obtener CSS normal, React o Vue en vez de Tailwind?

Sí. En el editor, después de una conversión, puedes cambiar la salida a HTML con CSS en línea, ReactJS, VueJS o AngularJS, o escribir otro framework. Tailwind HTML es la opción por defecto porque deja el archivo autocontenido.

¿Cuánto tarda una conversión?

Los cuatro ejemplos de esta página tardaron entre 11 y 27 segundos cada uno a través de la API. Las páginas más cargadas y con mucho texto tardan más que las sencillas.

¿Hay alguna forma gratis de convertir una imagen a HTML?

Sí, para el texto: el extractor de esta página es gratis, no necesita cuenta y funciona en tu navegador. Para la página completa (maquetación, colores, botones, iconos), el conversor con IA empieza en $1.99 al mes por 3 conversiones, y los planes Starter, Plus y Advanced arrancan con una prueba gratuita de 3 días que incluye 5 créditos. Todos los planes incluyen el editor de HTML con IA y la exportación a React, Vue y Angular.

Convierte tu propia imagen en HTML

Elige un plan, sube una captura, un mockup o una foto y ten el HTML en menos de un minuto.

Ver planes y convertir