Agregar texto a una foto

Sube una foto, escribe el texto y guárdala con el tamaño original

Poner texto en una foto escribe palabras sobre una imagen que ya tienes y la guarda como una sola imagen con el mismo ancho y alto que la foto. Puedes colocar hasta ocho textos, y cada uno tiene su propia fuente, tamaño, inclinación, color, contorno y fondo. Arrastra el texto por el escenario con el dedo o el ratón, cambia el tamaño con el punto de la esquina inferior derecha y la inclinación con el punto de arriba.

El fallo más habitual al escribir sobre una foto es que el texto se pierde entre los detalles de la imagen. Por eso la prueba de legibilidad que hay bajo el escenario dibuja en una misma barra el rango de luminosidad del fondo y el color del texto, y valora el par con la relación de contraste de las pautas de accesibilidad web (WCAG). Si indica que el texto se pierde, basta con pulsar contorno, caja de fondo o cambiar color del texto. La foto y los textos se procesan solo en este navegador y no se envían a ningún servidor.

Cuándo conviene usarlo

• Poner lugar y fecha a una foto de viaje o del día a día: un título grande arriba y la fecha pequeña abajo a la derecha es la composición de dos textos que ves en la foto de ejemplo.
• Marcar un precio u oferta en la foto de un producto: el estilo de etiqueta amarilla pone una caja detrás del texto, de modo que el precio se lee aunque la imagen sea muy recargada.
• Preparar un aviso rápido: la banda de subtítulo extiende una banda translúcida por todo el ancho de la foto y coloca el texto encima. Parece un subtítulo de vídeo y va bien para una línea corta.
• Firmar las fotos que haces: la marca de agua repetida reparte un texto tenue en diagonal por toda la imagen, así que recortar una esquina no la elimina.
• Hacer un letrero o cartel vertical: si cambias la escritura a vertical, las letras se apilan de arriba abajo y las líneas avanzan de derecha a izquierda.

Pasos

1. Elegir la foto: usa el botón, arrastra un archivo al editor o pega una imagen copiada. Al principio aparece una foto de ejemplo con dos textos, para que veas un resultado antes de subir nada.
2. Escribir el texto: pulsa la ficha de un texto para seleccionarlo y escribe en el cuadro. Un salto de línea crea otra línea, y cada texto admite hasta 300 caracteres. Añadir texto crea uno nuevo que hereda el aspecto del actual y queda un poco más abajo.
3. Elegir el aspecto: cada una de las seis tarjetas de estilo es un recorte de tu foto en el lugar donde está el texto seleccionado, con ese estilo ya probado. Pulsa la que te guste y ajusta después la fuente, el tamaño y el color.
4. Colocarlo: arrástralo por el escenario o pulsa una de las nueve posiciones para dejarlo a un 5 % del lado corto respecto a los bordes. Mientras arrastras cerca del centro aparece una guía y el texto se ajusta justo al centro.
5. Revisar y guardar: mira la prueba de legibilidad y el aviso de texto fuera de la foto, y guarda en PNG, JPG o WebP. Justo debajo del escenario están el botón de guardar y el indicador de legibilidad, y en los dispositivos que permiten compartir el botón Compartir envía la imagen directamente a otra aplicación.

Cómo mide la herramienta si el texto se lee

El criterio de éxito 1.4.3 de las Pautas de accesibilidad para el contenido web (WCAG 2.2) pide una relación de contraste de al menos 4,5 : 1 para el texto y las imágenes de texto, y de al menos 3 : 1 para el texto grande. La relación es (L1 + 0,05) ÷ (L2 + 0,05), donde L1 es la luminancia relativa del color más claro y L2 la del más oscuro. Va de 1 (el mismo color) a 21 (negro sobre blanco). Pero una foto no es de un solo color, así que medir un único punto haría que el veredicto saltara de un lado a otro.

La herramienta toma de forma uniforme hasta unos 5.000 píxeles de la foto dentro del bloque de texto, mide cada uno frente al color del texto y muestra el valor del punto del 10 % empezando por abajo. Se acerca al peor sitio, pero unos pocos píxeles sueltos no lo alteran. El valor se muestra redondeado hacia abajo a un decimal y el veredicto se basa en ese valor mostrado: 4,49 aparece como 4,4 y cuenta como inferior a 4,5.

Como muestra la tabla, el texto blanco queda muy por debajo del criterio sobre un cielo claro o un atardecer. Cuando el contorno mide un 3 % del tamaño del texto o más, el borde de cada letra toma el color del contorno, y desde ese punto el veredicto usa el contraste entre el color del texto y el del contorno. Texto blanco con contorno negro da 18,8 : 1 sea cual sea el fondo. Con una caja de fondo, la herramienta mezcla el color de la caja con la foto según su intensidad y vuelve a medir sobre ese resultado. La opacidad, que aclara todo el texto, se mezcla del mismo modo con el color del texto y el de la caja.

