Automatically merge small images in ASP. NET and display them with CSS Sprite.

Document directory

• 1. Create a folder named app_sprites in the program
• 2. How to make these files automatically generated
• 3. How to Use

A few days ago, the ms asp. NET team launched a small component: Sprite and image Optimization Framework, which is used to generate sprite CSS and generate a large image.

: Http://aspnet.codeplex.com/releases/view/50140

8189e6b8-fbe4-4f01-8f9f-5687c0ea9f59

The downloaded project contains a class library, an ASP. NET webform example, and an ASP. net mvc example.

The following is an example of ASP. net mvc.

 

The marked image in the figure is from a whole image.

~ \ App_sprites \ categories \ sprite0.png

~ \ App_sprites \ popular \ sprite0.png

The entire image is automatically merged by Sprite and image optimization framework with a few small images and generates CSS similar to the following

.popular_azureLogo-png{width:32px;height:30px;background-image:url(sprite0.png);background-position:-0px 0;}

 

Let's take a look at how we use this tool in the program.

1. Create a folder named app_sprites in the program

The image files in each subdirectory of the created subdirectory are automatically merged into a large file and CSS is generated.

Figure

FileSmall image files

Sprite0.pngFor the automatically generated large image,Highcompat.css/lowcompat.cssFor automatically generated CSS files

Note: These two cssfiles are not the same, but in the future, lowcompat.css may only support mainstream IE7-9, FF browsers, highcompat will support other

Settings. xmlFor the configuration file:

<?xml version="1.0" encoding="utf-8"?>
<ImageOptimizationSettings>
<FileFormat>png</FileFormat>  
<Base64Encoding>false</Base64Encoding> 
<Quality>80</Quality>  
<BackgroundColor>00000000</BackgroundColor> 
<MaxSize>500</MaxSize>
</ImageOptimizationSettings>

Where

FileformatLarge image type

Based64encoding indicates whether the image address is base64 encoded. If base64 encoding is used, the generated CSS may be as follows:

.categories_azureLogo-png{
width:16px;height:16px;
background: url(data:image/png;base64,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) no
-repeat 0% 0%;}

QualityTo generate Image Quality

BackgroundcolorIs the background color, transparent by default

MaxsizeMaximum image size

2. How to make these files automatically generated

This is done by adding modules, that is, when the page is accessed for the first time, it will automatically generate a large image and CSS

Add

          <add type ="Microsoft.Samples.Web.ImageOptimizationModule" name ="Microsoft.Samples.Web.ImageOptimizationModule"/>
    
Or iis7 or above is added on the system. webserver Node
    <modules runAllManagedModulesForAllRequests="true">
      <add type="Microsoft.Samples.Web.ImageOptimizationModule" name ="Microsoft.Samples.Web.ImageOptimizationModule"/>
    </modules>
Can achieve the effect
3. How to Use
This is done in two steps.
First, reference the generated CSS
    <%: Microsoft.Samples.Web.ImageSprite.ImportStylesheet("~/App_Sprites/categories/") %>    
<%: Microsoft.Samples.Web.ImageSprite.ImportStylesheet("~/App_Sprites/popular/") %>
It is OK to specify the corresponding folder.
Generate
    <link href="App_Sprites/categories/lowCompat.css" media="all" rel="stylesheet" type="text/css" />    
<link href="App_Sprites/popular/lowCompat.css" media="all" rel="stylesheet" type="text/css" />
Or use the link label of highcompat.css.
Second, how to use a raw image
If you want to use the IMG label
<%: Microsoft.Samples.Web.ImageSprite.Image("~/App_Sprites/popular/windowsLogo.png" ) %>
You can use it like this and generate a tag similar to the following.

If you want to directly use CSS for reference, you can use the specified class to specify the sprite background image.
<div class="categories_windowsLogo-png">windows</div> 
The large image is displayed on the background of the label, and the displacement of the small image to be displayed is automatically set.
Categories_windowsLogo-png
Indicates to display ~ /App_sprites/categories/windowslogo.png
 
Attach an original image