Small diagram optimization-ASP. NET Sprite and Image optimization (Web Form)

Small diagram optimization-ASP. NET Sprite and Image optimization (Web Form)

By installing the following kit from NuGet, you can merge your small icon (icon) into a single graph

This increases efficiency by reducing the file transfer between the browser and the Web server via CSS Sprites .

Google Doodle you often see (a particular holiday, Google's logo will be animated)

will also use this effect Oh!

For more information about CSS sprites, see the following two articles in Chinese:

Http://www.techbang.com/posts/5803-today-google-doodle-css-sprites-principle

http://www.wibibi.com/info.php?tid=373

Example Walkthrough-- http://www.w3schools.com/css/css_image_sprites.asp

Https://www.youtube.com/watch?v=g52lgaUO8bQ

In NuGet, search for the keyword "aspnetsprites" to

This suite can be used in Web Form or ASP.

(at the end of the article there is a demo to share, is introduced in the MVC use)

When the installation is complete, a app_sprites directory appears

Then, I copied a few " small icon " pictures into this new app_sprites directory

(Don't put all your pictures, especially the big picture files) in. You still go back to the idea of CSS sprites to clarify it)

Remember Oh! To build your site or project to help you

when you are done, you can see the app_sprites directory contains a new picture and CSS file.

I put in the 10 small diagram , was combined into a large picture file

The following uses the Web Form description

We can use a new control called <asp:ImageSprite>

The path to the suggested picture must be using ASP. NET root directory , write complete,

Write from the ~ sign , otherwise the result may not come out!

I have deliberately adopted two methods of comparison:

Above, use the traditional HTML tags and <asp:Image> to display the pictures.

Below, the new <asp:ImageSprite> controls are used

From the execution results, you can see the difference between the two (e.g.)

Related articles:

Friends using ASP. See the demo's masterpiece

Sprite and Image Optimization website Optimization kit, no-brain-made CSS Sprite kit http://demo.tc/post/783

There are YouTube instructional videos (however, because the version is slightly different, for reference only)

Https://www.youtube.com/watch?v=URuuSlLZcX0

This article is also very clear http://dotnetslackers.com/articles/aspnet/ Css-sprites-and-the-asp-net-sprite-and-image-optimization-library.aspx

Small diagram optimization-ASP. NET Sprite and Image optimization (Web Form)