Optimizar imágenes en WordPress

Dificultad del post: facilmediadifícil
[Total:2    Promedio:5/5]
optimizar imágenes wordpress

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.

optimizar imagenes

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.

optimizar imagenes

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.

 

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.

optimizar imagenes

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.

imagen png

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.

imagen jpeg

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.

imagen gif

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.

webp

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.

optimizar imagenes

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.

tinypng

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.

tinypng

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.

optimizar imágenes wordpress

¿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.

optimizar imágenes wordpress

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.

optimizar imágenes wordpress

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.

optimizar imágenes wordpress

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://imagify.io/

 

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).

optimizar imágenes 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.

optimizar imágenes wordpress

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.

Share on twitter
Twitter
Share on facebook
Facebook
Share on linkedin
LinkedIn
Álvaro Fontela
Álvaro Fontela
Soy ponente en eventos de marketing digital, consultor WordPress y co-fundador de Raiola Networks, amante del mundo del motor (coches japoneses) y tecnófilo empedernido.

10 comentarios en “Optimizar imágenes en WordPress”

    • Pues creo que si utilizas despues EWWW puedes ahorrarlo, ya que solo usa las librerias de Linux y son menos potentes que Tiny.

      Responder
  1. 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.

    Responder
    • Hola ADR, aun no he probado Squoosh, ¿utilizas algún servicio online? ¿Existe plugin para WordPress o es por API aun?

      Responder
      • 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!

        Responder
        • 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 !

          Responder
  2. 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.

    Responder
  3. 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?

    Responder
    • Pues…SVG esta pensado para otra cosa, es un formato vectorial y no se ha extendido tanto, por eso no lo he contemplado.

      Responder

Deja un comentario

Share on twitter
Share on facebook
Share on linkedin
¿Quieres recibir mi contenido semanal?
¡Te enviare todas las semanas mi contenido!
Cabecera del formulario de suscripción
  • RESPONSABLE:

    RAIOLA NETWORKS, S.L.

    C.I.F.: B27453489

    Avda de Magoi, 66, Semisótano, Dcha., 27002 Lugo (Lugo)

    Telefono: +34 982776081

    e-mail: info@raiolanetworks.es

    FINALIDAD:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
    LEGITIMACIÓN:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
    DESTINATARIOS:

    No se ceden datos a terceros, salvo obligación legal.

    Personas físicas o jurídicas directamente relacionadas con el Responsable

    Encargados de Tratamiento adheridos al Privacy Shield

    DERECHOS:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
    INFORMACIÓN ADICIONAL:Se puede consultar la política de privacidad de forma más detallada aquí.
  • Este campo es un campo de validación y debe quedar sin cambios.