Compresión con pérdida frente a sin pérdida: una guía para principiantes sobre ambos formatos

Las imágenes digitales son una parte inherente de la web, y es difícil crear cualquier contenido sin algunos medios. La humilde imagen fija es una excelente manera de ofrecer un contexto adicional a su escritura.

Sin embargo, una imagen puede ser enorme en tamaño de archivo sin optimización. La compresión con pérdida frente a sin pérdida es una consideración común porque cada una puede reducir el tamaño de una imagen, aunque también hay compensaciones de calidad a considerar.

Casi siempre necesitará aplicar algo de compresión a una imagen. Esto mantiene la calidad en un nivel que usted especifique como aceptable mientras reduce el tamaño de los archivos. La elección del nivel de compresión correcto dependerá de sus objetivos y requisitos finales.

Para esta publicación, veremos la compresión con pérdida frente a la sin pérdida. En todo momento, hablaremos sobre el proceso que toma una imagen para "ponerse en forma", qué es la compresión y muchos otros aspectos de la optimización de sus imágenes.

Diferencias entre Lossy vs Lossless

Cuando se trata de compresiones de imágenes digitales, hay varios formatos diferentes para elegir. A veces estos tendrán otros nombres dependiendo de muchos factores. Sin embargo, a nivel básico, encontrarás dos tipos:

• Compresión con pérdida: el objetivo aquí es proporcionar el tamaño de archivo más pequeño posible para una imagen. Como tal, la calidad de la imagen suele estar al final de la lista de prioridades.
• Compresión sin pérdida: aún encontrará una reducción sustancial en el tamaño del archivo con este formato de compresión, pero la imagen no sufrirá artefactos ni otros problemas.

En la mayoría de los casos, su decisión sobre qué formato usar se reducirá a su objetivo final: ¿quiere archivos pequeños o se enfoca en preservar la calidad?

La compresión con pérdida eliminará los datos que considere innecesarios de la imagen de forma permanente. Utiliza muchas técnicas diferentes para lograr esto, lo que da como resultado tamaños de archivo mucho más pequeños.

La compresión sin pérdidas también elimina datos, pero puede restaurar el original si es necesario. El objetivo es mantener alta la calidad y, al mismo tiempo, reducir el tamaño del archivo.

Hay algunas maneras de lograr esto, pero el resultado suele ser el mismo. Para encontrar la opción correcta para sus necesidades, primero demos un paso atrás y revisemos los conceptos básicos de las imágenes y la compresión en general.

Elementos de una imagen digital

Al igual que el software y el desarrollo web, a menudo hay una "pila" para llevar una imagen de la cámara a la web.

Una imagen comienza como datos "en bruto" (de ahí el nombre RAW). Esto es similar al código de una aplicación: los fragmentos, líneas y valores se traducen en fondos con color, marcadores de posición de imagen, elementos dinámicos y más.

Para una imagen, el archivo RAW presenta una representación de imagen ligeramente diferente según el fabricante de la cámara, el software de edición, el algoritmo de espacio de color y más. A partir de ahí, edita la imagen y la exporta como uno de varios formatos de archivo (más sobre esto más adelante):

Hay algunos elementos diferentes que componen una imagen digital estándar:

• Tipo de archivo: los diferentes tipos proporcionarán cualidades que pueden o no adaptarse a su imagen final. La clave es elegir el tipo de archivo más adecuado para la aplicación.
• Resolución: a menudo verás esto expresado en megapíxeles (MP), pero también usarás píxeles por pulgada (PPI) o puntos por pulgada (DPI). Las resoluciones más altas ofrecen una mayor calidad, pero también aumentan el tamaño del archivo inicial
• Profundidad de bits: este aspecto determina la información de color en una imagen. Una profundidad de bits baja generará solo unos pocos colores, mientras que una profundidad de bits alta podría generar millones de colores a la vez. En general, más alto es mejor.
• Dimensiones: Este es el espacio físico que ocupa una imagen. Por ejemplo, 1000 píxeles x 500 píxeles podrían definir el tamaño total de una imagen.
• Espacio de color: este es un algoritmo que determina cómo se muestran los colores. Cada espacio de color se configura de manera diferente y, a menudo, se reduce a la preferencia del fotógrafo.

