Imagify vs Kraken vs WP smush vs EWWW vs TinyJPG

Introducción

Uno de las principales causas por las que un sitio web puede cargar muy lento está ahí a la vista, y sin embargo resulta el culpable que mejor birla el radar cuando se trata de SEO: el peso (y tamaño) de las fotos e imágenes que publicamos. Los diseñadores se ocupan de que las imágenes sean poderosas y atractivas. Los administradores pegan fotos para vender sus productos y servicios, y cuanto más elocuente sea la imagen, mejor. ¿Pero quién se encarga de optimizar el peso pensando en su posterior bajada en el dispositivo del usuario de turno? Nadie. O casi.

Pensando en este gran problema que sucede a nivel generalizado, les propongo evaluar cinco programas que se han desarrollado para resolver esta dificultad por nosotros: Imagify, Kraken, WP Smush, EWWW y TinyJPG. Pero, primero, veamos algunos términos para poder entender mejor este análisis comparativo.

¿Qué es un bitmap?

Un bitmap o mapa de bits es exactamente el punto de este análisis: en otras palabras, se trata de una imagen o fotografía digital (compuesta por una cantidad determinada de píxeles cuyas medidas se escriben X píxeles x Y píxeles). Ejemplos de bitmaps son JPG, GIF y PNG, formatos ampliamente usados en cualquier website moderno.

Para los tests vamos a comprimir con cada plugin dos imágenes: una en JPG y otra en PNG.

JPG

Para esta nota, el archivo JPG objeto de estudio para evaluar el trabajo de cada uno de estos plugins tiene un tamaño de 1000×763 píxeles, y un peso de 289kb (lo que es bastante para una transferencia online, pues se suma este peso al resto de las imágenes, librerías CSS, JS y HTML). Buscamos una foto bastante detallada con el propósito de poder medir con precisión la pérdida de claridad o nitidez que significa comprimir la información de un mapa de bits.

PNG

El formato PNG, al igual que sucede con los GIFS, nos permite elegir cuántos colores deseamos en nuestro bitmap. Esto es realmente útil cuando lo que necesitamos publicar es un esquema, un gráfico, una infografía de pocos tonos. Está en la mano del diseñador gráfico (o del desarrollador avezado) comprender en qué casos conviene utilizar uno u otro formato, y, por supuesto, es obligatorio tener a mano un software que nos permita pre-optimizar un bitmap en uno u otro sentido, presentando un buen compendio de ajustes opcionales. Sin embargo, esa fase más artística o artesanal de la optimización excede el objeto del presente análisis. Basta saber que un PNG (mismo que un GIF) es un bitmap que permite paletas de colores optimizadas y, además, probablemente mucho más importante, transparencias. Esa es una de las razones fundamentales de su uso, pues permiten que nuestros logos o productos “floten” sobre un fondo perfectamente recortados.

Este es precisamente el caso de nuestro PNG objeto de estudio: un bitmap con transparencia, lo que volverá más interesante el resultado de los análisis. Sus medidas son 704 x 486 píxeles, y su peso es de 51KB.

Dicho esto, respondamos a la siguiente pregunta para familiarizarnos con otro concepto que vamos a emplear mucho en este análisis.

¿Qué es lossless? ¿Qué es lossy?

Cuando se trata de comprimir una imagen para aliviar su peso, existen dos dimensiones bien diferenciadas donde poder morder para ahorrar KBs. Una manera obvia es quitándole definición a la imagen: una imagen menos nítida resultará en una imagen menos pesada. Quitarle peso a una imagen afectando su calidad se denomina lossy (del inglés, loose, perder). Sin embargo, el método en donde se comprime la imagen sin afectar su calidad existe también, y a esto lo denominamos lossless (del inglés, sin pérdida). Es bueno que sepamos esto para poder decidir que tanto queremos ahorrarnos peso, y qué costo estamos pagando. Además, todos los plugins de este análisis nos permitirán elegir entre uno y otro modo.

Imagify

URL: https://es.wordpress.org/plugins/imagify/

