[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 en:
http://aspnet.codeplex.com/releases/view/50140
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:
http://geeks.ms/blogs/gperez/archive/2010/01/04/optimizando-tu-website-con-css-sprites-caso-pr-225-ctico.aspx
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.
Instalando y Configurando el ASP.NET Image Optimización Framework
Para agregar la funcionalidad a nuestro sitio, debemos agregar las DLL al proyecto y referenciar al ensamblado ImageOptimizationFramework. Los sitios Web Form (ASP.NET Tradicional), además deben referenciar el ensamblado WebFormsControl. Para los sitios que utilizan MVC y Razor deben referenciar al ensamblado MVCHelper para tener acceso al helper ImageSprite.Image.
La siguiente imagen resume lo anterior:
El ensamblado ImageOptimizationFramework incluye un módulo que se debe ejecutar cuando la aplicación se inicia, para habilitar este módulo, agregamos en el Web.config:
Para II6
<httpModules>
<add type ="Microsoft.Samples.Web.ImageOptimizationModule"
name ="Microsoft.Samples.Web.ImageOptimizationModule"/>
</httpModules><?xml:namespace prefix = o />
Para II7
<system.webServer>
<modules runAllManagedModulesForAllRequests="true">
<add type="Microsoft.Samples.Web.ImageOptimizationModule"
name ="Microsoft.Samples.Web.ImageOptimizationModule"/>
</modules>
</system.webServer>
Preparar las Imágenes para la Optimización
Para usar CSS Sprites, se debe agregar las imágenes al sitio en una carpeta específica. Opcionalmente podemos configurar opciones para el Sprite mediante un archivo XML.
Agregar imágenes a la Carpeta App_Sprites
Todos los imágenes deben ser agregadas a la carpeta App_Sprites, que debe estar por debajo de la raíz del sitio. Esta carpeta puede incluir Sub Carpetas. Para este post estoy utilizando las imágenes del ejemplo que viene por defecto (y en la documentación oficial)
Ej:
En tiempo de ejecución, las imágenes en casa subcarpeta se fusionan automáticamente en Sprites o embebido directamente en archivos CSS (que son creados por el paquete de optimización), dependiendo como se ha configurado.
Configuración las opciones de Optimización
Podemos sobrescribir la configuración por defecto creando el archivo settings.xml. Este archivo lo podemos crear en la carpeta App_Sprites o en cada subcarpeta que contiene los image sprites. Si una subcarpeta no contiene el archivo settings.xml, entonces esta hereda la configuración desde el archivo settings.xml de la carpeta padre (si es que existe, o si no se utiliza la configuración por defecto).
En el archivo settings,xml, podemos setear los siguientes elementos:
FileFormat: Esto controla el formato de la imagen del sprite generado. Las Opciones son JPG, GIF, PNG y BMP.
Calidad: Controla el nivel de compresión del resultando del sprite. El valor se especifica como un entero que representa el porcentaje de compresión
MazSize: Esto determina el tamaño máximo (en KB) para el image sprite. Si el tamaño del combinado de imágenes en una carpeta excede este valor, entonces se crearán multiples sprites automáticamente y será transparente la referencia a través de un solo archivo CSS.
BackgroundColor: Define el color de fondo de image sprite, incluyendo transparencia. Se especifica en el formato estándar ARGB. Esta configuración se suele utilizar cuando se agregan imágenes PNG transparentes a un sprite que se va a generar en un formato que no admite la transparencia.
Base64Encoding: Esto habilita o deshabilita el Base64Encoding. Incluso si esta opción está activada, los sprites se producirán por compatibilidad con navegadores que no soportan imágenes en línea)
El siguiente ejemplo muestra el contendido de un archivo setting,xml, que refleja la configuración por defecto.
<?xml version="1.0" encoding="utf-8"?><ImageOptimizationSettings>
<FileFormat>png</FileFormat>
<Base64Encoding>true</Base64Encoding>
<Quality>80</Quality>
<BackgroundColor>00000000</BackgroundColor>
<MaxSize>500</MaxSize>
</ImageOptimizationSettings>
Notar lo siguiente:
-
El elemento Quality es redundante para el ejemplo, debido a que es ignorado cuando el output de formato de salida seleccionado es png.
-
Si se especifica un formato de salida que no es reconocido , el defecto es PNG
-
El valor BackgroundColor es ignorado para las imágenes Base-64
¿Como funciona ASP.NET Image Optimization?
Monitoreo de la carpeta APP_Sprites para detección de Cambios
El módulo ImageOptimizationModule se ejecuta durante la fase de carga inicial de la aplicación ASP.NET e implementa el framework de optimización propiamente tal. Agrega un cache de dependencia a la carpeta App_Sprites y a todas las subcarpetas(si es que existen). Si el contenido de alguna de estas subcarpetas cambia, el framework de optimización hace lo siguiente:
-
Si una imagen o archivo de configuración es agregado, eliminado o modificado, o la carpeta se vuelve a generar, se creara una nueva imagen y archivo css. Si las subcarpetas no tienen un archivo settings.xml, será reconstruido, debido a que sus valores heredados pudieron haber cambiado.
- Si una carpeta se agrega, se agrega también un elemento a la cache
- Si una carpeta es eliminada, se elimina también de la cache
Adicionalmente, un archivo llamado timestamp.dat es utilizado para comprobar si la carpeta tiene que ser reconstruida (img y css) cuando se inicia la aplicación. Si este archivo no ha cambiado cuando se reinicia la aplicación, entonces no hay que reconstruir todo la carpeta App_Sprites, proceso que puede hacer uso intensivo de CPU y Disco.
¿Como son desplegadas las imágenes por el control Built-In?
Los Sprites y las inlined images son redenderizadas usando CSS IDs o clases, las cuales se asocian a los elementos de la pagina como los div, span,a ,p e img. Puesto que el fin es optimizar la carga de imágenes, y que la mejora se siga tratando como imágenes vs el CSS, el control para WebForm y las funciones Helpers hace que estas imágenes utilice una imagen GIF cuyas características son transparente y de 1x1 píxeles. (Codificada en el atributo scr), y luego se usan las clases CSS para mostrar la imagen correcta.
El siguiente ejemplo muestra el código generado al redenderizar:
<img class="aspNetLogos_2-png"
src="data:image/gif;base64,R0lGODlhAQABAIABAP///
wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
Para asegurar la compatibilidad Cross Browser, el framework de optimización genera dos archivos CSS: highCompact.css, el cual permite el uso de images inline(si es que lo estamos utilizando), y lowCompat.css, que permite solo image Sprites. Para que la referencia correctamente, se debe vincular la hoja de estilo se debe vincular en el head de la página. El siguiente ejemplo muestra un link a la hoja de estilos que es compatible con todos los navegadores (esto es, que utiliza CSS Sprites)
<link href="App_Sprites/aspNetLogos/lowCompat.css" rel="stylesheet"
type="text/css" media="all" />
Agregar las imágenes optimizadas a la Página.
El enfoque o la forma que se utiliza para aprovechar la ventaja de las imágenes optimizadas en una página web depende de si se está utilizando un WebForm, una vista de MVC o Razor, o incluso, si se quiere crear manualmente y agregar los tags de forma manual.
Control para ASP.NET Web Forms
Para usar la optimización de imágenes in ASP.NET Web Forms, agregamos el control SpriteImage, la sintaxis sería algo como:
<SpriteImage:SpriteImage ID="SpriteImage3" runat="server"
ImageUrl="~/App_Sprites/aspNetLogos/2.png" Optimize="true" />
Podemos setear la propiedad ImageUrl a la imagen sin optimizar en la carpeta App_Sprites, y adicionalmente setear la propiedad Optimize a true. Cuando la pagina se renderiza el framework de optimización agrega el link de referencia al CSS apropiado en la cabecera de la página y procesa la imagen adecuada para la opción elegida.
Helper ASP.NET MVC y Razor
Para usar la optimización en vistas MVC o páginas Razor, debemos agregar dos helpers, uno para procesar el link al archivo CSS en la vista, y el otro para renderizar la imagen en la página. Para lo primero, agregamos el siguiente helper en el tag head.
<%: Microsoft.Samples.Web.ImageSprite.ImportStylesheet("~/App_Sprites/") %>
El método ImageSprite.ImportStylesheet genera el HTML requerido para crear el link apropiado al CSS, según la compatibilidad del browser.Para las aplicaciones MVC, debemos pasar esto al header, típicamente utilizando un elemento ContentPlaceHolder, al estar utilizando MasterPages.Para insertar la imagen en la vista mvc o razor, usamos el helper ImageSprite.Image como el siguiente ejemplo:
<%: Microsoft.Samples.Web.ImageSprite.Image("~/App_Sprites/myImage.jpg")
Ahora el video
Como siempre, espero que te sirva!
Saludos,
Gonzalo