Cómo Agregar Imágenes en WordPress en 2022UN Tutorial sobre Agregar Imágenes en los editores Classic y Gutenberg (+ Reducir el tamaño del archivo)

Hoy, desglosamos cómo agregar imágenes en WordPress y reducir el tamaño de su archivo (para mantener sus páginas & las publicaciones cargándose lo más rápido posible).

Cuando estás aprendiendo los fundamentos de cómo iniciar un blog, hay mucho que resolver, lo entiendo. Hemos hablado sobre cómo cambiar el tamaño de la fuente, cambiar el color de la fuente, hacer un enlace en el que se pueda hacer clic y mucho más aquí.

La buena noticia es que en 2022, es muy fácil aprender a agregar imágenes en WordPress con todas las actualizaciones y mejoras de usabilidad que han visto en la última década.

En este tutorial rápido, te mostraré cómo agregar imágenes en publicaciones de WordPress, tanto en el Editor Clásico (que prefiero usar) como a través de su nuevo Editor Gutenberg.

Ahora, vamos a sumergirnos en agregar imágenes a tus publicaciones de WordPress, al mismo tiempo que reducimos el tamaño de sus archivos tanto como sea posible, para estar en línea con las mejores prácticas de SEO y para mantener tus páginas cargándose lo más rápido posible.

Cómo Agregar Imágenes WordPress (y Reducir el Tamaño del Archivo) en 2022

1. Agregar Imágenes a Publicaciones en el Editor Clásico de WordPress
2. Agregar Imágenes a Publicaciones en el Editor de WordPress de Gutenberg
3. Agregar una imagen destacada a una publicación en WordPress

Ahora rápidamente, antes de profundizar en este tutorial sobre agregar imágenes a WordPress, le mostraré cómo reducir el tamaño del archivo de una imagen (ayudando a que sus publicaciones se carguen más rápido) en 2 sencillos pasos.

Instale el Plugin Comprimir imágenes JPEG& PNG (Gratis) de Tiny PNG

Puede descargar el plugin de imágenes PNG Comprimir JPEG & gratuito para WordPress aquí mismo desde la biblioteca de plugins de WordPress.

Alternativamente, también puede buscar el complemento e instalarlo directamente dentro de su menú de complementos, accesible en el lado izquierdo de la sección de administración de su blog aquí, o consulte este tutorial rápido sobre cómo instalar un complemento de WordPress:

Una vez que haya instalado el complemento Comprimir imágenes JPEG & PNG, cada nueva imagen que cargue en su blog de WordPress se optimizará automáticamente y el tamaño del archivo se reducirá tanto como sea posible sin comprometer la calidad de su imagen.

Nota: Este es el mejor complemento de compresión de imágenes del mercado, con diferencia. Permite hasta 500 compresiones de imágenes gratuitas al mes (que es mucho más de lo que probablemente necesitará) antes de tener que actualizar a un plan de pago a $.009 / imagen más allá de sus primeros 500 cada mes. Es una ganga seria y no encontrarás un complemento de compresión mejor que te dé más créditos gratuitos.

Sin embargo, si desea hacer compresión de imágenes directamente en su propio ordenador (ilimitada de forma gratuita), le recomiendo la aplicación ImageOptim.

Sube tus Imágenes

¡Eso es todo! En serio, es así de fácil.

Una vez que haya instalado el complemento de compresión en su blog, o haya comprimido imágenes individuales en su computadora primero, estará listo para cargarlas en sus publicaciones o páginas en WordPress.

Ahora, profundicemos exactamente en cómo agregar imágenes a WordPress.

1. Agregar Imágenes a Publicaciones en el Editor de WordPress Clásico

Si eres como yo y aún prefieres el diseño del Editor de WordPress Clásico para agregar/editar tus publicaciones, sigue aquí.

Por otro lado, si estás usando el nuevo Editor de Gutenberg para el contenido de tu publicación, salta a la siguiente sección para ese tutorial. Si no está seguro de qué editor está utilizando, eche un vistazo a las capturas de pantalla de la imagen a continuación y compárelas con el aspecto de su editor. ¿Quieres usar el Editor Clásico, pero no estás seguro de cómo obtenerlo? Tómate 2 minutos para seguir el sencillo tutorial de Yoast sobre la instalación del Editor Clásico en tu blog de WordPress.

1. Abra la Publicación a la que está Agregando Imágenes (y Encuentre el Lugar Correcto)

Primero, deberá asegurarse de que está dentro de la Publicación a la que desea agregar una imagen.

