Hoy vamos a hablar de un tema muy querido para mí: ¡la compresión de imágenes! Estoy medio bromeando, pero hay algo extrañamente satisfactorio en reducir enormes porcentajes del tamaño de un archivo de imagen sin disminuir la calidad.

La inspiración para esta publicación surgió de una publicación muy popular en el grupo de Facebook de Beaver Builders. Acababa de filmar un video tutorial sobre cómo habilitar y usar el nuevo algoritmo Guetzli de Google en ImageOptim y me sorprendieron todas las otras opciones con las que antes no estaba familiarizado. En este artículo, hablaremos sobre algunos consejos y herramientas para comprimir imágenes para la web.

Terminología inicial

Antes de profundizar, establezcamos una terminología común.

JPEG, PNG, SVG : estos son los tres tipos de archivos de imágenes más populares en la web. Para este tutorial, nos centraremos principalmente en archivos JPEG y PNG, ya que son los que más se benefician de la compresión y optimización.

Los archivos JPEG suelen ser mejores para imágenes de alta fidelidad, como fotografías y gráficos web, que no tienen transparencia.

Los PNG son excelentes para cosas como íconos y logotipos o cualquier cosa que necesite transparencia. Los PNG también se pueden optimizar significativamente después de salir de Photoshop o de la herramienta de edición de gráficos que elija.

Lossless y Lossy : estos son métodos de compresión. La compresión sin pérdidas significa que su imagen no perderá calidad. Literalmente ninguno en absoluto. Esto implica eliminar metadatos de la imagen o cualquier cosa que no afecte la calidad.

Con pérdida significa que el algoritmo de compresión reducirá la calidad de su imagen. Obtendrá mejores resultados de compresión pero sacrificará la calidad de la imagen. La mayoría de las herramientas de compresión con pérdida proporcionan un control deslizante de porcentaje para que pueda elegir el equilibrio entre la calidad y el tamaño del archivo.

Consejo profesional: para fondos de imágenes grandes, a menudo desenfoco un poco la imagen o agrego una capa de color opaco sobre la foto. Reducir el detalle y/o normalizar el color es una buena elección de estilo estético que reduce significativamente el tamaño del archivo. Puede ver esto en acción en nuestra página de empleos.

¿Cuánto debo comprimir las imágenes?

El objetivo de la compresión de imágenes es reducir el tamaño del archivo tanto como sea posible sin sacrificar demasiado la calidad. Esto es más un arte que una ciencia y el nivel de “calidad aceptable” variará dependiendo de la situación.

Es probable que un estudio de fotografía quiera resaltar su trabajo con la más alta calidad, mientras que un sitio web de bienes raíces podría estar dispuesto a sacrificar la calidad a cambio de mostrar más imágenes en la página.

La mayoría del software de edición de imágenes le permite exportar imágenes con diferente calidad. Sin embargo, si está utilizando una herramienta de compresión de imágenes dedicada, a veces es mejor alimentar ese software con la mejor calidad posible y dejar que sus algoritmos de compresión funcionen desde allí.

Opciones de herramientas de compresión de imágenes

Como descubrí recientemente, no faltan opciones cuando se trata de herramientas y servicios para la compresión de imágenes.

Imagen óptima

Empecé con ImageOptim y sigo prefiriendolo. ImageOptim solo está disponible en OSX, pero admite compresión con y sin pérdida para archivos JPEG y PNG. También se puede configurar para utilizar el algoritmo de compresión relativamente nuevo de Google, Guetzli. Guetzli, en promedio, puede reducir el tamaño de los archivos entre un 20 y un 30% más que otros algoritmos.

ImageOptim es un programa que se encuentra en el Dock de tu Mac y puedes simplemente arrastrar y soltar imágenes en el ícono del programa y las comprimirá. Tiendo a optimizar una o dos imágenes a la vez, por lo que esta solución me funciona muy bien. Pero, si estaba trabajando en una gran cantidad de imágenes o imágenes con archivos de gran tamaño, algunas de las otras opciones podrían ser una mejor opción para trabajos grandes.

Smush de WPMU Dev

Smush es un complemento gratuito de WordPress de WPMU Dev que se puede configurar para optimizar las imágenes existentes en su instalación de WordPress y/o cuando las carga en WordPress. Smush es genial porque el trabajo pesado lo realizan los servidores de WPMU Dev y optimizan y cambian el tamaño de las imágenes.

Si está creando sitios web para clientes, en particular aquellos a quienes les gusta cargar imágenes de varios megabytes directamente desde su cámara digital, Smush es una excelente opción para configurar y olvidar.

PequeñoPNG

TinyPNG es un compresor de imágenes basado en web. Puede cargar sus imágenes (hasta 5 bm) y descargar la versión comprimida. Esto consumirá ancho de banda, por lo que puede que no sea la mejor opción si tienes una conexión a Internet lenta o de pago por uso. Admite tipos de archivos JPEG y PNG. Es gratis. No parece ofrecer ningún control sobre el nivel de calidad de la compresión.

Después de jugar con TinyPNG, creo que sigo prefiriendo ImageOptim, pero sería una excelente opción para usuarios de Windows, trabajos rápidos y únicos o usuarios que buscan específicamente un compresor basado en web. O bien, si está intentando descargar el procesamiento a la nube en lugar de a su máquina local.

imaginar

Imagify es otra opción SASS basada en web que proporciona un complemento de WordPress dedicado para optimizar y cambiar el tamaño de las imágenes a medida que las carga o directamente desde el área de administración de WordPress. El complemento Imagify WordPress cuenta con una impresionante reseña promedio de 4,5 estrellas y muchas reseñas señalan que la calidad de imagen lograda con Imagify es mejor que las alternativas.

Imagify tiene un plan gratuito que te permite subir y optimizar imágenes de menos de 2 MB. La versión optimizada de las imágenes permanecerá disponible para descargar desde sus servidores durante 24 horas.

JPEG Mini

JPEGMini es un servicio SASS que debería atraer a las personas que buscan una solución potente. Imagine que tiene la tarea de optimizar decenas de miles de imágenes de productos de alta resolución para una tienda de comercio electrónico. JPEGMini le permitiría descargar todo ese procesamiento a sus, presumiblemente, servidores en la nube rápidos y optimizados.

Píxel corto

ShortPixel es otro SASS basado en web. Si está buscando descargar la compresión de imágenes a un servidor en la nube, es una excelente opción para probar. Su plan gratuito te permite optimizar hasta 100 imágenes al mes y tienen planes premium desde $5 al mes para más. ShortPixel también tiene un complemento de WordPress y es el favorito entre el resto del equipo de BB.

imaginar

¿Cuál es tu favorito?

Si visitas el hilo original de Facebook que inspiró esta publicación, verás otras opciones y personas que prefieren una u otra por diversas razones. ¿Nos falta tu favorito? Háganos saber qué es y por qué le gusta en los comentarios.

Además, si usted es del tipo que come, duerme y respira rendimiento, esta entrevista con Jon Brown sobre las mejores prácticas modernas de rendimiento probablemente le resultará atractiva.