logoCoderhouse.png
Ë
By Coderhouse • November 12, 2015

¿Sitios web lentos? Optimiza el peso de tus imágenes

La mejor manera de crear sitios web lentos para enfurecer a tus usuarios y hacer que se vayan a otro sitio, es definitivamente llenándolo de miles de millones de pixeles innecesarios. Nadie quiere eso ¿no? 

Todo elemento en una página -  HTML, CSS, JavaScripts, tipografías, entre otros - contribuye al peso total de un sitio, pero nunca nada lo hará tan lento como un montón de gráficos sin optimizar. Las imágenes tienden a ser responsables por la mayor parte del tamaño total de una página (normalmente conocido como "peso del sitio"), pero si te tomas el trabajo de optimizarlas, la transferencia de datos del servidor al browser será mucho más rápido.

Veamos

SVG = Primera Opción

SVG son las siglas de "Scalable Vector Graphics" (lenguaje XML de etiquetas) utilizado para almacenar y representar imágenes, que utiliza una serie de puntos llamados "vectores" marcados en una grilla bi-dimensional en vez de pixeles (tal como los formatos JPEG, GIF y PNG). La mayoría de los profesionales del diseño crean gráficos con vectores en programas tales como Adobe Illustrator, pero también existen herramientas gratis alojadas en la web tales como Method Draw y Mondrian que crean imágenes en SVG. 

SVG es un excelente formato para la web ya que posee una resolución infinita y se almacena como archivos realmente pequeños. En otras palabras, podrás hacer todo el zoom que quieras y siempre se verá bien. Esto es porque los archivos SVG almacenan las imágenes como una serie de de coordenadas que dibujan formas, en vez de pixeles. Estas formas son después automáticamente proyectadas en una grilla física, sin importar su resolución. 

Ahora, SVG por desgracia no funciona para todo. Para casos con detalles extremos como fotografías, necesitarás un formato que use pixeles. Dicho esto, deberías intentar usar SVG primero para todas tus imágenes y luego, sólo en caso de fotografías o piezas con un alto nivel de detalle, usar otro formato.

Después de muchos años de incompatibilidades con los los browsers, la era del SVG finalmente llegó y son soportados en todos los browsers a partir de IE9 (puedes chequearlo en caniuse.com). 

 

Reescalamiento de imágenes 

SVG es independiente de la resolución, por lo tanto no necesitan ser escalados. Sin embargo, los archivos basados en rasterización como JPEG y PNG tienen una resolución absoluta expresada en pixeles. Al ser todos los factores iguales, más pixeles normalmente significa mayor tiempo de carga de las imágenes.

La web esencialmente no trabaja en pixeles, es mas bien es un medio fluido en el que los contenidos se verán según el tamaño de pantalla del dispositivo. Es decir que a veces necesitarás que un browser reescale una imagen para que tu diseño responsive funcione. Sin embargo, si envías más información en pixeles de los que físicamente entran en un dispositivo y, de todas maneras, la imagen es reducida de tamaño, es simplemente un desperdicio de ancho de banda.

En el peor de los casos, deberías de optimizar tus imágenes para que no sean más grandes que la resolución de pantalla más grande en la que se podría ver. Dicho esto, no deberías de preocuparte por pantallas superiores a 27" o hasta aproximadamente 2560x1440 pixeles. Aun no hay suficientes iMacs de 5K como para que se justifique una resolución superior.

 

Elige PNG para performance

SVG es lo mejor para imágenes compuestas por formas sólidas y líneas vívidas, mientras que JPEGs son ls mejores para fotografías. Pero algunos gráficos no tendrán una versión SVG disponible y las compresiones de JPEG a veces se ven mal en áreas de colores plenos y líneas que se supone sean vívidas. También puedes rasterizar una imagen con áreas transparentes para que dejen ver el fondo que hay detrás. En estos casos, los archivos PNG son los mejores y vienen en dos diferentes versiones: PNG-8 y PNG-24.

PNG-8 usa una paleta de color adaptativa, capaz de mostrar hasta 256 colores. Uno de esos colores puede ser la transparencia. Pero la transparencia es binaria (un pixel es 100% trasparente o 100% opaco). Esto significa que cualquier transición entre áreas transparentes no tendrá graduación.

Si un PNG-8 tiene pixeles mayormente claros en los borders y es posicionado en un fondo oscuro, los costados se verán irregulares. El gran punto a favor es que los archivos tienden a tener un tamaño bastante razonable en cuanto a peso.

Mientras que PNG-24 es capaz de mostar cualquier color y transparencia (es decir que los pixeles pueden ser parcialmente transparentes), resultando en una transparencias sutiles y estéticas. Esto es a menudo la única manera de presentar imágenes parcialmente transparentes y borders tales como pelo o difuminados. El punto en contra es que los archivos producidos son los más pesados de todos los formatos de imágenes.

Si necesitas usar PNG, trata de usar PNG-8 (y de reducir la paleta de colores al máximo). Sólo usa PNG-24 cuando se necesite alguna transparencia suave absolutamente necesaria. Ten en cuenta que si la transparencia es uniforme a lo largo de la imagen, igualmente puedes usar PNG-8 y una opacidad menor via CSS.

Usa GIFs animados con moderación

En los 90's, los GIFs estaban por todos lados. Pero así como todo vuelve ¡Los GIFs también! Aunque por suerte no en la forma de logos giratorios. La regla es bastante simple: los GIFs animados tienden a tener un tamaño de archivo muy grande (a veces superior a un video HTML5). Si necesitas usar un GIF para mostrar un concepto importante de manera rápida, tal como una interacción UI en una web app, asegúrate de chequear como impacta ese GIF en el peso total de la página. 

Compresión agresiva a imágenes 2x

Cuando se entrega un gráfico rasterizado a dispositivos con un índice alto de PPP (puntos por pulgada) tal como las pantallas retina de Apple, generalmente necesitas enviar imágenes 2 o 3 veces su tamaño original. Estos son dispositivos que que poseen un número mayor de pixeles físicos en la pantalla, que los que tienen de manera virtual. En un iPhone nuevo por ejemplo, si tienes una imagen se supone que llenaría un espacio de 200px x 200px en una página web, deberías realmente de entregar una imagen de 400px x 400px. De otra manera, las imagines se verán borrosas.

Aunque las imágenes a 2x tienen más pixeles, es sorprendente la agresividad con la que pueden ser comprimidas sin afectar el resultado final.

Carga los JPEG de manera progresiva

Las imágenes JPEG usualmente son descargadas empezando desde el margen superior de la imagen hacia abajo. Sin embargo, se pueden hacer imágenes progresivas que carguen primero de manera borrosa y que gradualmente se vea más nítido. Esto no incrementará los tiempos de carga de la página, pero incrementará la performance "percibida" y parecerá que la página carga más rápido. El ojo humano sólo se enfoca en una pequeña parte de la pantalla por momento, así que llenar grandes areas con "nubes" de color y luego incrementar la claridad progresivamente, generalmente se ve más rápido que hacer que las imágenes carguen desde arriba hacia abajo.

 

Conclusión:

Hay muchas técnicas para optimizar imágenes para la web, estás son sólo algunas pocas. Si tienes más ideas que quieras compartir, déjanoslo saber en la sección de comentarios :)