Imágenes en línea: Reglas y ejemplos

Una imagen en línea es una imagen única colocada dentro del flujo de lectura para aclarar o probar el punto inmediato que la rodea. No es una galería, panel promocional ni sustituto del texto. Pregúntate qué puede entender o verificar el lector tras verla que las palabras cercanas no proporcionen con la misma eficiencia.

La muesca clave evita que el conector entre en el zócalo en la orientación incorrecta.

El elemento renderizado arriba pertenece inmediatamente después de un párrafo que le indica al lector que verifique la orientación del conector. El recorte hace visible la muesca, el pie de foto indica su importancia y la instrucción siguiente puede continuar sin pedirle al lector que decodifique una escena grande y no relacionada.

Por qué este elemento es importante

Los lectores alternan entre escaneo e inspección enfocada. Una imagen bien ubicada convierte una descripción abstracta en una forma reconocible, muestra evidencia o reduce el esfuerzo necesario para imaginar un estado visual. Su ubicación implica que explica el texto cercano. Cuando esa relación es débil, los lectores la inspeccionan, no encuentran significado adicional y tienen que retomar su lugar.

El principio psicológico relevante es la señalización. El recorte, el pie de foto y el texto circundante dirigen la atención hacia el detalle que importa. Una fotografía de una máquina completa es débil cuando la frase se refiere a una lengüeta de bloqueo de dos centímetros. Un recorte enfocado de esa lengüeta le da al lector una pregunta visual que responder. La imagen no necesita flechas ni texto incrustado cuando solo el encuadre puede hacer evidente el sujeto.

La extractabilidad por máquina es la capacidad del software para identificar una unidad y preservar su relación con el significado cercano. Un <figure> semántico que contiene un <img> y un <figcaption> opcional proporciona a los rastreadores, la tecnología de asistencia, las herramientas de migración y los sistemas de recuperación de IA una unidad estable. El texto alternativo indica qué aporta la imagen; las dimensiones describen su geometría; un pie de foto expone la interpretación o procedencia fuera de los píxeles.

Las máquinas no deben necesitar visión artificial para recuperar una instrucción, número, advertencia o conclusión esencial. Si una imagen contiene una medición o etiqueta decisiva, repite esa información en el texto cercano o usa una tabla estructurada. Las reglas de redacción de elementos controlan la sintaxis directiva compartida, las rutas de origen, el mapeo del cuerpo y la precedencia. Esta página tiene prioridad para las decisiones sobre campos de imágenes en línea, tamaño, carga, pie de foto y texto alternativo.

Cuándo usarlo

Usa una imagen en línea cuando un elemento visual apoye directamente una idea cercana y la imagen siga siendo útil al ancho de la columna de lectura. Los usos apropiados incluyen mostrar un detalle físico, identificar un lugar u objeto, presentar un estado simple de antes y después, dar prueba visual de una condición probada, o demostrar la apariencia de un resultado que no requiere anotaciones.

Realiza tres pruebas antes de añadirla:

1. Prueba de contribución: Nombra la nueva información, evidencia o reconocimiento que la imagen proporciona.
2. Prueba de contexto: Identifica el párrafo exacto al que apoya la imagen. Si tres secciones pudieran reclamarla por igual, su propósito probablemente sea demasiado amplio.
3. Prueba de eliminación: Oculta la imagen. Si no se pierde nada significativo, márcala como decorativa solo cuando el diseño realmente la necesite; de lo contrario, elimínala.

Los casos límite causan la mayoría de los usos incorrectos. Usa una captura de pantalla anotada cuando los lectores deban localizar controles o identificar varias regiones numeradas. Usa un diagrama cuando el contenido sea una relación, secuencia o sistema en lugar de un objeto visible. Usa una galería cuando varias imágenes pares deban explorarse. Usa una tabla comparativa cuando las diferencias dependan de criterios repetidos. Usa un imagebox cuando una imagen y una explicación sustancial formen una unidad autónoma de dos columnas.

