[Tutorial] ASP.NET , El nuevo Sprite & Image Optimization Framework
Nuestro buen aigo Gonzalo Perez ha escrito un excelente artículo, aquí el detalle:
[Tutorial] ASP.NET , El nuevo Sprite & Image Optimization Framework
Que tal? Vamos a revisar este nuevo release del Team de ASP.NET. Release que corresponde a un Framework de optimización de imágenes, que nos permite utilizar CSS Sprites y base64 image inlining para hacer que nuestro sitio web cargue las imágenes más rápido.
Lo primero , es que lo puedes descargar, junto a su documentación aquí
La siguiente guía está basada en la documentación oficial del producto, al final vas a poder ver un video de como esto funciona. La documentación estaba en ingles, pero la traduje y aproveché de estudiar esta nueva herramienta, y quiero compartir lo que aprendí.
Técnicas de optimización de Imágenes
CSS Sprites
Si quieres saber más sobre CSS Sprites visita este artículo.
Image Inlining Using Base-64 Encoding
Otra técnica de optimización para imágenes es la denominada (la dejo en inglés mejor) image inlining. En esta técnica, se embebe la data de la imagen (usando la codificación base-64) directamente en el HTML o en el CSS en lugar de hacer la referencia a la imagen como recurso externo. Cabe recordar que cuando es recurso externo, se realiza un request. Al integrar las imágenes en el HTML o CSS, podemos reducir el número de request a las imágenes en una página a cero (o a uno, dependiendo de si los datos de la imagen se encuentran en la misma página o en una hoja de estilos referenciada).El total del contenido se puede descargar en un resquest.
Ejemplo:
Desventajas el Inlining Images
Si bien esta técnica nos permite optimizar bastante el tema de la carga de imágenes en nuestro sitio, tiene algunas desventajas:
- Soporte del Browser, ya que no todos los browser lo soportan , de hecho podríamos decir que la mayoría, hasta ahora, no lo soporta, para darnos una idea, IE8 lo soporta y las nuevas versiones, también FireFox desde la versión 3.5
- Tamaño más grande de las imágenes, estas al estar codificadas en base-64, su tamaño se incrementa, hasta un 40% más del tamaño original.
- Cache, ya que los browser no cachean imágenes encodeadas en base-64, si estas están encodeadas directamente en el HTML, sin embargo, si están n un archivo externo CSS, si funciona l cache.
Comparación entre Sprites e Inlining Images
Tag img normal |
Sprites |
Base-64 Inlining |
Alto numero de request, uno por cada imagen de la página |
Numero de Request HTTP Moderados (uno para el archivo RSS y otro para el Sprite) |
Bajo número de request (solo uno, para el archivo CSS) |
Tamaño de archivo moderado |
Tamaño pequeño de archivo, se ahorra espacio al tener una sola imagen que contiene a todas. |
Tamaño de archivo mayor al estar codificado en base-64 |
Compatible con todos los Browsers |
Compatible con todos los Browsers actuales. |
Solo compatible con las ultimas versiones de browser basados en WebKit y Mozilla |
Optimización de Imágenes en ASP.NET
Para usar images Sprites en Web Forms, podemos utilizar el nuevo control SpriteImage, este control funciona de manera similar al control Image que ya conocíamos, pero automatiza totalmente la tarea de desplegar las imágenes optimizadas con la técnica CSSS Sprite. Además , podemos utilizar los sprites creados por este control en páginas HTML Standars (como elementos img), o ya sea utilizando helpers ImageSprite.Image para MVC o para Razor.
Saludos
Fernando García Loera (MVP Lead – Latin America Region)