オンラインまたは C# でイメージを Base64 にエンコードする

Image を Base64 でエンコードされた文字列に変換します。 JPG、JPEG、PJP、PJPEG、PNG、BMP、XBM、GIF、TIFF、ICO、IFIF、WEBPなどの画像フォーマットに対応。

Base64 エンコーディング

Base64 は、バイナリ データを ASCII テキスト形式に変換するための同様のエンコード スキームのグループです。 Base64 は通常、インターネット経由でデータを転送するために使用されます。画像を Base64 に変換した結果は、ラテン文字、数字、および「+」と「/」の 2 つの文字のセットになります。どんなブラウザでも、それらをどうするかを知っています。つまり、Base64 は一種のバイナリからテキストへのエンコーディングです。 Base64 でエンコードされた文字列は、プレーンな Base64、JSON、XML、データ URI、または CSS など、さまざまな出力形式で使用されます。

Base64 は Web で特に一般的であり、その使用には、HTML や CSS ファイルなどのテキスト リソース内に画像ファイルやその他のバイナリ リソースを埋め込む機能が含まれます。 HTML ファイルに画像データを含めるということは、画像が既に HTML ドキュメントに埋め込まれているため、ブラウザーがファイルを取得するために追加の Web 要求を行う必要がないことを意味します。小さな画像にのみ Base64 エンコーディングを使用することをお勧めします。 Base64 画像が大きいと、HTML に大量のコードが生成され、パフォーマンス上のメリットが失われます。また、Base64 画像は画像検索に表示されないため、Google によってインデックス化されることはありません。

オンラインで画像を Base64 に変換する

Aspose.SVG for .NET API でリアルタイムに画像をエンコード!ローカル ファイル システムから画像をロードすると、すぐに結果がデータ URI、Base64 画像ソース、および Base64 CSS バックグラウンド ソースとして取得されます。 SVG、JPG、JPEG、PJP、PJPEG、PNG、BMP、XBM、GIF、TIFF、ICO、IFIF、WEBP、その他の画像フォーマットがサポートされています。

C# で画像を Base64 に変換する

この記事では、Aspose.SVG .NET API 機能を使用して画像ファイルを Base64 文字列にエンコードする方法について説明します。次の C# の例は、PNG 画像を Base64 文字列に変換し、それを SVG ファイルに埋め込む方法を示しています。 ReadAllBytes(string) メソッドは、イメージ (バイナリ ファイル) を開き、ファイルの内容をバイト配列に読み取るために使用されます。 ToBase64String(bytes) メソッドは、8 ビット整数の配列を、Base 64 数字でエンコードされた同等の文字列表現に変換します。 AppendChild() メソッドは、Base64 でエンコードされた画像を SVG ドキュメントに追加します。

PNG 画像を Base64 に変換する C# コード

    // Open a binary file - PNG image
    var bytes = File.ReadAllBytes(@"image.png");
    // Initialize an SVGDocument object
    var document = new SVGDocument();
    // Create an image element
    var img = (SVGImageElement)document.CreateElementNS("http://www.w3.org/2000/svg", "image");
    // Convert image to base64
    img.Href.BaseVal = "data:image/png;charset=utf-8;base64," + Convert.ToBase64String(bytes);
    // Add the image element into the SVG document
    document.RootElement.AppendChild(img);
    // Save the SVG document
    document.Save(@"image-base64.svg");

結果の image-base64.svg ファイルのフラグメントを以下に示します。 Base64 文字列は、SVG コード例が乱雑にならないようにカットされています。 Base64 画像を URI データとして埋め込む形式は、具体的には次のとおりです。

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

Base64 イメージを埋め込むための SVG コード

<svg xmlns="http://www.w3.org/2000/svg">
	<image href="data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUg..." alt="Red border"/>
</svg>

HTML に Base64 画像を埋め込む


Image を Base64 に変換する必要があるのはなぜですか? Base64 でエンコードされた画像は、<img> タグを使用して HTML に埋め込むことができます。データ URI を使用して、画像データを HTML ファイルに直接貼り付けるだけです。 Base64 エンコーディングとデータ URI スキームの使用により、ブラウザーが Web ページをレンダリングするために必要な HTTP 要求の数が減少します。このコード スニペットは、Base64 画像を HTML に埋め込む方法を示しています。

Base64 Image をデータ URI として埋め込む HTML コード

<body>
    <div>
        <img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUg..." alt="Red border">
    </div>
</body>

データ URI は、カンマで区切られた 2 つの部分で構成されます。最初の部分は Base64 でエンコードされた画像を指定し、2 番目の部分は Base64 でエンコードされた画像文字列を指定します。

  1. data:image/jpeg;base64 は、データ URI スキーム ヘッダーです。
  2. iVBORw0KGgoAAAANSUhEUg... はエンコードされた Base64 データです。

Base64 画像を CSS バックグラウンド コードとして埋め込んだ例


画像に対する HTTP リクエストの数を減らすもう 1 つの方法は、CSS の「background-image」プロパティを使用することです。 background-image プロパティは、画像を要素の背景として定義します。 background-image プロパティの各画像は、URL または画像データ URI として指定できます。違いは、最初のケースではブラウザが HTTP リクエストを送信して外部画像を取得するのに対し、2 番目のケースでは Base64 画像がドキュメントに直接埋め込まれ、他のソースを指摘しないことです。したがって、ブラウザは出力を配信するために HTTP リクエストをロードする必要はありません。

Base64 Image をデータ URI として埋め込む CSS コード

body {
    background-image: url('data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUg...');
}

オンライン Base64 エンコーダー

オンライン Base64 エンコーダー は、SVG ドキュメントまたは画像ファイルのコンテンツを、Base-64 数字でエンコードされた同等の文字列表現に変換します。また、データ URI、JSON、XML などの例も提供します。エンコード ツールは、Web サイトのコンテンツや電子メール メッセージを読み取れなくするさまざまなデータ エンコードの問題を回避するのに役立ちます。 Base64 Encoders は安全で使いやすく、完全に無料です。それらは、どのブラウザーでも、どのオペレーティング システムでも動作します。 Image を Base64 に無料で変換しましょう!

Aspose.SVG for .NET ライブラリのインストール

Aspose.SVG for .NET は、SVG ドキュメントを処理およびレンダリングするための幅広い機能を提供するように設計された、クロスプラットフォームの柔軟なライブラリです。 .NET アプリにシームレスに統合され、サードパーティ ソフトウェアをインストールすることなく SVG ファイルを操作できます。当社の SVG .NET API は、C#、VB.NET、ASP.NET などの任意の .NET 言語で使用できます。Mono (.NET 4.0 Framework サポート) をインストールできる、または .NET を使用できる任意の OS で同様に機能します。芯。これには、Windows、Linux、および macOS が含まれます。

NuGet による .NET 用の Aspose.SVG のインストール:

  1. パッケージ マネージャー コンソールを使用します。
  2. NuGet パッケージ マネージャー GUI を使用します。

C# ライブラリのインストールの詳細については、 Aspose.SVG ドキュメント を参照してください。

その他の対応エンコーダー

Image を Base64 にエンコードできます。JPG、PNG、BMP、GIF、TIFF、ICO、および SVG 形式がサポートされています。