Los 5 mejores complementos de optimización de imágenes para WordPress

Publicado: 2022-09-14

¿Está buscando los mejores complementos de optimización de imágenes para WordPress? No busques más lejos. Hemos comparado las mejores herramientas disponibles en el mercado.

Las imágenes no optimizadas a menudo son responsables de la ralentización de un sitio web. Si ejecuta una auditoría de rendimiento a través de Lighthouse, es posible que tenga uno de estos problemas relacionados con la imagen:

Recomendación de Google para optimizar imágenes para su sitio web - Fuente: PageSpeed ​​Insights
Recomendación de Google para optimizar imágenes para su sitio web – Fuente: PageSpeed ​​Insights

Si ese es el caso, ¡entonces probablemente necesite un complemento de optimización de imágenes!

Hemos enumerado las funciones imprescindibles y realizamos pruebas de rendimiento comparativas para ayudarlo a elegir el mejor complemento de optimización de imágenes para su próximo proyecto.

¡Vamos a sumergirnos!

Qué significa la optimización de imágenes para el rendimiento

Optimizar el rendimiento de una imagen significa entregar imágenes de alta calidad en la dimensión, el formato y la resolución correctos, manteniendo el tamaño del archivo lo más pequeño posible. Puede optimizar las imágenes gracias a varios mecanismos, como la compresión, el cambio de tamaño, el almacenamiento en caché, la conversión a un formato de próxima generación o incluso la carga diferida.

Aquí hay un ejemplo de una imagen comprimida. Si bien el tamaño es más pequeño, la calidad se ve igual para el ojo humano. Eso es porque al optimizar una imagen, reduce su tamaño sin comprometer la calidad.

JPG originales JPEG comprimido
813KB 309 KB Impacto en la calidad: Ninguno

Las imágenes no optimizadas hacen que su sitio sea más lento y afectan las métricas clave de rendimiento, como su Core Web Vitals. Cuando una imagen es el elemento de pintura con contenido más grande, la optimización eficiente de esa imagen es crucial para mantener una buena puntuación de LCP. La pintura con contenido más grande mide la velocidad percibida de un sitio web completo, y supongo que desea causar una buena impresión en sus visitantes. Opte siempre por un complemento de WordPress optimizador de imágenes para ayudarlo en su proceso de optimización.

Cómo elegir el complemento optimizador de imagen correcto

Hemos elaborado una lista de verificación de optimización de imágenes que puede seguir todas las imágenes de su sitio de WordPress.

Las 14 funciones imprescindibles para un complemento de optimización de imágenes

Echemos un vistazo más profundo a las funciones imprescindibles para buscar al elegir un complemento de optimización de imágenes.

  1. Admite los formatos de archivo de imagen más populares: imágenes PNG, JPEG, GIF o WebP.
  2. Puede convertir sus imágenes a WebP. Este formato de próxima generación desarrollado por Google puede reducir el tamaño del archivo de imagen a un 35 % más pequeño que las imágenes JPEG y PNG sin afectar la calidad.
  3. Aplica la carga diferida en sus imágenes y videos para garantizar que solo se cargue primero el contenido de la mitad superior de la página.
  4. Tiene un proceso de compresión inteligente que marca las imágenes que se vuelven demasiado borrosas después de la optimización.
  5. Le permite optimizar las imágenes de manera eficiente según lo recomendado por Lighthouse para que pueda ver los resultados en la velocidad de su página y el rendimiento general.
  6. Ofrece varios niveles de compresión para ayudarlo a lograr el equilibrio perfecto entre el tamaño y la calidad del archivo. ¿Cómo verificar el nivel de compresión en un complemento? Deben tener características "con pérdida o sin pérdida".
  7. Conserva la calidad de la imagen: ¡la compresión no debe significar una imagen borrosa! Elija un complemento que equilibre la calidad y el rendimiento: una compresión automática, intuitiva e inteligente.
  8. Cambia el tamaño de sus imágenes sobre la marcha: asegúrese de que puede limitar una cierta altura y anchura, o al menos un porcentaje al subirlas a la biblioteca de WordPress.
  9. Ofrece optimización masiva para comprimir varias imágenes: si tiene un sitio de comercio electrónico con miles de imágenes, será una molestia comprimir todas esas imágenes a mano. Verifique que el complemento le permita comprimir varias imágenes a la vez.
  10. Optimiza imágenes en sus servidores: elige un complemento que use sus servidores, no los tuyos. Esto le ahorrará ancho de banda y almacenamiento.
  11. Tiene una interfaz intuitiva y rápida: desea un complemento fácil de usar que brinde opciones claras de optimización y realice todo el proceso en poco tiempo.
  12. Elimina metadatos innecesarios, por ejemplo, datos Exif que pueden estar presentes.
  13. Mantiene una copia de seguridad de sus imágenes originales: asegúrese de que sus imágenes comprimidas (y originales) no se eliminen después de la desactivación del complemento.
  14. Es compatible con cualquier CDN y puede distribuir sus imágenes aún más rápido a usuarios de todo el mundo.

