Compresión de imágenes en Android

En cualquier aplicación, las imágenes juegan un papel fundamental. Ayuda en la mejor comunicación de nuestro mensaje. Sin embargo, tiene importantes inconvenientes. Expande el tamaño del APK. Es posible que haya notado que los programas que se ocupan de las fotos (ya sean locales o descargadas de Internet) son de mayor tamaño, y también sabemos que cuanto menor es el tamaño de la aplicación, más descargas recibe. Por lo tanto, si bajamos el tamaño de las fotos utilizadas en el programa, el tamaño del APK también se reducirá. Entonces, en este artículo, aprenderemos sobre la compresión de imágenes para que, en el futuro, si desea utilizar imágenes en su aplicación, simplemente consulte este blog y seleccione el formato de imagen más apropiado para reducir el tamaño del APK.

En este artículo, repasaremos los siguientes temas:

• ¿Cuál es el propósito de la compresión de imágenes?
• Imagen WebP, imagen PNG, imagen vectorial e imagen JPEG

¿Cuál es el propósito de la compresión de imágenes?

La mejor manera de comunicar nuestro mensaje a nuestros usuarios es a través de imágenes. En comparación con los textos, podemos expresar información de manera mucho más efectiva usando imágenes. Sin embargo, la dificultad con las fotos es que pueden hincharse rápidamente. Las imágenes que son excesivamente grandes o tienen demasiados píxeles o resoluciones pueden degradar el rendimiento de su aplicación. Por ejemplo, si su aplicación carga una imagen de 5 MB a través de una red 2G y tarda demasiado, puede perder un usuario. La descarga de la imagen no solo consumirá ancho de banda adicional, sino que también agotará la batería. Como resultado, es fundamental asegurarse de que las imágenes utilizadas en su aplicación estén comprimidas para brindar una mejor experiencia de usuario.

PNG 

Portable Network Graphics es el formato de imagen más utilizado en Android hoy en día. Ofrecen un formato de imagen de alta resolución que es agradable a la vista. Sin embargo, también debemos usar algunas técnicas de compresión de imágenes como resultado de esto. Las compresiones PNG no tienen pérdida, lo que significa que puede restaurar su imagen original desde la versión comprimida, sin pérdida de color. En una imagen PNG, cada fila de píxeles se toma y procesa por separado. Todo el proceso de compresión PNG se puede dividir en dos pasos.

• Filtrado : en este paso, realizaremos un seguimiento del valor de cada píxel y calcularemos la diferencia entre ese valor y el valor del píxel siguiente o anterior, o el valor de un píxel hacia arriba o hacia abajo. Como resultado, el objetivo principal es lograr la menor diferencia posible. Cuanto menor sea la diferencia, más cercano será el tono y la compresión será mayor. Si una imagen contiene únicamente rojo, por ejemplo, la compresión será más fácil porque solo hay un color. El color de todos los píxeles es el mismo.
• Deflate : la salida del proceso de filtrado se codifica mediante la técnica de deflate. Empleamos los métodos de codificador LZ77 y Huffman en este ejemplo.

Para resumir los dos procesos, si la imagen tiene menos posibilidades de color, se puede realizar una mayor compresión porque la diferencia de píxeles será de alrededor de 0. Sin embargo, si la imagen tiene una gran cantidad de opciones de color, la compresión se vuelve problemática. En Android, podemos usar la herramienta AAPT para hacer lo anterior con imágenes PNG. Sin embargo, hay ciertos inconvenientes al usarlo. Así que echemos un vistazo a lo que AAPT logra para nosotros:

1. Examina el archivo PNG para ver si la imagen está en escala de grises (solo blanco y negro) o si tiene una variedad de colores.
2. Determina si la imagen tiene un canal de transparencia o es opaca. Si su imagen es opaca, eliminará ese canal y, como resultado, reducirá el tamaño de su imagen.
3. Se determina el número total de colores utilizados en la imagen. Si es menor o igual a 256, el tamaño de la imagen se reduce.

Se pueden ver tres colores en la imagen de arriba (verde, blanco). Sin embargo, la AAPT está intentando obtener valores para los 256 colores distintos y, como resultado, el tamaño final de la imagen es de 500 KB. Sin embargo, la reducción de los colores no tiene ningún efecto sobre la calidad de la imagen, pero da como resultado una reducción significativa del tamaño de la imagen. Por ejemplo, una imagen de 125KB con 128 colores y una imagen de 124B con 8 colores.

Entonces, primero optimice su PNG (puede hacerlo con PNGQuant, TinyPNG, PNGOut y otras herramientas) y luego utilícelo en su aplicación. Sin embargo, debe deshabilitar las herramientas de AAPT para su aplicación para hacerlo, ya que AAPT ignora que ya comprimió los datos.

aaptOptions {
    cruncherEnabled = False
}

Después de eso, debe asegurarse de que todas las fotos que use estén completamente comprimidas, ya que ya no hay un AAPT para la compresión de imágenes.

Vector dibujable

