Cómo agregar imágenes correctamente en WordPress (paso a paso)

Publicado: 2023-08-03


¿Está buscando la forma correcta de agregar imágenes a su sitio web o blog de WordPress?

Al agregar imágenes en WordPress correctamente, puede mejorar el atractivo visual, la accesibilidad y el SEO de su sitio web. Incluso puedes permitir que los usuarios carguen sus propias imágenes y las utilicen en tu sitio o en tus concursos.

En este artículo, le mostraremos cómo agregar imágenes correctamente en WordPress.

Add images in WordPress properly

La importancia de subir correctamente imágenes en WordPress

A veces, los usuarios copian directamente una imagen de la fuente y la pegan en el contenido de su sitio web. Desafortunadamente, esto puede causar problemas como páginas lentas, mala experiencia de usuario y SEO deficiente.

Cuando agrega imágenes a su sitio web de WordPress, es importante hacerlo correctamente. Esto significa utilizar el formato de archivo, el nombre de archivo y el texto alternativo correctos.

Recomendamos nombrar sus imágenes con palabras descriptivas separadas por guiones. Por ejemplo, puedes utilizar el nombre de archivo 'bali-vacation-photo.jpg' para una imagen en tu blog de viajes.

Agregar imágenes correctamente también significa cambiar el tamaño de las imágenes para que se carguen rápidamente y se vean bien en todos los dispositivos. Por ejemplo, algunos formatos de imagen, como JPEG, están más comprimidos que otros, lo que significa que estas imágenes ocuparán menos espacio en su servidor y tardarán menos en cargarse.

Al utilizar estos formatos, junto con un complemento de compresión de imágenes para las imágenes de su blog de WordPress, puede mejorar la experiencia del usuario de su sitio web.

De manera similar, al utilizar el bloque Imagen en WordPress y optimizar adecuadamente sus imágenes para SEO y texto alternativo, puede facilitar que los motores de búsqueda indexen sus imágenes.

Esto puede aumentar la clasificación de su sitio web y mejorar la accesibilidad de su sitio web para personas con discapacidades.

Dicho esto, veamos cómo agregar imágenes correctamente en WordPress. Cubriremos varios métodos y puede utilizar los enlaces rápidos a continuación para ir a las diferentes secciones de nuestro tutorial:

Cómo agregar imágenes en el editor de bloques (Gutenberg)

Puede agregar imágenes fácilmente en el editor de bloques de WordPress utilizando el bloque Imagen.

Primero, debe abrir la página/publicación nueva o existente donde desea agregar una imagen.

Una vez que esté allí, haga clic en el botón '+' en la esquina superior izquierda de la pantalla para abrir el menú de bloqueo. Desde aquí, debes buscar y agregar el bloque Imagen a la publicación o página.

Add image block to the post

Una vez que haya hecho eso, haga clic en el botón "Biblioteca de medios" para iniciar el mensaje "Seleccionar o cargar medios" en la pantalla.

Desde aquí, puede cambiar a la pestaña "Cargar archivos" si desea cargar una imagen desde su computadora.

Sin embargo, si desea agregar una imagen de la biblioteca multimedia, también puede hacerlo cambiando a la pestaña "Biblioteca multimedia".

Select image from the media library

Al agregar una imagen, deberá agregarle texto alternativo en la columna de la izquierda. Este texto alternativo es crucial para el SEO de imágenes, ya que ayuda a los motores de búsqueda a comprender el contexto de la imagen. También permite que las personas con lectores de pantalla vean esta información sobre sus imágenes.

También puede agregar un título y un título que describan la imagen en la columna de la derecha. Los títulos son las descripciones de texto visibles de sus imágenes, mientras que el título aparecerá cuando un usuario pasa el mouse sobre la imagen.

Para obtener más detalles, es posible que desees consultar nuestra guía para principiantes sobre cómo agregar títulos a imágenes en WordPress.

A continuación, simplemente haga clic en el botón 'Seleccionar' para agregar la imagen a su página o publicación.

Fill in image details

Ahora que has subido una imagen, puedes personalizar aún más su tamaño, dimensiones, borde y estilo desde el panel de bloques de la derecha.

Para obtener más información, consulte nuestro tutorial sobre cómo agregar y alinear imágenes en WordPress.

Images settings in the block panel

Finalmente, haga clic en el botón 'Actualizar' o 'Publicar' para almacenar su configuración.

Ahora ha agregado correctamente una imagen en el editor Gutenberg.

