Tutorial de Imagify: cómo configurarlo y usarlo gratis
¿Te gustaría comprimir las imágenes en tu Worpress para mejorar el WPO? Aquí te traigo un plugin bueno, bonito y barato (e incluso gratis) que puedes usar para reducir su tamaño e incluso convertirlas a WebP.
Razones por las que me gusta tanto Imagify
Imagify es una herramienta desarrollada por WPMedia, los cuales son los mismo que WP Rocket, entre otros. Y me gusta mucho porque es un plugin muy fácil de usar, que ofrece una versión gratuita y su versión de pago es realmente económica.
Éste funciona comprimiendo las imágenes, lo que reduce su tamaño de archivo sin una pérdida notable de calidad.
Algunos de sus puntos fuertes son:
- Compresión Automática: Imagify permite comprimir imágenes automáticamente en diferentes niveles: ya sea con perdido o no de calidad. La compresión con pérdida reduce significativamente el tamaño del archivo sacrificando una mínima calidad de imagen, mientras que la compresión sin pérdida mantiene la calidad original pero con una reducción de tamaño menos notable.
- Compatibilidad con Diversos Formatos: Soporta formatos de imagen comunes como JPEG, PNG y GIF, y también es capaz de convertir imágenes a WebP para una mayor optimización.
- Mantiene la compresión: Si decides eliminar el plugin, las imágenes comprimidas se mantienen.
- Fácil de Usar: Imagify se integra fácilmente con sitios web, gracias a su plugin diseñado para Wordpress. En mi opinión, es mucho más fácil de manejar que Smush.
- Optimización Masiva: Permite la optimización masiva de imágenes, lo que es útil para sitios web existentes con muchas imágenes.
- Preservación de Datos EXIF: Ofrece la opción de mantener o eliminar los datos EXIF de las imágenes, que incluyen información como la ubicación de la foto, la cámara utilizada, etc.
- Backups de Imágenes Originales: Imagify ofrece la opción de guardar una copia de la imagen original, permitiendo restaurarla si es necesario.
- Planes de Precio: Tiene diferentes planes, incluyendo una opción gratuita con un límite mensual de compresión y planes pago.
Crear cuenta en Imagify
Para instalar Imagify en nuestro Wordpress lo primero que tenemos que hacer es crear una cuenta en la página oficial. Para ello accedemos a este enlace y buscamos el botón superior derecho llamado "GET STARTED":
En la siguiente pantalla debemos escoger el plan que prefiramos, si tienes pocas imágenes, una web pequeña o simplemente lo quieres probar, haz clic en la opción de "SIGN UP, IT'S FREE".
Con esto accederás a una pantalla en la que debes introducir tu correo, la contraseña y verificar dicha contraseña.
Tras esto, debes verificar tu correo ya que habrás recibido uno de Imagify dándote la bienvenida y solicitándote que verifiques tu cuenta.
Haciendo clic en este enlace pasarás a un panel que vamos a ver en más detalle.
Panel de Imagify
Una vez nos hemos dado de alta en Imaginfy podemos acceder a nuestra cuenta y visualizar un panel como el de abajo:
En la parte superior derecha, verás tu cuota de megas gastados así como los créditos disponibles. Así mismo, en la zona central tienes una pestaña llamada "IMAGE OPTIMIZATION" y otra "PAGE OPTIMIZATION". De las 2, vamos a centrarnos en la primera:
En la pestaña de Image Optimization puedes subir imágenes para comprimirlas mediante 2 formas:
- Lossless: método que comprime las imágenes sin ningún cambio visible. Según ellos, no aprovecharás al máximo la compresión de imágenes.
- Smart: método que comprime tus imágenes al máximo sin afectar a la calidad. Segun ellos, reduce el tamaño manteniendo el equilibrio entre calidad, rendimiento y aplicación.
Así mismo, en las opciones de salida (Output Options), tienes 2 posibles alternativas:
- Auto Convert PNG to JPEG: te permite convertir las imágenes de PNG a JPG.
- Resize images: te permite reescalar las imágenes. Si haces clic en esta opción se abrirá un menú secundario donde puedes especificar el alto y ancho nuevo, o un porcentaje de reducción.
No obstante, la gracia de esta herramienta es su integración para no tener que estar usando el entorno web por un lado y luego subirlo a tu Wordpress.
Te enseño a auditar tu web con Screaming Frog, para que identifiques y soluciones los problemas que están afectando tu SEO.
¡Comienza mi curso de Screaming Frog gratis hoy!
Cómo configurar Imagify
Para configurar el plugin de Imagify tenemos que ir a nuestro Wordpress > Plugins > Añadir nuevo plugin e introducir en el buscador Imagify. Tras ello, instalamos y activamos.
Para poder usar este plugin tenemos que ir ahora a Ajustes > Imagify.
Aquí nos pedirá introducir una API para poder usar el plugin (no te preocupes, que es muy sencillo).
Si todavía no has creado tu cuenta de correo tendrás que hacer clic en Crear una clave API gratuita.
En cambio, si ya has creado, debes acceder a tu panel de Imagify > al menu lateral derecho y en el desplegable que aparece, seleccionar la opción de API - Integration.
Copia la cadena que aparece y pégala.
Con esto ya tendrás Imagify integrado en Wordpress y ya podemos usarlo.
Ajustes Generales
Marca las opciones de Optimización automática de imágenes al subirlas y Backup de las imágenes originales. De esta forma, las imágenes se comprimirán automáticamente al subirlas y, de igual forma, las originales quedan bien guardadas por si las necesitas en un futuro (que nunca se sabe).
Así mismo, la opción de Compresión sin pérdida aparece desmarcada y te aconsejo mantenerla así ya que si lo haces, este tipo de compresión apenas tendrá un impacto positivo en tu web. Solo te recomiendo marcarlo si tu sitio es sobre el diseño gráfico o fotografía.
Antes permitía 3 tipos de compresiones: normal, agresive y ultra, pero ahora solo ofrece Smart o Lossless.
Optimización
Vamos ya con la optimización de las imágenes con Imagify, analizando cada unas de sus opciones:
FORMATO WEBP
Este módulo te permite convertir las imágenes subidas a WebP.
De hecho, si usas herramientas como Page Speed, verás que Google siempre te aconseja usar el formato Webp.
Te aconsejo usarlo ya que Google te lo recomienda incluso cuando la conversión queda más pesada que el jpg original. ¿Insistirá tanto porque este formato pertenece a Google? Mejor no opino.
En fin, te guste o no, te aconsejo convertir tus imágenes a webP.
Marca la casilla de Crear versiones WebP de las imágenes y Mostrar en el sitio las imágenes en formato WebP (para que las cree y las muestre). Tras ello debes elegir que método seguir:
- Usar reglas de rewrite: opción que añade reglas de rewrite al archivo de configuración de tu sitio (
.htaccess) pero sin alterar el código. Esta función no funciona con un CDN. - Usar las etiquetas <picture> tags: opción que reemplaza las etiquetas
<img>con etiquetas<picture>. Si la escoges, asegúrate de que tu tema no se ha roto, ya que no siempre, pero a veces pasa.
De las 2 opciones, yo te aconsejo la segunda pero eso sí, asegúrate de revisar tu tema y las clases definidas que tengas para la etiqueta html <img> (si esto último te suena chino es porque no habrás definido clases y te puedes olvidar de esto).
BIBLIOTECA MEDIOS
La opción de Redimensiona las imágenes más grandes te permite hacer las imágenes más pequeñas en caso de superar un límite. Este límite te lo marca como 2560.
En mi caso, yo lo he modificado a 2.048px ya que es el tamaño de imagen más grande que yo permite en mi Wordpress (teóricamente, pero la realidad es que no subo imágenes con un tamaño mayor al ancho de mi contenedor, que es 1.000px)
Por su parte, el apartado de Optimización de Archivos te permite escoger aquellos tamaños que Wordpress crea automáticamente para comprimirlos. Te aconsejo seleccionar todos.
CARPETAS PERSONALIZADAS (opcional)
La sección de Carpetas Personalizadas te permite especificar las carpetas con los elementos a comprimir. Yo he marcado la carpeta de mi tema Wordpress y la carpeta en la que se encuentran mis imágenes.
No obstante, esta sección es optativa por lo que no te sientas en la obligación de marcar nada.
Opciones de visualización
Esta sección existe simplemente para que puedas escoger o no la opción de ver en tu barra de herramientas el plugin de Imagify con el estado de tus créditos y sus opciones. Por defecto viene marcado pero lo puedes desmarcar si prefieres no verlo.
Ejecutar
Una vez marcadas y/o desmarcadas los checkbox solo nos queda darle a Guardar cambios o Guardar & Ir a optimización masiva, si prefieres que empiece ya mismo a comprimir las imágenes.
Resultado de usar Imagify en Wordpress
Una vez ha terminado el proceso de compresión de imágenes verás un panel como el mío de abajo en el que te indica un resumen con porcentaje optimizado y el tamaño comprimido:
Así mismo, si inspeccionamos las imágenes de nuestra web, veremos que ahora se está ofreciendo la versión webP:
Si has llegado hasta aquí… ¡Apúntate a mi Newsletter y sigue aprendiendo cada semana sobre SEO!
-
-
Sergio Canales dice: Hola Isabel!
En la versión 2.0 de Imagify, sacaron la opción de convertir a AVIF en lugar de Webp. Si la activas pasa a convertir a Avif pero si no, te la convierte a WebP.
Saludos!
-
Sergio Canales Deja una respuesta
Hola Sergio, soy Isabel de MS4.Buen tutorial, estoy en ello y tengo una duda: en Optimización- Formato de imagen de nueva generación, no sale el formato WebP si no que ahora te deja "crear versiones AVIF de las imágenes". ¿Las creo en AVIF o busco otro complemento para convertir a Webp? Muchas gracias de antemano, un saludo.