ASP.NET Image Sprites made easy by NuGet
I thought, since the NuGet package manager’s website began to fill up with packages , then it’s time to start choosing particularly valuable packages. Such packages that actually do useful things, but can be missed by developers. I'm going to look for such packages among the most useful open source projects. I'm going to understand how these packages are assembled, whether they have something particularly interesting in terms of their practical application.
To begin with, the Sprite and Image Optimization framework has been updated to Preview 3. This framework is an example of what Microsoft can plan for ASP.NET in the future and at the same time what you can use today. And this framework has become even easier because it appeared in NuGet.
')
These two packages are well arranged. In fact, there are three packages, two of which depend on the core package Core.These packages provide an API for the automatic generation of CSS sprites and embedded images (data: image; base64). This API is available and works for both WebForms projects and ASP.NET MVC and WebPages. This is very useful when you create your own library based on the sprite API, which should work in all three types of projects. The project Sprite and Image Optimization is published with open source code, which is available at this link .
The idea of sprites is to get rid of the hundreds of expensive HTTP requests for small images presented on your site and instead merge all the small images into one big picture that you can request with a single request. Then display the desired image on the page using CSS and a single large image. However, usually, the organization of the whole process of creating sprites and working with them on the pages is a troublesome thing.
It is not enough for you to create a merged image, for it you also need to create a CSS file with the relative coordinates of all the small images included in one large image.
In addition, you may want to use the function of embedding image content using browser capabilities to work with base-64 encoding and embedding images into markup.
The creators of the framework have included in the package a useful readme-file, which can be found in the folder App_Sprites, which is created when installing the package. Below is the text of this file, it is pleasant because it contains everything that you really need to know about the work of the framework. You will be surprised how few packages follow this practice. Remember, the user of your nuget-package is either already in Visual Studio or somewhere near it, and since NuGet exists to stop searching for tools, make sure that your user has stopped looking for things like the readme description.
So. I launched Visual Studio and created a new ASP.NET WebForms project. Remember, you can use NuGet from the command line, from the GUI in Visual Studio, or from Visual Studio using the PowerShell command window.
I right-clicked the References folder in the Project Explorer (Solution Explorer) and selected “Add Library Package Reference” to add a package from NuGet. In the list of packages available online, I asked for the search with the word “sprite”. And installed the AspNetSprites-WebFormsControl package.
Now I just placed a few basic small images in the App_Sprites folder. Here they are in the Explorer window:
Next, I just launched the application. Look now at the contents of the same folder. Noticed the new sprite0.png file? (of course you can redefine this name). Note that the new sprite file combines all the small images.
In addition, css-files with new classes are immediately located there, which will be useful to you for accessing images. Cool!
However, in WebForms I don’t even have to think about these files. Recall that the essence of WebForms lies in the controls. I can simply add a control and WebForms will process the IMG tag itself as required:
And at the output we will have the following markup for maximum compatibility:
Great!
Now, I will do the same steps as before, but install the AspNetSprites-MvcAndRazorHelper package into my ASP.NET MVC application.
In the case of the MVC project, I add the links to the CSS files myself to the <head> of my _Layout.cshtml:
Sprite .ImportStylesheet ("~ / App_Sprites /")
And then I use the helper to insert the image where I need it:
Sprite .Image ("~ / App_Sprites / video.png")
And it works in the same way as in the case of WebForms, only in the traditional way for MVC. And again I want to add that this nuget-package is a great example of one library available immediately for WebForms, MVC and WebPages.
Sprite and Image Optimization Preview 3
To begin with, the Sprite and Image Optimization framework has been updated to Preview 3. This framework is an example of what Microsoft can plan for ASP.NET in the future and at the same time what you can use today. And this framework has become even easier because it appeared in NuGet.
')
These two packages are well arranged. In fact, there are three packages, two of which depend on the core package Core.These packages provide an API for the automatic generation of CSS sprites and embedded images (data: image; base64). This API is available and works for both WebForms projects and ASP.NET MVC and WebPages. This is very useful when you create your own library based on the sprite API, which should work in all three types of projects. The project Sprite and Image Optimization is published with open source code, which is available at this link .
The idea of sprites is to get rid of the hundreds of expensive HTTP requests for small images presented on your site and instead merge all the small images into one big picture that you can request with a single request. Then display the desired image on the page using CSS and a single large image. However, usually, the organization of the whole process of creating sprites and working with them on the pages is a troublesome thing.
It is not enough for you to create a merged image, for it you also need to create a CSS file with the relative coordinates of all the small images included in one large image.
In addition, you may want to use the function of embedding image content using browser capabilities to work with base-64 encoding and embedding images into markup.
Sprites in ASP.NET WebForms
The creators of the framework have included in the package a useful readme-file, which can be found in the folder App_Sprites, which is created when installing the package. Below is the text of this file, it is pleasant because it contains everything that you really need to know about the work of the framework. You will be surprised how few packages follow this practice. Remember, the user of your nuget-package is either already in Visual Studio or somewhere near it, and since NuGet exists to stop searching for tools, make sure that your user has stopped looking for things like the readme description.
For detailed information on ASP.NET Sprites and the Image Optimization Framework, go to aspnet.codeplex.com/releases/view/61896
QUICK START:
1) Add your images to the "App_Sprites" directory.
2) Depending on your application type:
****************************
*** ASP.NET Web Forms 4 ****
****************************
<asp: ImageSprite ID = "Sprite1" runat = "server" ImageUrl = "~ / App_Sprites / YOUR_IMAGE.jpg" />
***********************************
*** ASP.NET MVC 3 (ASPX Views) ***
***********************************
<%: Sprite.ImportStylesheet ("~ / App_Sprites /")%>
<%: Sprite.Image ("~ / App_Sprites / YOUR_IMAGE.jpg")%>
************************************************** ******
*** ASP.NET MVC 3 (Razor Views) or ASP.NET Web Pages ***
************************************************** ******
Sprite .ImportStylesheet ("~ / App_Sprites /")
Sprite .Image ("~ / App_Sprites / YOUR_IMAGE.jpg")
So. I launched Visual Studio and created a new ASP.NET WebForms project. Remember, you can use NuGet from the command line, from the GUI in Visual Studio, or from Visual Studio using the PowerShell command window.
I right-clicked the References folder in the Project Explorer (Solution Explorer) and selected “Add Library Package Reference” to add a package from NuGet. In the list of packages available online, I asked for the search with the word “sprite”. And installed the AspNetSprites-WebFormsControl package.
Now I just placed a few basic small images in the App_Sprites folder. Here they are in the Explorer window:
Next, I just launched the application. Look now at the contents of the same folder. Noticed the new sprite0.png file? (of course you can redefine this name). Note that the new sprite file combines all the small images.
In addition, css-files with new classes are immediately located there, which will be useful to you for accessing images. Cool!
However, in WebForms I don’t even have to think about these files. Recall that the essence of WebForms lies in the controls. I can simply add a control and WebForms will process the IMG tag itself as required:
And at the output we will have the following markup for maximum compatibility:
Great!
Sprites in ASP.NET MVC (as a Razor helper)
Now, I will do the same steps as before, but install the AspNetSprites-MvcAndRazorHelper package into my ASP.NET MVC application.
In the case of the MVC project, I add the links to the CSS files myself to the <head> of my _Layout.cshtml:
Sprite .ImportStylesheet ("~ / App_Sprites /")
And then I use the helper to insert the image where I need it:
Sprite .Image ("~ / App_Sprites / video.png")
And it works in the same way as in the case of WebForms, only in the traditional way for MVC. And again I want to add that this nuget-package is a great example of one library available immediately for WebForms, MVC and WebPages.
Source: https://habr.com/ru/post/115195/
All Articles