Estos elementos se combinan para ofrecer una imagen final de calidad variable. Por ejemplo, una fotografía JPEG grande, de alta resolución y alta profundidad de bits ofrecerá una calidad y nitidez supremas:

Por el contrario, incluso una imagen con grandes dimensiones y la capacidad de mostrar una gran cantidad de colores puede verse mal a baja resolución:

Este equilibrio es cómo desarrolla la imagen central antes de aplicar la compresión. Sin embargo, el formato que usa para la imagen tiene una gran parte en la calidad final.

Cómo funciona la optimización de imágenes web

Debido a que la compresión de imágenes es la misma en un sentido general bajo el capó, puede aplicar reglas estándar a la forma en que optimiza las imágenes para la web.

Cubrimos muchos de estos conceptos en otras partes del blog de Kinsta, pero vale la pena dar un resumen rápido como referencia:

• Use una resolución de 72 PPI, ya que este es el estándar para la web. Puede usar un PPI/DPI más alto por razones de archivo, pero asumimos que está publicando en la web.
• Establezca el "borde largo" de la imagen en 2048 px, ya que es óptimo para muchas aplicaciones diferentes.
• Use una profundidad de color de 8 bits si tiene la opción.
• Ejecute una imagen a través de una herramienta de compresión y optimización antes de publicarla.

Es un formato simple que puede brindarle resultados consistentes, aunque la compresión y optimización es algo que ampliaremos en el resto de este artículo.

Con ese fin, veamos los beneficios y los inconvenientes de la compresión con pérdida frente a la sin pérdida.

Cómo la compresión de imágenes puede ayudar a sus imágenes web

En términos generales, la "compresión" aprieta el mínimo y el máximo más juntos. Por ejemplo, la compresión sube el volumen más bajo de la música y reduce el más alto. Esto hace que el nivel promedio sea más alto para el oído.

Para las imágenes, la compresión es más un proceso reductivo. Esto significa que hay un mayor énfasis en eliminar datos de su imagen para reducir el tamaño del archivo, manteniendo la calidad lo más alta posible.

Hay muchos algoritmos patentados diferentes para ayudar a reducir el tamaño de los archivos de imagen. En muchos casos, estos son propiedad de una empresa específica. Encontrará muchos estándares de compresión "con pérdida" y "sin pérdida", cada uno con descriptores únicos:

Dicho todo esto, hay muchos beneficios al aplicar la compresión de imágenes que no son exclusivos de un formato en particular:

• Puede mantener un tamaño de archivo bajo, lo que mejora el rendimiento de su sitio.
• Por extensión, el servidor de su sitio tendrá menos trabajo que hacer, lo que afectará el rendimiento.
• Los tamaños de archivo pequeños ayudan a reducir las emisiones del servidor. Como tal, ayudas a contribuir a un futuro sostenible y ético.
• Puede mostrar una calidad casi perfecta y comparable según el algoritmo y la calidad de compresión que elija.

Al igual que crear una imagen para compartir, jugar con varios valores de compresión, usar una empresa específica y elegir el algoritmo correcto son vitales para encontrar resultados que funcionen para usted.

Pros y contras de la compresión con pérdida

La compresión con pérdida reduce el tamaño del archivo de la imagen, casi excluyendo todos los demás aspectos. La forma en que funciona el algoritmo es eliminar datos de forma permanente. Esto puede ser tan destructivo como suena.

Si bien no entraremos demasiado en detalles, tenga en cuenta que parte de la eliminación de la compresión con pérdida de datos es visible en la imagen. La idea es ofrecer la mejor representación de la imagen original de alta calidad con un peso más ligero, y esto significa que algunos datos no pasarán el corte.

En general, hay un par de beneficios en el uso de la compresión con pérdida:

Regístrese para recibir el boletín

¿Quiere saber cómo aumentamos nuestro tráfico en un 1000 %?

¡Únase a más de 20,000 personas que reciben nuestro boletín semanal con consejos internos de WordPress!

