¿Cómo optimizar png para web?

Tinypng

Este post describe algunas técnicas que pueden ayudarte a optimizar tus imágenes PNG. Estas técnicas se derivan de laboriosas horas dedicadas a estudiar cómo guarda exactamente los datos el codificador PNG. Empezaremos con algunos aspectos esenciales sobre el formato PNG y luego pasaremos a las técnicas de optimización avanzadas.

Como diseñador web, es posible que ya estés familiarizado con el formato de imagen PNG, que ofrece una transparencia completa. Es un sustituto sin pérdidas, robusto y muy bueno del antiguo formato de imagen GIF. Como usuario de Photoshop (o de cualquier otro editor de imágenes) puedes pensar que no hay muchas opciones para la optimización de PNG, especialmente para los PNG truecolor (PNG-24 en Photoshop), que no tiene ninguna. Algunos incluso pensarán que este formato es “no optimizable”. Pues bien, en este post intentaremos desmontar este mito.

Comprimir png en línea

Las imágenes suelen representar la mayor parte de los bytes descargados en una página. Por ello, la optimización de las imágenes puede suponer a menudo uno de los mayores ahorros de bytes y mejoras de rendimiento: cuantos menos bytes tenga que descargar el navegador, menos competencia habrá por el ancho de banda del cliente y más rápido podrá el navegador descargar y representar el contenido en la pantalla.

Encontrar el formato y la estrategia de optimización óptimos para sus activos de imagen requiere un análisis cuidadoso en muchas dimensiones: tipo de datos que se codifican, capacidades del formato de imagen, ajustes de calidad, resolución y más. Además, hay que tener en cuenta si algunas imágenes se sirven mejor en un formato vectorial, si los efectos deseados pueden conseguirse a través de CSS, y cómo ofrecer activos con la escala adecuada para cada tipo de dispositivo.

Los formatos GIF, PNG y JPEG representan el 96% de todo el tráfico de imágenes de Internet. Debido a su popularidad, PageSpeed Insights ofrece recomendaciones de optimización específicas. Para su comodidad, puede descargar las imágenes optimizadas directamente desde PageSpeed Insights (que utiliza la biblioteca de optimización de imágenes de modpagespeed.com).

Cómo optimizar las imágenes para la web

Las imágenes grandes y poco optimizadas reducen la velocidad del sitio y alejan a la gente de su tienda. Los estudios demuestran que si un sitio de comercio electrónico se carga más lentamente de lo esperado, más del 45% de los visitantes admiten que es menos probable que realicen una compra.

Las imágenes son las que más contribuyen al tamaño total de la página, lo que hace que las páginas sean lentas de cargar. Los datos de HTTP Archive revelan que las imágenes no optimizadas representan, de media, el 75% del peso total de una página web. Esto puede tener un impacto negativo en el rendimiento de su sitio web.

La optimización de imágenes para web y móvil existe para que las páginas web se carguen más rápido. Crean una mejor experiencia de navegación para los compradores. Si hay un retraso de apenas dos segundos en la velocidad de su página, su tasa de rebote puede aumentar en un 103%.

La velocidad de la página es importante para la experiencia del visitante. La gente puede detectar retrasos de tan solo una décima de segundo. Cualquier cosa más larga que eso no parece “instantánea”. Los retrasos de un segundo son suficientes para interrumpir el proceso de pensamiento de una persona.

Las páginas con un tiempo de carga más largo tienden a tener tasas de rebote más altas y un tiempo medio en la página más bajo. Reducir los tiempos de carga de las páginas, aunque sea un segundo, mejorará la experiencia del usuario. La mejora de la experiencia del usuario y de las interacciones con su sitio tiene un impacto positivo en la clasificación en los motores de búsqueda, lo que puede mejorar el compromiso, las conversiones y la retención de clientes.

Redimensionar png

Como diseñador gráfico a mediados de 2016, la mayoría de los proyectos de clientes terminados acaban en formato digital -gráficos para el sitio web, PDF para descargar, gráficos sociales, hojas de datos, folletos- en lugar de enviarse a una impresora. Estos archivos deben ser claros, tener el tamaño adecuado y, lo más importante, ser pequeños (medidos en kilobytes, no en píxeles). Esta guía le mostrará paso a paso cómo optimizar las imágenes para la web utilizando los formatos JPG y PNG.

Preparar los archivos para la impresión es increíblemente diferente a prepararlos para que estén disponibles en la web. Los archivos de impresión requieren fotografías de alta resolución (generalmente 300 ppp, o puntos por pulgada), texto delineado, sangrados para el color de borde a borde, imágenes sin comprimir, ajustes de transparencia, todo tipo de cosas locas.

Al final, el tamaño de los archivos de impresión acaba siendo bastante grande (alguna vez he enviado un archivo de catálogo de varias páginas de 120 MB a una imprenta). Si crees que alguien va a descargarse algo de 120 MB de tu página web (a no ser que se trate de un paquete de software enorme), tengo malas noticias para ti: no lo harán.