Un artículo sin imágenes recibe entre 2 y 3 veces menos interacción que uno con contenido visual. Las imágenes rompen los muros de texto, mantienen la atención y ayudan a explicar lo que es difícil transmitir solo con palabras. Además, las imágenes en los textos alternativos y los nombres de archivo atraen tráfico de búsqueda desde Google Imágenes; para un blog técnico, eso significa cientos de visitas extra al mes.

El editor Gutenberg (el editor de bloques de WordPress) trabaja con imágenes sin necesidad de ningún plugin. Cinco bloques integrados cubren todos los escenarios básicos: desde una sola imagen hasta galerías y portadas a pantalla completa con capas de texto. Pero los principiantes aún tienen dudas: qué bloque elegir, cómo alinear una imagen para que el texto no se rompa, cómo colocar dos imágenes una al lado de la otra o por qué necesitaría un filtro duotono.

A continuación, un desglose paso a paso de cada bloque con ajustes que las guías cortas no mencionan. Sin plugins, solo herramientas nativas de Gutenberg.

💡 Resumen rápido:

• Añada una sola imagen con el bloque «Imagen» y configure la alineación desde la barra de herramientas; para una imagen, eso basta
• Coloque una imagen junto al texto con el bloque «Medios y texto»; mantiene las proporciones de forma rígida, el texto no se superpone
• Ponga dos o más imágenes en fila con el bloque «Galería» y especifique el número de columnas; la cuadrícula se alinea automáticamente
• Superponga texto sobre una foto con el bloque «Portada», con filtros, superposición y efecto de paralaje opcional
• Active la caja de luz en los ajustes del bloque «Imagen»; la imagen se abre a pantalla completa sin recargar la página

Qué bloques de Gutenberg trabajan con imágenes

WordPress ofrece de serie cinco bloques relacionados con imágenes. Cada uno resuelve su propia tarea, no conviene confundirlos.

• Imagen (Image), una sola imagen con alineación, pie de foto, enlace, filtro duotono y ajustes de caja de luz. El bloque básico para cualquier artículo. Documentación
• Galería (Gallery), una cuadrícula de varias imágenes con ajustes de columnas. Sustituye a las galerías clásicas del editor antiguo y al shortcode [gallery]. Documentación
• Medios y texto (Media & Text), un bloque de dos columnas: imagen a la izquierda (o derecha), texto al lado. Una unión rígida sin desajustes al cambiar la resolución. Documentación
• Portada (Cover), una imagen de fondo con una capa de texto y botones encima. Puede configurar la superposición de color, la opacidad y el fondo fijo. Documentación
• Archivo (File), un enlace de descarga con una tarjeta. Para instrucciones en PDF y archivos comprimidos, no para mostrar una imagen en la página.

Los primeros cuatro son su arsenal principal. El bloque «Archivo» no se usa para ilustrar contenido, así que a continuación solo trataremos los bloques visuales.

Cómo añadir una sola imagen y configurar la alineación

El escenario más común: insertar una imagen en el texto y ajustar su posición respecto a los párrafos.

Haga clic en el botón «+» (añadir bloque) en la interfaz del editor y seleccione «Imagen». Aparece una ventana de carga; puede arrastrar un archivo desde su ordenador, seleccionarlo de la biblioteca de medios de WordPress o pegar una URL. Tras la carga, la imagen aparece inmediatamente en el editor y encima surge una barra de herramientas con botones de alineación.

Opciones de alineación disponibles:

• Alinear a la izquierda, la imagen se empuja a la izquierda, el texto fluye por la derecha
• Alinear al centro, imagen en el centro, texto arriba y abajo
• Alinear a la derecha, versión espejo de la alineación izquierda
• Ancho amplio, la imagen se extiende más allá de los límites del bloque de texto, pero no a pantalla completa
• Ancho completo, la imagen se estira de borde a borde del área de contenido

Los puntos azules en las esquinas de la imagen permiten redimensionar arrastrando, sin necesidad de calcular píxeles en CSS. En la barra lateral derecha (pestaña «Bloque»), puede configurar el texto alternativo para SEO y un enlace que los usuarios seguirán al hacer clic en la imagen.

Dos consejos que le ahorrarán tiempo. Primero: active la caja de luz (la opción «Ampliar al hacer clic» en los ajustes de enlace del bloque); al hacer clic, la imagen se abre a pantalla completa, el usuario no abandona la página. Segundo: el filtro duotono (icono de círculo en la barra de herramientas del bloque) cambia el esquema de color de la imagen sin Photoshop, útil cuando capturas de pantalla de distintas fuentes chocan visualmente. El filtro no modifica el archivo original en la biblioteca de medios, siempre puede restablecerlo.