No insertes una fotografía de stock genérica solo para dividir el texto. Un apretón de manos no prueba una asociación; un portátil no explica un software; una bombilla no aclara una idea. No publiques texto como imagen para preservar la tipografía. No uses una captura de pantalla para prosa, un gráfico sin valores legibles, ni una imagen cuya licencia y procedencia sean desconocidas.

Dónde colocarlo

Coloca la imagen inmediatamente después del párrafo que introduce lo que el lector debe inspeccionar. La razón va primero para que el lector sepa hacia dónde dirigir la atención. Acompaña la figura con interpretación solo cuando la imagen sea evidencia cuya consecuencia no sea obvia. En un procedimiento, colócala después de la acción relevante y antes de la verificación de éxito; nunca dividas una oración de su calificación ni una instrucción de su advertencia.

Una imagen en línea puede situarse debajo de un H2 solo cuando el encabezado y el primer párrafo establezcan su propósito. Mantén la figura, el pie de foto y el crédito juntos en diseños responsivos y saltos de página.

No la coloques dentro de un párrafo, elemento de lista, celda de tabla, llamada, acordeón, tarjeta cliqueable u otro elemento multimedia. No pongas dos imágenes en línea consecutivas: combina las que sean realmente pares en una galería, o añade la explicación que distinga sus funciones. No puede colocarse junto a una tabla densa, video, gráfico o llamada a la acción donde ambos objetos compitan por la atención. Mantén al menos un párrafo significativo entre unidades multimedia separadas, a menos que formen una comparación explícitamente definida.

Usa el ancho de contenido normal por defecto y una presentación más estrecha para un objeto pequeño o retrato. Usa un contenedor de medios anchos aprobado solo cuando el detalle no pueda leerse de otro modo; nunca crees desplazamiento horizontal a nivel de página.

Anatomía

1. Límite de la figura: Agrupa el recurso, el pie de foto y el crédito como una unidad en el flujo del documento.
2. Origen de la imagen: Se resuelve a un recurso aprobado y existente, no a un enlace remoto ni marcador de posición.
3. Texto alternativo: Reemplaza la función contextual de la imagen para los lectores que no pueden percibirla; está vacío solo para decoración.
4. Dimensiones intrínsecas: Reservan la relación de aspecto correcta antes de que el archivo llegue y evitan movimientos del diseño.
5. Candidatos responsivos: Permiten que el navegador elija un archivo de tamaño adecuado en lugar de descargar el origen más grande en todas partes.
6. Tamaño renderizado: Mantiene el detalle relevante legible sin desbordar ni escalar un recurso de baja calidad.
7. Pie de foto: Añade interpretación, identificación, fecha, escala o procedencia cuando esa información ayuda a todo lector.
8. Crédito: Registra al creador y la fuente cuando la licencia o la política editorial lo requieran.

El nombre del archivo de imagen y el texto alternativo no son intercambiables. Un nombre de archivo estable ayuda al mantenimiento de activos; el texto alternativo contextual explica el propósito de la imagen en esta ocurrencia. Una misma fotografía puede por tanto tener diferente texto alternativo cuando apoya distintos puntos, aunque reutilizar una imagen para puntos no relacionados es una señal de advertencia.

Ejemplos de diseño

El elemento admite tres variantes semánticas y dos tratamientos de ancho. El comportamiento de carga no es una variante visual.

Imagen informativa, ancho de contenido

Este es el valor por defecto. La imagen aporta detalle reconocible o evidencia, usa texto alternativo no vacío y permanece dentro del contenedor de lectura.

Imagen informativa, ancho de medios amplio

Usa el contenedor ancho aprobado solo cuando un mapa, una fotografía detallada o un resultado legible necesiten más espacio horizontal. El texto circundante sigue siendo el dueño del significado, y la presentación en móvil debe seguir siendo utilizable.

Imagen decorativa

La decoración no aporta información única, usa alt="", no tiene pie de foto explicativo y debe ser rara en contenido editorial extenso. No debe ser la única expresión de estado de ánimo, estatus, identidad o resultado.

Imagen de detalle con expansión opcional

