Según HTTP Archive, en diciembre 2018, las imágenes representan más del 40% del peso de una página web promedio, tanto en equipos de escritorio como en dispositivos móviles . ¡Eso es mucho peso! 😮 Cuando se trata del rendimiento y de la nueva indexación prioritaria para móviles, la optimización de las imágenes juega un papel crucial en la velocidad con la que su sitio de WordPress podrá cargar. La compresión de imágenes es una de las optimizaciones más sencillas que puede implementar y que, a su vez, tendrá el mayor impacto. Esencialmente, esto implica la disminución del peso de las imágenes mediante el uso de dos formas populares de compresión: con pérdida y sin pérdida. ¡WEBP admite ambos métodos de compresión!

Hoy vamos a profundizar en ambos tipos de compresión de imágenes y discutiremos sobre cuál le recomendamos usar. Esto puede variar según el tipo de negocio que usted opere.

Compresión con Pérdida

La primera forma de compresión, es la compresión con pérdida. La compresión con pérdida implica eliminar algunos de los datos de la imagen. Esto resulta en degradación de la imagen (reducción de la calidad, o lo que algunos llaman pixelado). Debido a esto, debe tener cuidado de cuánto está reduciendo su imagen. No sólo por la calidad, sino también porque no se puede revertir este proceso. Por supuesto, uno de los grandes beneficios de la compresión con pérdida, y la razón de por qué es uno de los métodos de compresión más populares, es que puede reducir considerablemente el tamaño del archivo.

  • Los archivos JPEG y GIF son formatos de imagen con pérdida.
  • Los archivos JPEG son ideales para sitios que necesitan tiempos de carga rápidos, ya que le permiten ajustar el nivel de calidad para obtener un buen equilibro entre calidad y tamaño del archivo.

(Lectura recomendada: JPG vs JPEG: Entendiendo los Formatos de Archivo de Imagen Más Comunes)

WordPress Comprime Automáticamente las Imágenes 

¿Sabía que WordPress comprime automáticamente sus archivos JPEG cuando los sube a la biblioteca multimedia? Por defecto, WordPress solía comprimir las imágenes hasta el 90% de su tamaño original. Sin embargo, a partir de WordPress 4.5, se incrementó esto hasta el 82% para incrementar aún más el rendimiento en todos los ámbitos. Si se estaba preguntando por qué sus imágenes se ven un poco pixeladas en una nueva instalación de WordPress, es debido a esto.

Si bien la compresión automática es excelente, en general hemos visto que ese 82% de ninguna manera es suficiente cuando se trata de realmente tener un impacto en el rendimiento de su sitio. Por lo que puede desactivar esta opción, si así lo desea, agregando el siguiente filtro al archivo functions.php. Recuerde, siempre haga un backup antes de editar su sitio.

add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

Si quiere incrementar el índice de compresión automático de WordPress, puede agregar el filtro y reducir el porcentaje del archivo original, digamos hasta el 70% como se muestra en el siguiente ejemplo.

add_filter( 'jpeg_quality', create_function( '', 'return 70;' ) );

Recuerde, esto no afectará las imágenes ya subidas. Para hacer eso tendrá que usar un plugin como Regenerate Thumbnails para aplicar los cambios a su biblioteca multimedia existente. O mejor aún, utilice un plugin de optimización de imágenes de WordPress (profundizaremos en esto más adelante) o comprima sus imágenes antes de subirlas.

Comprimir Imágenes con Save for Web (Software)

Puede usar herramientas como Adobe Photoshop, Affinity Photo, Affinity Designer, u otros editores de imágenes para ajustar la configuración de calidad de una imagen (como se ve abajo). En la mayoría de las herramientas, esto se encuentra en “Guardar en la web” o “Configuración de exportación”.

Cambiar calidad de una foto
Cambiar calidad de una foto

