2/7/13

Cómo mejorar la visualización de degradados en JPEG

Venga, hoy un tip rapidito.

Es algo que me pasó hace algún tiempo y que creo que a veces es útil saber: cómo crear degradados que se visualicen correctamente en formato JPEG.

La elección de formatos de imagen es algo vital, sobretodo en cuanto a peso final se refiere. Cuando la imagen es para publicación de un libro, o para imprimir a gran tamaño, los formatos con compresión suelen dar malos resultados, con lo que formatos como el TIFF o el PSD suelen ser las mejores opciones al no tener pérdida de calidad alguna.

Pero cuando lo que prima es el peso de la imagen (por ejemplo, para usarla en Internet o en medios que requieran de un tiempo de descarga reducidos), el estándar por excelencia es el JPEG. Otros formatos, como el PNG, van ganando terreno a lo largo del tiempo, al tener unos algoritmos de compresión mucho mejores que los del JPEG, pero su peso es apreciablemente mayor, por lo que muchas veces no es un buen resultado. No hablo siquiera del GIF, porque al tener una paleta de colores máxima de 256 no sirve en cuanto a imagen fotográfica se refiere (aunque sí es una muy buena elección en gráficos o en ilustraciones no muy complejas).

Pero, ¿cómo comprime los datos el JPEG?

El estándar JPEG es un formato de compresión por zonas. Esto quiere decir que lo que hace el codificador es intentar igualar zonas colindantes de color parecidas según un varemo determinado por el usuario en el momento de guardar la imagen (el valor de "Calidad", que va de 0 a 12).


Cuanto mayor es la calidad, menos se fuerza la similitud de las zonas colindantes y, por lo tanto, más parecido con el original será (aunque más peso tendrá el archivo resultante). Es decir: si dos píxeles colindantes tienen un color lo suficientemente parecido (en función del parámetro "Calidad"), el compresor los considerará iguales.

De hecho, el compresor JPEG lo que guarda son las coordenadas de color y las coordenadas del primer píxel de cada uno de ellos. De este modo, si tenemos una imagen RGB de 25 x 1 píxeles, con los primeros 22 píxeles de azul puro y el resto verde puro, lo que guardará el compresor JPEG es algo parecido a esto (guardando los datos como {posicion_x, posicion_y: coordenada_color_rojo, coordenada_color_verde, coordenada_color_azul}:

{0,0: 0,0,255}, {22,0: 0,255,0}

En lugar de guardar algo parecido a esto:

{0,0: 0,0,255}, {1,0: 0,0,253}, {2,0: 0,0,254}, {3,0: 0,0,255}, {4,0: 0,0,255}, {5,0: 0,0,252}, {6,0: 0,0,252}, {7,0: 0,0,251}, {8,0: 0,0,255},
{9,0: 0,0,253}, {10,0: 0,0,252}, {11,0: 0,0,253}, {12,0: 0,0,255}, {13,0: 0,0,252}, {14,0: 0,0,253}, {15,0: 0,0,254}, {16,0: 0,0,255},
{17,0: 0,0,251}, {18,0: 0,0,252}, {19,0: 0,0,255}, {20,0: 0,0,253}, {21,0: 0,0,254}, {22,0: 0,255,0}, {23,0: 0,252,0}, {24,0: 0,252,0}

La reducción de espacio es, evidentemente, asombrosa, pero se pierden los matices de color de la imagen original (fijaros que no todas las coordenadas de color son "255" puro). Esto puede verse perfectamente en cielos azules, o en los famosos "artefactos" de JPEG de baja calidad.

La gran desventaja de estas reducciones de color parecido en areas colindantes es, evidentemente, irreversible, con lo que la pérdida de calidad de la imagen resultante es palpable, según cómo sea la imagen, si bien es cierto que existen algunas formas de intentar eliminar esos artefactos de JPEG, como el filtro de Photoshop "Ruido > Reducir ruido" con la opción "Quitar defecto JPEG" activada, los resultados nunca podrán devolver la calidad original a la imagen. Nunca.

El problema de esto es que estos artefactos aparecen una vez se guarda la imagen en formato JPEG, pero en el archivo original todo se ve correctamente. Es al guardar cuando se aplica la codificación con pérdida de calidad y, por lo tanto, cuando aparecen las sorpresas.

Por ejemplo, aquí tenemos esta imagen: una imagen minimalista, con un degradado circular estilo viñeta de lente, tal y como se vería en Photoshop:


Pero al guardar esta imagen en formato JPEG (calidad 10), obtenemos este resultado:


Para la imagen que nos ocupa, esta pérdida de calidad del JPEG es realmente plausible, haciendo casi un "agujero" de color blanco en el centro de la imagen, rompiendo la suavidad del degradado.

Para solucionar este problema, basta con aplicar un ligero y suave efecto de ruido al fondo degradado:


Así es cómo se vería la imagen en Photoshop después de la aplicación de este efecto:


Y así, cuando se guarda en JPEG (calidad 10):


El motivo de esto es simple: al añadir un ruido sutil lo que hemos hecho ha sido ampliar el número de cambios de tono entre píxeles colindantes, con lo que el efecto del compresor de JPEG se aplica a menos zonas para una misma calidad de compresión.

El archivo pesará un poco más (hemos pasado de 82 KB a 109 KB, lo que implica, en este caso, un incremento del 33%), pero hemos ganado notablemente en visualización de la imagen. Total, la imagen en PNG (sin aplicar el ruido) igualmente ya pesaba 254 KB, con lo que seguimos ganando en peso.

No hay comentarios:

Publicar un comentario