スプライトと画像の最適化プレビュー3
そもそも、 Sprite and Image OptimizationフレームワークはPreview 3にアップグレードされています。このフレームワークは、Microsoftが将来ASP.NETで計画できるものであり、同時に今日使用できるものの例です。 そして、このフレームワークはNuGetに登場してからさらに簡単になりました。
これら2つのパッケージは適切に配置されています。 実際、3つのパッケージがあり、そのうち2つはコアCoreパッケージに依存しています。 これらのパッケージは、CSSスプライトと埋め込み画像（データ：画像; base64）を自動生成するためのAPIです。 このAPIは、WebFormsプロジェクトとASP.NET MVCおよびWebPagesの両方で使用できます。 これは、3種類すべてのプロジェクトで機能するスプライトAPIに基づいて独自のライブラリを作成する場合に非常に便利です。 Sprite and Image Optimizationプロジェクトは、 このリンクから入手できるオープンソースとして公開されています。
スプライトのアイデアは、サイトに表示される小さな画像に対する何百ものコストのかかるHTTPリクエストを取り除き、代わりにすべての小さな画像を1つのリクエストで要求される1つの大きな画像に結合することです。 次に、CSSと1つの大きな画像を使用して、目的の画像をページに表示します。 ただし、通常、スプライトを作成し、ページ上でスプライトを操作するプロセス全体を整理するのは面倒なビジネスです。
1つの大きな画像に含まれるすべての小さな画像の相対座標を含むCSSファイルを作成する必要があるため、結合画像を作成するだけでは十分ではありません。
さらに、ブラウザの機能を使用して画像コンテンツを埋め込み、base-64エンコードおよびマークアップで画像を埋め込む機能を使用することもできます。
ASP.NET WebFormsのスプライト
フレームワークの作成者は、パッケージに便利なreadmeファイルを含めました。このファイルは、パッケージのインストール時に作成されるApp_Spritesフォルダーにあります。 このファイルのテキストを以下に示しますが、フレームワークの動作について知っておく必要のある本当にすべてが含まれているという点で、すでに楽しいものです。 このプラクティスに従っているパッケージが少ないことに驚かれることでしょう。 nugetパッケージのユーザーは既にVisual Studioまたはその近くにいることに注意してください。NuGetはツールの検索を停止するために存在するため、readmeの説明などの検索を停止します。
ASP.NETスプライトと画像最適化フレームワークの詳細については、 aspnet.codeplex.com / releases / view / 61896にアクセスしてください。
クイックスタート：
1）画像を「App_Sprites」ディレクトリに追加します。
2）アプリケーションの種類に応じて：
******************************
*** ASP.NET Webフォーム4 ****
******************************
<asp：ImageSprite ID = "Sprite1" runat = "server" ImageUrl = "〜/ App_Sprites / YOUR_IMAGE.jpg" />
************************************
*** ASP.NET MVC 3（ASPXビュー）***
************************************
<％：Sprite.ImportStylesheet（ "〜/ App_Sprites /"）％>
<％：Sprite.Image（ "〜/ App_Sprites / YOUR_IMAGE.jpg"）％>
********************************* .... ******
*** ASP.NET MVC 3（Razor Views）またはASP.NET Webページ***
********************************* .... ******
Sprite .ImportStylesheet（ "〜/ App_Sprites /"）
スプライト .Image（ "〜/ App_Sprites / YOUR_IMAGE.jpg"）
だから。 Visual Studioを起動し、新しいASP.NET WebFormsプロジェクトを作成しました。 NuGetは、コマンドライン、Visual StudioのGUI、またはPowerShellコマンドウィンドウを使用してVisual Studioから使用できます。
プロジェクトウィンドウ（ソリューションエクスプローラー）の[参照]フォルダーを右クリックし、[ライブラリパッケージ参照の追加]を選択して、NuGetからパッケージを追加します。 オンラインで利用可能なパッケージのリストのウィンドウで、「スプライト」という単語で検索しました。 AspNetSprites-WebFormsControlパッケージをインストールしました。
これで、いくつかの基本的な小さな画像をApp_Spritesフォルダーに配置しました。 これらはエクスプローラーウィンドウにあります。
次に、アプリケーションを起動しました。 次に、同じフォルダーの内容を見てください。 新しいsprite0.pngファイルに注目してください。 （もちろん、この名前を再定義できます）。 新しいスプライトファイルは、すべての小さな画像を結合することに注意してください。
さらに、新しいクラスのcssファイルがすぐそこにあり、画像にアクセスするのに役立ちます。 かっこいい！
ただし、WebFormsでは、これらのファイルについて考える必要さえありません。 WebFormsの本質はコントロールにあることを思い出してください。 コントロールを追加するだけで、WebFormsは必要に応じてIMGタグ自体を処理します。
出力では、最大限の互換性のために次のマークアップがあります。
わあ！
ASP.NET MVCのスプライト（Razorヘルパーとして）
ここで、前と同じ手順を実行しますが、 Asp.NET MVCアプリケーションにAspNetSprites-MvcAndRazorHelperパッケージをインストールします。
MVCプロジェクトの場合、_Layout.cshtmlの<head>にCSSファイルへのリンクを自分で追加します。
Sprite .ImportStylesheet（ "〜/ App_Sprites /"）
そして、ヘルパーを使用して、必要な場所に画像を挿入します：
スプライト .Image（ "〜/ App_Sprites / video.png"）
そして、これはWebフォームの場合とまったく同じように機能し、MVCの従来の方法でのみ機能します。 繰り返しになりますが、このnugetパッケージは、WebForms、MVC、WebPagesですぐに利用できる1つのライブラリの素晴らしい例です。