Imágenes de texto
El texto debe implementarse como texto real, no como una imagen rasterizada, a menos que la imagen sea esencial (un logotipo, una captura de pantalla de una interfaz que se está describiendo) o totalmente personalizable por el usuario.
Qué exige este criterio
Cuando la misma presentación visual puede conseguirse con texto real y CSS, debe usarse texto real. Las imágenes de texto no se amplían con nitidez, no pueden seleccionarse, no pueden ser traducidas por el navegador, no pueden reformatearse mediante CSS del usuario y se pixelan con un zoom elevado. Las excepciones son: logotipos, imágenes esenciales (una captura de pantalla que muestra el aspecto de una interfaz) e imágenes de texto que el usuario puede personalizar.
Cómo cumplirlo
- Renderizar encabezados, banners y texto promocional como texto HTML con fuentes web, no como archivos PNG exportados.
- Para etiquetas de marketing («Nuevo», «Oferta», «30 % de descuento»), utilizar un
<span>estilizado con CSS en lugar de una imagen sprite. - Si un diseñador entrega una imagen hero con texto integrado, solicitar que el texto se proporcione como capa separada para superponerlo sobre la imagen con CSS.
- Para tarjetas de citas de estilo redes sociales generadas en el servidor, renderizarlas como SVG con elementos
<text>cuando sea posible: el texto SVG se escala con nitidez y es seleccionable. - Usar
@font-facepara cargar tipografías decorativas personalizadas en lugar de rasterizar texto ornamental.
Fallos habituales
- Anuncios de banner con todo el texto («¡Oferta por tiempo limitado! ¡Compra ahora!») renderizado como JPEG, borroso al 200 % de zoom.
- Tarjetas de planes de precios donde «99 €/mes» forma parte de una imagen de la tarjeta en lugar de texto HTML.
- Divisores de sección con texto estilizado («Nuestros servicios») entregados como PNG en vez de un
<h2>con estilos. - Llamadas a la acción basadas íntegramente en imágenes, con texto alternativo que duplica el contenido visual.
- Capturas de pantalla de correo electrónico usadas en páginas de marketing cuando el contenido publicitario podría ser simplemente texto real.
Por qué es importante
Las imágenes de texto son también un fallo de traducción y de SEO: Google no puede indexarlas, Chrome no puede traducirlas y los usuarios de lupas de pantalla las ven pixeladas. La corrección es habitualmente trivial: sustituir el archivo exportado por HTML. La fricción es de flujo de trabajo: los diseñadores entregan JPEG porque son más rápidos de producir en Figma que de especificar como texto.