Usa la expansión solo cuando la representación normal en línea establezca contexto, pero el detalle fino requiera una vista más grande. La imagen en sí misma sigue siendo comprensible sin activar el enlace, y el nombre accesible del control describe la acción.

Comportamiento en viewport estrecho

Cada variante se reduce dentro del viewport, preserva la relación de aspecto y mantiene el pie de foto adjunto. Si el texto significativo se vuelve ilegible, proporciona un recorte para móvil o reemplaza la imagen con texto estructurado; forzar el pellizco para ampliar no es la solución por defecto.

Parámetros

El contrato almacena decisiones editoriales y de entrega. Los bordes, sombras, espaciado y valores de punto de ruptura pertenecen al renderizador.

La directiva no tiene campo de título: una imagen en línea pertenece a la sección circundante en lugar de crear una nueva sección. Su primer párrafo del cuerpo se asigna a caption; no se acepta un primer encabezado. El crédito proviene de los metadatos de recurso confiables cuando están disponibles, evitando que los autores cambien silenciosamente la información de licencia.

Sintaxis y ejemplos de código

Las siguientes tres notaciones mapean el mismo origen, texto alternativo, dimensiones intrínsecas, tamaño, pie de foto e intención de carga. Las rutas de recurso de ejemplo demuestran solo el contrato; el origen en producción debe resolverse a un archivo existente.

Directiva Markdown portable

:::inline-image{src="/cdn-assets/seo-playbook/examples/keyed-connector.webp" alt="Primer plano del conector mostrando la muesca clave alineada con la ranura coincidente del zócalo" width=1600 height=1000 size=content loading=lazy}
La muesca clave permite la inserción en una sola orientación.
:::

El primer párrafo es el pie de foto. Los párrafos adicionales, encabezados, listas, botones y medios anidados se rechazan porque convertirían una figura enfocada en un contenedor de contenido general.

Shortcode de Hugo

{{< inline-image src="/cdn-assets/seo-playbook/examples/keyed-connector.webp" alt="Primer plano del conector mostrando la muesca clave alineada con la ranura coincidente del zócalo" width="1600" height="1000" size="content" loading="lazy" >}}
La muesca clave permite la inserción en una sola orientación.
{{< /inline-image >}}

Se utilizan exclusivamente parámetros nombrados. Esta es una especificación de adaptador portable, no una afirmación de que un shortcode local esté registrado. Hasta que exista el adaptador, usa la implementación de figura semántica establecida del sistema de publicación; nunca añadas una llamada de shortcode rota al contenido de producción.

Bloque de WordPress

