Conversor gratuito de texto a imagen

Por qué necesitas convertir texto en imagen

El texto y las imágenes viajan por internet de formas muy diferentes. El texto es reformateado por cada plataforma que lo toca, las fuentes cambian, los saltos de línea cambian, la indentación colapsa, los caracteres especiales se mutilan. Las imágenes son atómicas: cada píxel sobrevive. Así que cada vez que el formato importa, convertir el texto en imagen es la forma más simple de asegurarte de que lo que escribiste es lo que la gente ve. Escenarios comunes: fragmentos de código compartidos en Twitter/X (que elimina la indentación y los saltos de línea de las publicaciones de texto pero renderiza imágenes con gusto); gráficos de citas para Instagram (los pies de foto de Instagram no permiten ningún formato de fuente, cada publicación tipográfica estética es una imagen de texto); firmas y banners de foro en phpBB o Discourse donde las imágenes subidas sobreviven pero la tipografía exótica en BBCode no; captura-de-pantalla-sin-la-UI cuando quieres compartir un fragmento de texto como si hubieras tomado una captura de pantalla pero sin el cromo de navegador circundante; imágenes de botón personalizadas para sitios web a la antigua o correos HTML donde la licencia de webfont es un problema; WhatsApp Status y superposiciones de Snapchat donde el texto de imagen estilizado se lee mejor que las propias herramientas de pie de foto de las plataformas; firmas de correo electrónico para clientes que eliminan el formato enriquecido (las versiones más antiguas de Outlook son notorias, una firma basada en imagen es la solución alternativa). El hilo común: cuando no puedes confiar en que el destino renderice el texto como quieres, renderízalo como imagen tú mismo primero.

Cómo la API Canvas renderiza texto

El elemento HTML <canvas> expone un contexto de renderizado 2D que maneja el texto a través de tres métodos centrales. ctx.font acepta la misma taquigrafía que CSS ("bold 32px Helvetica, Arial, sans-serif"), peso de fuente, tamaño de fuente y familia de fuente en una cadena. ctx.fillStyle establece el color (cualquier valor de color CSS: hex, rgb, hsl, nombrado). ctx.fillText(text, x, y) renderiza el texto en la posición dada usando la fuente y el relleno actuales. Dos métodos de soporte importan: ctx.measureText(text) devuelve un objeto TextMetrics que contiene el width renderizado y (en navegadores modernos) actualBoundingBoxAscent y actualBoundingBoxDescent para el cálculo del cuadro delimitador vertical; ctx.textAlign controla la alineación horizontal (left, right, center, start, end) relativa a la coordenada x; ctx.textBaseline controla la alineación vertical (top, middle, alphabetic, hanging, ideographic) relativa a la coordenada y. La línea base alphabetic por defecto coloca la coordenada y en la línea base de las letras minúsculas, que es la convención tipográfica pero contraintuitiva para el diseño, la mayoría del código de renderizado cambia a top para un posicionamiento y predecible. El texto multilínea no se ajusta automáticamente: fillText renderiza una línea en una sola posición. El ajuste manual palabra por palabra usando measureText en un bucle es el patrón estándar.

Por qué solo siete fuentes

Las siete opciones de fuente aquí, Arial, Helvetica, Georgia, Times New Roman, Courier New, Verdana, Impact, son las «fuentes web-safe» canónicas que vienen por defecto en esencialmente todas las instalaciones de escritorio Windows, macOS y la mayoría de Linux. La lista surgió del proyecto Core Fonts for the Web de Microsoft (1996-2002), que distribuyó Impact, Verdana, Georgia, Trebuchet MS y otras como descargas TrueType gratuitas para sembrar consistencia multiplataforma. Elegir solo fuentes del sistema significa que la imagen renderizada se ve igual independientemente de qué dispositivo la genere; usar una Google Font requeriría cargar primero el archivo de fuente vía la Promise document.fonts.ready antes de cualquier renderizado de texto Canvas, un camino viable pero más pesado. Para herramientas cuyo trabajo específico es la «tipografía elegante», cargar fuentes personalizadas es esencial. Para un generador texto-a-imagen utilitario rápido, las siete opciones web-safe cubren esencialmente cada registro tipográfico común: Arial / Helvetica (sans-serif neutral, el caballo de batalla), Verdana (sans-serif de gran altura-x diseñada para lectura en pantalla), Georgia / Times New Roman (serif para elegancia / formalidad), Courier New (monoespaciada para contenido tipo código), Impact (la cara de visualización condensada en negrita canónica de los memes). Para tipografía deliberadamente peculiar o de marca, usa una herramienta dedicada que cargue fuentes personalizadas.

Nitidez Alta-DPI / Retina