Ahora que conoce las mejores funciones que debe tener un complemento de optimización de imágenes, veamos los mejores complementos disponibles en el mercado.

Los 5 mejores complementos de optimización de imágenes

Los cinco mejores complementos de optimización de imágenes que compararemos y probaremos son:

  1. imaginar
  2. Optimol
  3. Optimizador de imágenes de píxeles cortos
  4. Optimizador de imágenes EWWW
  5. Comprime imágenes JPEG y PNG con TinyPNG

¿De qué se trata la comparación?

Optimizaremos la imagen JPG de cada complemento a continuación (502 KB) y verificaremos cuántos KB guardamos. Al final, habrá una tabla que resuma todos los datos.

Imagen JPG no optimizada – Fuente: La biblioteca de WordPress

1. Imagify: el complemento optimizador de imágenes inteligente e intuitivo

¡Con más de 600 000 instalaciones activas, es uno de los complementos de optimización de imágenes más populares del mercado!

Características clave:

  • ¡Lo que hace que Imagify se destaque de los otros complementos de optimización de imágenes es la nueva función de compresión inteligente! Optimiza tus imágenes al máximo, por lo que no tienes que preocuparte por qué nivel de compresión es el adecuado para tus necesidades.
Nuevo proceso de compresión inteligente – Fuente: Imagify
  • Ofrece conversión WebP:
Función de conversión WebP – Fuente: Imagify

Desde la biblioteca de WordPress, puede ver que el WebP se genera automáticamente:

Biblioteca WordPress y generación WebP – Fuente: Imagify
  • Interfaz intuitiva y directa: la configuración es sencilla, y hay un botón final para hacer clic, ¡y el trabajo está hecho!
  • Admite muchos formatos de imagen , como PNG, JPG, GIF, PDF y WebP.
  • La optimización y el cambio de tamaño se realizan automáticamente al cargar o imágenes existentes que elija.
  • Conserva la calidad de la imagen gracias a Smart Compression.
  • Optimización única y masiva disponible para comprimir varias imágenes a la vez o elegir manualmente qué imágenes necesitan optimización en prioridad.
  • Posibilidad de elegir qué tamaños de miniatura optimizar .
  • Haga una copia de seguridad de la imagen original si es necesario (sus archivos originales no se eliminan).
  • La optimización se realiza utilizando los servidores de Imagify , no los suyos.
  • Aplicación web disponible si no es usuario de WordPress (las cuentas gratuitas tienen un límite de carga de tamaño de archivo de 2 MB).

Precios:

Gratis por 20 MB de datos por mes, el plan comienza en $ 4.99 / mes por 500 MB o $ 9.99 / mes para optimizaciones ilimitadas. Consulta el precio completo aquí.

Resultado de rendimiento de Imagine:

Imagify ayudó a reducir el tamaño de mi archivo de imagen en un 87,73 %. Pasó de 502 KB a 53,70 KB sin comprometer la calidad.

Smart Level ahorra casi el 90% de KB - Fuente: Imagify
Smart Level ahorra casi el 90% de KB – Fuente: Imagify

2. Optimole: carga diferida y distribución de CDN

Optimole viene con automatización completa y una gama de funciones de optimización con un sistema basado en la nube. Ofrece imágenes en tamaños más pequeños, sin comprometer la calidad, en todo tipo de dispositivo.

