Insertar imagen a una entrada o página

6.3 Insertar imagen a una entrada o página

Una vez que hemos comprendido cómo funciona la Biblioteca de medios de WordPress y hemos añadido nuestros archivos de imagen a la plataforma, el siguiente paso natural es aprender a insertar esas imágenes dentro de nuestras entradas y páginas. Este proceso es fundamental para crear contenido visual atractivo que capte la atención de los lectores y mejore la experiencia de usuario de nuestro sitio web. La inserción de imágenes no es meramente un aspecto estético, sino que también influye en el posicionamiento en buscadores y en la capacidad del contenido para comunicar ideas de manera más efectiva.

En WordPress, la inserción de imágenes se ha simplificado enormemente gracias al editor de bloques Gutenberg. Anteriormente, los usuarios necesitaban utilizar un botón específico o código HTML, pero ahora el proceso es accesible incluso para principiantes. Sin embargo, es importante entender todas las opciones disponibles para optimizar adecuadamente nuestras imágenes y asegurar que cumplan con estándares de accesibilidad web.

Acceso al editor de medios

Cuando estamos creando o editando una entrada o página en WordPress, disponemos de varias formas de acceder a la inserción de imágenes. La más directa es utilizar el bloque de imagen que podemos añadir desde el selector de bloques. Para ello, hacemos clic en el símbolo de más (+) en la zona de edición, buscamos el bloque denominado "Imagen" y lo seleccionamos. Este bloque nos ofrece un cuadro vacío donde podemos subir una imagen nueva o seleccionar una de la Biblioteca de medios.

Otra forma igual de válida es hacer clic en el botón de insertar medio que aparece en la barra de herramientas, aunque esta opción es más característica del editor clásico. En el editor de bloques actual, la inserción de imágenes se realiza principalmente a través del bloque de imagen dedicado, lo que proporciona mayor flexibilidad y control sobre el diseño responsivo de nuestras páginas.

Métodos de inserción

Una vez hemos accedido al bloque de imagen, contamos con dos opciones principales. La primera es subir una imagen nueva directamente desde nuestro ordenador. Para ello, hacemos clic en "Subir" y seleccionamos el archivo desde nuestros directorios locales. Este método es útil cuando no hemos preparado previamente la imagen o necesitamos hacer cambios de último momento.

La segunda opción es seleccionar una imagen de la Biblioteca de medios. Esta es la práctica recomendada cuando ya hemos subido las imágenes anteriormente, ya que evita duplicados y mantiene la Biblioteca organizada. Al hacer clic en "Biblioteca de medios", se abre una ventana que nos permite navegar por todas las imágenes que hemos subido anteriormente, filtrarlas por fecha o tipo de archivo, e incluso utilizar la búsqueda para localizar rápidamente una imagen específica.

Configuración de propiedades de la imagen

Una vez hemos seleccionado la imagen, aparecerá en el editor y podemos comenzar a configurar sus propiedades. En el panel derecho de WordPress, encontramos las opciones de tamaño, alineación y texto alternativo. El tamaño es crucial: podemos elegir entre minúscula, pequeña, mediana, grande o a tamaño completo. La elección dependerá del contexto de nuestra página y de cuánto espacio deseamos que ocupe la imagen.

La alineación permite posicionar la imagen a la izquierda, centro o derecha de nuestro contenido. Si elegimos alineación a los lados, el texto fluirá alrededor de la imagen, lo que puede mejorar significativamente la composición visual de la entrada. Sin embargo, debemos ser cuidadosos con este enfoque en dispositivos móviles, donde el espacio es limitado y el texto podría quedar ilegible.

El campo de texto alternativo (atributo alt) es de fundamental importancia para la accesibilidad web. Este texto se muestra cuando la imagen no puede cargarse y es leído por lectores de pantalla para personas con discapacidad visual. Debemos escribir una descripción clara y concisa de lo que contiene la imagen, evitando frases como "imagen de" o "foto de". Por ejemplo, en lugar de escribir "foto de reunión de negocios", es más apropiado escribir "Grupo de profesionales discutiendo estrategia de marketing en una sala de conferencias".

Ejemplo práctico: Insertar una imagen en una entrada de blog

Supongamos que estamos escribiendo una entrada sobre técnicas de marketing digital y deseamos incluir una imagen que muestre el proceso de atracción de clientes. Primero, accedemos al editor de la entrada y posicionamos el cursor en el lugar donde queremos que aparezca la imagen. Hacemos clic en el botón más (+) para añadir un nuevo bloque y seleccionamos "Imagen". A continuación, optamos por "Biblioteca de medios" y buscamos la imagen que previamente hemos subido con el nombre "marketing-embudo-conversion". Tras seleccionarla, elegimos tamaño grande para que sea claramente visible, alineación centro para que destaque, y escribimos en el texto alternativo: "Embudo de ventas mostrando las etapas desde atracción hasta conversión de clientes". Finalmente, guardamos la entrada y publicamos. El contenido ahora incluye una imagen clara, optimizada para accesibilidad y correctamente dimensionada.

Optimización para rendimiento y SEO

Aunque WordPress gestiona automáticamente ciertos aspectos de optimización de imágenes, es responsabilidad nuestra asegurar que nuestras imágenes estén correctamente optimizadas antes de subirlas. Las imágenes no optimizadas son una de las principales causas de bajo rendimiento en sitios web. Debemos asegurarnos de que nuestras imágenes tennga un tamaño de archivo razonable, generalmente menor a 500 kilobytes para imágenes de contenido regular.

Además del atributo alt, podemos añadir un título a la imagen. Este título aparecerá cuando los visitantes pasen el ratón sobre la imagen en los navegadores de escritorio. También podemos añadir una descripción o caption (pie de foto) debajo de la imagen, lo que proporciona contexto adicional al contenido.

Ideas clave

• Las imágenes se insertan en WordPress mediante el bloque de imagen del editor de bloques Gutenberg, accesible desde el selector de bloques
• Podemos subir imágenes nuevas o reutilizar imágenes de la Biblioteca de medios para mantener una estructura organizada
• El atributo texto alternativo (alt) es esencial para accesibilidad web y debe describir claramente el contenido de la imagen
• Las opciones de tamaño y alineación nos permiten adaptar la imagen al diseño de nuestra página, considerando especialmente la visualización en dispositivos móviles
• Es fundamental optimizar el tamaño de archivo de nuestras imágenes antes de subirlas para asegurar rendimiento rápido del sitio
• Los títulos y pies de foto proporcionan contexto adicional y mejoran la experiencia de usuario y el SEO del contenido