La barra de la prueba va del negro a la izquierda al blanco a la derecha, ordenada por claridad percibida (CIE L*). La banda naranja es el rango del 10 % al 90 % de la luminosidad del fondo tras el texto, la línea dentro de la banda es el valor central, el punto con borde blanco es el color del texto y el anillo grueso es el color del contorno. Si el punto cae dentro de la banda, hay un fondo tan claro como el texto detrás de él, y en ese lugar el texto parece desaparecer.

Cuándo usar contorno, sombra, caja o banda

Activarlos todos a la vez y con mucha fuerza solo ensucia la imagen. Sube el contorno desde 0 poco a poco hasta que la prueba pase a «se lee bien», y si la foto sigue siendo demasiado recargada, pasa a la caja y después a la banda, en ese orden.

El tamaño del texto es un porcentaje del ancho de la foto

El tamaño del texto no se fija en px sino como porcentaje del ancho de la foto. El mismo texto de 48 px parece grande en una foto de 1.000 px y pequeño en una de 4.000 px. Con un porcentaje, la vista previa y la imagen guardada a tamaño original mantienen la misma proporción, y el texto ocupa la misma parte de la imagen al cambiar de foto. El interlineado es 1,25 veces el tamaño del texto, el grosor del contorno es un porcentaje del tamaño del texto y el margen de la caja es 0,3 veces en horizontal y 0,18 veces en vertical, todo dibujado en px redondeados.

Un lienzo traza el contorno mitad por dentro y mitad por fuera de la forma de la letra, así que la herramienta dibuja la línea con el doble del grosor de la tabla para que el grosor visible fuera de las letras coincida con ella. Una foto vertical tiene el ancho más corto, por lo que el mismo porcentaje se ve más pequeño. Con un texto de tres líneas, comprueba que la altura de línea × 3 no supere la mitad del alto de la foto, y baja el tamaño si la supera.

Siete opciones de fuente y sus licencias

La fuente del sistema ya está en el dispositivo de quien visita la página, así que se dibuja al instante. Las otras seis son fuentes gratuitas de Google Fonts alojadas en este sitio, y solo se descargan en el momento de elegirlas. La primera vez que eliges una, el cuadro parpadea mientras termina la descarga indicada en la tabla, y después el escenario cambia a esa fuente.

Las seis fuentes que se descargan están bajo la Licencia de Fuentes Abiertas SIL 1.1 (OFL). Según las preguntas frecuentes de la OFL, la licencia permite usar las fuentes en cualquier tipo de diseño, como logotipos y carteles, sin permiso adicional, y no restringe la licencia de la obra que hagas con ellas. El archivo de licencia está enlazado en la tabla. Esto remite al texto de la licencia y no es asesoramiento jurídico.

No todas las fuentes contienen los mismos caracteres. Las seis tienen las letras con tilde y la eñe (á é í ó ú ñ ü) y los signos ¿ y ¡. Bebas Neue es un diseño solo de mayúsculas: si escribes minúsculas, se dibujan con las mismas formas que las mayúsculas. Ninguna de las seis tiene caracteres coreanos, japoneses ni chinos; esos caracteres se dibujan con la fuente del sistema, uno a uno, y un aviso bajo el cuadro de fuente indica cuáles se han cambiado.

Cómo se coloca la escritura vertical

Con la escritura en vertical, las letras van una por casilla de arriba abajo, y las líneas van de derecha a izquierda. Un salto de línea abre una columna nueva a la izquierda. Los botones de alineación pasan a ser arriba, centro y abajo, y alinean el comienzo de cada columna.

• Las letras latinas y los números no se giran: cada uno se coloca de pie en su casilla, de modo que una palabra se lee como una pila de letras.
• En textos chinos, japoneses y coreanos, la herramienta lleva 、 y 。 a la parte superior derecha de la casilla y gira 90 grados caracteres como ー, 〜, … y los paréntesis para que sigan la dirección vertical.
• Un número largo como 2026 forma una pila alta. Para las fechas se lee mejor un texto horizontal aparte.

Separación de la marca de agua repetida

Al activar la repetición, el mismo texto se reparte por toda la foto como una cuadrícula. La separación horizontal es el ancho del cuadro que rodea al texto más 2 veces el tamaño del texto; la vertical es su alto más 1,6 veces, y cada fila se desplaza media casilla. Si una foto fuera a tener más de 300 copias, la separación se amplía 1,2 veces cada vez para que el escenario no vaya lento. El estilo de marca de agua repetida empieza con un 35 % de opacidad, un 4 % de tamaño y una inclinación de −30°.

Una marca de agua solo desanima el uso no autorizado, no lo impide. Cuanto más tenue es el texto, menos tapa de la foto y más fácil es quitarlo, así que guarda la foto original aparte y pon la marca solo en la copia que publiques.

