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 forma estupenda de ofrecer un contexto adicional a tus escritos.
Sin embargo, una imagen puede tener un tamaño de archivo enorme si no se optimiza. La compresión con o sin pérdida es una consideración común porque cada una puede reducir el tamaño de una imagen, aunque también hay que tener en cuenta la calidad.
Casi siempre tendrás que aplicar algún tipo de compresión a una imagen. Esto mantiene la calidad a un nivel que tú especifiques como aceptable, a la vez que mantiene el tamaño de los archivos. La elección del nivel de compresión adecuado dependerá de tus objetivos y requisitos finales.
En este post, analizaremos la compresión con pérdidas frente a la compresión sin pérdidas. A lo largo del mismo, hablaremos del proceso que sigue una imagen para ponerse «en forma», de lo que es la compresión y de muchos otros aspectos de la optimización de tus imágenes.
Mira Nuestro Videotutorial sobre la Compresión con Pérdidas vs. Sin Pérdidas
Diferencias entre Lossy y Lossless
Cuando se trata de cualquier compresión de imágenes digitales, hay varios formatos diferentes entre los que elegir. A veces tienen otros nombres, dependiendo de muchos factores. Sin embargo, a nivel básico, encontrarás dos tipos:
- Compresión con pérdidas: El objetivo aquí es proporcionar el menor tamaño de archivo posible para una imagen. Por ello, la calidad de la imagen suele tener poca importancia en la lista de prioridades.
- Compresión sin pérdidas: Con este formato de compresión seguirás encontrando una reducción sustancial del tamaño del archivo, pero la imagen no sufrirá artefactos ni otros problemas.
En la mayoría de los casos, tu decisión sobre qué formato utilizar se reducirá a tu objetivo final: ¿quieres archivos minúsculos o te centras en preservar la calidad?
La compresión con pérdidas eliminará permanentemente de la imagen los datos que considere innecesarios. Utiliza muchas técnicas diferentes para conseguirlo, lo que da lugar a archivos 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 la calidad, pero reducir el tamaño del archivo.
Hay varias formas de conseguirlo, pero el resultado suele ser el mismo. Para saber cuál es la opción adecuada para tus necesidades, primero vamos a dar un paso atrás y revisar los fundamentos de las imágenes y la compresión en general.
Elementos de una imagen digital
Al igual que en el desarrollo de software y de la web, suele haber una «pila» para llevar una imagen desde la cámara hasta la web.
Una imagen comienza como datos «en bruto» (de ahí el nombre RAW). Esto es parecido al código de una aplicación: Los fragmentos, líneas y valores se traducen en fondos con color, marcadores de posición de la imagen, elementos dinámicos y mucho más.
En el caso de una imagen, el archivo RAW presenta una representación de la imagen ligeramente diferente según el fabricante de la cámara, el software de edición, el algoritmo del espacio de color, etc. A partir de ahí, editas la imagen y la exportas como uno de los diversos formatos de archivo (más adelante se habla de ellos):
Hay algunos elementos diferentes que componen una imagen digital estándar:
- Tipo de archivo: Los diferentes tipos proporcionarán calidades que pueden o no adaptarse a tu imagen final. La clave es elegir el tipo de archivo más adecuado para la aplicación.
- Resolución: A menudo lo verás expresado como megapíxeles (MP), pero también se utilizan píxeles por pulgada (PPI) o puntos por pulgada (DPI). Las resoluciones más altas ofrecen mayor calidad, pero también aumentan el tamaño inicial del archivo
- Profundidad de bits: Este aspecto determina la información de color de una imagen. Una profundidad de bits baja representará sólo unos pocos colores, mientras que una profundidad de bits alta podría representar millones de colores a la vez. Por lo general, cuanto más alta sea, mejor.
- Dimensiones: Es el espacio físico que ocupa una imagen. Por ejemplo, 1.000 píxeles x 500 píxeles podrían definir el tamaño total de una imagen.
- Espacio de color: Es un algoritmo que determina cómo se muestran los colores. Cada espacio de color está configurado de forma 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 de gran tamaño y alta resolución y profundidad de bits ofrecerá una calidad y nitidez supremas:
Por el contrario, incluso una imagen de grandes dimensiones y con capacidad para mostrar muchos colores puede tener un aspecto pobre a baja resolución:
Este equilibrio es la forma de revelar la imagen principal antes de aplicar la compresión. Sin embargo, el formato que utilices para la imagen tiene mucho que ver con la calidad final.
¿Cómo funciona la optimización de la imagen en la web?
Como la compresión de imágenes es la misma en un sentido general bajo el capó, puedes aplicar reglas estándar a la forma de optimizar las imágenes para la web.
Cubrimos muchos de estos conceptos en otra parte del blog de Kinsta, pero vale la pena hacer un resumen rápido para que sirva de referencia:
- Utiliza una resolución de 72 PPI, ya que es el estándar para la web. Puedes utilizar un PPI/DPI más alto por razones de archivo, pero suponemos que vas a publicar en la web.
- Establece el «borde largo» de la imagen en 2048px, ya que es óptimo para muchas aplicaciones diferentes.
- Utiliza una profundidad de color de 8 bits si tienes la opción.
- Pasa la imagen por una herramienta de compresión y optimización antes de publicarla.
Es un formato sencillo que puede darte resultados consistentes, aunque la compresión y la optimización es algo que ampliaremos en el resto de este artículo.
Para ello, veamos las ventajas e inconvenientes de la compresión con pérdidas frente a la compresión sin pérdidas.
¿Cómo puede ayudar la compresión de imágenes a tus imágenes web?
En términos generales, la «compresión» acerca el mínimo y el máximo. Por ejemplo, la compresión eleva el volumen más bajo de la música y reduce el más alto. Esto hace que el nivel medio sea más alto para el oído.
En el caso de las imágenes, la compresión es más bien un proceso de reducción. Esto significa que hay un mayor énfasis en quitar datos de tu imagen para reducir el tamaño del archivo, manteniendo la calidad lo más alta posible.
Hay muchos algoritmos propios que ayudan a reducir el tamaño de los archivos de imagen. En muchos casos, son propiedad de una empresa concreta. Encontrarás muchos estándares de compresión «con pérdida» y «sin pérdida», cada uno con descriptores únicos:
Dicho esto, la aplicación de la compresión de imágenes tiene muchas ventajas que no son exclusivas de un formato concreto:
- Puedes mantener un tamaño de archivo bajo, lo que mejora el rendimiento de tu sitio.
- Por extensión, el servidor de tu sitio tendrá menos trabajo que hacer, lo que repercute en el rendimiento.
- Los tamaños de archivo pequeños ayudan a reducir las emisiones del servidor. De este modo, ayudas a contribuir a un futuro sostenible y ético.
- Podrás mostrar una calidad casi perfecta y comparable según el algoritmo y la calidad de compresión que elijas.
Al igual que para crear una imagen que se pueda compartir, jugar con varios valores de compresión, utilizar una compañía específica y elegir el algoritmo correcto es vital para encontrar resultados que te funcionen.
Ventajas y desventajas de la compresión con pérdidas
La compresión con pérdidas reduce el tamaño del archivo de la imagen, casi con exclusión de todos los demás aspectos. El funcionamiento del algoritmo consiste en eliminar datos de forma permanente. Esto puede ser tan destructivo como parece.
Aunque no vamos a entrar demasiado en los detalles, debes saber que algunos de los datos que la compresión con pérdida elimina son visibles en la imagen. La idea es ofrecer la mejor representación de la imagen original de alta calidad con un peso menor, y esto significa que algunos datos no pasarán el corte.
En general, el uso de la compresión con pérdidas tiene un par de ventajas:
- El tamaño de los archivos será pequeño: 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érdidas: que la calidad de la imagen se reducirá con cualquier cantidad de compresión:
Verás que, en algunos casos, se aprecian bandas de color -donde los tonos de color no se representan de forma correcta- y una pérdida de claridad en los bordes. Las imágenes con menos colores mostrarán menos de esto, pero la reducción de 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 más adelante.
A pesar de los inconvenientes, la compresión con pérdidas es excelente para la web y el rendimiento de tu sitio. El diminuto tamaño de los archivos no siempre da lugar a imágenes granuladas, aunque puedes (por supuesto) llevar las cosas al extremo:
Sin embargo, la compresión con pérdidas no es la única opción. La compresión sin pérdidas es una alternativa para los propietarios de sitios web preocupados por la calidad.
Ventajas y desventajas de la compresión sin pérdidas
La compresión sin pérdidas hace lo que dice la etiqueta: Comprime el tamaño del archivo de una imagen tanto como sea posible sin afectar a la calidad visible. Lo hace eliminando 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 que se repiten, y luego codifica un acceso directo para mostrarlas. Por ejemplo, tomemos «Interfaz de línea de comandos» A menudo definirás su acrónimo una vez, y luego usarás «CLI» (o el acrónimo que elijas) para referirte a él a la velocidad del rayo
La compresión sin pérdidas funciona del mismo modo, ya que es menos destructiva. Aunque 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érdidas conserva la mayor calidad de una imagen en comparación con todos los demás algoritmos.
- La compresión sin pérdidas es fantástica 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.
- El algoritmo sin pérdidas es el preferido para las artes visuales: fotografía, diseño gráfico, arte digital, etc. Combinando un algoritmo sin pérdidas con la profundidad y la resolución adecuadas se puede conseguir casi una copia «uno a uno».
Sin embargo, hay que tener en cuenta que la compresión sin pérdidas sirve para nichos específicos: El abanico de aplicaciones es reducido. Esto reduce su disponibilidad general.
Aquí tienes otros contras de la compresión sin pérdidas que debes tener en cuenta:
- Si un sitio web utiliza muchas imágenes, la compresión sin pérdidas puede no ser óptima para mostrarlas. Esto se debe a que, en la mayoría de los casos, querrás valorar los 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. Por ello, es posible que sólo veas reducciones de tamaño marginales en lugar de resultados de adelgazamiento extremos.
A continuación, veremos la forma más rápida (y potencialmente mejor) de hacerlo.
¿Cómo elegir entre con y sin pérdidas?
Llegados a este punto, entiendes la diferencia entre la compresión con pérdidas y sin pérdidas. Sin embargo, es posible que aún no sepas cuál es el mejor algoritmo para utilizar en tu sitio.
Hay dos situaciones a tener en cuenta:
- Para la mayoría de los casos de uso en la web, es aceptable utilizar la compresión con pérdidas.
- Si quieres mostrar fotografías o arte fotografiado, la compresión sin pérdidas te 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, tus necesidades de compresión pueden ser diferentes con formatos más modernos como HEIC y WebP.
Nos atreveríamos a decir que, a menos que muestres fotografías en tu sitio, la compresión con pérdidas debería ser tu elección por defecto. WordPress comprime las imágenes por defecto, lo que demuestra que la compresión con pérdidas es adecuada para casi todas las aplicaciones.
Utilizar un servicio de compresión online para optimizar tus imágenes
Hay muchas formas de comprimir tus imágenes antes de mostrarlas en tu sitio. Por ejemplo, puedes optar por aplicar la compresión en la fase de edición. De todos modos, esto podría ser un subproducto de la conversión desde formatos RAW.
Algunos alojamientos premium como Kinsta incluso ofrecen servicios integrados que pueden ayudarte a optimizar tus archivos de imagen automáticamente. La función de optimización de imágenes de Kinsta, que es gratuita para todos los clientes, crea versiones WebP de tus imágenes y, a continuación, muestra la más pequeña a tus visitantes mediante la CDN ultrarrápida de Kinsta. Puedes elegir entre compresión con o sin pérdidas, y también puedes activar o desactivar la función a voluntad.
Aparte de las herramientas integradas, una opción popular es uno de los muchos servicios online. 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 comprometerte.
Cubrimos algunas opciones en nuestro artículo sobre optimización de imágenes, aunque se trata de plugins específicos de WordPress que se conectan a una interfaz de programación de aplicaciones (API). La buena noticia es que muchos de estos plugins ofrecen también una interfaz online. Por ejemplo, considera ShortPixel:
Aquí, arrastrarás las imágenes al cargador y esperarás a que la aplicación las comprima y procese. Sin embargo, primero deberás elegir el algoritmo, ya que el proceso comenzará de inmediato.
La elección es sencilla: Dos formas de compresión con pérdidas («Lossy» y «Glossy»), y una opción sin pérdidas. La interfaz de ShortPixel explica muy bien la diferencia entre cada algoritmo, y puedes descargar las imágenes en cuestión de segundos.
Aunque ambos pueden hacer frente a tus exigencias, la interfaz de Imagify parece más elegante y profesional que la de ShortPixel. También hay tres «niveles de compresión» aquí: Normal, Agresivo y Ultra:
La pequeña diferencia aquí es que Imagify empieza con una compresión sin pérdidas, y va subiendo hasta llegar a un algoritmo con pérdidas y fuertes artefactos. Sin embargo, hay un par de opciones más que no encontrarás en otras soluciones.
Para empezar, puedes mantener intactos los datos EXIF de tu imagen, e incluso cambiar su tamaño tras la conversión. Esto tiene un valor incalculable en ocasiones, especialmente si quieres aplicar un nivel de compresión que, de otro modo, podría eliminar los datos EXIF o limitar la forma de cambiar el tamaño de una imagen.
Al igual que su mítico homónimo, Kraken puede manipular tus 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 te permite ajustar la compresión a tus propias necesidades, entre otras opciones. Por ejemplo, puedes ajustar los niveles de compresión JPEG y PNG, elegir conservar los metadatos de la imagen e incluso trabajar con el submuestreo de croma para cambiar más los colores.
Resumen
Las imágenes pueden parecer un aspecto sencillo de tu sitio: Coges un archivo, lo subes a WordPress, y luego añades 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 puedes imaginar. El formato de compresión que elijas puede influir en el tamaño del archivo, la calidad de la imagen y mucho más.
En este post se ha analizado la compresión con pérdidas frente a la compresión sin pérdidas y se ha resumido cuál debes elegir. A pesar de caminar por la cuerda floja de la calidad frente al tamaño, la compresión con pérdidas es perfecta para la mayoría de los casos de uso en la web. Los fotógrafos o quienes estén preocupados por alterar la calidad de las imágenes querrán utilizar la compresión sin pérdidas, aunque hay menos ventajas en cuanto al tamaño de los archivos.
¿De qué lado estás en la batalla entre la compresión con pérdidas y sin pérdidas? Haznos saber tu opinión en la sección de comentarios más abajo!
Salman Ravoof es desarrollador web autodidacta, escritor, creador y un gran admirador del Software Libre y de Código Abierto (FOSS, Free and Open Source Software). Además de la tecnología, le apasionan la ciencia, la filosofía, la fotografía, las artes, los gatos y la comida. Obtén más información sobre él en su sitio web, y conecta con Salman en X.
Deja una respuesta