La optimización de imágenes es una de las técnicas WPO que siempre comento en mis clases y ponencias como de las más importantes.
¿Cuál es la razón? Pues que, aunque optimizar las imágenes y fotos es algo “lógico”, la verdad es que la mayoría de los sitios web tienen problemas con la optimización y el escalado de las imágenes.
El 99% de los sitios web de Internet tienen problemas de optimización de imágenes.
La frase anterior, con esas palabras, es la que siempre digo… y es que siempre es igual, nunca cambia.
Estamos en un momento en el que el uso del móvil para navegar por Internet supera al uso del ordenador, por lo que las conexiones móviles también cobran especial importancia.
Las conexiones móviles NO son igual que las conexiones de fibra actuales, tienen mucha más latencia y eso ralentiza también la carga de los sitios web. Y cuando tenemos imágenes pesadas de por medio, en conexiones lentas el tiempo de descarga aumenta exponencialmente.
Por esta razón, debemos tener en cuenta la optimización de las imágenes y fotos en entornos web: compresión de imágenes y escalado de imágenes.
Existen varias formas de hacer esto y todas son igual de válidas, pero unas son más automáticas que otras:
- Programas o software de edición fotográfico como Adobe Photoshop o Photoscape.
- Servicios online como Kraken.io o TinyPNG.
- Plugins para WordPress como Imagify o re.Smushit; o mediante módulos para cualquier CMS, como es el caso de reSmush.it en Prestashop.
La principal diferencia también son los algoritmos de compresión: unos comprimen más que otros, sacrificando la calidad de las imágenes.
No es lo mismo servir una imagen de 361kB que una imagen de 67kB y, aunque el tiempo que tarda en descargarse no es proporcional, debemos tener en cuenta que en un sitio web NO hay solo 1 petición a una imagen, sino que se hacen peticiones a muchas imágenes de distintos tamaños y en distintas localizaciones. Por lo tanto, todo cuenta.
En este artículo vamos a hablar de varias cosas. En primer lugar, de formatos de imágenes para web, sus pros y sus contras. Por otro lado, también vamos a hablar de servicios online de compresión de imágenes. Por último, veremos plugins para optimizar imágenes en WordPress.
No me voy a enrollar más. Aquí tienes los contenidos.
¿Quieres
recibir mis articulos?
No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.
Formatos de imágenes para web
Aún no existe ninguna regla escrita para especificar el formato de las imágenes utilizadas para web (o sí, depende de por dónde se mire). La verdad es que últimamente se han venido utilizando los mismos formatos de imagen en todos lados.
El formato JPEG / JPG es un formato mucho más utilizado para casos donde las imágenes no tienen transparencias ni mucha calidad a cambio de bastante compresión. El formato PNG aporta todo lo contrario: transparencias y poca pérdida de calidad, aunque los archivos suelen pesar más.
Por otro lado, tenemos el GIF, que se suele utilizar para imágenes animadas.
Y, para finalizar, últimamente se está utilizando bastante el formato WebP, un formato de imágenes de Google que “promete” tener bastante compresión sin perder calidad si tenemos una estrategia adecuada. Se trata de un formato contenedor que puede funcionar de diferentes maneras, pero que aún no ha conseguido tener el suficiente peso y no se ha extendido lo suficiente en entornos web. Sin embargo, poco a poco se va a cercando y cada vez más webmasters lo tienen en cuenta.
Evidentemente, existen muchos más formatos de imágenes (entre ellos, unos cuantos vectoriales), pero en este post solo vamos a hablar de los más utilizados en entornos web, donde la relación compresión/calidad es lo que cuenta para no tener problemas a la hora de enviar esas imágenes y fotos a los navegadores de los visitantes.
Optimizar PNG
PNG son las siglas de Portable Network Graphics, un formato gráfico basado en un algoritmo de compresión sin pérdida.
Las imágenes en PNG se comprimen mediante “deflate” a través de filtros mediante los que se va bajando el tamaño del archivo .PNG que contiene la imagen, pero al mismo tiempo también se reduce la calidad y nitidez de la misma. La compresión del formato PNG es SIN pérdidas.
Las imágenes en PNG, al contener transparencias y tener mucha más calidad, también son las más pesadas. Por esta razón es mucho más complejo comprimir las imágenes PNG manteniendo una calidad aceptable.
De todos los formatos de imágenes, el PNG es el más exigente con las aplicaciones de optimización de imágenes y es donde más se nota la diferencia entre algoritmos de compresión y optimización.
Optimizar JPEG / JPG
Antes de nada, no existe ninguna diferencia entre las imágenes JPEG y JPG. Simplemente, en Macintosh los archivos JPEG se llaman JPEG y, en Windows, los archivos JPEG se llama JPG, por el nombre de la extensión.
Para mí, el formato de imagen JPEG es el más fácil de optimizar. Es el formato con el que se suelen conseguir mejores resultados al reducir su tamaño.
JPEG son las siglas de Joint Photographic Experts Group, un comité de expertos que creó el formato de imagen con el estándar de compresión y codificación.
JPEG es ampliamente utilizado no solo en Internet, como es el caso del PNG, sino en otro tipo de usos como las cámaras digitales (que utilizan JPEG/exif para guardar las fotos).
Mientras el PNG es un formato de compresión SIN pérdida, el formato JPEG es CON pérdida.
El algoritmo de compresión del formato de imagen JPEG utiliza dos “truquitos” para engañar al ojo humano haciéndole creer que la imagen tiene la misma calidad, pero la reduce para poder reducir el tamaño del archivo. Es decir, para el ojo humano la imagen es exactamente la misma (siempre y cuando no la comprimamos mucho), pero se reduce su peso.
Para comprimir los archivos JPEG o JPG se utiliza una escala del 1 al 100, siendo 100 la máxima calidad (100%) y 1 la mínima. También hay que mencionar que las compresiones son acumulativas: si comprimimos un archivo ahora al 60% y mañana al 80%, la segunda optimización estará basada en el archivo resultante de la primera compresión.
En la mayoría de los casos, la optimización de las imágenes JPG se realiza con el mismo algoritmo de compresión, por lo que el resultado va a ser exactamente el mismo en todos los casos.
Optimizar GIF
Los GIF han empezado a tener más importancia desde hace relativamente poco tiempo, ya que en las principales redes sociales se utilizan mucho (Twitter, Instagram y WhatsApp).
GIF son las siglas de Graphics Interchange Format y es un formato que se suele utilizar para animaciones, ya que permite unir varios fotogramas que se ejecutan de forma continua y recurrente para conseguir animaciones simples.
Uno de los problemas que tiene el formato GIF para ser optimizado es que es un formato de compresión SIN pérdida, pero solo hasta 256 colores. Como consecuencia, cuando pasamos una imagen desde un formato cualquiera a GIF, esta tiene que adaptarse a la paleta de 256 colores con la consecuente pérdida de calidad en la imagen.
Actualmente el formato GIF solo se utiliza para animaciones, ya que para imágenes simples se pierde mucha calidad al pasar la imagen a una paleta de 256 colores con una profundidad de color de 8.
A la hora de comprimir y optimizar GIF no se consiguen grandes ganancias en términos de peso, ya que las imágenes en GIF ya han sido comprimidas (al ser transformadas a 256 colores) con la consecuente pérdida de calidad.
Optimizar WEBP
El formato WebP apareció en Internet hace relativamente poco tiempo y su uso está especialmente destinado a eso: a Internet.
El formato WebP ha sido desarrollado por Google basándose en la tecnología que adquirió a una empresa que comenzó el desarrollo inicial. Tiene un formato de vídeo hermano llamado WebM, ambos liberados bajo licencia BSD pese a estar desarrollado por Google.
WebP es un formato de imagen contenedor que permite tanto compresión CON pérdidas como SIN pérdidas. Para comprimir con pérdida se utiliza la codificación intra-frame del formato VP8. Para comprimir sin pérdida se utiliza el algoritmo LZ77.
El formato WebP es totalmente diferente a todos los que hemos mencionado anteriormente, ya que permite animaciones, compresión con pérdida, sin pérdida y tiene algunas cosillas más que pueden sorprendernos.
Aunque el formato WebP no esta tan extendido como el resto de formatos, poco a poco va cogiendo peso en las cuotas de mercado.
Por otro lado, si se sigue la estrategia adecuada puede conseguirse una buena compresión y optimización del formato WebP sin perder la calidad en la imagen.
Optimizar imágenes web online
Los compresores de imágenes online (también llamados optimizadores de imágenes online) son herramientas en formato web que nos permiten optimizar imágenes simplemente subiéndolas a un servicio web (en la mayoría de los casos basta con arrastrar la imagen al navegador).
Normalmente podemos subir varias imágenes y posteriormente el servicio web online las optimizará y podremos descargar un archivo .zip con los archivos optimizados.
Comprimir imágenes mediante un servicio web online no es el método más automatizado que existe, pero es una buena forma de optimizar imágenes de forma esporádica.
Existen bastantes servicios para optimizar imágenes mediante web. Es más, Google está lleno de sitios web y servicios web para optimizar imágenes. No obstante, yo te voy a hablar de algunos de los que más me gustan: TinyPNG y Kraken.io.
TinyPNG
El servicio de compresión de imágenes TinyPNG lleva mucho tiempo en Internet y fue uno de los primeros servicios de optimización de imágenes que existen. Aunque se llame TinyPNG, no solo permite optimizar imágenes en PNG, sino que es compatible con los dos formatos de imagen más comunes: PNG y JPEG.
Para mí, TinyPNG es de los servicios más eficientes para optimizar imágenes PNG y consigue más o menos los mismos resultados en la optimización del formato PNG que Kraken. Al igual que en el caso de Kraken, el límite de la interfaz web es de hasta 20 imágenes de 5MB cada una.
Si queremos optimizar más imágenes a la vez o necesitamos optimizar archivos JPEG y PNG de más tamaño, podemos utilizar uno de los plugins o módulos que existen para los principales CMS o, en su lugar, utilizar la versión profesional de TinyPNG. Además, también existe una versión de TinyPNG para ser utilizado mediante API con Adobe Photoshop.
Si quieres utilizar el servicio de TinyPNG desde la web, puedes acceder a la siguiente URL: https://tinypng.com/
Kraken.io
Dejo como última opción uno de los servicios que más me gustan desde siempre para optimizar imágenes y que, al mismo tiempo, me ha dado excelentes resultados.
Kraken.io o Kraken Image Optimizer es un servicio online que permite optimizar imágenes y que tiene una cartera de clientes importantes muy grande.
¿Cuál es la principal desventaja de Kraken.io en su versión web gratuita? Pues que solo permite optimizar imágenes de 1MB o menos, pero podemos optimizar cuantas queramos (solo tenemos que arrastrarlas a su interfaz web).
La versión gratuita tiene muchas opciones “capadas”, aunque siempre podemos comprar la versión PRO para añadir ciertas funcionalidades a Kraken.io.
Además, existen plugins y módulos para automatizar la optimización de imágenes en los principales CMS, aunque es muy posible que necesitemos la versión PRO para utilizarlos.
Kraken.io me gusta, pero soy consciente de las limitaciones que tiene la interfaz web gratuita al comparar el servicio de Kraken.io con TinyPNG.
Si quieres utilizar la interfaz web de Kraken.io puedes acceder a la siguiente URL: https://kraken.io/web-interface
Plugins para optimizar imágenes en WordPress
Como he comentado anteriormente, la mayoría de los servicios web online para optimizar imágenes que hemos comentado anteriormente también disponen de módulos y plugins para los principales CMS.
Existen muchos plugins para optimizar imágenes en WordPress, pero yo voy a hablar de tres opciones viables y que suelo utilizar yo en WPO para WordPress.
Al elegir un plugin de optimización de imágenes para WordPress no solo debemos prestarle atención al algoritmo de optimización, sino también a la automatización que va a hacer el plugin para WordPress y las opciones que tiene.
Imagify para WordPress
Imagify ha sido uno de mis plugins favoritos para optimizar imágenes en WordPress y lo sigue siendo en algunos casos.
Imagify está desarrollado por los mismos desarrolladores que el plugin de cache para WordPress llamado WP Rocket.
El algoritmo de compresión de Imagify es bueno y muy potente. Además, el plugin de Imagify para WordPress está muy bien desarrollado y funciona muy bien. Imagify para WordPress tiene muchas opciones y el algoritmo está en constante mejora.
Imagify también permite convertir todas las imágenes del sitio web a WebP, además de comprimir y optimizar las imágenes del theme y no solo las de la galería multimedia.
Imagify nos permite tres niveles de compresión: Normal, Agresivo y Ultra. El nivel Ultra optimizará mucho las imágenes, pero tendremos problemas con su calidad en la mayoría de los casos.
Si quieres más información acerca de Imagify para WordPress, puedes consultar la siguiente dirección URL: https://raiola.link/imagifyplugin
Resmush.it para WordPress
De los tres plugins que voy a mencionar en este artículo, Resmush.it es el único gratuito, aunque también el menos efectivo.
ReSmush.it es un servicio de optimización que dispone de una API para poder optimizar imágenes desde los plugins y módulos que existen para los principales CMS (entre ellos WordPress).
El plugin para WordPress de reSmush.it es el que menos opciones tiene y el algoritmo de compresión de reSmush.it, como he dicho, es el menos potente, pero es GRATIS.
Como ves en la imagen anterior, las imágenes se optimizan automáticamente al subirse y se guardan estadísticas de todas las optimizaciones realizadas en las imágenes.
Si quieres instalar el plugin reSmush.it para WordPress, puedes encontrarlo en el repositorio de plugins: https://wordpress.org/plugins/resmushit-image-optimizer/
¿Qué servicio comprime más las imágenes?
Como he dicho, en el caso de los plugins para WordPress no solo debemos ver el algoritmo (aunque es lo más importante), sino también en las funcionalidades y opciones que nos ofrece cada plugin.
A simple vista, es complejo comparar algoritmos de compresión. No todo es blanco o negro y, dependiendo de las imágenes, el resultado va a variar.
Aquí tienes los resultados de la optimización de una imagen PNG de 117 KB con diferentes algoritmos de compresión:
- Sin optimizar: 1,67 MB
- Optimizada con Imagify: 1,38 MB
- Optimizada con Kraken.io: 1,57 MB
- Optimizada con reSmush.it: 1,58 MB
Como puedes ver, los resultados son mucho mejores con Imagify.
¿Quieres
recibir mis articulos?
No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.
16 Responses
Yo uso el tiny y luego ewww para adaptar el peso a la web 🙂
Pues creo que si utilizas despues EWWW puedes ahorrarlo, ya que solo usa las librerias de Linux y son menos potentes que Tiny.
Yo uso squoosh, el servicio de Google. No creo que haya ningún otro que reduzca más el peso sin perder calidad. Además te permite subir PNG, JPEG y WebP, y transformarlo a cualquiera de los otros dos formatos.
Hola ADR, aun no he probado Squoosh, ¿utilizas algún servicio online? ¿Existe plugin para WordPress o es por API aun?
Hola Álvaro. Lo uso desde la página web directamente https://squoosh.app/
Lo que hago es ajustar la imagen al tamaño que quiero con Photoshop, y luego la subo a Squoosh. Solo subirla ya reduce un montón el peso, sin reducir calidad. Luego puedes tocar distintos parámetros, desde la calidad hasta los colores, pero yo no lo suelo tocar nada ya que al final la calidad baja mucho.
Es un proceso manual, pero creo que merece la pena dedicarle 5 o 10 minutos por post. Y la ventaja de ahorrarse plugins.
No sé si será lo mejor o no, pero de todos los plugins de optimizado de imágenes que he probado, ninguno le ha dado mejores resultados que esto.
Saludos crack!
Que buen compresor , quizá no distinga mucho la diferencia entre imagify y este , e incluso podría decir que en las pruebas que hice con 10 imágenes , es superior a imagify, bueno también depende la perspectiva de cada uno, pero excelente herramienta!, gracias por tu aporte !
Muy bueno Alvaro, gracias por tu articulo. No conocia esas herramientas que mencionas; Yo he usado el Tiny, aunque se que hay otros como Lazyload, Optimizador.IO, pero no he usado nunca. Todavía estoy aprendiendo.
Me alegro de que te guste Laura.
Alvaro el formato svg también ocupa poco espacio, pro y contra del mismo? si hablamos de seo en este tipo de imágenes tenemos inconvenientes?
Pues…SVG esta pensado para otra cosa, es un formato vectorial y no se ha extendido tanto, por eso no lo he contemplado.
Hola.
Estoy creando un sitio de Directorio de negocios,en que las personas van a subir sus propias imágenes por su cuenta,por lo cual no tengo control para comprimirlas previamente ,ya que son ellos las que las suben,quisera saber por favor que pluggin me recomiendas para que automáticamente este scaneando la pagina y comprimiendo las imágenes que se van subiendo.Por otro lado el hosting que utilizo es banahosting ,ellos me indican que para acelerar la pagina instale litespeed ,ya que es el que ellos utilizan en el servidor,mi otra pregunta entonces es si haciendo esto requiero de algún otro pluggin como smush,que he visto por ahí lo recomiendan y si es así también me gustaría saber si smush y litespeed son compatibles,gracias de antemano por las respuestas,aclaro que de este tema no se casi nada,todo lo he hecho viendo tutoriales,gracias
Hola Asdrubal, te contesto lo mismo que te he contestado en mi canal de Youtube:
Yo para la optimización de TODAS las imágenes subidas, utilizaria Imagify, es el que utilizo yo para todo y no falla, e incluso convierte y sirve en WebP.
Sobre LiteSpeed, es muy buen plugin de cache y WPO, aunque yo sobre la funcionalidad de optimizar imágenes….no se que decirte, ya que me gusta mas Imagify y no la utilizo, ya que esa funcionalidad no depende del hosting, sino de QUIC.cloud.
Hola,les agradezco la ayuda con lo siguiente,el soporte de mi hosting me instaló los plugins de Lite speed y fast velocity minify,ya que mi sitio iba super lento y ellos tienen lite speed en el servidor,la cuestion es que las imágenes que tengo cargadas en la página ahora solo las puedo ver desde el back end ,desde el front end ya no se ven,ya limpié el caché del navegador pero aún nada,ya desactive el plugin de Lite speed y lo volvi a activar,cuando lo desactivé las imágenes en el front end me volvieron a aparecer ,sin embargo accediendo desde el móvil no se mostraban, a pesar de haber desactivado el pluggin,creo que el problema se da en alguna configuración del pluggin de lite speed.Ya lo volví a activar pero sigue igual ,todo bien en el back end pero en el front end no carga las imágenes.
Hola Asdrubal, te he contestado en el otro post exactamente a la misma pregunta.
Hola Álvaro, me ha ayudado mucho este artículo.
He instalado Imagify para optimizar todas las imagenes de un site antiguo, pero ahora que tengo todas optimizadas, tengo la duda de seguir usando Imagify o Flying Images by WP Speed Matters, por eso de que es más liviano para el Lazy Loading y no se si Imagify tiene el tamaño adaptativo en responsive con el srcset.
¿Qué me recomiendas?
Saludos!
Hola Antonio, yo seguiría utilizando Imagify ahora que has hecho la optimización con el, Flying Images esta bien, pero solo para casos donde no se quiere hacer un gasto económico.
Lo del tamaño adaptativo actualmente lo tienen casi todos los themes en base a las miniaturas creadas y declaradas.