Si hacemos una pequeña comparación de las tasas de compresión con pérdida, podemos ver que al 50% de compresión se ve genial. Al 33% empieza a ponerse un poco borrosa en algunos de los detalles del fondo (pero son prácticamente imperceptibles), y al 5% obviamente no es aceptable. Este es sólo un ejemplo de por qué el 82% automático de WordPress no es suficiente. Usted puede, y debe, comprimir sus imágenes a tasas mucho más altas para disminuir aún más su peso.

  • original.JPG 2.82 MB (2,000 px por 1463 px)
  • lossy-compressed-1.JPG: 227 KB (2,000 px por 1463 px) reducción del 91.95% 
  • lossy-compressed-2.JPG: 185 KB (2,000 px por 1463 px) reducción del 93.44% 
  • lossy-compressed-3.JPG: 5 KB (2,000 px por 1463 px) reducción del 99.82%
Comparación de compresiones con pérdida
Comparación de compresiones con pérdida

Digamos que elige usar la imagen comprimida al 50%. El tamaño del archivo es de 227 KB, que es definitivamente mucho más pequeño que el archivo original de más de 2MB. Sin embargo, aún no es suficiente si esta es sólo una de más de 15 imágenes en una página. En general, es mejor mantener todas sus imágenes por debajo de los 100 KB si es posible. En mi experiencia, usted debería poder hacerlas aún más ligeras. Entones, aquí es donde también es importante cambiar el tamaño de sus imágenes. Si primero se cambia el tamaño de la imagen de 50% a 1251 px por 916 px entonces sólo pesará 95 KB. 

Pero recuerde, es posible que no quiera hacer demasiado pequeñas sus imágenes, ya que a partir de WordPress 4.4, se agregó la compatibilidad para imágenes responsivas (no reducidas por CSS). WordPress crea automáticamente varios tamaños de cada imagen subida a la biblioteca multimedia. Al incluir los tamaños disponibles de una imagen en un atributo srcset, los navegadores ahora pueden elegir descargar el tamaño más apropiado e ignorar los otros. Vea a continuación un ejemplo de cómo luce esto en código.

Ejemplo de código de imágenes responsivas a srcset
Ejemplo de código de imágenes responsivas a srcset

Así que con cada vez más y más pantallas HiDPI hoy en día, puede ser bueno encontrar un punto medio eficiente. Digamos 2 o 3 veces el tamaño de columna (div) de su sitio web, pero aún menos que el tamaño original de la imagen. El navegador mostrará el tamaño correcto según la resolución del dispositivo.

Google Recomienda la Compresión con Pérdida

¿Utiliza Google PageSpeed Insights? Si es así, probablemente esté familiarizado con la advertencia que dice “Optimizar Imágenes”. En 2017, Google actualizó su documentación para recomendar ahora el uso de la compresión con pérdida como una forma de acelerar aún más su sitio.

Optimización de imágenes de Google PageSpeed Insights
Optimización de imágenes de Google PageSpeed Insights

Si quiere deshacerse de esas advertencias, una de las formas más fáciles es usar la compresión con pérdida para complacer a Google.

Compresión sin Pérdida

Ahora es el momento de profundizar en la segunda forma de compresión, la compresión sin pérdida. La compresión sin pérdida, a diferencia de la compresión con pérdida, no reduce la calidad de la imagen. ¿Cómo es esto posible? Por lo general se hace eliminando los metadatos innecesarios (datos generados automáticamente, producidos por el dispositivo que captura la imagen). Sin embargo, el mayor inconveniente de este método es no se verá una reducción significativa en el tamaño del archivo. En otras palabras, sus imágenes ocuparán mucho espacio de disco a lo largo del tiempo.

  • RAW, BMP, GIF, y PNG son formatos de imagen sin pérdida.
  • Puede realizar compresiones sin pérdida en su equipo de escritorio usando herramientas como Photoshop, FileOptimizer, o ImageOptim.
  • Algunos plugins aplicarán compresión Gzip a las imágenes (las minimizarán).

Los usuarios de Kinsta pueden aprovechar la función de minificación de código que está integrada en el panel de control de MyKinsta. Esto permite a los clientes activar fácilmente la minificación automática de CSS y JavaScript con un solo clic. Esto puede ayudar a acelerar tu sitio sin ningún esfuerzo manual.

Si hacemos una pequeña comparación de las tasas de compresión con pérdida, podemos ver que al usar la compresión sin pérdida usted no pierde nada de calidad. Sin embargo, el peso de la imagen sólo se redujo en un 10.84%. Compare esto con el mas de 90% cuando se usa la compresión con pérdida.

  • original.JPG: 227 KB (2,000 px por 1463 px)
  • lossless-compressed.JPG: 203 KB (2,000 px por 1463 px)