Una implementación Canvas ingenua produce salida borrosa en pantallas de alta densidad. Los teléfonos, tabletas y portátiles «Retina» modernos tienen un window.devicePixelRatio de 2 (a veces 3), lo que significa que cada píxel CSS mapea a 2 (o 3) píxeles físicos. Un Canvas renderizado en sus dimensiones CSS solo tiene 1 píxel de detalle por píxel CSS, que se estira 2x para la visualización, produciendo suavidad visible. La corrección es establecer las dimensiones de respaldo del Canvas (canvas.width y canvas.height) a las dimensiones CSS multiplicadas por devicePixelRatio, luego usar CSS para bloquear el tamaño mostrado a las dimensiones CSS originales, luego llamar a ctx.scale(devicePixelRatio, devicePixelRatio) para que todas las operaciones de dibujo posteriores usen el sistema de coordenadas CSS original. Esta herramienta aplica la corrección de alta-DPI automáticamente, el PNG descargado es nítido a resolución retina e imprime limpiamente a tamaños de documento típicos.

Fragmentos de código como imágenes, usa Carbon en su lugar

Para compartir fragmentos de código como imágenes, el caso de uso más común para «texto-a-imagen», hay herramientas dedicadas que manejan resaltado de sintaxis, detección de lenguaje, preajustes de tema y decoración de cromo de ventana mucho mejor de lo que un generador genérico texto-a-imagen podría. Carbon (Dawn Labs, lanzado 2017, carbon.now.sh) es la opción canónica: pega código, elige un lenguaje y un tema, suelta la salida renderizada para Twitter/Slack/posts de blog. Ray.so (Raycast, lanzado 2022) es el competidor moderno de Carbon con una estética por defecto ligeramente más limpia y mejor manejo de tema oscuro. Codeimg.io, Chalk.ist, Snappify y CodeSnap compiten en el mismo nicho con varios diferenciadores (plantillas, diseños multi-ventana, fondos de marca). Para prosa simple, titulares, citas y firmas, este generador es la forma correcta; para código, usa Carbon.

PNG vs JPEG vs WebP para imágenes de texto

Para imágenes que contienen principalmente texto (que es lo que esta herramienta produce), PNG es casi siempre el formato correcto. El texto tiene bordes duros y grandes áreas de color plano, exactamente lo que JPEG maneja peor. La transformada de coseno discreta de JPEG mancha los bordes nítidos con artefactos de timbre («ruido de mosquito») que se ven particularmente mal alrededor de las formas de letras. La compresión DEFLATE sin pérdidas de PNG maneja áreas de color plano eficientemente y mantiene el texto nítido a cualquier nivel de zoom. PNG también soporta transparencia, útil al superponer texto sobre imágenes existentes más tarde. JPEG solo tiene sentido para imágenes de texto con fondos fotográficos (una cita sobre una foto de paisaje, por ejemplo) donde el contenido fotográfico domina el tamaño del archivo. WebP (modo sin pérdidas) da calidad equivalente a PNG con un tamaño de archivo típicamente 26% menor y está soportado en el 97% de los navegadores en 2026. Esta herramienta exporta PNG para máxima compatibilidad, suelta en cualquier aplicación sin preocuparte por el soporte de formato.

Nota de accesibilidad: texto-como-imagen pierde buscabilidad

Cada vez que conviertes texto en imagen, pierdes tres cosas: accesibilidad de lector de pantalla (los usuarios con discapacidad visual que usan tecnología asistiva no pueden leer texto dentro de una imagen sin OCR), buscabilidad (los motores de búsqueda y herramientas de búsqueda de texto indexan el pie o el texto alternativo circundante pero no el contenido de la imagen en sí), y copiar-pegar (los usuarios no pueden seleccionar y copiar texto de un PNG). Para publicaciones sociales donde el trade-off imagen-como-texto es intencional, esto está bien. Para cualquier cosa que necesite ser descubrible, indexable o accesible, prefiere texto HTML real estilizado con CSS y reserva el enfoque imagen-de-texto para contextos donde la plataforma te fuerza la mano. Las directrices WCAG recomiendan proporcionar texto alternativo significativo para cualquier texto-como-imagen, como mínimo, transcribiendo el texto visible en el atributo alt para que los lectores de pantalla puedan anunciarlo.

Privacidad: por qué el solo-navegador importa aquí

El texto que conviertes en imagen es exactamente el tipo de contenido donde la privacidad importa: borradores de publicaciones sociales, memorandos internos, capturas-de-pantalla-de-texto de documentos confidenciales, citas de trabajos no publicados. Los generadores texto-a-imagen del lado servidor suben tu texto a un servidor remoto, donde queda en los logs. Esta herramienta se ejecuta enteramente en tu navegador vía la API Canvas, verifícalo en la pestaña Red de DevTools mientras generas, o desconecta la página (modo avión) después de que cargue y la herramienta sigue funcionando. Seguro para borradores confidenciales, copia de cliente bajo NDA, comunicaciones internas o cualquier texto que no querrías que se copiara en el disco duro de un extraño.

Preguntas frecuentes