Formatos de guardado y tamaño guardado

• PNG (predeterminado): los bordes de las letras quedan más limpios y las zonas transparentes se conservan. Los archivos son grandes.
• JPG: archivos pequeños. No admite transparencia, así que el fondo se rellena de blanco, y eliges una calidad del 50 al 100 % (por defecto, el 90 %).
• WebP: un punto medio entre peso y nitidez. Si el navegador no puede guardar en WebP, según MDN se crea un PNG, así que la herramienta no guarda y te avisa de que elijas otro formato.

El tamaño guardado es el de la foto que subiste. Sin embargo, Safari en iPhone y iPad solo puede dibujar un lienzo de hasta 4.096 × 4.096 = 16.777.216 píxeles (resultados de la prueba de canvas-size). Si no se puede guardar a tamaño original, la imagen se rehace más pequeña dentro de esa área y con las mismas proporciones, y la herramienta te dice que se ha reducido y a qué tamaño.

Puedes subir fotos de hasta 20 MiB por archivo, 40 megapíxeles y 16.384 px por lado. La información de giro que registra la cámara se aplica al leer la foto, así que una foto tomada en vertical no queda tumbada.

Errores frecuentes

• Juzgar por el tamaño de la vista previa: el escenario es una imagen reducida. Abre el archivo guardado a su tamaño real para comprobar si el texto pequeño se ve borroso.
• Pegar el texto al borde: si una red social recorta a cuadrado o a 4:5, el texto del borde se corta. Aunque no salga el aviso de texto fuera de la foto, es más seguro dejar el margen del 5 % de las nueve posiciones.
• Volver a escribir en una foto ya guardada como JPG: cada retoque suma otra compresión. Sube de nuevo la foto original y guarda desde cero.
• Usar una letra cursiva en tamaño pequeño: los trazos finos de una cursiva se pierden en la foto por debajo del 4 % de tamaño. Dale un contorno algo más grueso que a una letra de palo seco, o ponle una caja.
• Esperar minúsculas con Bebas Neue: escribas lo que escribas, se dibuja con formas de mayúscula. Si necesitas mezclar mayúsculas y minúsculas, elige otra fuente.

Lo que esta herramienta no hace

• En la imagen guardada la foto y el texto quedan fundidos en un único conjunto de píxeles, así que no se puede volver a editar el texto. Si recargas la página, tampoco queda nada del trabajo.
• No hay un color distinto por letra, ni texto en curva, ni degradados, ni deshacer.
• La escritura vertical es un método sencillo: coloca las letras de pie en casillas y solo mueve o gira algunos signos de puntuación. No usa las formas verticales propias que pueda tener una fuente.
• La prueba de legibilidad mide los píxeles de la vista previa en pantalla y no cuenta la sombra ni el grosor de los trazos de las letras. Un texto que supere el criterio puede costar de leer con el tamaño real de pantalla o para quien tenga menos vista.
• Las fotos HEIC solo se abren si el navegador puede leerlas. Si no se abre, conviértela a JPG y súbela.

A fecha de 2026-10-20 se comprobaron los estándares, documentos y licencias de fuentes de abajo. Las cifras de las tablas son las mismas que calcula esta herramienta.

Fuentes

• 01W3C — WCAG 2.2, 1.4.3 Contraste (mínimo)4,5:1 para texto e imágenes de texto, 3:1 para texto grande, relación de contraste (L1 + 0,05) ÷ (L2 + 0,05). Texto original en inglés
• 02WHATWG — HTML Living Standard, dibujar texto en el mapa de bitsfillText y strokeText, alineación y líneas base. Texto original en inglés
• 03MDN — CanvasRenderingContext2D.strokeText()Trazar el contorno del texto. Página en inglés
• 04MDN — HTMLCanvasElement.toBlob()Un tipo no admitido pasa a PNG, la calidad vale para JPEG y WebP, null si no se puede crear la imagen. Página en inglés
• 05MDN — createImageBitmap()La opción imageOrientation aplica la información de giro de la foto
• 06canvas-size — Test ResultsMobile Safari 9+, área máxima de lienzo 4.096 × 4.096 (16.777.216)
• 07SIL — OFL FAQUso de fuentes OFL en logotipos, carteles y otras obras; la licencia de la obra no queda restringida. Texto original en inglés
• 08Google Fonts — AntonLicencia: OFL
• 09Google Fonts — Bebas NeueLicencia: OFL
• 10Google Fonts — DM Serif DisplayLicencia: OFL
• 11Google Fonts — LobsterLicencia: OFL
• 12Google Fonts — PacificoLicencia: OFL
• 13Google Fonts — KalamLicencia: OFL

Preguntas frecuentes

Herramientas para usar a la vez