Pero hay una trampa: «alinear a la izquierda» y «alinear a la derecha» funcionan bien solo cuando el texto es suficientemente largo. Si el párrafo es corto, la imagen «se sale» del flujo y el siguiente encabezado se superpone a ella. En esos casos, es mejor usar el bloque «Medios y texto».

Bloque «Medios y texto»: imagen y párrafo en un solo paquete

El bloque Media & Text fija rígidamente la proporción: mitad del ancho para la imagen, mitad para el texto. Sin desajustes al cambiar la resolución de pantalla.

Se añade igual: botón «+», busque «Medios y texto». Seleccione una imagen y escriba el texto en la columna adyacente. En la barra lateral, están disponibles estos interruptores:

• Intercambiar lugares (imagen a la izquierda o a la derecha)
• Modo a pantalla completa (estirar a todo el ancho disponible)
• Color de fondo para la mitad del texto

El bloque es especialmente cómodo para instrucciones paso a paso: captura de un ajuste a la izquierda, descripción de lo que sucede a la derecha. El lector no pierde la conexión entre texto e imagen al desplazarse.

En la práctica, Media & Text también ayuda en situaciones más prosaicas. Por ejemplo, insertó una captura con alineación izquierda y el siguiente H2 «chocó» con la imagen. Ya es tarde para cambiar la estructura del párrafo; envuelva la imagen y el texto en Media & Text, el problema desaparece en 10 segundos.

Cómo colocar dos o más imágenes una al lado de la otra con el bloque de galería

Si necesita mostrar una serie de capturas de pantalla o hacer una colección de fotos, use el bloque «Galería». A diferencia del antiguo editor clásico, donde la galería vivía como un shortcode [gallery] separado, Gutenberg la gestiona visualmente.

Añada el bloque «Galería», cargue las imágenes necesarias y se organizarán automáticamente en una cuadrícula. En los ajustes del bloque (panel derecho), seleccione el número de columnas: 2, 3, 4 o más. Para dos imágenes una al lado de la otra, establezca «2 columnas» y obtendrá una fila ordenada sin ajuste manual de tamaño.

Funciones adicionales del bloque de galería:

• Recorte de miniaturas, todas las imágenes se llevan al mismo tamaño, la cuadrícula se ve uniforme
• Configuración del espaciado entre imágenes
• Adjuntar un enlace a cada imagen por separado

Si el proyecto requiere una maquetación no estándar (imágenes de diferentes tamaños en una misma cuadrícula), las capacidades de la galería integrada podrían no ser suficientes. Entonces acude al rescate el bloque «Columnas» (Columns), dentro del cual se anidan bloques «Imagen» independientes con ajustes propios. Pero para escenarios típicos, las galerías de serie son suficientes.

Nota: no confunda el bloque «Galería» con varios bloques «Imagen» dispuestos en columnas. La galería recorta automáticamente las miniaturas, todas las imágenes se ven con la misma altura independientemente de las proporciones originales. Las columnas no hacen este ajuste: una imagen acaba más alta que otra y la fila «flota». Para una colección rápida de fotos, use galería; para una maquetación al píxel, use columnas.

Cómo superponer texto sobre una imagen con el bloque «Portada»

El bloque «Portada» es una imagen de fondo con una capa de texto. En esencia, un banner dentro del artículo. Se usa para dar formato a secciones del artículo, citas o conclusiones clave.

Seleccione el bloque «Portada», cargue una imagen e introduzca el texto directamente encima. En la barra lateral, puede configurar:

• Color de superposición, relleno semitransparente sobre la imagen, hace que el texto sea legible sobre cualquier fondo
• Opacidad, intensidad de la superposición desde apenas perceptible hasta casi sólida
• Fondo fijo, al desplazar la página la imagen permanece en su sitio (efecto de paralaje)
• Repetición de fondo, rellena el bloque con un patrón repetido, para texturas y ornamentos

El fondo fijo es una técnica popular en páginas de aterrizaje y portafolios de WordPress. Resulta vistoso, pero en dispositivos móviles el navegador suele desactivarlo por rendimiento. No cuente con ello como técnica principal para teléfonos.

El bloque «Portada» se anida dentro de otros bloques: dentro de columnas, grupos o filas. Y sobre la portada puede colocar no solo texto, sino también un botón: añada un bloque «Botones» dentro de la portada y obtendrá un banner de llamada a la acción con fondo listo. Todas las herramientas, sin CSS ni plugins adicionales.