Suscríbase ahora

• Los tamaños de archivo serán pequeños, en algunos casos, menos de 10 kilobytes (KB).
• La pérdida de calidad será aceptable en muchos casos, a pesar de los artefactos.

Esto nos lleva a los aspectos negativos del uso de la compresión con pérdida: que la calidad de la imagen se reducirá con cualquier cantidad de compresión:

Encontrará bandas de color, donde los tonos de color no se representan de la manera correcta, y en algunos casos se verá una pérdida de claridad en los bordes. Las imágenes con menos colores mostrarán menos de esto, pero la reducción en la claridad seguirá estando presente.

Además, la degradación de la imagen es una característica permanente del proceso de compresión. Esto significa que no hay forma de revertir los efectos en una fecha posterior.

A pesar de los inconvenientes, la compresión con pérdida es excelente para la web y el rendimiento de su sitio. Los tamaños de archivo diminutos no siempre dan como resultado imágenes granuladas, aunque (por supuesto) puede llevar las cosas al extremo:

Sin embargo, la pérdida no es la única opción. La compresión sin pérdida es una alternativa para el propietario del sitio consciente de la calidad.

Pros y contras de la compresión sin pérdidas

La compresión sin pérdida hace lo que dice en la etiqueta: comprime el tamaño de archivo de una imagen tanto como sea posible sin afectar la calidad visible. Para ello, elimina los metadatos de la imagen, que pueden ocupar un espacio innecesario:

El algoritmo de compresión sin pérdidas también busca secuencias de píxeles repetidas y luego codifica un atajo para mostrarlas. Por ejemplo, tome "Interfaz de línea de comandos". A menudo definirá su acrónimo una vez, luego usará "CLI" (o el acrónimo elegido) para hacer referencia a él a la velocidad del rayo.

La compresión sin pérdida funciona de la misma manera en que es menos destructiva. Si bien la eliminación de los metadatos no será reversible, parte de la compresión sí lo será, lo que lo convierte en un algoritmo flexible para muchos usos.

Las ventajas de utilizar la compresión sin pérdidas giran en torno a la conservación de la calidad:

• La compresión sin pérdida conserva la mayor calidad en una imagen en comparación con todos los demás algoritmos.
• Lossless es fantástico para fines de archivo. Por ejemplo, un fotógrafo puede equilibrar los recursos de almacenamiento con una imagen que conserve la mayor cantidad de datos.
• Lossless es el algoritmo de compresión preferido para artes visuales: fotografía, diseño gráfico, arte digital y más. La combinación de un algoritmo sin pérdidas con la profundidad y resolución adecuadas puede lograr casi una copia "uno a uno".

Sin embargo, hay algo a tener en cuenta sobre qué tan bien sirve la compresión sin pérdidas a nichos específicos: el rango de aplicaciones es pequeño. Esto reduce su disponibilidad general.

Aquí hay algunas otras desventajas de la compresión sin pérdidas a considerar:

• Si un sitio web usa muchas imágenes, la compresión sin pérdidas podría no ser óptima para mostrarlas. Esto se debe a que, en la mayoría de los casos, querrá valorar tamaños de archivo más pequeños en este tipo de situaciones.
• Aunque la compresión reduce el tamaño de los archivos, los algoritmos sin pérdida no alteran los datos de la imagen tanto como los que tienen pérdida. Debido a esto, es posible que solo vea reducciones marginales en el tamaño en lugar de resultados de adelgazamiento extremos.

A continuación, veremos la forma más rápida (y potencialmente la mejor) de hacerlo.

Cómo elegir entre lossy vs lossless

En este punto, comprende la diferencia entre la compresión con pérdida y sin pérdida. Sin embargo, es posible que aún no sepa cuál es el mejor algoritmo para usar en su sitio.

Hay dos situaciones a considerar:

1. Para la mayoría de los casos de uso en la web, la compresión con pérdida es aceptable.
2. Si desea mostrar fotografías o arte fotografiado, la compresión sin pérdida le servirá mejor.