Cómo agregar imágenes en el editor clásico

Si todavía estás usando el antiguo editor clásico en WordPress, puedes usar este método.

Primero, debe visitar la página o publicación donde desea agregar la imagen desde el panel de WordPress. Una vez que esté allí, simplemente haga clic en el botón "Agregar medios" para iniciar la biblioteca de medios.

Click the add media button

Después de eso, puede cambiar a la pestaña "Cargar archivos" para cargar una imagen desde su computadora.

Alternativamente, para agregar una imagen de la biblioteca multimedia, simplemente cambie a la pestaña "Biblioteca multimedia".

Upload image file in the classic editor

Al agregar una imagen, deberá agregar texto alternativo y un título. También puede agregar una descripción y un título si lo desea.

Simplemente puede describir la imagen para todas estas opciones. Esto ayudará a los motores de búsqueda a indexar su imagen y aumentará la visibilidad de su sitio web.

A continuación, continúa y haz clic en el botón "Insertar en la publicación".

Configure attachment details in classic editor

Ahora, la imagen se agregará a su publicación o página de WordPress.

Desde aquí, puede cambiar su alineación utilizando los iconos de alineación encima de la imagen. También puede editar aún más una imagen haciendo clic en el icono de lápiz.

Click the Pencil icon to edit an image

Esto abrirá el mensaje 'Detalles de la imagen' en su pantalla, donde puede cambiar el tamaño y agregar atributos de título de imagen, clases CSS, alineación y más.

Una vez que haya terminado, simplemente haga clic en el botón 'Actualizar' para guardar los cambios que realizó.

Edit image in the classic editor

Después de eso, simplemente haga clic en el botón 'Publicar' o Actualizar' para guardar su publicación.

Cómo agregar imágenes en la biblioteca multimedia

Si lo desea, también puede agregar directamente una imagen a la biblioteca multimedia. Tenga en cuenta que después de agregar una imagen a la biblioteca multimedia, aún deberá abrir una publicación o página e insertar el bloque Imagen.

Para agregar una imagen de la biblioteca multimedia, debe visitar la página Medios »Agregar nuevo desde el área de administración de WordPress.

Una vez que esté allí, haga clic en el botón 'Seleccionar archivos' para cargar una imagen desde su computadora. Luego, haga clic en el enlace 'Editar' al lado de la imagen.

Add Image in the media library and click the Edit link

Esto lo llevará a la página "Editar medios", donde puede comenzar cambiando el título de la imagen. Después de eso, puede agregar texto alternativo, un título y una descripción desplazándose hacia abajo.

Una vez que haya hecho eso, también puede hacer clic en el botón 'Editar imagen'.

Click the Edit Image button

Esto lo dirigirá a otra página, donde podrá recortar, escalar, rotar o voltear la imagen según su gusto. Para obtener instrucciones detalladas, consulte nuestra guía para principiantes sobre cómo realizar una edición básica de imágenes en WordPress.

Una vez que esté satisfecho, simplemente haga clic en el botón "Actualizar" para guardar los cambios.

basic editing features in WordPress

Esto lo llevará de regreso a la página 'Editar medios', donde deberá hacer clic en el botón 'Actualizar' nuevamente para almacenar su configuración.

Ahora ha agregado con éxito una imagen a la biblioteca multimedia.

A continuación, visite la publicación donde desea agregar esta imagen desde la barra lateral de administración de WordPress. Una vez que esté allí, haga clic en el botón '+' para agregar un bloque de imagen a la publicación.

A continuación, debe seleccionar el botón 'Biblioteca multimedia'.

Image block

Esto iniciará el mensaje "Seleccionar o cargar medios" en su pantalla, donde verá la imagen que cargó en la biblioteca de medios en la parte superior.

Al seleccionar la imagen, verá que su título, texto alternativo, título y descripción ya se han agregado desde la página de la biblioteca multimedia.

Ahora, simplemente haga clic en el botón 'Seleccionar' para cargar la imagen en el editor de bloques.

Add image from the media library

Finalmente, haga clic en el botón 'Publicar' o 'Actualizar' para almacenar su configuración.

Cómo optimizar una imagen para WordPress SEO

Una vez que haya agregado una imagen a una publicación/página, también es crucial optimizarla para los motores de búsqueda. Desafortunadamente, WordPress no ofrece funciones SEO avanzadas integradas para imágenes.

