Take a fresh look at your lifestyle.

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

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

0 254

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.

¿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"

Cómo hacer un backup en WordPress

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-tamano-de-imagen-disponible-en-galeria

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.