Los archivos PNG, como todos sabemos, son archivos raster por naturaleza. Por lo tanto, si está creando una aplicación para varios tamaños de dispositivos, tendrá que utilizar fotos de diferentes tamaños de resolución para diferentes dispositivos (necesitamos imágenes separadas para mdpi, hdpi, xhdpi, etc.), lo que aumentará el tamaño de tu aplicación

Como resultado, tenemos muchos duplicados de la misma imagen, lo cual no es lo ideal. ¿Qué pasaría si una sola imagen pudiera utilizarse en todos los dispositivos, independientemente de la resolución? Sí, con la ayuda de Vector Drawables, podemos lograrlo. El concepto de pintar gráficos con código se conoce como Vector Drawable. 

El beneficio de hacerlo es que podemos usar la misma imagen dibujable para dispositivos con resoluciones variadas, lo que minimiza el tamaño del APK porque solo tenemos que usar una imagen para todos. Lo que hacemos aquí es escribir el código de la imagen, ejecutarlo o rasterizarlo en un mapa de bits en la memoria de la CPU, luego cargarlo en la GPU y la imagen finalmente se representa en la pantalla del dispositivo. Obtendrá un archivo de imagen mucho más pequeño de esta manera, pero el proceso de rasterización llevará más tiempo. Puede escribir el código completo o usar un programa llamado POTrace para convertir su imagen PNG en un vector dibujable. Sin embargo, debido a que POTrace es simplemente una técnica automatizada, tenga cuidado al usar fotos generadas por él. Como resultado, no siempre obtendrá la imagen ideal. Sin embargo, si es posible, codifique la imagen vectorial y siempre obtendrá los resultados requeridos.

JPG

Hemos visto PNG y Vector Drawables hasta ahora, y ahora es el momento de pasar a JPEG o imágenes grandes. Como resultado, siempre que deseamos usar una imagen de alta calidad, tendemos a usar archivos JPEG, por lo que nos preocupa la compresión JPEG. Cambiamos nuestra imagen RGB de origen a un espacio de color diferente para la compresión JPG. Creamos un espacio de color distinto ya que los ojos humanos notan mayores cambios en los RGB que en el espacio de color YCbCr. Luego usamos la transformada de coseno discreta para minimizar el tamaño de los canales CB y CR. Como resultado, cualquier señal se convierte o representa como una suma de coseno. El resultado de esta transformación de coseno se envía a través de una fase de cuantificación, que convierte la salida en números enteros, seguida de una codificación estadística, que puede ser Huffman, aritmética o cualquier otra codificación y, por último, el archivo JPG. Uf, eso fue un montón de pasos 🙁

Cambiamos nuestra imagen RGB de origen a un espacio de color diferente para la compresión JPG. Creamos un espacio de color distinto ya que los ojos humanos notan mayores cambios en los RGB que en el espacio de color YCbCr. Luego usamos la transformada de coseno discreta para minimizar el tamaño de los canales CB y CR. Es simplemente un método de comprimir una imagen de origen para probar cómo el ojo humano percibe las diferencias entre varias calidades de imagen. Entonces, si desea comprimir su imagen y al mismo tiempo determinar cuánto puede comprimir una imagen sin que el ojo humano note la diferencia, puede usar Butteraugli. ¿Tiene una imagen de alta resolución que le gustaría usar? Genial, ahora usa Butteraugli para averiguar en qué porcentaje puedes comprimir tu imagen y luego comprimirla. Eso es todo lo que hay que hacer. Al mismo tiempo, si la calidad de imagen no es un problema para usted,

GeekTip #1: JPEGMini, MozJPEG, cJPEG, packJPG y otras herramientas de compresión están disponibles para imágenes JPEG, al igual que para imágenes PNG.

WebP

Podemos comprimir imágenes en formato WebP tanto de forma sin pérdida como con pérdida. Las imágenes WebP son casi un 26 % más pequeñas que las imágenes PNG cuando no tienen pérdidas. Las fotos con pérdida son entre un 25 y un 34 por ciento más pequeñas que los archivos JPEG. Lo terrible Para codificar una imagen, WebP emplea codificación predictiva. Como resultado, WebP utiliza los valores de los bloques vecinos para anticipar el valor en un píxel y luego simplemente codifica la diferencia. La compresión WebP sin pérdida, por otro lado, reconstruye nuevos píxeles utilizando fragmentos de imágenes que ya se han visto. Si no se identifica ninguna coincidencia, se utiliza una paleta local.

Conclusión

Hasta ahora, hemos visto todos los tipos de compresión de imágenes que vemos a diario. Si va a utilizar una imagen en su aplicación, el Vector dibujable debería ser su primera opción. Si tienes un vector dibujable a mano, aprovéchalo. Si no tiene elementos de diseño vectoriales y compatibilidad con WebP, entonces WebP es el camino a seguir. Si no tiene acceso a WebP y necesita transparencia, use PNG. Si no necesita transparencia, determine si la imagen es básica o compleja. Si la imagen es simple, elija PNG; si la imagen es más sofisticada, utilice JPG.