Clicky

Mejora el rendimiento con 2 tipos de optimización de imagen

optimización de imágenes para la web

Hay dos formas principales de la optimización de imágenes para la web: sin pérdidas y con pérdidas

Hay muchas formas y medios para mejorar el rendimiento de un sitio web. Es muy recomendable construir cada método apropiado en el proceso de creación de aplicaciones web, en lugar de comprobar el rendimiento justo antes del lanzamiento y luego hacer ajustes. Uno de los métodos más simples de mejorar el rendimiento es optimizar las imágenes que aparecen en las páginas.

Hay dos formas principales de optimización de imágenes para la web: sin pérdidas y con pérdidas. Las diferencias visuales son insignificantes y muy pocos humanos pueden diferenciarlas a simple vista. Sin embargo, las diferencias de tamaño son grandes, significativas e importantes para el desempeño de cada página del sitio web. Cuando se trata de optimizar las imágenes para un rendimiento web, recuerda que el objetivo es hacer imágenes más pequeñas por lo que se descargarán más rápido al dispositivo del usuario.

Vamos a echar un rápido vistazo a los conceptos básicos de cada tipo de optimización de imagen.

Optimizaciones sin pérdidas

Como refleja su nombre, las optimizaciones de imagen sin pérdidas son optimizaciones que conforman una imagen de menor tamaño, mientras que se preserva la fidelidad del contenido. En otras palabras, las imágenes originales y optimizadas sin pérdidas son copias de píxeles perfectas la una de la otra, pero el archivo es más pequeño. Esto sucede porque las optimizaciones sin pérdidas eliminan las capas dentro del archivo de imagen que no tiene nada que ver con la representación de la imagen. Cosas como las marcas de tiempo, coordenadas GPS, obturación y ajustes de apertura, entradas de paleta de colores no utilizados, miniaturas incrustadas, u otros metadatos. No es necesario esos datos para presentar una imagen hermosa en tu web o en el móvil del usuario, por lo que se pueden quitar esos datos de la imagen que da, en promedio, un 15 - 20% de reducción en el tamaño de cada imagen. Si tu sitio web tiene unas imágenes "pesadas", se puede ahorrar rápidamente un 15% en cada imagen.

Optimizaciones con pérdidas

Las optimizaciones con pérdidas, por el contrario, modifican o descartan realmente algunos de los datos de los píxeles no críticos contenidos en un archivo de imagen para reducirlo de tamaño. Esto puede conducir a reducciones significativas, por lo general en un rango de reducción del 70-80%. Pero ¿cómo podemos descartar o cambiar los gráficos de datos en la imagen y aún así tener una imagen que se vea bien? Después de todo, el diseñador trabajó duro para crear esas imágenes!

Debido a la forma en que funciona el ojo humano, sobre todo cuando ve millones de píxeles en una pantalla retroiluminada, hay trucos que podemos hacer para crear imágenes más pequeñas sin que nadie lo note. Otra optimización es asegurarse de que estás utilizando el formato de archivo correcto para la imagen (por ejemplo, usar de JPEG para datos fotográficos en vez de PNG). De esta manera tu sitio web o aplicación web se cargan más rápido, y la diferencia en la calidad de las imágenes rara vez será notable. Veamos un ejemplo:

rosa grande         rosa pequeña

¿Puedes decir la diferencia entre estas dos imágenes de arriba? La imagen de la izquierda tiene 984k. La imagen de la derecha 48k, una diferencia del 95% en el tamaño en el servidor. Obviamente, la imagen de la derecha se carga mucho más rápido en tu web o aplicación móvil. La optimización de la imagen con pérdida tiene un montón de matices, de modo que hay que hecerla de forma inteligente.

¿Porqué optimizar?

Cargar más rápido, sobre todo en los dispositivos móviles de una manera móvil amistosa se está haciendo cada vez más importante. Google ha lanzado un algoritmo móvil que usará para la posición en los motores de búsqueda, por lo que el rendimiento de una aplicación web es aún más importante dado que el mundo se mueve más hacia sólo los dispositivos y el desarrollo de móviles.

La optimización de imágenes para una mejor experiencia del usuario en plataformas tanto de escritorio como móviles debe ser parte de el proceso de desarrollo destinado a diseñar para el rendimiento. Si utilizas optimización sin pérdida o con pérdida como ingeniería y una decisión de diseño, estas optimizaciones deben hacerse al principio del proceso y con la experiencia del usuario final en mente.

Para terminar unas cuantas herramientas para optimizar imágenes para la web:

•  PNGOut
•  AdvanceCOMP
•  OptiPNG
•  PunyPNG
•  Smush.it
•  PNGCrush
•  PNG Recompressor
•  RIOT

Relacionada: Disminuye de tamaño tus archivos PNG

Jesus_Caceres