Luego, querrás navegar con el cursor hasta el lugar exacto dentro de tu publicación en el que deseas agregar la imagen.

2. Haga clic en el botón» Agregar contenido multimedia » en la parte superior de su Editor

Ese botón se verá así aquí:

Una vez que haga clic en el botón «Agregar contenido multimedia», se le presentará la pantalla donde puede cargar su archivo de imagen.

3. Haga clic en»Cargar archivos»

Haga clic en la pestaña «Cargar archivos» y se le llevará a la pantalla donde puede usar la herramienta de selección para elegir un archivo de imagen desde donde se encuentra en su computadora.

Alternativamente, si arrastrará un archivo de imagen desde su escritorio y lo cargará, puede omitir la pantalla» Cargar archivos » y simplemente pasar directamente a arrastrar la imagen y soltarla (hay una demostración de esto en el siguiente paso).

4. Carga tu archivo de imagen

Prefiero arrastrar archivos de imagen desde mi escritorio y soltarlos en el cargador de archivos (en lugar de usar el selector para localizarlos en mi computadora), ya que es mucho más rápido.

Aquí hay una demostración rápida de video / GIF de cómo agregar una imagen desde su escritorio a WordPress:

Una vez que haya subido su imagen, el complemento de compresión funcionará su magia para ayudar a reducir el tamaño del archivo (entre bastidores).

Nota: Antes de terminar tus opciones de imagen y hacer clic en «Insertar en la publicación», querrás escribir un Texto alternativo amigable para SEO para tu imagen, algo que describa la naturaleza de lo que está sucediendo en tu imagen, e idealmente entretejer una de las palabras clave objetivo por las que esperas que el artículo finalmente se posicione (en los resultados de búsqueda orgánicos).

5. Seleccione Sus Opciones de imagen y Haga clic en»Insertar en publicación»

Finalmente, tendrá algunas opciones para definir para su imagen. Esto incluye:

• Controlar la alineación de cómo aparece tu imagen dentro de tu publicación (siempre selecciono Alineación central)
• Hacer que tu imagen se enlace a otra página o publicación en tu blog (o un enlace externo al que quieras dirigir a los lectores)
• Tamaño de pantalla (Siempre recomiendo cargarla a tamaño completo para evitar una pérdida de calidad de imagen)

Después de seleccionar estas opciones, ya está listo para hacer clic en «Insertar en la publicación» y listo para comenzar.

Ese botón estará justo aquí en la esquina inferior derecha de la pantalla:

Ahora, serás llevado de vuelta a la ventana de tu editor y verás la imagen que acabas de agregar justo ahí donde la subiste.

Tenga en cuenta que todavía tiene algunas opciones de edición rápidas & fáciles si decide que desea cambiar algo con la visualización de su nueva imagen:

• Puede redimensionarla manualmente agarrando una de las esquinas y arrastrándola hacia arriba o hacia abajo en tamaño
• Puede hacer clic hacia abajo en el centro de la imagen y arrastrarla dentro de su publicación para reposicionarla
• Siempre puede eliminar la imagen haciendo clic en «retroceso» o «eliminar» en su teclado y comenzar de nuevo

¡eso! Has aprendido a agregar una imagen a WordPress con el Editor Clásico.

2. Agregar Imágenes a Publicaciones en el Editor de WordPress de Gutenberg

En el Editor de WordPress de Gutenberg, sus opciones de edición de publicaciones se verán muy diferentes a las que verá en el Editor Clásico.

Gutenberg adopta un enfoque de agregar/editar contenido a través de un sistema de «bloques» como bloques de texto, bloques de encabezado, bloques de imagen, etc. Así que vamos a sumergirnos en la adición de imágenes en Gutenberg.

1. Selecciona el icono «Agregar imagen»

Después de asegurarte de que estás agregando una imagen en la ubicación correcta dentro de tu publicación, selecciona el icono «Agregar imagen». Se verá así aquí mismo:

Una vez que haga clic en el icono «Agregar imagen», tendrá algunas opciones para agregar una imagen a su publicación.

2. Elige Cómo agregarás la imagen

En Gutenberg, tienes algunas opciones rápidas para agregar una imagen en WordPress. Eso incluye:

• Cargar (que abrirá una pantalla de selector que le permite elegir el archivo de imagen de su computadora)
• Biblioteca multimedia (que lo lleva a su biblioteca de imágenes existente, desde la que también puede arrastrar & soltar una imagen)
• Insertar desde la URL (si hay una imagen ubicada en algún lugar en línea que desea importar, puede pegar ese enlace aquí)