Si la portada ralentiza la carga en móvil, desactive el fondo fijo y comprima la imagen a 200-250 KB. WordPress desde la versión 5.8 convierte automáticamente PNG y JPEG a WebP durante la carga, pero es mejor preparar la imagen de origen de antemano con TinyPNG o convirtiéndola a AVIF.

⁉️🤔 Preguntas frecuentes

¿Por qué el texto «salta» y choca con los bloques adyacentes después de añadir una imagen?

Esto sucede cuando la imagen está alineada a la izquierda o a la derecha y hay muy poco texto a su alrededor. Gutenberg no «apuntala» automáticamente la altura del bloque debajo de la imagen, depende del volumen de texto circundante. Solución: envuelva la imagen y el texto en un bloque «Medios y texto», que mantiene las proporciones de forma rígida. O añada otras 2 o 3 líneas de texto para que el ajuste de flujo funcione correctamente.

¿En qué se diferencia el bloque «Galería» de varios bloques «Imagen» colocados en columnas?

La galería proporciona una cuadrícula unificada con recorte automático de miniaturas; todas las imágenes se ven del mismo tamaño independientemente de las proporciones originales. Las columnas con imágenes separadas no hacen este ajuste: una imagen puede acabar más alta que otra y la fila «flota». Para una colección rápida de fotos, use galería; para una maquetación precisa al píxel, use columnas.

¿Puedo añadir texto alternativo para varias imágenes de una galería a la vez?

No, el bloque «Galería» no admite la edición masiva de textos alternativos. Cada imagen de la galería es un archivo multimedia independiente, y el texto alternativo se establece individualmente: haga clic en una imagen concreta dentro de la galería, vaya a la barra lateral y rellene el campo «Texto alternativo». O escriba el texto alternativo de antemano en la biblioteca de medios de WordPress; entonces se incorporará automáticamente al insertarla.

El bloque «Portada» ralentiza la carga de la página en móvil. ¿Cómo solucionarlo?

El fondo fijo (paralaje) es el principal culpable. Desactive la opción «Fondo fijo» en los ajustes del bloque y el navegador dejará de renderizar el efecto pesado durante el desplazamiento. Segundo paso, comprima la imagen de la portada a 200-250 KB: servicios como TinyPNG o la conversión a WebP/AVIF reducen el tamaño sin pérdida visible de calidad. WordPress 5.8+ convierte automáticamente PNG y JPEG a WebP durante la carga, pero es mejor preparar la imagen de origen de antemano.

¿Tiene sentido el bloque «Archivo» si solo quiero mostrar una imagen?

No. El bloque «Archivo» muestra un botón de descarga y el nombre del archivo, no la imagen en sí. Sirve para instrucciones en PDF, archivos ZIP, archivos CSV y otros documentos que el usuario deba guardar en su dispositivo. Para mostrar una imagen, use siempre el bloque «Imagen».

¿En qué se diferencia la caja de luz de Gutenberg de plugins de caja de luz como FooBox o Meow Lightbox?

La caja de luz integrada (la opción «Ampliar al hacer clic» en los ajustes de enlace del bloque «Imagen») funciona sin código adicional y no entra en conflicto con los temas; apareció en WordPress 6.4 a finales de 2023. Los plugins ofrecen más ajustes: visualización de galería con deslizamiento, efectos de atenuación, contador de imágenes. Si coloca 2 o 3 imágenes por artículo, la integrada es suficiente. Para galerías de fotos y portafolios, instale un plugin.

Qué bloque elegir para su tarea: resumen breve

Gutenberg cubre todos los escenarios básicos de trabajo con imágenes sin un solo plugin. Inserte una sola imagen con el bloque «Imagen» y no olvide el texto alternativo, ese es su principal activo SEO para Google Imágenes. Active la caja de luz: la función es gratuita y los lectores móviles se lo agradecerán.

Necesita un paquete rígido «imagen + texto», use «Medios y texto», no se descompone en ninguna pantalla. Serie de imágenes, «Galería» con ajustes de columnas, el recorte automático alineará todo en una línea. Texto sobre foto, «Portada» con superposición y paralaje opcional, y puede añadir un botón dentro para obtener un banner de llamada a la acción.

Dominar estos cuatro bloques es realista en 10-15 minutos en un artículo de prueba. Abra un borrador, arrastre bloques por el lienzo; la interfaz de Gutenberg está diseñada para el trabajo visual, no para el código. Si el próximo artículo sale con imágenes en lugar de un muro de texto, ya va por delante.