Este plugin nos llega de las manos de los mismos desarrolladores que crearon el acelerador para WordPress llamado WPRocket, y es relativamente nuevo. Imagify, una vez instalado en nuestra plataforma WordPress, optimizará las imágenes ni bien las carguemos a nuestra biblioteca de medios según los ajustes previos (que podemos cambiar en cualquier momento). Para activar Imagify requerimos de una API, es decir una clave que obtendremos habiendo comprado el servicio. Al igual que las demás alternativas, disponemos de varios planes para elegir, variando estos en el límite de megas que se nos permitirá comprimir mensualmente. El plan más económico cuesta USD5 y nos habilitará el proceso de bitmaps hasta alcanzar los 1000 megas mensuales. Cabe aclarar que podremos probar Imagify gratuitamente creando una cuenta en https://imagify.io

Sus ajustes son sencillos (se encuentran en Ajustes » Imagify) y se resuelve en tres grandes posibilidades: compresión Normal, Agresiva y Ultra.

Como en el resto de los plugins, la compresión normal es la menos intrusiva. Se limita a comprimir los bitmaps sin pérdida de calidad, o método Lossless.

El ajuste Agresivo ya emplea compresión Lossy, es decir que intenta, con inteligencia artificial mediante, quitar definición en nuestros bitmaps allí donde el ojo probablemente no lo note (ejemplo: un cielo, una superficie más bien plana, algo poco detallado).

El ajuste Ultra es el que logra tamaños más livianos, pero el costo es una degradación más notoria de nuestros bitmaps.