Características clave:

  • Interfaz minimalista y clara con dos pestañas: tablero y configuración.
Pestaña del panel de control de WordPress – Fuente: Optimole
  • Configuraciones regulares y configuraciones avanzadas:
Pestaña de configuración de WordPress – Fuente: Optimole
  • Conversión WebP y AVIF : de forma predeterminada, Optimole sirve imágenes en formato WebP para cada visitante que admita este formato.
  • Lazy-loading: Optimole aplica lazy-loading usando el atributo <link rel=”preload”> en las imágenes de su elección.  
  • Compresión de aprendizaje automático : los algoritmos proporcionan la optimización con pérdida o sin pérdida para obtener la imagen más atractiva en el tamaño más pequeño
  • Configuración receptiva: le permite elegir el tamaño de imagen correcto para el navegador y la ventana gráfica del visitante.
  • Compatibilidad con Cloud Library: descargue las imágenes de su sitio web directamente a Optimole Cloud (lo que significa que ahorra espacio de almacenamiento en su servidor)
  • Marca de agua: Optimole aplica una marca de agua en todas sus imágenes si eso es algo que necesita para su negocio.
  • Distribución de CDN: sirve imágenes de un CDN global de forma gratuita

Precios:

Con el plan básico, podrá optimizar una cantidad ilimitada de imágenes para hasta 5,000 visitas mensuales, luego deberá actualizar de acuerdo con los siguientes planes de precios:

Con el plan básico, podrá optimizar una cantidad ilimitada de imágenes para hasta 5,000 visitas mensuales, luego deberá actualizar de acuerdo con los siguientes planes de precios:

Resultado de rendimiento de Optimole:

Optimole redujo el tamaño de mi archivo de imagen en un 67%. Pasó de 502 KB a 164 KB. No puede ver la optimización en la biblioteca de WordPress porque está hecha en la nube: Optimole sirve directamente imágenes optimizadas a los visitantes en la interfaz.

Comprobando el nuevo tamaño de imagen con Optimole (164KB) - Fuente: Google Chrome Tools
Comprobando el nuevo tamaño de imagen con Optimole (164KB) – Fuente: Google Chrome Tools

3. ShortPixel: una interfaz elegante

ShortPixel es un complemento de optimización de imágenes fácil de usar que puede comprimir todas sus imágenes y documentos PDF con un solo clic.

Características clave:

  • Interfaz simple que ofrece botones rápidos para determinar el tipo de compresión, copias de seguridad y cambiar el tamaño de imágenes grandes.
Configuración general – Fuente: Tablero de WordPress de Shortpixel

Una pestaña "avanzada" proporciona todas las configuraciones de próxima generación que necesita para convertir imágenes a WebP o AVIF.

Configuración avanzada – Fuente: Tablero de WordPress de Shortpixel
  • Compresión masiva con un asistente muy útil en 4 pasos. Optimice de forma masiva todas las imágenes existentes en la biblioteca multimedia y en complementos de terceros como NextGen Gallery.
  • Admite todo tipo de imágenes (PNG, JPEG, etc.).
  • Opción para desactivar la optimización automática de imágenes al cargar.
  • No se utilizan créditos para las imágenes que están optimizadas menos del 5%.
  • Opción para escalar imágenes hacia abajo , con 2 opciones diferentes, que son útiles para imágenes grandes.
  • Integración con Cloudflare para distribuir imágenes más rápido en todo el mundo (necesitas tener tu CDN).

Precios:
ShortPixel proporciona 100 créditos de imagen gratis cada mes. Los planes mensuales o los créditos en efectivo están disponibles según lo que más le convenga. El primer plan comienza en $ 3.99 por 7,000 créditos de imagen.

Resultado de rendimiento de ShortPixel:

Shortpixel redujo el tamaño de mi archivo de imagen en un 66,95 % y lo convirtió a WebP. Pasó de 502 KB a 165 KB.

66,95 % de ahorro con ShortPixel - Fuente: ShortPixel WordPress Media Library
66,95 % de ahorro con ShortPixel – Fuente: ShortPixel WordPress Media Library

4. EWWW: optimizador de imágenes de WordPress gratuito y sin límites de tamaño de archivo

