Ajusta el tamaño de las imágenes de WordPress

El tamaño de las imágenes sí importa, si no me crees pregúntaselo a Google, si usas imágenes más grandes de lo que necesitas estás agregando tiempo de carga innecesario a tu sitio, y mayores tiempos de carga significa menor tasa de conversión y mayor porcentaje de abandono. Nadie quiere eso ¿verdad?.

En un mundo dominado por la navegación desde celulares, donde la mayoría de búsquedas se hacen desde estos dispositivos, la velocidad de carga adquiere una mayor relevancia. Recientes estudios muestran que si tu sitio demora más de 3 segundos en cargar, estás perdiendo el 53% de tus usuarios. Afortunadamente WordPress cuenta con herramientas que nos ayudan a cambiar el tamaño y el peso de nuestras imágenes.

Tutorial recomendado

Cómo optimizar WordPress y su velocidad de carga

Haz que tu sitio cargue más rápido para mejorar la experiencia de usuario y el posicionamiento en buscadores (SEO).

¡Quiero aprender!

¿Cómo cargar las imágenes del tamaño correcto?

Si estás usando la galería de WordPress, por defecto ya estás usando las nuevas características del atributo srcset, el cual permite servir diferentes versiones de nuestras imágenes dependiendo del tamaño de la pantalla del dispositivo(viewport).

Cuando insertas una imagen desde la galería el código tiene el siguiente aspecto:

srcset="https://www.tutopress.co/wp-content/uploads/2018/08/namecheap-buscador-1024x286.jpg 1024w, https://www.tutopress.co/wp-content/uploads/2018/08/namecheap-buscador-300x84.jpg 300w, https://www.tutopress.co/wp-content/uploads/2018/08/namecheap-buscador-768x214.jpg 768w, https://www.tutopress.co/wp-content/uploads/2018/08/namecheap-buscador.jpg 1373w"

Si te fijas bien el atributo srcset tiene varios tamaños de imágenes y seguido del url de la imagen tiene unos números que le indican cuando cargar cada imagen, por ejemplo la imagen: https://www.tutopress.co/wp-content/uploads/2018/08/namecheap-buscador-1024×286.jpg se va a cargar cuando el tamaño de la pantalla sea desde 1024w.

¿Cómo crear nuevos tamaños de imágenes en WordPress?

Existen plugins que hacen este trabajo en cuestión de un par de clics, uno de ellos es Simple Image Sizes. Para instalarlo solo tienes que entrar a tu administrador de WordPress e ir al menú Plugins>Añadir nuevo. Luego buscar Simple Image Sizes en la caja de búsqueda y hacer click en instalar y luego activar.

Para crear un nuevo tamaño de imagen haz clic en el menú Ajustes>Medios y podrás notar que hay unos tamaños que ya están definidos por WordPress(minuatura, medio y grande), a cada uno de ellos les puedes cambiar el tamaño al que mejor se adecue o puedes crear uno nuevo haciendo clic en el botón “Add a new size of thumbnail” y luego escribiendo un nombre en la caja de texto que aparece y validando si ya existe haciendo clic en el botón “Validate image size name”.

Creando nuevo tamaño de imagen en wordpress

Si el nombre del tamaño no está disponible, debes intentar con otro nombre.

Ahora debes escribir un ancho máximo y un alto máximo, para este ejemplo voy a usar un ancho máximo de 800px y un alto máximo de 600px. En public name voy a poner “Blog” y el Crop(recorte) lo voy a dejar en “No” para que se redimensione la imagen sin ser cortada. Hacemos clic en el botón “Validate” y si todo sale bien, el nuevo tamaño se va a pintar de color verde indicando que se creó correctamente el nuevo tamaño de imagen.

validar creación de nuevo tamaño de imagen

Ahora ya disponemos de un nuevo tamaño de imagen para insertar imágenes desde la galería de WordPress.

nuevo tamaño de imagen disponible en galería

Si quieres modificar el tamaño de las imágenes que ya habías subido antes para usarlas con el nuevo tamaño, debes ir de nuevo al menú Ajustes>Medios, hacer scroll hasta aajo y hacer clic en el botón “Regenerate Thumbnails”.

regenerar imágenes en wordpress

Para aprender cómo optimizar completamente tu sitio web para que cargue mucho más rápido, mira nuestro tutorial “Optimiza la velocidad de WordPress“. Si te gustó este artículo, compártelo en tus redes sociales y suscríbete a nuestro boletín para recibir actualizaciones.

Otras optimizaciones que debes implementar

Cagar imágenes del tamaño adecuado es solo la primera parte del problema, considera también estas optimizaciones que seguro harán que ti sitio web y la experiencia de usuario mejoren mucho:

Compresión de imágenes en WordPress

La compresión es la técnica por la cual mediante algoritmos de compresión digital se disminuye el tamaño o el peso de las imágenes sin afectar la calidad, actualmente existen muchos plugins para WordPress capaces de realizar esta optimización automáticamente como Ewww image optimizar, Smush, Robin e Imagify. Mira una lista completa de plugins gratuitos en el repositorio oficial de WordPress.

Existe la opción de hacerlo también con herramientas web como Tiny PNG, una herramienta gratuita y muy conocida para comprimir imágenes. Basta con arrastrar las imágenes hacia la herramienta y en un par de segundos tendrás tus imágenes comprimidas y listas para subir a WordPress. Haz clic aquí para acceder.

Si usas Photoshop, esta herramienta ya cuenta con un apartado dedicado para exportar las imágenes para web, tan solo debes hacer clic en Archivo > Exportar > Guardar para Web. Desde allí puedes seleccionar el tamaño, el formato y la calidad que mas se ajuste a tus necesidades.

Carga perezosa de imágenes en WordPress

Esta es una de las optimizaciones más importantes y más fáciles de implementar de todas. Básicamente la carga perezosa es la técnica de cargar únicamente las imágenes visibles por el usuario, es decir, las imágenes que no se están viendo no se cargan. También se puede ver como una carga de recursos bajo demanda.

Desde la versión 5.8 de WordPress, este poderoso CMS ya cuenta con carga perezosa de manera nativa, por lo que no deberías preocuparte si ya tienes actualizado tu WordPress.

Pero si quieres usar una solución basada en plugins, también hay muchas opciones disponibles como A2 Lay load, Autoptimize y muchas más. Si quieres implementar carga perezosa en WordPress te recomiendo que leas este artículo paso a paso.

Formatos de próxima generación

Los tradicionales formatos JPG y PNG están quedando atrás y ahora es más recomendable usar formatos como WebP. Este formato fue desarrollado por Google y promete mejor compresión, menores tamaños de archivos y soporte de canal alfa para fondos transparentes.

Definitivamente la mejor opción en cuanto a optimización de imágenes. Si quieres aprender a implementarlo sigue este tutorial paso a paso.

Como ves, las imágenes son un factor que siempre influye en la experiencia de usuario final y optimizarlas es de vital importancia.

Si te ha servido este artículo por favor compártelo y ayúdanos a crecer y a seguir ayudando a otras personas.


Deja una respuesta

Curso gratis

Crea landing pages que conviertan con WordPress y Elementor

Conoce el método para crear landing pages ilimitadas en menos de 15 minutos y sin ninguna limitación.

¡Quiero verlo!