Cómo dimensionar y ubicar fotos en un artículo con texto e imágenes
Para lograr un artículo legible, dimensione cada foto según la función que cumple: dé a una imagen que aporta pruebas o contexto clave suficiente espacio para verse bien, y mantenga una imagen complementaria más pequeña cuando el texto circundante ya explique la idea. Colóquela junto al pasaje que aclara, preserve un orden de lectura claro y compruebe el diseño en anchos estrechos. Esta guía se centra en organizar fotos en un artículo digital; las mismas decisiones basadas en el propósito pueden orientar la maquetación impresa, pero el comportamiento en pantalla requiere su propia comprobación.
Comience por la función de la foto
Antes de mover o cambiar el tamaño de una foto, decida qué debe obtener el lector de ella. ¿Es una prueba que debe examinar, un ejemplo que ayuda a visualizar un pasaje o mero elemento decorativo? Esa distinción resulta más útil que comenzar con un ancho de imagen predeterminado.
Si la foto aporta información que el texto no contiene, dele el espacio suficiente para que el detalle relevante sea legible. Una imagen pequeña de un documento, objeto o proceso puede fracasar en su cometido principal si el lector no puede examinarla. Si la foto simplemente ilustra un punto ya explicado en el texto, un tamaño más pequeño puede bastar, o tal vez la imagen ni siquiera sea necesaria. Esta es una regla práctica de diseño deducida a partir del propósito de la foto, no una norma universal de tamaño. La guía de imágenes del Design System de GOV.UK señala de forma similar que las imágenes deben responder a una necesidad real del usuario y servir como apoyos visuales, mientras que la información requerida debe permanecer disponible por escrito. Sus recomendaciones están redactadas para servicios gubernamentales en línea, por lo que conviene tratarlas como una referencia útil más que como un manual de reglas para cualquier tipo de artículo.
Una ayuda práctica para tomar decisiones es asignar a cada foto una de estas tres funciones: examinar, ilustrar u ornamentar. «Examinar» suele exigir una visualización más amplia y una explicación o pie de foto que dirija la atención al detalle relevante. «Ilustrar» a menudo puede ubicarse a un tamaño moderado cerca del párrafo que apoya. «Ornamentar» no cumple ninguna función informativa; considere omitirla o mantenerla visualmente discreta. Estas categorías son una herramienta de edición práctica, no una terminología impuesta por las fuentes.
Elija un tamaño según la importancia y el espacio disponible
Utilice la columna de texto del artículo como límite inicial. Una foto que abarca todo el ancho de la columna se percibe con facilidad y ofrece más espacio al contenido detallado; reserve ese tratamiento para aquellas imágenes cuya importancia justifique la pausa visual. Una foto más pequeña, alineada con la columna, puede respaldar un punto cercano sin competir con el encabezado ni con el texto. Evite elegir un tamaño solo porque el archivo original sea grande: las dimensiones mostradas deben adecuarse a la maquetación y a la información que los lectores necesitan ver.
He aquí un ejemplo ilustrativo de decisión, no una plantilla comprobada: supongamos que una columna de contenido de 700 píxeles de ancho incluye una foto que muestra un objeto de dos partes cuya diferencia es fundamental para el pasaje. Una visualización cercana al ancho completo de la columna puede facilitar la comparación. Si esa misma foto no es más que una ambientación general y el párrafo contiene la explicación, una visualización más estrecha puede preservar el protagonismo del texto. La cifra de 700 píxeles es simplemente un ejemplo de ancho de columna; no es un estándar recomendado.
Cuando una foto aparece junto al texto en una pantalla ancha, trate ambos elementos como una unidad combinada. Dé a la imagen el ancho suficiente para mostrar el tema y al texto el espacio necesario para que siga siendo cómodo de leer. Si alguno de los dos queda apretado, apílelos verticalmente en lugar de reducir la foto y comprimir el texto en una franja estrecha. En pantallas más pequeñas, una secuencia de una sola columna suele ser la disposición más clara: el texto, luego la foto relacionada y después el siguiente pasaje. La explicación del W3C sobre WCAG 2.2 Reflow describe cómo muchas páginas de artículos pueden adaptarse a una sola columna y explica el objetivo de evitar el desplazamiento bidireccional en el contenido de lectura común. También señala excepciones para contenidos cuyo significado o uso requiere una disposición bidimensional. La clave para la maquetación de un artículo es asegurarse de que la combinación de imagen y texto no obligue a los lectores a desplazarse lateralmente para seguir el texto.
Ubique cada foto donde su conexión resulte evidente
Coloque la foto cerca de la oración o el párrafo que explica su presencia. Si los lectores deben desplazarse a lo largo de varios párrafos no relacionados para encontrar la imagen, su vínculo puede resultar confuso. Del mismo modo, una foto grande insertada en medio del argumento de una oración puede interrumpir la lógica. Una ubicación limpia suele ser tras el primer pasaje que presenta el tema, o justo antes de un paso donde la imagen resulte necesaria.
Use un pie de foto cuando aporte algo específico: identificar el sujeto, señalar un detalle o explicar por qué la imagen es relevante. No use el pie de foto para repetir palabra por palabra la oración que lo rodea. Si la foto requiere una observación detenida, indique qué observar tanto en el texto cercano como en el pie de foto; los lectores no deberían tener que deducir el sentido únicamente a partir de su ubicación.
La relación entre una foto y su texto también importa para la lectura no visual. El Images Tutorial del W3C señala que las imágenes informativas necesitan alternativas de texto que transmitan su información esencial, mientras que las imágenes decorativas pueden usar una alternativa vacía para que la tecnología asistencial las ignore. La guía sobre imágenes informativas del W3C enfatiza que la alternativa debe expresar el significado de la imagen en contexto, y no limitarse a enumerar los objetos visibles. Como comprobación práctica, pregunte: si alguien no pudiera ver esta foto, ¿qué información se perdería? Incluya la información esencial en el texto del artículo y proporcione una alternativa de texto adecuada para la imagen. Si la imagen no aporta nada más allá del texto contiguo, repetir su descripción puede resultar innecesario.
Conserve la proporción útil de la foto
La relación de aspecto de una foto —la proporción entre su ancho y su alto— influye en el espacio que ocupa y en lo que permanece visible. Comience por encajar la foto completa dentro del área elegida. Recorte solo cuando el sujeto siga siendo claro y el encuadre no elimine detalles necesarios para el lector. Un recorte horizontal puede convenir a una imagen principal ancha; una imagen vertical puede funcionar mejor con un ancho más reducido dentro de la columna. Estas son decisiones de composición, no fórmulas fijas.
Si un recorte elimina contexto, altera el significado aparente o esconde un detalle analizado en el artículo, utilice otro encuadre o muestre las proporciones originales. En el caso de diagramas, etiquetas o documentos, compruebe el tamaño de visualización final: el texto integrado en una foto puede resultar demasiado pequeño para leerse. La guía de imágenes de GOV.UK desaconseja de forma general incluir texto dentro de las imágenes, ya que puede ser difícil de leer, copiar, redimensionar o procesar con lectores de pantalla; cuando el texto sea indispensable en la imagen, incluya también su significado en el contenido escrito adyacente.
Revise el diseño al tamaño que usan los lectores
Previsualice el artículo en un ancho de escritorio amplio y en un ancho de móvil estrecho. Asegúrese de que la foto no desborde la columna de texto, no tape el contenido ni deje el texto comprimido a su lado. Siga la secuencia de lectura desde el encabezado hacia el párrafo y luego hacia la foto: cuando el diseño se apila en vertical, la imagen debe seguir apareciendo cerca del pasaje que ilustra. Compruebe también los pies de foto y los detalles importantes de la imagen en el tamaño real de visualización.
En páginas web, el tamaño de visualización y el tamaño de archivo son decisiones independientes. Un archivo original grande puede ser necesario para una visualización amplia, pero enviar archivos de imagen innecesariamente pesados a pantallas pequeñas puede desperdiciar datos. La guía de responsive images de web.dev de Google explica cómo los navegadores pueden seleccionar entre distintos tamaños de imagen según las condiciones de visualización, y señala que no existe un número único y correcto de versiones de imagen. Esta es una orientación de implementación para la publicación web; no determina qué lugar corresponde a la imagen en el artículo.
Una secuencia rápida de decisión
Defina la función. ¿La foto está pensada para ser examinada, para ilustrar el texto o solo para decorar la página?
Localice su anclaje. Identifique el pasaje que la presenta o depende de ella, y coloque la foto junto a ese pasaje.
Ajuste el ancho de visualización. Conceda espacio suficiente a las pruebas clave; deje que una foto complementaria ocupe menos espacio si el detalle no es esencial.
Compruebe el recorte. Mantenga visibles el sujeto y todo el contexto relevante.
Lea la maquetación en voz alta y en orden. En una pantalla estrecha, confirme que el texto y la foto sigan apareciendo en un orden lógico y que el texto permanezca legible.
Describa la información. Añada un pie de foto cuando resulte útil y proporcione una alternativa de texto según la función de la imagen.
La regla práctica es simple: deje que la importancia determine el protagonismo visual, que el texto relacionado defina la ubicación y que la vista previa en pantallas estrechas revele si la disposición sigue funcionando. Si la foto resulta difícil de entender en el tamaño que eligió, amplíela, simplifique el recorte o explique el detalle relevante en el texto.