¡Con EWWW IO, puede optimizar todas sus imágenes existentes desde cualquier complemento! EWWW IO se encarga de cargar nuevas imágenes automáticamente. No necesitas hacer nada más.

Características clave:

  • Un asistente intuitivo que lo ayuda a configurar el complemento y elegir las opciones de optimización que necesita para su sitio web:
Asistente de EWWW - Fuente: panel de WordPress de EWWW
Asistente de EWWW - Fuente: panel de WordPress de EWWW
  • Convierte imágenes a WebP .
  • Sin límites de velocidad y tamaño de archivo ilimitado.
  • Aplique la carga diferida para aumentar el rendimiento de su sitio y cargue imágenes en la mitad superior de la página con prioridad.
  • Cambio de tamaño automático al cargar para evitar que se carguen imágenes grandes en la biblioteca de WordPress.
  • Agregue la dimensión faltante (ancho/alto).
  • Opciones de respuesta: detecta el tamaño de imagen correcto dentro del marcado de respuesta (srcset).
Opciones básicas de EWWW - Fuente: Panel de WordPress de EWWW
Opciones básicas de EWWW – Fuente: Panel de WordPress de EWWW

Precios:

El complemento principal es gratuito y ofrece un muy buen nivel de compresión. Sin embargo, en los servicios de pago, la compresión mejora. Los precios comienzan en $ 7 / mes para un sitio.

Resultados de rendimiento de EWWW:

Mi imagen pasó de 502 KB a 156,9 KB, lo que significa un ahorro del 69%.

Imagen más clara con EWWW - Fuente: La biblioteca de WordPress
Imagen más clara con EWWW – Fuente: La biblioteca de WordPress

5. TinyPNG – Optimización e Interfaz Básica

Este complemento optimiza automáticamente las imágenes al integrarse con los dos populares servicios de compresión de imágenes TinyJPG y TinyPNG.

Características clave:

  • Interfaz básica con configuraciones esenciales : no hay tantas opciones, pero el complemento se adhiere a lo básico y hace el trabajo con una página de configuración limpia. Solo me tomó unos segundos activar la configuración de mi elección y ejecutar el proceso de optimización automatizado:
Página de opciones básicas - Fuente: Tablero TinyPNG
Página de opciones básicas – Fuente: Tablero TinyPNG
  • Compresión de las nuevas imágenes en segundo plano y/o durante la carga.
  • Decide si quieres seleccionar las imágenes en la biblioteca de WordPress manualmente.
  • Fácil optimización masiva de su biblioteca de medios existente.
  • Optimización WebP .
  • Elija qué tamaño de imagen desea comprimir.
  • Establezca un ancho y alto máximos para cada imagen cargada.

Precios:

Con una instalación estándar de WordPress, puede realizar aproximadamente 500 compresiones cada mes de forma gratuita. Deberá actualizar si necesita optimizar más imágenes.

Resultados de rendimiento de TinyPNG:

El tamaño de mi archivo de imagen pasó de 502 KB a 160 KB, lo que significa un ahorro total del 61 %.

Resultados de rendimiento de TinyPNG – Fuente: La biblioteca de WordPress

La versión final de las pruebas

Imagine clientes potenciales con un 87,73 % de ahorro con respecto a la imagen original . Con respecto a los otros cuatro complementos de optimización, ¡la carrera está reñida! En promedio, los otros complementos de optimización brindan un ahorro similar (alrededor del 65%).

COMPLEMENTO OPTIMIZADOR TAMAÑO ORIGINAL TAMAÑO DEL ARCHIVO DESPUÉS DE LA OPTIMIZACIÓN PORCENTAJE DE OPTIMIZACIÓN TIPOS DE COMPRESIÓN
imaginar 502 KB 53.70KB 87,73 % Inteligente (con pérdidas)
Optimol 502 KB 164 KB 67 % con pérdida
Píxel corto 502 KB 165 KB 66,95 % con pérdida
Optimizador de imagen EWWW 502 KB 156,9 KB 69 % con pérdida
Comprime imágenes JPEG y PNG con TinyPNG 502 KB 160.2KB 61% con pérdida

El impacto de Imagify en el rendimiento

