En esta guía te enseñaré cómo optimizar imágenes en WordPress. Tanto desde una aproximación manual como de una forma más automatizada.
La velocidad a la que carga tu WordPress es un aspecto fundamental dentro de la optimización web. Y las imágenes ocupan un papel importantísimo en esto.
Por suerte, es algo que podemos controlar e, incluso, automatizar.
Antes que nada deberás analizar tu web en busca de imágenes que optimizar…
Analiza tu web en busca de imágenes que optimizar
El primer paso es analizar tu web con alguno de los servicios más importantes que existen en el mercado.
- GTMetrix
- Pingdom Tools
- Google PageSpeed Insights
Dentro de toda la información que arrojan estos servicios (que vemos en detalle en el curso de velocidad en WordPress) encontrarás una lista de imágenes que puede ser optimizadas.
Mensaje de Optimizar imágenes de Google Page SpeedOptimizar imágenes en WordPress de forma manual
Siempre tenemos la aproximación manual. Es decir, que antes de subir cualquier imagen a WordPress la optimices con tu editor preferido.
Estos son los pasos que debes seguir.
Encuentra el tamaño máximo de las imágenes que mostrarás en tu web
Debes descubrir cómo de grandes podrían mostrarse las imágenes que subes a tu web. Lo normal (y “obligatorio”) es que tu web sea responsive, así que una misma imagen se verá en diferentes tamaños dependiendo del dispositivo.
Redimensiona tu navegador y fíjate en el punto en el que se produce un cambio en el tamaño de la imagen.
Redimensiona tu navegador hasta ver el cambio en la imagen – Fuente: GTMetrixMuchos themes tiene distintos puntos de corte en los que la imagen cambia de tamaño, así que asegúrate de que encuentras el de mayor tamaño de la imagen.
Cuando lo hagas, haz click con el botón derecho encima de la imagen y dale a “inspeccionar elemento” (el nombre puede variar de un navegador a otro).
Ahí verás la url de la imagen y, si pones el ratón por encima, te mostrará el tamaño.
Después de inspeccionar el elemento podrás ver el tamaño de la imagen en ese momento – Fuente: GTMetrixEl objetivo es que donde pone “Natural Size” salga el tamaño máximo necesario.
Redimensiona tu imagen al máximo que se vaya a mostrar
Así que, sabiendo el tamaño máximo que necesitas subir a tu web, ya puedes redimensionar la imagen utilizando algún servicio como el editor de fotos Adobe Spark gratuito, Photoshop, GIMP, Pixelmator, Canva o Youzign.
Después expórtala para web. Lo ideal sería:
- Exportar en JPG las imágenes coloridas y con muchos detalles
- Hazlo en PNG para logos e imágenes con pocos colores o transparencias
Comprime tu imagen
Aunque puedes comprimir imágenes con algunos de los editores que hemos comentado más arriba, no dan los mejores resultados. Así que te dejo un servicio fantástico para ello.
Con Optimizilla es tan sencillo como soltar las imágenesSólo tienes que soltar las imágenes en la caja para tal efecto y automáticamente te hará la compresión. Después puedes descargarlas una a una o todas de golpe.
Y listo, ya sólo te queda subir la imagen a WordPress.
Optimizar imágenes en WordPress con un plugin
Hay dos plugins que dominan el mercado de la compresión de imágenes en WordPress.
- Wp Smush
- EWWW Image Optimizer
Tanto Wp Smush como EWWW Image Optimizer te permitirán comprimir las imágenes que ya tengas subidas a la librería multimedia de WordPress.
Puedes hacerlo de golpe o una a una.
Una de las enormes ventajas de utilizar un plugin de optimización de imágenes es que, cada vez que subas una nueva, será comprimida automáticamente.
Optimizar imágenes con Wp Smush
Para comenzar a optimizar tus imágenes tienes que instalar el plugin Wp Smush desde el repositorio de plugins de WordPress.
Busca e instala WP SmushUna vez activado tendrás un submenú llamado WP Smush dentro del menú Medios.
WP Smush está dentro del Menú MediosAhora es el momento de comprimir todas tus imágenes de golpe. Sólo puedes optimizar un máximo de 50 cada vez que le des a Bulk Smush.
Dale al ‘Bulk Smush Now’ para comprimir todas las imágenes de golpe (de 50 en 50).
La compresión en proceso.En cuanto termine el proceso tendrás tus imágenes comprimidas y a partir de ese momento, todas las que subas se irán optimizando de forma automática.
Optimizar imágenes con EWWW Image Optimizer
Para empezar optimizar imágenes con EWWW Image Optimizer tienes que buscar el plugin en el repositorio de WordPress.
Una vez instalado y activado tendrás dos nuevos menús disponibles, uno para comprimir las imágenes y otro para configurar los ajustes del plugin.
2º Escanear imágenes no optimizadas
3º Empezar a optimizar imágenes encontradasAsí tendrás tus imágenes optimizadas.
Para tener más control sobre el tipo de compresión que se va a hacer y otros detalles del plugin, puedes ir al menú Ajustes > EWWW Optimizer.
En la versión gratuita podrás editar los ajustes básicos, los avanzados y los de conversión.
- En los ajustas básicos tienes opciones interesantes como la de eliminar los metadatos. Para que no nos ocupen espacio y desaparezcan tras la conversión.
- En los avanzados podrás elegir el nivel de compresión que deseas para tus imágenes.
- Y en los de conversión tendrás los ajustes para que cada vez que subas una imagen a WordPress, se comprima de forma automática.
Un plugin muy completo y con un nivel de personalización alto.
Conclusión
En esta completa guía hemos visto cómo comprimir imágenes para que estén optimizadas en nuestro WordPress.
Una aproximación manual (antes de subirlas a WordPress) y una automática (con WP Smush o EWWW Optimizer).
Lo importante es que las ventajas de hacer este proceso son enormes para tu web porque mejorará la velocidad de carga de la misma y beneficiará la experiencia de tus usuarios.
En el curso de velocidad en WordPress vemos este y otros muchos aspectos para optimizar el rendimiento y velocidad de nuestra web. Puedes apuntarte a ese y otros cursos, aquí.
