JPEG es el tipo de imagen más común en la Web, y por una buena razón: durante décadas, el formato JPEG ha sido casi siempre la opción correcta para codificar fotografías. El caso de uso está ahí mismo en el nombre: JPEG significa "Joint Photographic Experts Group", el comité responsable de emitir el estándar por primera vez en 1992. Verás que la extensión de un archivo JPEG es .jpg o .jpeg, aunque esta última es poco común en el uso moderno.
Si bien la compresión sin pérdida comprime pasivamente los datos de imagen de la mejor manera posible, la compresión con pérdida de JPEG busca oportunidades para hacer que la compresión sea más eficiente con alteraciones pequeñas, a menudo imperceptibles, de los datos de la imagen. JPEG codifica los datos de imagen como bloques de ocho por ocho píxeles y describe los bloques, no los píxeles individuales dentro de ellos, mediante algoritmos.
Puede sonar como una distinción académica en papel: "GIF usa una cuadrícula formada por píxeles, en comparación con JPEG, utiliza una cuadrícula formada por cuadrículas más pequeñas de píxeles". En la práctica, este uso de bloques en lugar de píxeles significa que JPEG es adecuado para un caso de uso mucho más común de las imágenes: el tipo de gradientes sutiles en capas que conforman una fotografía del mundo real.
Describir incluso un gradiente simple de un solo píxel a través de la codificación de estilo GIF sería extremadamente detallado:
En la fila uno, las columnas uno a la nueve son #00CC00. La fila uno, la columna diez es #00BB00. La fila uno, la columna once es #00AA00. La fila uno, la columna doce es #009900. La fila uno, columna trece es #008800. La fila uno, la columna catorce es #007700. La fila uno, la columna quince es #006600. La fila uno, la columna dieciséis es #005500.
Describir un gradiente con codificación de estilo JPEG es mucho más eficiente:
El bloque uno es #00CC00. El bloque dos es un gradiente de #00CC00 a #005500.
Lo que más destaca a JPEG es la cuantificación del nivel de detalle de "alta frecuencia" en una imagen, a menudo de forma imperceptible. Como resultado, guardar una imagen como JPEG suele significar reducir su calidad de maneras medibles, pero no necesariamente visibles. Como aprendiste, la cuantización de la paleta de estilo GIF es una operación relativamente simple: reducir la cantidad de colores de una imagen da como resultado archivos más pequeños, pero de una manera que es fácil de identificar con el ojo humano.
Por otro lado, JPEG es inteligente acerca de cómo se realiza la cuantización: la compresión con pérdida de JPEG intenta cuantificar una fuente de imagen de manera que coincida libremente con la forma en que nuestros propios sistemas psicovisuales cuantizan el mundo que nos rodea. De hecho, JPEG intenta descartar detalles que probablemente no veíamos en primer lugar, por lo que puede escapar una compresión adicional.
El sistema psicovisual humano hace mucho para "comprimir" las imágenes que tomas constantemente. Cuando echa un vistazo a mi pequeño jardín, puedo procesar de inmediato una gran cantidad de información: por ejemplo, se destacan flores individuales de colores brillantes. Me registro de inmediato que el suelo es un gris polvoriento y las hojas se caen, mis plantas necesitan agua. Lo que sí veo, pero no proceso por completo, es la forma, el tamaño, el ángulo y el tono de verde exactos de cualquiera de las hojas individuales. Puedo buscar ese nivel de detalle de forma activa, por supuesto, pero sería demasiada información para tomarla de forma pasiva y no tendría ningún beneficio real. Así que mi sistema psicovisual realiza una pequeña cuantización por sí solo y filtra esa información en "las hojas se están cayendo".
De hecho, JPEG funciona de la misma manera. La compresión con pérdida de JPEG reduce el nivel de detalle de una imagen de una manera que podría no registrarse en absoluto en nuestros sistemas psicovisuales naturalmente con “pérdida”, si se hace dentro de lo razonable, y presenta muchas más oportunidades de ahorro de ancho de banda que la compresión sin pérdida sola.
Por ejemplo, JPEG aprovecha una de nuestras principales debilidades psicovisuales: nuestros ojos son más sensibles a las diferencias en el brillo que a las diferencias en el tono. Antes de aplicar cualquier compresión, JPEG usa un proceso llamado "transformación de coseno discreta" para dividir la imagen en frecuencias separadas ("capas", en una forma de hablar) que representan la luminancia (brillo) y la crominancia (color), o "luma" y "croma".
La capa de luma está mínimamente comprimida y descarta solo los pequeños detalles que probablemente no sea perceptible para el ojo humano.
Las capas de croma se reducen significativamente. En lugar de simplemente cuantificar la paleta de las capas de croma como GIF, JPEG puede realizar un proceso llamado "submuestreo", en el que una capa de croma se almacena a una resolución más baja. Cuando se recombina estirando de manera efectiva las capas de croma de menor resolución sobre la capa de luma, la diferencia suele ser imperceptible. Se pueden notar pequeñas diferencias en el matiz si comparamos la fuente de la imagen original y nuestro JPEG en paralelo, pero solo cuando sepamos exactamente qué buscar.
Dicho esto, JPEG no es perfecto. Aunque es tan ingenioso como JPEG, se trata de esconder la compresión, puede volverse obvia si se toma demasiado lejos. De hecho, si has pasado mucho tiempo en la Web, sobre todo en muchos días, es posible que hayas notado que el resultado de la compresión de archivos JPEG es demasiado largo:
Comprimir los datos de imágenes de forma demasiado agresiva significa que el nivel de detalle se reduce más de lo que nuestros sistemas psicovisuales ignoran naturalmente, por lo que se rompe la ilusión. Se hace evidente que faltan detalles. Debido a que JPEG funciona en términos de bloques, las uniones entre esos bloques pueden comenzar a mostrarse.
JPEG progresivo
El JPEG progresivo (PJPEG) reordena eficazmente el proceso de renderización de un JPEG. Los JPEG de referencia se renderizan de arriba a abajo a medida que avanza la transferencia, mientras que los JPEG progresivos dividen la renderización en un conjunto de "análisis" de tamaño completo (también se realizan de arriba abajo) con cada escaneo que aumenta la calidad de la imagen. Toda la imagen aparece de inmediato, aunque borrosa, y se vuelve más clara a medida que continúa la transferencia.
Parece una diferencia estrictamente técnica en papel, pero hay un gran beneficio perceptual: proporcionar al usuario final una versión de tamaño completo de la imagen de inmediato en lugar de un espacio vacío, el PJPEG puede sentir más rápido que un JPEG de referencia para el usuario final. Además, a excepción de las imágenes más pequeñas, codificar una imagen como PJPEG casi siempre implica un tamaño de archivo menor en comparación con un JPEG de referencia; no mucho, pero cada byte ayuda.
Sin embargo, hay una pequeña desventaja: la decodificación de PJPEG es más compleja del lado del cliente, lo que implica poner un poco más de presión sobre el navegador (y el hardware del dispositivo) durante la renderización. Esa sobrecarga de renderización es difícil de cuantificar en términos exactos, pero es muy leve y es poco probable que sea evidente, excepto en el caso de dispositivos con poca potencia. Es una compensación que vale la pena hacer y, en resumen, el progresivo es un enfoque predeterminado razonable cuando se codifica una imagen como JPEG.
Usa JPEG
Es posible que te sientas un poco abrumado por toda esta información. Sin embargo, tenemos buenas noticias para tu trabajo diario: se abstraen los detalles más técnicos de la compresión JPEG y se exponen como una única configuración de "calidad": un número entero de 0 a 100. 0 proporciona el menor tamaño de archivo posible y, como es de esperar, la peor calidad visual posible. A medida que pasas de 0 a 100, aumentan tanto la calidad como el tamaño del archivo. Esta configuración es subjetiva, por supuesto, no todas las herramientas interpretarán un valor de "75" de la misma manera, y la calidad de la percepción siempre varía según el contenido de la imagen.
Para comprender cómo funciona esta configuración de compresión, usemos una herramienta común basada en la Web para optimizar los archivos de imagen: Squoosh.
Squoosh, mantenido por el equipo de Chrome, proporciona una comparación en paralelo entre diferentes métodos de codificación y configuración de resultados de imágenes, con opciones de configuración que van desde un control deslizante de “calidad” global de 0 a 100 hasta la capacidad de ajustar los detalles de la crominancia frente al remuestreo de luminancia. Cuanto más bajo sea el número de “calidad”, mayor será la compresión y menor será el archivo resultante.
Aquí, con la "calidad" establecida en 60, el tamaño del archivo se reduce en un 79%. No te dejes engañar por las implicaciones de esta etiqueta: las diferencias en la calidad en la mayor parte de la escala serán imperceptibles para el ojo humano, incluso cuando se realiza una comparación en paralelo.
Para convertir la imagen de origen en un JPEG progresivo, marca la casilla "Renderización progresiva" en "Opciones avanzadas". Algunas de estas opciones de configuración ofrecen un análisis más profundo de lo que requiere el proyecto web promedio, pero pueden proporcionarte una visión más detallada de cómo los aspectos que aprendiste sobre la codificación JPEG afectan el tamaño y la calidad del archivo en casos de uso reales.
No hay mucho en términos prácticos, a pesar de lo complicado que ahora sabemos que es el formato JPEG internamente. Squoosh es solo uno de los innumerables métodos para guardar JPEG optimizados, que usan un método similar para determinar el nivel de compresión: un único número entero entre 0 y 100.
Determinar el nivel ideal de compresión de tus imágenes es un juego de ingenio, dado que toda la complejidad de la codificación JPEG se destila a un solo número entero, en especial cuando depende tanto del contenido de una imagen. Como pensar en parpadear o respirar, considerar los ajustes de compresión JPEG cambia la forma en que los percibimos.
Si miramos afuera ahora, después de escribir todo esto, mi procesamiento psicovisual se ha vuelto más manual. Ahora estoy mirando las hojas individuales, a pesar de que la imagen en sí, por decirlo de algún modo, no ha cambiado. Por lo tanto, la configuración de la compresión de JPEG es un poco complicada: sabes exactamente qué tipo de defectos visuales debes buscar. Si piensas en la compresión de imágenes en primer lugar, te enfocas en hojas individuales; estamos preparados para detectar un ligero desenfoque y algún ocasional artefacto de compresión. Cuanto más busques artefactos mientras ajustas la configuración de compresión JPEG, más probabilidades tendrás de encontrarlos, cuando un usuario probablemente no lo haría. Incluso si ese usuario supiera exactamente qué buscar, es poco probable que visite una página con compresión JPEG en su mente.
Por esa razón, evita el instinto de mejorar una imagen en busca de artefactos o incluso mirar demasiado de cerca las partes de nuestras imágenes en las que sabes que aparecerán primero los artefactos. Para los usuarios, los artefactos débiles se mezclan con los pequeños detalles que sus sistemas psicovisuales con pérdida suelen pasar por alto. De hecho, incluso si comprendes los trucos que JPEG intenta implementar, no notarías esos mismos artefactos mientras navegas por la Web, a menos que los busques. Por esa razón, casi siempre es una apuesta segura reducir un poco la compresión de JPEG un poco más abajo de lo que crees, en especial cuando esa imagen se mostrará más pequeña que su tamaño intrínseco debido al estilo directo o a las restricciones establecidas por el diseño circundante.