Imagify aumenta la velocidad de su sitio web literalmente en un par de clics. Gracias a su nueva compresión inteligente, es uno de los mejores complementos de compresión de imágenes que reduce el tamaño de archivo de sus imágenes sin comprometer la calidad. ¡En nuestra auditoría anterior, Imagify redujo el tamaño de nuestro archivo en un 87,73 %!

Ejecuto un estudio de caso que muestra cómo la optimización de imágenes aumenta el rendimiento y mejora la auditoría de Lighthouse. Creé una página web con imágenes JPG no optimizadas y comparé mis resultados antes y después de ejecutar Imagify.

Sitio de prueba con imágenes grandes no optimizadas

¡Vamos a divulgar los resultados en el móvil!

Memo para leer antes de comenzar la prueba de rendimiento: cuando se trata de optimización de imágenes, hay cuatro KPI principales para monitorear desde Lighthouse:

– Codificar imágenes de manera eficiente (comprimirlas y optimizarlas adecuadamente para la web)
– Servir imágenes en formatos de próxima generación (como AVIf o WebP)
– Codifique imágenes de manera eficiente (prepare sus imágenes para la web (con compresión y optimización)
– Tamaño de imágenes adecuado (optimizar imágenes para dispositivos móviles y de escritorio).

No Imagify – Informe de rendimiento y puntos destacados:

Sin Imagify, Lighthouse marca todas mis imágenes como no optimizadas con varias áreas de mejora:

Secciones de Oportunidades/Diagnósticos sin Imagify - Fuente: PageSpeed ​​Insights
Secciones Oportunidades/Diagnósticos sin Imagify – Fuente: PageSpeed ​​Insights

El rendimiento en sí tampoco es tan bueno. Obtuve un 74/100, principalmente debido a la falta de optimización de la imagen. La métrica de pintura con contenido más grande está en rojo con una puntuación de 7,5 s, y la primera pintura con contenido está en naranja.

Métricas de rendimiento sin Imagify - Fuente: PageSpeed ​​Insights
Métricas de rendimiento sin Imagify – Fuente: PageSpeed ​​Insights

Con Imagify – Informe de rendimiento y puntos destacados:

  • ¡La puntuación de rendimiento pasó de 74/100 a casi 90/100!
Métricas de rendimiento mejoradas con el nivel de compresión inteligente de Imagify - Fuente: PageSpeed ​​Insights
Métricas de rendimiento mejoradas con el nivel de compresión inteligente de Imagify – Fuente: PageSpeed ​​Insights
  • Mi FCP ahora está en verde y mi LCP está justo en el borde entre naranja y verde.
  • Imagify también corrigió varias advertencias de PSI, como "Servir imágenes en formatos de próxima generación: WebP", "Imágenes del tamaño adecuado" y "Codificar imagen de manera eficiente".
  • ¡Todas mis imágenes ahora están optimizadas!
Auditoría aprobada con Imagify - Fuente: PageSpeed ​​Insights
Auditoría aprobada con Imagify – Fuente: PageSpeed ​​Insights
Consejo profesional : Imagify no puede abordar todos los problemas de rendimiento señalados por PSI. Es posible que también necesite WP Rocket, uno de los mejores complementos de almacenamiento en caché, que puede ayudarlo, entre otras cosas, a retrasar y eliminar JS o CSS no utilizados.

Terminando

Según nuestra auditoría de comparación de rendimiento, Imagify es el complemento optimizador más inteligente e intuitivo de su sitio de WordPress. Nuestra imagen JPEG pasó de 502 KB a 53 KB (que es casi un ahorro del 80 %).

Gracias a su nuevo nivel de compresión inteligente, Imagify también ayudó a solucionar la mayoría de los problemas relacionados con las imágenes señalados por Lighthouse durante nuestra prueba de rendimiento:

Sección de Oportunidades/Advertencias – No Imagify Sección de Auditoría Aprobada – Con Imagine

El complemento optimizador de imágenes Imagify reduce el tamaño de los archivos de imagen sin perder calidad, hace que su sitio web se cargue más rápido, mejora su clasificación SEO y le permite ahorrar ancho de banda. ¿Por qué no le das una oportunidad a Imagine? Es gratis hasta 200 MB de imágenes al mes, y el único riesgo que corre es deleitar a sus visitantes ofreciéndoles imágenes más rápidas.