<!-- wp:image {"id":412,"width":"auto","height":"auto","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large">
  <img src="/cdn-assets/seo-playbook/examples/keyed-connector.webp"
       alt="Primer plano del conector mostrando la muesca clave alineada con la ranura coincidente del zócalo"
       width="1600" height="1000" loading="lazy">
  <figcaption class="wp-element-caption">La muesca clave permite la inserción en una sola orientación.</figcaption>
</figure>
<!-- /wp:image -->

Usa los metadatos de la biblioteca de medios, pero revisa el texto alternativo contextual para esta ubicación. No enlaces a la página de archivo adjunto por defecto.

Ejemplos

Bueno: una imagen enfocada responde a la pregunta visual

Una guía de instalación dice: «Antes de aplicar energía, alinea la muesca clave con la ranura del zócalo; forzar el conector puede doblar los pines». Luego coloca esta figura:

La muesca y la ranura se alinean antes de que la lengüeta de bloqueo pueda acoplarse.

Esto funciona porque la imagen llega después de la razón para inspeccionarla, el recorte contiene ambas características coincidentes y el pie de foto explica la relación en lugar de decir «imagen del conector». La instrucción y la consecuencia permanecen en texto. Las dimensiones intrínsecas evitan el movimiento durante la carga, y la imagen puede cargarse con carga diferida porque aparece muy por debajo del primer viewport.

Malo: la decoración interrumpe sin explicar

Un artículo sobre configuración de análisis inserta una fotografía de stock a ancho completo de una persona mirando gráficos coloridos entre un paso y su advertencia. Su texto alternativo dice «analytics dashboard SEO optimization reporting data», el origen tiene 5000 píxeles de ancho, no se declaran dimensiones y el archivo se carga con eager a mitad de la página.

La imagen es mala porque no prueba ningún estado de configuración, separa una acción riesgosa de su advertencia, rellena palabras clave en el texto alternativo, descarga más píxeles de los que el diseño puede usar y puede desplazar la advertencia cuando se conozca su altura. Elimínala. Si la interfaz real contiene un control ambiguo, reemplázala con una captura de pantalla enfocada y actual, y mantén la advertencia unida a la acción.

Marcado de esquema y accesibilidad

Una imagen en línea no crea una entidad de esquema especial por defecto. Una imagen significativa puede proporcionar la propiedad image de Article, HowTo, Product, Review u otra entidad apropiada. Usa ImageObject solo con un contentUrl estable y metadatos disponibles veraces como pie de foto, dimensiones, creador y licencia. No marques decoración ni derechos no verificados.

El buen texto alternativo describe la función en contexto, no todos los objetos visibles. Pregúntate qué oración reemplazaría a la imagen si no se cargara. «Primer plano del conector mostrando la muesca clave alineada con la ranura coincidente del zócalo» es útil en una guía de instalación. «Un objeto negro y plateado sobre un fondo gris» es visualmente literal pero funcionalmente débil. Evita «imagen de» y «foto de» a menos que el medio en sí mismo importe, como distinguir una fotografía de una simulación.

Cada <img> necesita un atributo alt. Usa texto no vacío para imágenes informativas y alt="" para decoración. Omitir el atributo no es equivalente: algunos lectores de pantalla anuncian el nombre del archivo. No pongas prosa esencial, instrucciones, citas o series largas de datos dentro de los píxeles. Si el texto visible en la imagen es importante, repítelo en el contenido circundante.

Usa <figure> y <figcaption> cuando un pie de foto pertenezca a la imagen. No añadas un rol de figure manualmente. Una imagen expandible necesita un control visible y operable con teclado, con un nombre descriptivo, movimiento de enfoque predecible, soporte de Escape cuando abre un modal y acceso al mismo texto alternativo y pie de foto en el tamaño ampliado. No envuelvas cada imagen en un enlace sin etiqueta al archivo fuente.

La entrega responsiva es parte del SEO de imágenes y de la accesibilidad porque hace que el contenido esté disponible sin demoras innecesarias. Usa srcset y sizes o un pipeline de imágenes equivalente para que el diseño responsivo pueda seleccionar un candidato adecuado. Preserva la relación de aspecto, establece width y height intrínsecos, y limita el ancho máximo renderizado a su contenedor. Estas dimensiones reservan espacio y reducen el Desplazamiento Acumulativo de Diseño , el movimiento del contenido de la página mientras los recursos se cargan.

La carga diferida pospone un recurso fuera de pantalla hasta que el lector se acerca a él. Usa loading="lazy" para imágenes debajo del viewport inicial. No apliques carga diferida a una imagen que probablemente aparezca de inmediato, porque el retraso puede hacer que el contenido visible más grande llegue más tarde. Usa carga eager y fetchpriority="high" solo cuando la medición y la posición en la plantilla identifiquen la imagen como un probable recurso principal sobre el pliegue; múltiples imágenes con prioridad alta anulan la señal.

Reglas de redacción

La redacción alrededor de una imagen en línea hace la mayor parte del trabajo interpretativo, por lo que la brevedad en el elemento no significa vaguedad.

• Introduce la razón antes de la figura en un párrafo cercano. No uses lenguaje de coordenadas como «abajo» cuando los diseños responsivos o sindicados puedan mover el recurso.
• Redacta texto alternativo informativo para la función de la imagen en este contexto exacto. Apunta a 40–160 caracteres; usa hasta 250 solo cuando la complejidad realmente lo requiera.
• Mantén los pies de foto entre 5 y 30 palabras y una sola oración cuando sea posible. Identifica, interpreta, fecha, escala o acredita la imagen; no te limites a repetir el texto alternativo.
• Muestra un sujeto o relación principal. Si el lector debe inspeccionar más de tres áreas independientes, usa una captura de pantalla anotada, diagrama, tabla o galería.
• Usa ortografía del español, lenguaje llano y la misma terminología que la sección circundante. El texto alternativo no es un campo de palabras clave.
• Mantén todas las instrucciones esenciales, advertencias, mediciones, precios, fechas y conclusiones en texto HTML, incluso si también aparecen en los píxeles.
• Nunca coloques encabezados, múltiples párrafos, listas, tablas, botones, formularios, video, audio ni otra imagen dentro del cuerpo del elemento.
• Nunca uses un pie de foto vacío para crear espaciado, un crédito inventado, un enlace remoto, un recurso sin licencia, datos de clientes sin permiso ni una ruta de marcador de posición inexistente.
• Nunca estires, distorsiones ni escales una imagen para llenar un espacio de diseño. Recorta solo cuando el recorte preserve la evidencia y el contexto que el texto discute.

Tipos de publicación que lo usan

El arreglo postTypes en el frontmatter es la unión canónica. Un tipo de publicación puede estrechar el requisito, pero no cambia el campo del elemento ni el contrato de accesibilidad.

Lista de verificación de control de calidad

• Propósito: El revisor puede indicar la información, evidencia o reconocimiento únicos que la imagen añade.
• Ubicación: El párrafo precedente establece qué inspeccionar, y ninguna advertencia, calificación o cita ha sido separada de su afirmación.
• Elemento correcto: Una sola imagen en línea es más apropiada que una captura de pantalla anotada, galería, diagrama, tabla o imagebox.
• Validez del recurso: El origen existe, usa un formato aprobado y una ruta relativa a la raíz, y tiene derechos y procedencia verificados.
• Privacidad: La imagen no contiene datos de clientes no aprobados, nombres, direcciones de correo electrónico, tokens, detalles del navegador ni pistas de ubicación.
• Recorte y calidad: El sujeto permanece legible en anchos renderizados y móviles sin distorsión, espacio vacío evitable ni compresión destructiva.
• Texto alternativo: El atributo alt está presente y es contextualmente informativo o intencionalmente vacío para decoración; no es un nombre de archivo, duplicado del pie de foto ni lista de palabras clave.
• Pie de foto: Cuando está presente, añade identificación, interpretación, fecha, escala o procedencia en 5–30 palabras.
• Dimensiones: El ancho y alto intrínsecos coinciden con la relación de aspecto de origen y reservan espacio de diseño estable.
• Entrega responsiva: Los tamaños candidatos coinciden con anchos de pantalla realistas; el origen más grande no se envía a todos los viewports por defecto.
• Carga: Las imágenes debajo del pliegue se cargan con carga diferida; las imágenes inicialmente visibles no; la prioridad alta de obtención se limita a un candidato principal medido.
• Comportamiento en móvil: La imagen cabe sin desplazamiento horizontal a nivel de página, y su detalle significativo sigue siendo legible sin zoom forzado.
• Texto de respaldo: Las instrucciones, advertencias, mediciones y conclusiones esenciales existen en texto de la página, no solo en píxeles.
• Datos estructurados: Cualquier propiedad de esquema es precisa, está respaldada por contenido visible y se omite para decoración.
• Paridad portable: Markdown, Hugo y WordPress preservan el mismo origen, texto alternativo, dimensiones, pie de foto, crédito e intención de carga.
• Capturas pendientes: Ninguna ruta inexistente se renderiza; cada ejemplo solicitado permanece como un comentario SCREENSHOT mientras screenshotsPending = true.

Preguntas frecuentes

La plantilla de academy renderiza las cinco preguntas revisadas almacenadas en el frontmatter [[faq]] de esta página. Cubren texto alternativo, carga diferida, pies de foto, dimensionamiento y la decisión de eliminar una imagen que no aporta nada.