Comparación de compresión sin pérdida
Comparación de compresión sin pérdida

¿Qué Método de Compresión Es Mejor?

La respuesta a esto depende de usted. Para la mayoría de los usuarios, recomendamos usar la compresión con pérdida debido al hecho de que puede comprimir fácilmente una imagen en más del 70% (¡a veces incluso más del 90%!) sin perder mucha calidad. Multiplique esto por 15 imágenes en una página y verá que esto juega un papel importante en la reducción del tiempo de carga de su sitio. NO sólo eso, sino que la compresión con pérdida garantizará que utilice el menor espacio de disco posible. Lo que a su vez significa que podría ahorrar dinero en hosting.

La compresión sin pérdida es para aquellos que no pueden permitirse ninguna pérdida de calidad. Los fotógrafos, blogueros de alimentos, y modelos son sólo algunos de los que dependen de imágenes perfectas para ganarse la vida. En estos casos, es esencial que aloje sus imágenes en un CDN. Debido al tamaño, es posible que incluso deba transferir sus imágenes a un almacenamiento de terceros como Amazon S3 o Google Cloud Storage.

Cómo Usar la Compresión con Pérdida en WordPress

Si todavía está confundido entre elegir usar compresión con o sin pérdida, no se preocupe, hay una gran cantidad de excelentes plugins de optimización de imágenes de WordPress entre los cuales puede elegir para aplicar de forma automática la compresión con pérdida.

Sin embargo, antes de recurrir a una herramienta de terceros, debes tener en cuenta que algunos proveedores de alojamiento incluyen herramientas o servicios que te ayudan a optimizar tus imágenes directamente desde el panel de control. Por ejemplo, Kinsta ofrece a todos sus clientes una función gratuita de Optimización de imágenes que crea copias WebP de las imágenes de tu sitio (almacenadas sin coste adicional) y, a continuación, entrega al visitante el más pequeño de los dos archivos. Esto acelera los tiempos de carga y mejora la experiencia del usuario, especialmente porque se combina con la CDN ultrarrápida de Kinsta.

Si tu proveedor de alojamiento no ofrece un servicio como éste, puedes recurrir a una herramienta de optimización de imágenes de terceros. Algunas de las opciones más utilizadas son:

Nota: Todos los mencionados arriba utilizan sus propios servidores de terceros para comprimir las imágenes. Siempre debe comprimir las imágenes por lotes y de forma externa por razones de rendimiento. 👍

Imagify es una de las opciones más populares que hemos incluido en la lista. Tienen un plan gratuito, pero incluso sus planes profesionales tienen un precio muy razonable. Puedes optimizar bastantes imágenes utilizando sólo el plan «Lite» (1 GB al mes), y ofrecen opciones económicas de pago mensual o anual.

Imagify tiene tres diferentes niveles de optimización:

  • Normal: Este modo usa la compresión sin pérdida, lo que significa que sus imágenes no perderán calidad, pero tampoco se reducirá mucho su peso.
  • Agresivo: Este modo usa la compresión con pérdida y proporciona una drástica disminución del peso inicial, con una pequeña reducción en la calidad de la imagen. La mayoría de las veces ni siquiera lo notará.
  • Ultra: Este modo usa la compresión con pérdida y aplica todas las optimizaciones disponibles para obtener la máxima compresión de imagen. Esto proporcionará una gran disminución del peso inicial, pero es muy probable que note cierta degradación de la calidad de la imagen.
Configuración de Imagify
Configuración de Imagify

Nosotros usamos el modo Agresivo en Kinsta y normalmente vemos una disminución del 60-70% dependiendo de la imagen. Nota: en realidad usamos muchos más PNG que JPEG debido a que la mayoría de nuestras imágenes son iconos e ilustraciones, no fotos.

Disminución del tamaño de los archivos después de la compresión
Disminución del tamaño de los archivos después de la compresión

Usted puede habilitar la optimización automática de las imágenes al momento de subirlas (lo que recomendamos que haga para que no lo olvide) o usar su optimizador de imágenes por lotes en la biblioteca de medios. También puede hacer que guarde un respaldo de la imagen original. Esto le permite convertir su imagen a otros niveles de optimización en el futuro o incluso restaurar su imagen original. Si no usa esta característica, recomendamos que la mantenga desactivada para ahorrar espacio de disco.