Por lo demás, nos encontraremos con ajustes comunes al resto de los plugins a evaluar en este análisis: remover la información EXIF (son trozos de información adicional ocultos en los bitmaps, conteniendo, por ejemplo, la marca y los detalles técnicos de la cámara con que fue sacada una foto, la codificación de color, y demás data técnica concerniente al software empleado para desarrollar el bitmap y sus protocolos de compresión), y reajustar el tamaño de la imagen. Remover la información EXIF estará tildada por defecto y es bueno dejarlo como está (podemos espiar exactamente qué contiene oculto un bitmap con esta herramienta online https://www.get-metadata.com/). Para este test y en todos los casos, siempre vamos a optar por remover esa información.

Con respecto a reajustar el tamaño de la imagen, es útil cuando el bitmap posee un tamaño excesivo; esta opción cambiará el tamaño para coincidir con el margen máximo de nuestro template. En general no necesitaremos usarlo si hemos tenido el recaudo de no subir un bitmap de más de 1500 píxeles de ancho.

Resultados:

En el modo normal, nuestro JPG no ha variado mucho su tamaño: ha pasado de 289kb a 285kb, es decir que se redujo sólo un 1,45%. Esto es comprensible dado que el método normal emplea el método lossless, donde la definición de nuestro bitmap no se ha tocado un solo píxel.

Nuestro PNG, sin embargo, ha sido bendecido con una reducción del 33,31%. Su peso ha cambiado de 49,6KB a 33KB, sin haber perdido nada de definición en el camino.

Ya en el modo Agresivo, el JPG se redujo a 209KB, es decir que perdió unos buenos 80KB, lo que es decir bastante. En porcentajes, estamos hablando de casi un 30%.

Mientras tanto, el PNG sufrió una compresión de peso del 54,6%, quedando en apenas 22KB y sin que podamos notar ninguna diferencia en su definición. Es un excelente trabajo.

El modo Ultra nos devolvió un JPG de 167KB, muy potable para seguir mostrando una imagen de buen tamaño y calidad pero con 122KB menos que su peso original. La reducción fue del 42%, y apenas podemos notar una merma en la calidad gráfica.

El PNG, por su lado, fue reducido un 70%, quedando de unos poquitos 15KB (perdió 34,6 KB). No obstante, para un ojo clínico que busca el defecto, podemos comenzar a notar ciertos bordes aserrados que destacamos en la captura inferior (fíjense en la palabra “ajustar”).

Si no tuviéramos que compararlo con otros productos similares, podemos decir que Imagify es algo así como un milagro a la hora de comprimir imágenes. Pero no nos casemos todavía, que faltan 4 plugins más por evaluar.

Kraken

URL: https://kraken.io/

Toma su nombre de la criatura marina mítica, el leviatán que puede hundir un barco moviendo un tentáculo. Resta ver si su optimización está a la altura de semejante nombre.

Nuevamente, Kraken nos ofrece planes de acuerdo a la cantidad de megas que necesitamos optimizar por mes, siendo el plan más económico de (otra vez) USD5, pero por este dinero el plugin nos permite comprimir un tope de 500 megas, o sea, la mitad de lo que por el mismo dinero nos ofrece Imagify. ¿Valdrá la pena? Ya lo veremos.

Nuevamente requerimos de una API para activar el plugin de Kraken en nuestra plataforma de Wordpress, tras lo cual accederemos a Ajustes » Kraken.io para cambiar, si lo deseamos, los ajustes por defecto. El repertorio de opciones es grande, pero, honestamente, lo que nos interesa se remite al tipo de compresión, si deseamos preservar la información EXIF o no (siempre encontraremos activada por defecto la opción de quitar EXIF), y si necesitamos que Kraken cambie el tamaño de los archivos por nosotros.

Pero aquí encontramos una diferencia con respecto a Imagify: Kraken tiene dos alternativas al momento de comprimir nuestras imágenes, “Intelligent” Lossy o Lossless. Más fácil, quizás, tener que optar entre una y otra tecnología. O quizás no, para aquellos que deseen tener más control sobre la operación de optimizar.

Veamos qué sucede con nuestras imágenes modelo JPG y PNG.

Resultados

En nuestra experiencia, Kraken resulta más rápido a la hora de procesar un bitmap. Pero más rápido no significa mejor. Sin embargo, Kraken logró reducir un poquitín más nuestro JPG que Imagify en el mismo modo lossless. La reducción fue de un 2,40% (versus 1,45% en el caso de Imagify). No es tan notable en términos concretos de peso final, pero entre uno y otro plugin podemos decir que Kraken logró una merma de un 1% más.

El PNG sufrió una reducción de 38,67%, pasando de 49,6KB a 30,44KB (una diferencia de 19KB). Es, nuevamente, una reducción mayor a la de Kraken (que fue de 33,31%). Otra vez no podemos decir que sea tan notable esta diferencia de 5,36% entre uno y otro, pero Kraken hasta ahora se está llevando el primer puesto (veremos luego quién gana en la tabla final).

En el modo Intelligent Lossy, nuestro bitmap JPG fue reducido un 23,14%, perdiendo unos 67.06KB. Aquí resultó una compresión algo menor que la brindada por Imagify en su modo lossy agressive (donde fue de casi un 30% con 80KB menos). La calidad del bitmap, en una diferencia de casi 13kb entre Kraken e Imagify, no es notoria para nada. Podríamos aseverar que el JPG masticado con uno u otro programa es exactamente igual. Pero Kraken lo ha comprimido menos.

El PNG fue comprimido un 71.38%, pasando de 49,6KB a 14,2KB (perdió 35,4KB). La calidad del mismo es excelente y no podríamos decir que ha cambiado un pixel. Es un trabajo notable si lo comparamos con Imagify, donde la compresión Aggresive lossy nos había arrojado un 54,6% de compresión. Aquí tenemos una diferencia de 16,38% más de compresión a favor de Kraken. Es una diferencia grande.

¿Qué les parece si agregamos a un tercero en discordia? Con ustedes, WP Smush.

WP Smush

URL: https://es.wordpress.org/plugins/wp-smushit/

De antemano les comento que tuvimos sentimientos encontrados con este plugin tan popular. Aunque sin tope por megas procesados, su costo mensual es de USD49, lo que nos hace abrir grandes los ojos si nuestros requerimientos están por debajo de los 500 megas o el giga mensual. Además, si deseamos probarlo durante treinta días hay que crear una cuenta ingresando una tarjeta de crédito en wpmudev.org. Esto habilita la descarga de un paquete administrador de software de la mano de WPmuDev. El plugin en cuestión es “WPMU DEV Dashboard”, un escritorio propio para su exclusiva gama de productos, y debemos instalarlo en nuestra carpeta de plugins manualmente, o, caso contrario, darle privilegios a la compañía para que lo instalen por nosotros de manera automática (léase, compartiendo credenciales de acceso admin a nuestro sitio en WordPress).

Para poder evaluar WP Smush ingresamos el número de una tarjeta de crédito y, tras ésta ser aprobada, optamos por descargar el plugin y, vía FTP, subirlo al servidor de prueba. Activado el plugin WPMU DEV Dashboard, desde https://premium.wpmudev.org damos clic al botón “check status”, y entonces una serie de ventanas nos ofrecen servicios que probablemente no queremos en este momento (entre ellos, plugins de seguridad firewall, supuestos aceleradores para WP, verificadores de estado del sitio…). Finalmente, varios saltear mediante, veremos la opción de instalar WP Smush pro, y esta vez sí aceptamos para poder continuar con el test.

Tras esta odisea, encontramos a WP Smush pro en la ventana de plugins de nuestra plataforma Wordpress. Entrar por primera vez a sus ajustes activa una ventana emergente de configuración rápida. Las opciones podríamos decir que ya las conocemos: “smushear” automáticamente los bitmaps en la subida (obvio que sí), “super-smushear” las imágenes (usar modo lossy), “smushear” las imágenes originales que subimos (por defecto WordPress no se mete con ellas sino que crea copias), y preservar EXIF (por defecto y como dijimos, todos los plugins de optimización de imágenes borran esa información, y nosotros lo permitiremos).

En suma, podemos activar o desactivar el modo “super-smushear”, que implica activar o desactivar el modo lossy. Al igual que con Kraken, tenemos estas dos opciones nada más.

En las pruebas, Smush no resultó particularmente rápido al momento de hacer su trabajo. Pero veamos los resultados.

Resultados

Con el modo “super-smushear” apagado, nuestro JPG perdió apenas 4,2 KB (una reducción del 1,5% y comparable a Imagify en su modo normal/lossless).

El bitmap PNG, no obstante, fue comprimido un 35,8%, es decir que perdió 17,8 KB (pasó de 49,6KB a 31,8KB). Una media entre lo alcanzado por Imagify y Kraken en el mismo modo lossless (33,31% y 38,67% respectivamente).

Tras haber activado el modo “super smash” (lossy), el bitmap en JPG cambió su peso desde el tamaño original de 289KB a 145,6 KB, es decir que fue reducido a la mitad (exactamente, un 50,3%). Aquí lo que importa también es cuál fue el costo que hemos pagado en términos de nitidez, y entonces debemos reconocer que el JPG resultante es de una calidad extraordinaria, donde la diferencia de claridad de imagen es apenas visible para un Superman usando rayos X. Es evidente que los desarrolladores saben lo que hacen. Señores, estamos hablando de una merma del 50%, muy superior a los plugins evaluados hasta este momento en su modo lossy (recapitulando, con Kraken fue de 23,14%, mientras que Imagify en su modo ultra nos arrojó una compresión de 42%). Esto implica una distancia de casi el 10% con el mejor postor. Nos podemos sacar el sombrero.

Por su parte, el PNG pasó de 49,6KB a 34,4KB, lo que significa una merma del 69,4%. Sin bordes aserrados. Sin cambios discernibles. Otra vez, nos paramos para aplaudir. Smush Pro está a la cabeza. Por ahora.

Hagamos más interesante el análisis agregando un cuarto competidor.

EWWW Optimizer

URL: https://wordpress.org/plugins/ewww-image-optimizer/

Nuevamente, si deseamos probar a fondo este plugin, debemos crear una cuenta, tarjeta de crédito mediante. El plan API mensual más económico cuesta $0.003 / bitmap (siendo la tarifa mínima de 99 centavos de dólar). $0.003 se traducen en 330 créditos, y 330 créditos equivale a 330 optimizaciones. Pero, además, comprar el plan nos otorga un crédito inicial de valor 500, lo que significa que tendremos 830 optimizaciones en nuestro haber, y, si nos pasamos, a fin de mes se nos cobrará el extra, siempre a razón de $0.003 por bitmap.

Podemos probar el plugin sin pagar un peso, pero los únicos modos que tendremos disponibles son sin compresión (¿para qué?) y compresión sin pérdida (lossless). Conseguir la API tras crear la cuenta con tarjeta de crédito nos desbloquea los modos verdaderamente útiles: máxima compresión sin pérdida (un lossless mejor que el gratuito), compresión con pérdida (lossy), y máxima compresión con pérdida (es decir, lossy agresivo). Estos son, en efecto, los modos que debemos testear para que la comparativa con sus competidores sea leal.

Aclaradas las burocracias pertinentes del caso, sigamos con el análisis.

Un punto particular que notamos al principio es que uno de los valores, siempre tildado por defecto en el resto de los plugins testeados hasta ahora, aquí está desactivado. Debemos tildar en “eliminar metadatos” para quitar la información EXIF. Por lo demás, nos encontramos con que cada tipo de bitmap puede ser configurado a antojo de manera individual. JPG, PNG y GIF son las extensiones de bitmap, pero también encontramos la posibilidad de comprimir archivos PDF. La ventaja de esto sólo la obtendrán sitios con gran cantidad de documentos descargables, aunque desde el punto de vista SEO, mejorar el peso de un PDF es inocuo.

Resultados

Este plugin nos resultó el más lento de todos a la hora de procesar bitmaps. ¿Quizás equilibre esto con la mejor optimización del mercado? Veamos.

En el primer modo del plugin pago, máxima compresión sin pérdida, nuestro JPG sufrió una reducción del 2,4%, cambiando de 289KB a 292KB (una reducción de 6,9KB). Es exactamente la misma compresión que nos dio Kraken con el mismo método, lo que, bajo la práctica lossless, nos encontramos con un empate.

El PNG, por su parte, sufrió una reducción del 43,1% (12,4 KB menos), pasando de su tamaño original de 49,6KB a 28,2KB. Descubrimos que EWWW está a la cabeza de las compresiones sin pérdida de definición (recordemos que Kraken llevaba la delantera con 38,67% en el mismo modo lossless). EWWW ha reducido el peso de nuestro PNG un 4,43% más que Kraken.

Pasemos al modo compresión con pérdida. El JPG fue reducido un 54,7% quedando en 131KB (perdió 158,6KB). Esto lo deja por encima del récord que tenemos hasta ahora provisto por WP Smush. Sin embargo, la calidad del JPG resultante es peor que la procesada por Smush: comenzamos a notar ciertos artefactos (bloques de píxeles o manchitas de colores aberrantes). La nitidez se ve afectada, aunque sea sutil (no te preocupes si no notas nada, es la idea). La pregunta que debemos hacernos es si “pagamos” una diferencia de 15KB (en este caso) por obtener una imagen cuyo desmedro en la calidad comienza a ser visible. A gusto del consumidor.

El bitmap PNG fue devuelto con 14,8KB, lo que representa una compresión del 70,1% y una pérdida de 34,8KB. En la comparativa bajo el mismo método lossy, Kraken sigue en la delantera con una compresión de 71,38%. Aquí, el PNG resultante en su aspecto visual no demuestra cambios perceptibles tampoco.

¿Qué pasará con el modo más agresivo? Hasta aquí tenemos compresiones más que decentes, por lo que es de esperar que quitar aún más peso a nuestros queridos bitmaps se volverá algo muy notable en su aspecto final. Veremos si es así.

En el modo máxima compresión con pérdida, el tiempo de proceso fue claramente mayor (de más de un minuto, de hecho, lo que es bastante). Sin embargo, los resultados nos sorprendieron: el JPG devuelto sufrió una merma menor que en el modo anterior. Como lo leen. La compresión fue del 42,4% quedando en 122,9KB. No tiene sentido pero así es.

El PNG tardó incluso más tiempo en comprimir. El resultado fue una reducción del 73,3%, lo que por lo menos en este caso fue una mejora con respecto al modo anterior, que es lo que esperábamos. De hecho, este es el caso de la mejor compresión lossy de PNG al momento, cambiando nuestro PNG de 49,6KB a tan solo 13,2KB sin que el ojo descubra ningún tipo de problema visual. Bravo.

Pero aún resta probar el quinto elemento: TinyJPG, que es otro de los plugins más recomendados en la comunidad de desarrolladores para comprimir bitmaps. ¿Podrá superar las marcas bastante desafiantes que han adquirido sus competidores hasta el momento? Veámoslo.

TinyJPG

URL: https://wordpress.org/plugins/tiny-compress-images/

La buena noticia de la marca del Panda es que nos permite probar sus algoritmos de compresión de manera online en URL: https://tinyjpg.com/ sin tener que introducir números de tarjetas de crédito ni aceptar cláusula alguna. Esto acelera el proceso de testeo, además de que contamos con una herramienta online para salir del paso cuando sólo nos interesa comprimir una docena de bitmaps de un sitio pequeño.

TinyJPG va al grano en todo. ¿Deseas emplear la API? Pues baja el plugin y goza de 100 optimizaciones mensuales gratuitas (donaciones aceptadas). ¿Necesitas procesar más? La suscripción por megas y bitmaps ilimitados es de USD25 anuales (puede pensarse como apenas USD2 mensuales). ¿Prefieres decidir cuántos bitmaps exactamente podrás optimizar por mes? Pues paga exactamente por eso con un plan a tu medida.

Lo mismo ocurre con la optimización: su método es lossy inteligente y paremos de contar (el algoritmo analiza cada uno de nuestros bitmaps para determinar cuánta compresión es factible sin el deterioro notorio de la imagen), y, honestamente, quizás sea lo más útil para la gran mayoría de los administradores web. Por lo demás, cuenta con las mismas facilidades que los otros plugins en cuanto a EXIF, cambios de tamaño y optimización automática de miniaturas.

Resultados

Nuestro bitmap JPG fue devuelto con 167KB. Perdió 122KB en el camino, lo que implica una merma del 42%. Resulta un porcentaje compatible con cualquier método lossy del resto de sus competidores, siendo que éste, por más “inteligente” que sea, también lo es. Cabe aclarar que la nitidez es perfecta y comparable a un método lossless.

El PNG fue devuelto con 14KB y con una nitidez inmaculada. Perdió un 73% de KB, lo que significa que dejó atrás 35,6KB. Esto iguala al que hasta ahora era nuestro mejor postor, EWWW.

Conclusiones

Es difícil medir con justicia absoluta los resultados entre los cinco competidores dado que algunos ofrecen tres alternativas de mejora, otros dos, y un último una sola, pero podemos contrastar las dos dimensiones más significativas del proceso de optimización: lossy vs lossless. Porque, al final del día, lo que importa es si deseamos que la nitidez de nuestros bitmaps no se vea comprometida en el proceso (lossless), o sí (lossy).

Veamos las tablas:

En el deber de decidir un ganador absoluto, muchas variables entran en juego. El precio, por ejemplo. ¿Cuánto estamos dispuestos a pagar? ¿Realmente en nuestro sitio subimos imagenes a diario, y por eso requerimos de un servicio pago y automático, o nos conforma hacer uso de las versiones gratuitas de plugins y herramientas online? Si nuestro sitio ofrece una cantidad importante de PDFs en descarga, seguramente nos ha seducido EWWW y su exclusiva posibilidad de comprimir este formato. En cambio, si disponemos de un sitio técnico, de muchas tablas o infografías, y la mayoría de nuestros bitmaps son de formato PNG, es probable que busquemos el mejor postor para optimizar tales ilustraciones. Cada uno conoce su oficio, sus prioridades, su economía. Como dice el refrán, cada zapatero a su zapato. Pero aquí tenemos datos concretos sobre qué programa es vencedor en cada categoría y con cada tipo de archivo, JPG y PNG, más allá del uso o necesidad de cada uno de nosotros. Los resultados técnicos son los siguientes:

Mejor optimizador de JPG en modo Lossless: empate entre Kraken y EWWW

Mejor optimizador de PNG en modo Lossless: EWWW

Mejor optimizador de JPG en modo Lossy: WP Smush por notable diferencia.

Mejor optimizador de PNG en modo Lossy: empate entre EWWW y TinyJPG

El nombre EWWW aparece tres veces en nuestra lista de ganadores. Si a esto le sumamos su precio asequible y su capacidad de comprimir PDFs, tenemos buenas razones para considerarlo el ganador definitivo. Pero si el dinero no es problema y la gran mayoría de bitmaps en nuestro sitio son de formato JPG, entonces no debemos perder de vista el servicio de WP smush. Como dijimos, las características de cada web y la economía son variables a poner sobre la mesa al momento de señalar con el dedo lo que es mejor para cada caso, pero confiamos que, tras este exhaustivo análisis, sabrán escoger sin problemas.