Estas consideraciones se basan en el uso de uno de los formatos de imagen web estándar, como JPEG, PNG o GIF. Sin embargo, sus necesidades de compresión pueden diferir con formatos más modernos como HEIC y WebP.

Nos atreveríamos a decir que, a menos que muestre fotografías en su sitio, la compresión con pérdida debería ser su opción predeterminada. WordPress comprime imágenes de forma predeterminada, lo que demuestra que la compresión con pérdida es adecuada para casi todas las aplicaciones.

Uso de un servicio de compresión en línea para optimizar sus imágenes

Hay muchas maneras de comprimir sus imágenes antes de mostrarlas en su sitio. Por ejemplo, puede elegir aplicar compresión en la etapa de edición. Esto podría ser un subproducto de la conversión de formatos RAW de todos modos.

Sin embargo, una opción popular es uno de los muchos servicios en línea. Cada uno ofrecerá una selección de algoritmos y una interfaz de usuario (UI) ejemplar. Además, la mayoría tiene algún servicio gratuito, al menos para probar la aplicación antes de comprometerse.

Cubrimos algunas opciones en nuestro artículo sobre optimización de imágenes, aunque estos son complementos específicos de WordPress que se conectan a una interfaz de programación de aplicaciones (API). La buena noticia es que muchos de estos complementos también ofrecen una interfaz en línea. Por ejemplo, considere ShortPixel:

Aquí, arrastrará imágenes al cargador, luego esperará a que la aplicación las comprima y procese. Sin embargo, primero querrá elegir el algoritmo, ya que el proceso comenzará de inmediato.

La elección es simple: dos formas de compresión con pérdida ("Lossy" y "Glossy") y una opción sin pérdida. La interfaz de ShortPixel hace un buen trabajo al explicar la diferencia entre cada algoritmo, y puedes descargar las imágenes en segundos.

Aunque ambos pueden hacer frente a sus demandas, la interfaz de Imagify se ve más elegante y profesional que la de ShortPixel. También hay tres "niveles de compresión" aquí: Normal, Agresivo y Ultra:

La ligera diferencia aquí es que Imagify comienza con una compresión sin pérdidas y avanza hasta llegar a un algoritmo con pérdidas con artefactos pesados. Sin embargo, hay un par de otras opciones que no encontrará en otras soluciones.

Para empezar, puede mantener intactos los datos EXIF ​​de su imagen e incluso cambiar su tamaño después de la conversión. Esto es invaluable a veces, especialmente si desea aplicar un nivel de compresión que de lo contrario podría eliminar los datos EXIF ​​o limitar la forma en que cambia el tamaño de una imagen.

Al igual que su homónimo mítico, Kraken puede manipular sus imágenes y aplicar varios tipos de compresión. La mayoría de los usuarios optarán por los tipos Lossy o Lossless.

Sin embargo, también hay un modo Experto:

Esto le permite ajustar la compresión a sus propias necesidades, entre otras opciones. Por ejemplo, puede ajustar los niveles de compresión de JPEG y PNG, elegir conservar los metadatos de la imagen e incluso trabajar con submuestreo de croma para cambiar aún más los colores.

Resumen

Las imágenes pueden parecer un aspecto simple de su sitio: toma un archivo, lo carga en WordPress y luego agrega un bloque de imagen para mostrarlo.

Sin embargo, hay mucho más en el proceso de preparación de una imagen para la web de lo que te imaginas. El formato de compresión que elija puede afectar el tamaño del archivo, la calidad de la imagen y más.

Esta publicación analizó la compresión con pérdida frente a la sin pérdida y resumió cuál debe elegir. A pesar de caminar por la cuerda floja de la calidad frente al tamaño, la compresión con pérdida es perfecta para la mayoría de los casos de uso en la web. Los fotógrafos o aquellos preocupados por manipular la calidad de las imágenes querrán usar la compresión sin pérdidas, aunque hay menos beneficios en cuanto al tamaño del archivo.

¿De qué lado estás en la batalla entre la compresión con pérdida y sin pérdida? ¡Háganos saber sus pensamientos en la sección de comentarios a continuación!