Hoy, desglosamos cómo agregar imágenes en WordPress y reducir su tamaño de archivo (para que sus páginas y publicaciones se carguen lo más rápido posible).
Cuando recién estás aprendiendo los fundamentos de cómo iniciar un blog , hay mucho que descubrir, 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 2023, 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, le mostraré cómo agregar imágenes en las publicaciones de WordPress, tanto en el Editor clásico (que prefiero usar) como a través de su Editor Gutenberg más nuevo.
Cómo agregar imágenes en WordPress y reducir el tamaño del archivo en 2023 (editores clásicos y de Gutenberg)Haz clic para twittear
Ahora, profundicemos en agregar imágenes a sus publicaciones de WordPress, al tiempo que reducimos el tamaño de archivo tanto como sea posible, para mantenerse en línea con las mejores prácticas de SEO y para que sus páginas se carguen lo más rápido posible.
Ahora rápidamente, antes de sumergirnos en este tutorial sobre cómo agregar imágenes a WordPress, le mostraré cómo reducir el tamaño de archivo de una imagen (ayudando a que sus publicaciones se carguen más rápido) en 2 sencillos pasos.
Instale el complemento (gratuito) de compresión de imágenes JPEG y PNG de Tiny PNG
Puede descargar el complemento gratuito Compress JPEG & PNG Images para WordPress aquí mismo desde la biblioteca de complementos de WordPress.
Alternativamente, también puede buscar el complemento e instalarlo directamente desde el menú de su complemento , 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 Compress JPEG & PNG Images, 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 por mes (que es mucho más de lo que probablemente necesitará) antes de tener que actualizar a un plan pago a $.009/imagen más allá de sus primeras 500 cada mes. Es una ganga seria y no encontrará un complemento de compresión mejor que le brinde más créditos gratuitos.
Sin embargo, si desea realizar la compresión de imágenes directamente en su propia computadora (ilimitada de forma gratuita), le recomiendo la aplicación ImageOptim .
Sube tus imágenes
¡Eso es! 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, analicemos exactamente cómo agregar imágenes a WordPress.
1. Agregar imágenes a las publicaciones en el editor clásico de WordPress
Si eres como yo y aún prefieres el diseño del editor clásico de WordPress para agregar/editar tus publicaciones, sigue aquí.
Por otro lado, si está utilizando el Editor Gutenberg más nuevo para el contenido de su publicación, vaya a la siguiente sección para ver ese tutorial. Si no está seguro de qué editor está utilizando, eche un vistazo a las capturas de pantalla de las imágenes a continuación y compárelas con el aspecto de su editor. ¿Quiere usar el Editor clásico, pero no está seguro de cómo obtenerlo? Tómese 2 minutos para instalar el Editor clásico en su blog de WordPress si desea seguir ese camino.
1. Abra la publicación a la que está agregando imágenes (y encuentre el lugar correcto)
Primero, deberá asegurarse de estar dentro de la publicación a la que desea agregar una imagen.
Luego, querrás mover 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 medios» en la parte superior de su editor
Ese botón se verá así aquí:
Una vez que haga clic en el botón «Agregar medios», 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 accederá 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 va a arrastrar un archivo de imagen desde su escritorio y cargarlo, puede omitir la pantalla «Cargar archivos» y pasar directamente a arrastrar la imagen y soltarla (hay una demostración de esto en el siguiente paso) .
4. Cargue su 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 ubicarlos en mi computadora), ya que es mucho más rápido.
Aquí hay una demostración rápida en video/GIF de cómo agregar una imagen desde su escritorio a WordPress:
Una vez que haya cargado su imagen, el complemento de compresión funcionará de forma mágica para ayudar a reducir el tamaño del archivo (detrás de escena).
Nota: antes de terminar las opciones de imagen y hacer clic en «Insertar en la publicación», querrá escribir un texto alternativo compatible con SEO para su imagen, algo que describa la naturaleza de lo que está ocurriendo en su imagen, e idealmente entrelazado en uno de las palabras clave de destino para las que espera que el artículo finalmente se clasifique (en los resultados de búsqueda orgánicos).
5. Seleccione sus opciones de imagen y haga clic en «Insertar en la publicación»
Finalmente, tendrá algunas opciones para definir su imagen. Esto incluye:
- Controlar la alineación de cómo aparece su imagen dentro de su publicación (siempre selecciono Alineación central)
- Hacer que su imagen enlace a otra página o publicación en su blog (o un enlace externo al que desea dirigir a los lectores)
- Tamaño de visualización (siempre recomiendo cargar a tamaño completo para evitar una pérdida en la calidad de la imagen)
Después de seleccionar estas opciones, estará listo para hacer clic en «Insertar en la publicación» y listo.
Ahora, volverás a la ventana de tu editor y verás la imagen que acabas de agregar justo allí donde la subiste.
Tenga en cuenta que todavía tiene algunas opciones de edición rápidas y fáciles si decide que desea cambiar algo con la visualización de su nueva imagen:
- Puede cambiar su tamaño manualmente agarrando una de las esquinas y arrastrándola hacia arriba o hacia abajo en tamaño
- Puede hacer clic en el centro de la imagen y arrastrarla dentro de su publicación para cambiar su posición.
- Siempre puede eliminar la imagen haciendo clic en «retroceso» o «eliminar» en su teclado y comenzar de nuevo
¡Y eso es! Has aprendido a agregar una imagen a WordPress con el Editor clásico.
2. Agregar imágenes a las publicaciones en el editor de WordPress de Gutenberg
En Gutenberg WordPress Editor, 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 profundicemos en agregar imágenes en Gutenberg.
1. Seleccione el icono «Agregar imagen»
Después de asegurarse de que está agregando una imagen en la ubicación correcta dentro de su publicación, seleccione el ícono «Agregar imagen». Se verá así aquí:
Una vez que haga clic en el ícono «Agregar imagen», tendrá algunas opciones sobre cómo puede agregar una imagen a su publicación.
2. Elija cómo agregará la imagen
En Gutenberg, tiene algunas opciones rápidas sobre cómo agregar una imagen en WordPress. Eso incluye:
- Cargar (que abrirá una pantalla de selección que le permite elegir el archivo de imagen de su computadora)
- Biblioteca de medios (que lo lleva a su biblioteca de imágenes existente, desde la cual también puede arrastrar y soltar una imagen)
- Insertar desde URL (si hay una imagen ubicada en algún lugar en línea que le gustaría importar, puede pegar ese enlace aquí)
3. Sube tu 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.
4. Configuración de imagen y opciones de edición rápida
Antes de continuar, querrá marcar la configuración de su imagen (según las mejores prácticas de SEO ).
Y al igual que con el Editor clásico, podrá definir muchas configuraciones y propiedades diferentes para una imagen. Con Gutenberg, se hace un poco diferente. En cambio, la configuración de su imagen se encuentra en la barra lateral derecha (después de hacer clic una vez en la imagen).
Así es como se ven esos ajustes:
Asegúrese de definir la configuración de su imagen para al menos estas dos propiedades:
- Escribir texto alternativo compatible con SEO que describa la imagen y se entrelace en una frase de palabras clave
- Tamaño de la imagen (siempre muestro las imágenes en 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 y 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) dentro de una publicación.
Después de hacer clic una vez en la imagen que desea reorganizar dentro de su publicación, verá las flechas «arriba» y «abajo» que aparecen junto a la imagen.
Ahora también aprendió cómo agregar una imagen a WordPress en el Editor de Gutenberg 🙂
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 su blog (y tanto en los resultados de búsqueda como en las plataformas de redes sociales cuando se comparte su contenido).
Por último, pero no menos importante, aquí se explica 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á una sección para agregar una imagen destacada. Haga clic en «Establecer imagen destacada» y accederá a la pantalla de carga de imágenes estándar donde puede agregar la imagen que desea que aparezca en la parte superior de su 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 de la derecha) así:
Bastante simple, ¿verdad?
Si seleccionó la imagen incorrecta (o desea realizar cambios más tarde), simplemente puede hacer clic en el texto «Eliminar imagen destacada» y tendrá la oportunidad de seleccionar o cargar una imagen diferente para que aparezca en su publicación.
Reflexiones finales sobre cómo agregar una imagen en WordPress
Agregar imágenes a sus publicaciones en WordPress no tiene por qué ser difícil.
Ya sea que esté utilizando el Editor clásico o Gutenberg para su blog, el equipo detrás de WordPress ha trabajado arduamente para que agregar imágenes sea un proceso muy fácil.
Si aún tiene problemas, envíeme un comentario al final de esta publicación y estaré feliz de ayudarlo a solucionar cualquier problema que tenga.
¡Eso es todo por hoy!
Acabamos de cubrir cómo agregar imágenes en WordPress 👏
Deja una respuesta