Aquí hay una instantánea de esas opciones (personalmente, simplemente hago clic en «Cargar» y tomo rápidamente la imagen que quiero de mi escritorio):

3. Suba su imagen

Una vez que haya seleccionado la imagen que desea cargar, simplemente haga clic en el botón «Abrir» y se agregará a su publicación.

Ahora que ha agregado la imagen, aparecerá una miniatura más pequeña como un nuevo bloque dentro de su publicación.

Aquí hay una captura de pantalla de cómo se verá eso:

4. Configuración de imagen & Opciones de edición rápida

Antes de seguir adelante, querrá que se marquen los ajustes de imagen (según las mejores prácticas de SEO).

Y al igual que con el Editor Clásico, podrá definir una gran cantidad de configuraciones y propiedades diferentes para una imagen. Con Gutenberg, se hace un poco diferente. La configuración de la imagen se encuentra en la barra lateral derecha (después de hacer clic por primera vez en la imagen).

Así es como se ven esos ajustes:

Asegúrese de definir la configuración de la imagen para al menos estas dos propiedades:

• Escribir texto alternativo amigable para SEO que describa la imagen y se entreteje en una frase de palabra clave
• Tamaño de imagen (siempre muestro imágenes a tamaño completo para evitar una pérdida de calidad)

También puede hacer clic en la configuración de «Estilo» para agregar un estilo más matizado & funciones de recorte integradas con Gutenberg.

5. Mover imágenes dentro de una publicación a través de Gutenberg

Un efecto secundario muy interesante del enfoque del editor de Gutenberg en torno al uso de» bloques » de contenido es la facilidad con la que puede mover sus imágenes (o cualquier bloque de contenido, para el caso) dentro de una publicación.

Después de hacer clic una vez en la imagen que desea reorganizar dentro de su publicación, verá que las flechas «arriba» y «abajo» aparecen justo al lado de la imagen.

Haga clic en esas flechas para mover su imagen hacia arriba o hacia abajo dentro de su publicación, de esta manera:

¡Y eso es todo! Puedes irte.

Ahora has aprendido a agregar una imagen a WordPress en el editor de Gutenberg también 🙂

3. Agregar una imagen Destacada a una publicación en WordPress

Las imágenes destacadas son esenciales en un blog de WordPress, porque son las imágenes que se muestran en la parte superior de las publicaciones de tu blog (y tanto en los resultados de búsqueda como en las plataformas de redes sociales cuando se comparte tu contenido).

Por último, pero no menos importante, te mostramos cómo agregar una imagen destacada a una publicación (o página) en WordPress.

Cerca de la parte inferior derecha de la ventana del Editor de WordPress, verás una sección para agregar una imagen destacada. Haz clic en «Establecer imagen destacada» y serás llevado a la pantalla de carga de imágenes estándar, donde puedes agregar la imagen que deseas que aparezca en la parte superior de tu publicación (también en los resultados de búsqueda y en las plataformas sociales).

Después de cargar la imagen que desea usar y hacer clic en «Establecer imagen destacada», volverá a la pantalla del editor y verá una pequeña miniatura de la imagen que se muestra en la parte inferior derecha (para confirmar que agregó la imagen derecha) de la siguiente manera:

Bastante simple, ¿verdad?

Si seleccionaste la imagen incorrecta (o quieres hacer cambios más tarde), simplemente puedes hacer clic en el texto «Eliminar imagen destacada» y tendrás la oportunidad de seleccionar o cargar una imagen diferente para que aparezca en tu publicación.

Reflexiones finales sobre Cómo Agregar una imagen en WordPress

Agregar imágenes a tus publicaciones en WordPress no tiene por qué ser difícil.

Ya sea que estés usando el Editor Clásico o Gutenberg para tu blog, el equipo detrás de WordPress ha trabajado duro para hacer que agregar imágenes sea un proceso muy fácil.

Si aún tienes problemas, envíame un comentario al final de esta publicación y estaré encantado de ayudarte a solucionar cualquier problema que tengas.

Eso es todo por hoy!

Acabamos de cubrir cómo agregar imágenes en WordPress

¿Te gusta lo que ves? Regístrate para obtener más tutoriales y consejos de blogging.

¿Quieres Más Tutoriales de Blogging?

Dirígete y echa un vistazo a mi guía definitiva para comenzar un blog y ganar dinero con él este año.