Aquí es donde entra en juego All in One SEO para WordPress (AIOSEO).

Es el mejor complemento SEO de WordPress del mercado que hace que sea muy fácil optimizar su contenido, incluidas las imágenes, para los motores de búsqueda.

Primero, necesitas instalar y activar el complemento AIOSEO. Para obtener más instrucciones, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Nota: AIOSEO también tiene una versión gratuita. Sin embargo, necesitará la versión pro del complemento para desbloquear la función Image SEO.

Tras la activación, deberá configurar el asistente de configuración.

Para obtener más detalles, consulte nuestra guía sobre cómo configurar correctamente All in One SEO para WordPress.

AIOSEO setup wizard

A continuación, dirígete a la página All in One SEO »Apariencia de búsqueda desde la barra lateral de administración de WordPress y cambia a la pestaña 'Imagen SEO'.

Después de eso, desplácese hacia abajo y haga clic en el botón "Activar SEO de imagen" para desbloquear la función.

Activating the Image SEO Module in AIOSEO

Ahora podrás ver la configuración de SEO de imágenes. Aquí, verá diferentes pestañas para el título, texto alternativo, leyenda, descripción y nombre de archivo.

Configurar títulos de imágenes automáticos

Una vez que cambie a la pestaña 'Título' en la página SEO de imágenes, puede comenzar creando un formato de título para sus imágenes utilizando etiquetas inteligentes.

Estas etiquetas inteligentes generarán automáticamente atributos de título para sus imágenes. Esto es lo que verá un visitante cuando pase el mouse sobre sus imágenes.

Por ejemplo, si desea que cada atributo de título de imagen utilice el título de la imagen y el título del sitio, puede agregar estas etiquetas inteligentes en el campo "Formato de título".

Add smart tags to configure title SEO

Después de eso, también puede habilitar la opción Eliminar puntuación si desea que AIOSEO elimine automáticamente algunos caracteres al crear un título de imagen a partir del nombre de archivo.

Por ejemplo, si usa guiones al guardar un archivo de imagen como "una imagen de ejemplo", puede elegir la opción "Guiones (-)" en la sección "Caracteres para convertir en espacios".

Una vez que hagas eso, AIOSEO eliminará automáticamente estos guiones y los convertirá en espacios, haciendo que el título de la imagen sea "una imagen de ejemplo".

Configure strip punctuation and casing options

Después de eso, desplácese hacia abajo hasta la sección "Carcasa".

Desde aquí, puede elegir una opción de mayúscula para su título. Recomendamos elegir mayúsculas y minúsculas en las oraciones o en los títulos para que los títulos sean más legibles.

Configurar etiquetas alternativas automáticas

Después de configurar los ajustes del título, cambie a la pestaña 'Etiqueta alternativa' desde la parte superior.

Desde aquí, puede utilizar las etiquetas inteligentes junto a la opción 'Formato de etiqueta alternativa' para generar automáticamente texto alternativo para todas sus imágenes.

Después de eso, también puede habilitar la configuración de puntuación de tira si desea que caracteres como guiones (-) o guiones bajos (_) se conviertan en espacios.

SEO settings for alt tags

De manera similar, si hay caracteres como números o signos más (+) que no desea que AIOSEO elimine al crear el texto alternativo, puede marcar las casillas de estas opciones en la sección "Caracteres que se deben excluir de la eliminación".

También puedes seleccionar una mayúscula para tu texto alternativo.

Configurar subtítulos y descripciones automáticos

Para generar subtítulos automáticos para sus imágenes, cambie a la pestaña 'Subtítulos'.

Desde aquí, asegúrese de que la opción 'Generar subtítulos automáticamente al cargar' esté habilitada. Luego puede seleccionar las etiquetas inteligentes que se utilizarán para generar títulos para sus imágenes.

Enable Captions toggle and configure its smart tags

A continuación, también puede utilizar la función de puntuación de tira para excluir o incluir caracteres en los subtítulos y elegir mayúsculas y minúsculas para ellos.

Una vez que haya terminado, debe cambiar a la pestaña "Descripción" en la parte superior.

Desde aquí, asegúrese de que la opción 'Generar descripción automáticamente al cargar' esté habilitada. También debe seleccionar las etiquetas inteligentes que desea utilizar para generar descripciones automáticas de imágenes.

Enable the Description toggle and configure its smart tags

A continuación, también puede utilizar la función de puntuación de tira para incluir/excluir caracteres como guiones bajos, apóstrofes o números en la descripción.