Normalmente, se debe cambiar el tamaño de las imágenes de antemano, pero Imagify cuenta con una función para cambiar el tamaño de las imágenes, en caso de que haya olvidado hacerlo o no tenga tiempo. Además de la compresión sin pérdida, ¡esta es otra gran forma de reducir el tamaño del archivo!

Cambiar el tamaño de las imágenes en Imagify
Cambiar el tamaño de las imágenes en Imagify

De hecho, hace poco usamos la función de optimización de imágenes por lotes en toda nuestra biblioteca multimedia de WordPress. Como puede ver, ¡se redujo en más de 700 MB! Esto es enorme cuando se trata del rendimiento de front-end.

Ahorro en optimización de imágenes por lotes
Ahorro en optimización de imágenes por lotes

Pruebas de Velocidad

¡Hagamos una pequeña prueba! Debido al hecho de que constantemente vemos que los usuarios suben imágenes sin cambiar su resolución y sin compresión, haremos una pequeña comparación ya que esto afecta el rendimiento general de su sitio.

Prueba 1 – Original Sin Comprimir

Primero subimos 10 imágenes sin comprimir. Luego hicimos 5 pruebas en Pingdom y calculamos el promedio. Podemos ver que el tiempo total de carga es de 3.04 segundos con un tamaño de página total de 28.4 MB.

  • uncompressed-1.jpg (2.82 MB)
  • uncompressed-2.jpg (2.82 MB)
  • uncompressed-3.jpg (2.82 MB)
  • uncompressed-4.jpg (2.82 MB)
  • uncompressed-5.jpg (2.82 MB)
  • uncompressed-6.jpg (2.82 MB)
  • uncompressed-7.jpg (2.82 MB)
  • uncompressed-8.jpg (2.82 MB)
  • uncompressed-9.jpg (2.82 MB)
  • uncompressed-10.jpg (2.82 MB)
Prueba de velocidad con imágenes sin comprimir
Prueba de velocidad con imágenes sin comprimir (Pingdom)

Prueba 2 – Comprimido

Luego volvimos a cargar las mismas imágenes, pero esta vez habilitamos la “optimización automática” en el plugin de Imagify. Entonces realizamos 5 pruebas de nuevo en Pingdom y calculamos el promedio.

  • compressed-1.jpg (69.3 KB)
  • compressed-2.jpg (69.3 KB)
  • compressed-3.jpg (69.3 KB)
  • compressed-4.jpg (69.3 KB)
  • compressed-5.jpg (69.3 KB)
  • compressed-6.jpg (69.3 KB)
  • compressed-7.jpg (69.3 KB)
  • compressed-8.jpg (69.3 KB)
  • compressed-9.jpg (69.3 KB)
  • compressed-10.jpg (69.3 KB)

Podemos ver que ahora el tiempo de carga total es de 522 ms con un tamaño de página total de 901.4 KB. ¡Por lo que nuestras imágenes comprimidas redujeron el tiempo de carga de la página en un 82.83%! 😮 El tamaño total de la página también se redujo en un increíble 96.83%. Y nuestras imágenes aún se ven de alta calidad gracias a Imagify.

Prueba de velocidad con imágenes comprimidas
Prueba de velocidad con imágenes comprimidas (Pingdom)

Resumen

Una vez que determine la calidad de las imágenes que necesita en su sitio, puede elegir entre usar la compresión con o sin pérdida. Nuevamente, para aquellos que están más preocupados por la velocidad y no tanto por la calidad, recomendamos que usen la compresión con pérdida. Recuerde, las imágenes comprimidas con pérdida pueden verse hermosas si encuentra el equilibrio perfecto. Si necesita imágenes perfectas, entonces debe elegir la compresión sin pérdida.

¿Qué opina? ¿Está usando la compresión con o sin pérdida en su sitio de WordPress? Háganoslo saber a continuación en los comentarios.

Brian Jackson

Brian tiene una gran pasión por WordPress, lo ha estado utilizando durante más de 10 años e incluso ha desarrollado un par de plugins premium. Brian disfruta de los blogs, las películas y el senderismo. Conéctese con Brian en Twitter.