Después de eso, simplemente seleccione una carcasa para las descripciones de sus imágenes.

Strip punctuation and casing settings

Configurar nombres de archivos automáticos

Como mencionamos anteriormente, recomendamos darle a sus archivos de imágenes nombres de archivo compatibles con SEO. Puede hacer esto antes de cargar sus imágenes, o AIOSEO puede hacerlo automáticamente.

Una vez que cambie a la pestaña 'Nombre de archivo' desde la parte superior, notará que AIOSEO ya ha configurado la configuración de puntuación de la tira para usted.

Sin embargo, si hay más caracteres que desea que AIOSEO elimine de los nombres de archivos de sus imágenes al crear títulos o texto alternativo, puede escribir esos caracteres en el cuadro "Palabras para eliminar".

AIOSEO settings for Filename

Después de eso, también puede seleccionar una mayúscula para sus nombres de archivos.

Una vez que haya terminado, no olvide hacer clic en el botón "Guardar cambios" para almacenar su configuración.

Ahora ha optimizado con éxito sus imágenes para SEO y AIOSEO generará automáticamente títulos, texto alternativo, subtítulos y descripciones para todas sus imágenes.

Para obtener instrucciones más detalladas, consulte nuestra guía para principiantes sobre cómo optimizar imágenes para motores de búsqueda.

Bonificación: permitir a los usuarios cargar imágenes en WordPress

Es posible que también desee permitir que sus usuarios carguen sus propias imágenes en su sitio web de WordPress. Esto puede resultar útil si organiza un concurso o administra un sitio web de fotografía que acepta imágenes generadas por los usuarios.

Para ello, puede utilizar WPForms, que es el mejor complemento de formulario de contacto del mercado. Viene con un generador de arrastrar y soltar que hace que sea muy fácil crear cualquier tipo de formulario que desees, incluido un formulario de envío de imágenes.

Primero, deberá instalar y activar el complemento WPForms. Para obtener más detalles, consulte nuestras instrucciones sobre cómo instalar un complemento de WordPress.

Tras la activación, diríjase a la pantalla WPForms »Agregar nuevo desde el panel de WordPress para iniciar el creador de formularios.

Desde aquí, debe escribir un nombre para su formulario y luego hacer clic en el botón "Usar fragmento" debajo de la plantilla "Formulario de contacto simple".

Select contact form template

Esto cargará la plantilla de formulario en el generador de formularios, donde verá su vista previa a la derecha y los campos disponibles en la columna de la izquierda.

Desde aquí, continúe, arrastre y suelte el campo Carga de archivos en el formulario y haga clic en él para personalizar aún más su configuración.

Add file upload field

Desde aquí, puedes cambiar la etiqueta y descripción del campo e incluso especificar las extensiones permitidas.

Por ejemplo, si desea permitir solo archivos JPEG y PNG, debe escribir estas opciones en el campo "Extensiones de archivo permitidas". Recuerda separar cada extensión con una coma.

Después de eso, también puede configurar el tamaño máximo del archivo de imagen y la cantidad de cargas en la columna de la izquierda.

Configure field settings

Para obtener instrucciones más detalladas, es posible que desees ver nuestro tutorial sobre cómo permitir a los usuarios cargar imágenes en WordPress.

Una vez que haya terminado, simplemente haga clic en el botón "Guardar" para almacenar su configuración.

A continuación, abra la página/publicación donde desea agregar el formulario de carga de imágenes. Una vez allí, haga clic en el botón '+' en la esquina superior izquierda de la pantalla para abrir el menú de bloqueo.

Desde aquí, debe agregar el bloque WPForms a la página/publicación.

Locate and add the WPForms block

Simplemente elija el formulario de carga del archivo de imagen que creó en el menú desplegable.

Finalmente, haga clic en el botón 'Actualizar' o 'Publicar' para almacenar su configuración. Ahora puede visitar su sitio de WordPress para ver el formulario en acción y los visitantes podrán enviar sus imágenes utilizando el formulario.

Esperamos que este artículo te haya ayudado a aprender cómo agregar imágenes correctamente en WordPress. Es posible que también desee ver nuestra guía para principiantes sobre cómo cambiar la altura y el ancho del bloque en WordPress, y nuestras selecciones de expertos sobre los mejores temas de WordPress para diseñadores gráficos.

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en vídeo de WordPress. También puedes encontrarnos en Twitter y Facebook.