1. IronPDF
  2. ハウツー
  3. ベースURL & アセットエンコーディング
C#でのPDF生成でベースURLを使用する方法

How to Use Base URLs & Asset Encoding in C# .NET 10

カーティス・チャウ
カーティス・チャウ
更新日:
This article was translated from English: Does it need improvement?
Translated
View the article in English

IronPDFのベースURLでは、BaseUrlOrPathパラメータを指定することで、HTMLからPDFへの変換中にCSS、JavaScript、および画像アセットを適切に読み込むことができます。このパラメータには、Web URLまたは相対パス（ローカルファイルパス）を指定して、アセットを相対的に解決することができます。

クイックスタート: IronPDFでベース URL を実装する

.NET C#でHTMLからPDFへの変換中にシームレスにアセットをロードするためのベースURLを実装することで、IronPDFを使い始めることができます。 この例では、BaseUrlOrPath を設定して、すべての CSS、JavaScript、および画像が適切に参照されるようにし、最小限の設定で PDF 生成を簡素化する方法について説明しています。

  1. IronPDF をNuGetパッケージマネージャでインストール

    PM > Install-Package IronPdf

  2. このコード スニペットをコピーして実行します。

    new IronPdf.ChromePdfRenderer().RenderHtmlAsPdf("<img src='icons/logo.png'>", @"C:\site\assets\").SaveAs("with-assets.pdf");

  3. 実際の環境でテストするためにデプロイする

    今日プロジェクトで IronPDF を使い始めましょう無料トライアル

    arrow pointer

最小限のワークフロー（5ステップ）

  1. HTMLからCSS、画像をサポートするIronPDFをダウンロードする。
  2. BaseUrlOrPathパラメータをHTMLの外部画像に指定
  3. WebとPDF表示に対してMVCで正しいsrcを設定
  4. BaseUrlプロパティを使用してカスタムヘッダーとフッターを指定
  5. 出力PDFをチェックする

Convert.ToBase64String


画像と CSS アセットを含む HTML 文字列から PDF をレンダリングするには?

HTML文字列をPDFに変換する際は、CSS、JavaScriptファイル、画像などのリソースに対して BaseUrlOrPath パラメータを設定してください。 BaseUrlOrPath は、すべてのアセットが相対的に読み込まれるベースURLを指定します。 CustomCssUrl

これは、リモート資産をロードするための"http"で始まるWeb URLまたはディスク上の資産にアクセスするためのローカルファイルパスであることができます。 BaseUrlOrPath を正しく設定することで、変換中にアセットが適切に読み込まれるようになります。 HTMLからPDFへの変換の詳細については、包括的なHTML to PDFチュートリアルをご覧ください。

:path=/static-assets/pdf/content-code-examples/how-to/base-urls-baseurl.cs
using IronPdf;

// Instantiate ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

string baseUrl = @"C:\site\assets\";
string html = "<img src='icons/iron.png'>";

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html, baseUrl);

// Export PDF
pdf.SaveAs("html-with-assets.pdf");
Imports IronPdf

' Instantiate ChromePdfRenderer
Private renderer As New ChromePdfRenderer()

Private baseUrl As String = "C:\site\assets\"
Private html As String = "<img src='icons/iron.png'>"

' Render HTML to PDF
Private pdf As PdfDocument = renderer.RenderHtmlAsPdf(html, baseUrl)

' Export PDF
pdf.SaveAs("html-with-assets.pdf")
$vbLabelText   $csharpLabel

外部資産を含む複雑なシナリオについては、フォントの管理やPDFへの画像の追加に関するガイドをご覧ください。

MVCアプリケーションでベースURLを設定するには?

MVCアプリケーションでは、画像ファイルのパスを指定するには慎重な設定が必要です。 IronPDFが画像を正しく検出し、Webサイト上に適切に表示できるようにするには、src=""属性を適切に設定してください。

以下のファイル階層を設定

  • baseUrlOrPath を @"wwwroot/image" に変更
  • src 属性を "../image/Sample.jpg" に変更
wwwroot
└── image
    ├── Sample.jpg
    └── Sample.png

例えば:

:path=/static-assets/pdf/content-code-examples/how-to/base-mvc.cs
// Instantiate ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf("html.Result", @"wwwroot/image");
' Instantiate ChromePdfRenderer
Dim renderer As New ChromePdfRenderer()

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("html.Result", "wwwroot/image")
$vbLabelText   $csharpLabel 

<img src="../image/Sample.jpg"/>
<img src="../image/Sample.png"/>

<img src="../image/Sample.jpg"/>
<img src="../image/Sample.png"/>
HTML

ASP.NET Core MVC固有の実装については、CSHTML to PDF (MVC Core)ガイドを参照してください。

どのファイルパス形式を避けるべきですか?

警告

機能しないファイルパス形式

これらのフォーマットはChromeブラウザでは動作しますが、MVCアプリでは誤ったディレクトリを指定してしまいます。RenderHtmlAsPdfメソッドで指定されている場合、IronPDFでは正常に動作します：

<img src="image/footer.png"/>  
<img src="./image/footer.png"/>  
<img src="image/footer.png"/>  
<img src="./image/footer.png"/>
HTML

これらのフォーマットはMVCアプリでは機能しますが、IronPDFファイルパスでは失敗します：

<img src="/image/footer.png"/>  
<img src="~/image/footer.png"/>
<img src="/image/footer.png"/>  
<img src="~/image/footer.png"/>
HTML

)}]

アセット ローディングの一般的なトラブルシューティングのヒントとは

アセットが読み込めない場合は、以下のトラブルシューティング手順を検討してください：

  1. 絶対パスを確認する: 開発中に絶対ファイルパスを使用してアクセス可能性を確認
  2. ファイルの権限を確認する: アセットディレクトリへの読み取りアクセスがアプリケーションにあることを確認
  3. リモートURLでテストする: フル資格URLを使用してパスの問題を分離 4.ロギングを有効にする：資産の読み込みをデバッグするためにIronPDFのカスタムロギングを使用してください。
// Example: Debug asset loading with absolute paths
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Enable debug logging
renderer.RenderingOptions.EnableJavaScript = true;
renderer.RenderingOptions.WaitFor.RenderDelay(500); // Give assets time to load

// Use absolute path for testing
string absoluteBasePath = Path.GetFullPath(@"C:\MyProject\wwwroot\assets");
string html = @"
    <html>
    <head>
        <link rel='stylesheet' href='styles/main.css'>
    </head>
    <body>
        <img src='images/logo.png' />
        <script src='scripts/app.js'></script>
    </body>
    </html>";

PdfDocument pdf = renderer.RenderHtmlAsPdf(html, absoluteBasePath);
// Example: Debug asset loading with absolute paths
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Enable debug logging
renderer.RenderingOptions.EnableJavaScript = true;
renderer.RenderingOptions.WaitFor.RenderDelay(500); // Give assets time to load

// Use absolute path for testing
string absoluteBasePath = Path.GetFullPath(@"C:\MyProject\wwwroot\assets");
string html = @"
    <html>
    <head>
        <link rel='stylesheet' href='styles/main.css'>
    </head>
    <body>
        <img src='images/logo.png' />
        <script src='scripts/app.js'></script>
    </body>
    </html>";

PdfDocument pdf = renderer.RenderHtmlAsPdf(html, absoluteBasePath);
Imports System.IO

' Example: Debug asset loading with absolute paths
Dim renderer As New ChromePdfRenderer()

' Enable debug logging
renderer.RenderingOptions.EnableJavaScript = True
renderer.RenderingOptions.WaitFor.RenderDelay(500) ' Give assets time to load

' Use absolute path for testing
Dim absoluteBasePath As String = Path.GetFullPath("C:\MyProject\wwwroot\assets")
Dim html As String = "
    <html>
    <head>
        <link rel='stylesheet' href='styles/main.css'>
    </head>
    <body>
        <img src='images/logo.png' />
        <script src='scripts/app.js'></script>
    </body>
    </html>"

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html, absoluteBasePath)
$vbLabelText   $csharpLabel

画像付きの HTML ヘッダーとフッターを追加するにはどうすればよいですか?

HTMLのヘッダーやフッターを新規または既存のPDFにレンダリングする場合、それらは独立したHTMLドキュメントとして扱われ、PDFからBaseURLを継承しません。 包括的なヘッダーとフッターのオプションについては、ヘッダーとフッターのガイドをご覧ください。

アセットの読み込み元として BaseURL を設定してください: ChromePdfRenderOptions

なぜヘッダーはメインドキュメントのベース URL を継承しないのですか

ヘッダーとフッターは、パフォーマンスと分離のために別々のHTMLドキュメントとしてレンダリングされます。 このデザインにより

  • メインコンテンツに影響を与えない独立したスタイリング
  • すべてのページでの一貫したレンダリング
  • 大規模ドキュメント向けの優れたメモリ管理
  • 異なるアセットソースを使用する柔軟性

ヘッダーとコンテンツで異なるベース URL を設定するにはどうすればよいですか?

アセットを効果的に整理するために、ヘッダー、フッター、メインコンテンツに異なるベースURLを指定します：

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Main content base URL
string contentBaseUrl = @"C:\website\public\";

// Header specific assets
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
    HtmlFragment = "<img src='header-logo.png'><link rel='stylesheet' href='header.css'>",
    BaseUrl = new Uri(@"C:\website\headers\").AbsoluteUri
};

// Footer specific assets
renderer.RenderingOptions.HtmlFooter = new HtmlHeaderFooter()
{
    HtmlFragment = "<div class='footer'>© 2024 Company</div><link rel='stylesheet' href='footer.css'>",
    BaseUrl = new Uri(@"C:\website\footers\").AbsoluteUri
};

// Render main content with its own base URL
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>Main Content</h1>", contentBaseUrl);
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Main content base URL
string contentBaseUrl = @"C:\website\public\";

// Header specific assets
renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
    HtmlFragment = "<img src='header-logo.png'><link rel='stylesheet' href='header.css'>",
    BaseUrl = new Uri(@"C:\website\headers\").AbsoluteUri
};

// Footer specific assets
renderer.RenderingOptions.HtmlFooter = new HtmlHeaderFooter()
{
    HtmlFragment = "<div class='footer'>© 2024 Company</div><link rel='stylesheet' href='footer.css'>",
    BaseUrl = new Uri(@"C:\website\footers\").AbsoluteUri
};

// Render main content with its own base URL
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>Main Content</h1>", contentBaseUrl);
Dim renderer As New ChromePdfRenderer()

' Main content base URL
Dim contentBaseUrl As String = "C:\website\public\"

' Header specific assets
renderer.RenderingOptions.HtmlHeader = New HtmlHeaderFooter() With {
    .HtmlFragment = "<img src='header-logo.png'><link rel='stylesheet' href='header.css'>",
    .BaseUrl = New Uri("C:\website\headers\").AbsoluteUri
}

' Footer specific assets
renderer.RenderingOptions.HtmlFooter = New HtmlHeaderFooter() With {
    .HtmlFragment = "<div class='footer'>© 2024 Company</div><link rel='stylesheet' href='footer.css'>",
    .BaseUrl = New Uri("C:\website\footers\").AbsoluteUri
}

' Render main content with its own base URL
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>Main Content</h1>", contentBaseUrl)
$vbLabelText   $csharpLabel

ローカル アセットを使用して HTML ファイルを PDF に変換するにはどうすればよいですか?

HTMLファイルをPDFにレンダリングする場合、すべてのアセットはそのファイルにローカルであると仮定されます。HTMLファイルの変換については、HTML File to PDFガイドをご覧ください。

:path=/static-assets/pdf/content-code-examples/how-to/base-html-file.cs
using IronPdf;

// Instantiate ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Render HTML file to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("C:\\Assets\\TestInvoice1.html");

// Export PDF
pdf.SaveAs("Invoice.pdf");
Imports IronPdf

' Instantiate ChromePdfRenderer
Private renderer As New ChromePdfRenderer()

' Render HTML file to PDF
Private pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("C:\Assets\TestInvoice1.html")

' Export PDF
pdf.SaveAs("Invoice.pdf")
$vbLabelText   $csharpLabel

上記の例では、JS、CSS、画像ファイルはすべて、ディスク上のC:˶Assetsフォルダ（HTMLファイルと同じディレクトリ）から読み込まれます。

必要に応じて、追加スタイルシート（HtmlToPdf）内で CustomCssUrl を使用し、.NET PDF レンダリング専用に追加のスタイルシートを指定してください。 例えば：

:path=/static-assets/pdf/content-code-examples/how-to/base-html-file-baseurl.cs
using IronPdf;

// Instantiate ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set additional CSS url
renderer.RenderingOptions.CustomCssUrl = "./style.css";

// Render HTML file to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>");

// Export PDF
pdf.SaveAs("tryCss.pdf");
Imports IronPdf

' Instantiate ChromePdfRenderer
Private renderer As New ChromePdfRenderer()

' Set additional CSS url
renderer.RenderingOptions.CustomCssUrl = "./style.css"

' Render HTML file to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>")

' Export PDF
pdf.SaveAs("tryCss.pdf")
$vbLabelText   $csharpLabel

CustomCssUrl

ご注意ChromePdfRenderOptions.CustomCssUrl プロパティは現在、RenderHtmlAsPdf メソッドを使用して HTML 文字列から PDF へレンダリングする場合にのみ機能します。

追加のスタイリングに CustomCssUrl を使用するのはいつですか?

CustomCssUrl は、次のような場合に最適です：

  • 印刷専用のスタイル: ナビゲーションメニューやインタラクティブ要素を隠す
  • PDFレイアウトの最適化: 印刷に合わせたマージンとページ区切り
  • 条件付きフォーマット: PDF生成時のみスタイルを適用
  • A/Bテスト：ソースHTMLを変更することなく、さまざまなPDFレイアウトをテストする。

HTMLファイルで相対アセット パスを処理するにはどうすればよいですか?

相対パスを含むHTMLファイルを扱う場合は、ファイル構造が参照をサポートしていることを確認してください：

// Example HTML file structure
/*
C:\Projects\Reports\
    ├── invoice.html
    ├── css\
    │   └── styles.css
    ├── js\
    │   └── calculations.js
    └── images\
        └── logo.png
*/

// HTML content with relative paths
string htmlContent = @"
<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='css/styles.css'>
    <script src='js/calculations.js'></script>
</head>
<body>
    <img src='images/logo.png' alt='Company Logo'>
    <h1>Invoice #12345</h1>
</body>
</html>";

// Save HTML and render
File.WriteAllText(@"C:\Projects\Reports\invoice.html", htmlContent);
ChromePdfRenderer renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlFileAsPdf(@"C:\Projects\Reports\invoice.html");
pdf.SaveAs("invoice-output.pdf");
// Example HTML file structure
/*
C:\Projects\Reports\
    ├── invoice.html
    ├── css\
    │   └── styles.css
    ├── js\
    │   └── calculations.js
    └── images\
        └── logo.png
*/

// HTML content with relative paths
string htmlContent = @"
<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='css/styles.css'>
    <script src='js/calculations.js'></script>
</head>
<body>
    <img src='images/logo.png' alt='Company Logo'>
    <h1>Invoice #12345</h1>
</body>
</html>";

// Save HTML and render
File.WriteAllText(@"C:\Projects\Reports\invoice.html", htmlContent);
ChromePdfRenderer renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlFileAsPdf(@"C:\Projects\Reports\invoice.html");
pdf.SaveAs("invoice-output.pdf");
Imports System.IO
Imports IronPdf

' Example HTML file structure
'
' C:\Projects\Reports\
'     ├── invoice.html
'     ├── css\
'     │   └── styles.css
'     ├── js\
'     │   └── calculations.js
'     └── images\
'         └── logo.png
'

' HTML content with relative paths
Dim htmlContent As String = "
<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='css/styles.css'>
    <script src='js/calculations.js'></script>
</head>
<body>
    <img src='images/logo.png' alt='Company Logo'>
    <h1>Invoice #12345</h1>
</body>
</html>"

' Save HTML and render
File.WriteAllText("C:\Projects\Reports\invoice.html", htmlContent)
Dim renderer As New ChromePdfRenderer()
Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("C:\Projects\Reports\invoice.html")
pdf.SaveAs("invoice-output.pdf")
$vbLabelText   $csharpLabel

HTMLでBase64を使って画像を直接エンコードするには?

画像アセットは、HTMLファイルまたは文字列に直接エンコードすることができ、画像の欠落による問題を避けることができます。 このアプローチでは、base64エンコーディングを使用してください。 このアプローチでは、base64エンコーディングを使用してください。 このアプローチにはbase64エンコーディングを使用:

  1. まず、ファイルを読み取るか、ネットワークリクエストを介して画像のバイナリデータを取得します。
  2. Microsoft .NET の Convert.ToBase64String メソッドを使用して、バイナリデータを base64 に変換します。
  3. base64データの前に "data:image/svg+xml;base64," を使用し、HTML内で画像タグを構築します。 画像タイプはbase64データの前に指定されることに注意してください。 MDN Web Docsの画像タイプとフォーマットを訪れて、画像フォーマットタイプについての詳細を得ることができます。
:path=/static-assets/pdf/content-code-examples/how-to/add-images-to-pdfs-base64-image.cs
using IronPdf;
using System;
using System.IO;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Import image file binary data
byte[] binaryData = File.ReadAllBytes("ironpdf-logo-text-dotnet.svg");

// Convert the binary data to base 64
string imgDataUri = Convert.ToBase64String(binaryData);

// Embed in HTML
string html = $"<img src='data:image/svg+xml;base64,{imgDataUri}'>";

// Convert HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);

// Export the PDF
pdf.SaveAs("embedImageBase64.pdf");
Imports IronPdf
Imports System
Imports System.IO

Private renderer As New ChromePdfRenderer()

' Import image file binary data
Private binaryData() As Byte = File.ReadAllBytes("ironpdf-logo-text-dotnet.svg")

' Convert the binary data to base 64
Private imgDataUri As String = Convert.ToBase64String(binaryData)

' Embed in HTML
Private html As String = $"<img src='data:image/svg+xml;base64,{imgDataUri}'>"

' Convert HTML to PDF
Private pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)

' Export the PDF
pdf.SaveAs("embedImageBase64.pdf")
$vbLabelText   $csharpLabel

なぜファイル参照よりも Base64 エンコードを選ぶのでしょうか

Base64エンコーディングにはいくつかの利点があります：

  • 自己完結型HTML: 外部依存がないため、配布が簡単
  • クロスプラットフォーム互換性: ファイルシステムの違いに関係なく機能
  • セキュリティ: ファイルシステムアクセスが不要でセキュリティリスクが低減
  • 信頼性: 本番環境でのアセット欠損エラーを排除
  • バージョン管理: 画像がHTML内に含まれているため、バージョニングが簡素化

ただし、以下のトレードオフを考慮してください：

  • HTMLサイズの増加: base64エンコーディングによりサイズが約33%増加
  • キャッシュなし: 埋め込まれた画像は個別にキャッシュできない
  • メモリ使用量: 画像全体がメモリに読み込まれなければなりません。

どのような画像形式が Base64 エンコーディングに最適ですか?

画像フォーマットが異なると、base64エンコード時の効率も異なります：

// Example: Encoding different image formats
public string EncodeImageWithMimeType(string imagePath)
{
    byte[] imageBytes = File.ReadAllBytes(imagePath);
    string base64 = Convert.ToBase64String(imageBytes);

    // Determine MIME type based on extension
    string extension = Path.GetExtension(imagePath).ToLower();
    string mimeType = extension switch
    {
        ".png" => "image/png",      // Best for graphics with transparency
        ".jpg" or ".jpeg" => "image/jpeg",  // Best for photographs
        ".gif" => "image/gif",       // Best for simple animations
        ".svg" => "image/svg+xml",   // Best for scalable graphics
        ".webp" => "image/webp",     // Best overall compression
        _ => "image/png"             // Default fallback
    };

    return $"data:{mimeType};base64,{base64}";
}

// Usage
string encodedImage = EncodeImageWithMimeType("logo.png");
string html = $"<img src='{encodedImage}' alt='Company Logo'>";
// Example: Encoding different image formats
public string EncodeImageWithMimeType(string imagePath)
{
    byte[] imageBytes = File.ReadAllBytes(imagePath);
    string base64 = Convert.ToBase64String(imageBytes);

    // Determine MIME type based on extension
    string extension = Path.GetExtension(imagePath).ToLower();
    string mimeType = extension switch
    {
        ".png" => "image/png",      // Best for graphics with transparency
        ".jpg" or ".jpeg" => "image/jpeg",  // Best for photographs
        ".gif" => "image/gif",       // Best for simple animations
        ".svg" => "image/svg+xml",   // Best for scalable graphics
        ".webp" => "image/webp",     // Best overall compression
        _ => "image/png"             // Default fallback
    };

    return $"data:{mimeType};base64,{base64}";
}

// Usage
string encodedImage = EncodeImageWithMimeType("logo.png");
string html = $"<img src='{encodedImage}' alt='Company Logo'>";
Imports System.IO

Public Function EncodeImageWithMimeType(imagePath As String) As String
    Dim imageBytes As Byte() = File.ReadAllBytes(imagePath)
    Dim base64 As String = Convert.ToBase64String(imageBytes)

    ' Determine MIME type based on extension
    Dim extension As String = Path.GetExtension(imagePath).ToLower()
    Dim mimeType As String = extension.ToLower() Select Case extension
        Case ".png"
            mimeType = "image/png" ' Best for graphics with transparency
        Case ".jpg", ".jpeg"
            mimeType = "image/jpeg" ' Best for photographs
        Case ".gif"
            mimeType = "image/gif" ' Best for simple animations
        Case ".svg"
            mimeType = "image/svg+xml" ' Best for scalable graphics
        Case ".webp"
            mimeType = "image/webp" ' Best overall compression
        Case Else
            mimeType = "image/png" ' Default fallback
    End Select

    Return $"data:{mimeType};base64,{base64}"
End Function

' Usage
Dim encodedImage As String = EncodeImageWithMimeType("logo.png")
Dim html As String = $"<img src='{encodedImage}' alt='Company Logo'>"
$vbLabelText   $csharpLabel

Base64エンコーディングはPDFファイルのサイズにどのように影響しますか?

Base64エンコーディングは、予測可能な方法でPDFサイズに影響を与えます：

// Comparison example
public void CompareFileSizes()
{
    ChromePdfRenderer renderer = new ChromePdfRenderer();

    // Method 1: External image reference
    string htmlExternal = "<img src='large-photo.jpg'>";
    PdfDocument pdfExternal = renderer.RenderHtmlAsPdf(htmlExternal, @"C:\images\");

    // Method 2: Base64 encoded image
    byte[] imageBytes = File.ReadAllBytes(@"C:\images\large-photo.jpg");
    string base64Image = Convert.ToBase64String(imageBytes);
    string htmlBase64 = $"<img src='data:image/jpeg;base64,{base64Image}'>";
    PdfDocument pdfBase64 = renderer.RenderHtmlAsPdf(htmlBase64);

    // Compare sizes
    Console.WriteLine($"Original image: {imageBytes.Length / 1024} KB");
    Console.WriteLine($"PDF with external image: {pdfExternal.BinaryData.Length / 1024} KB");
    Console.WriteLine($"PDF with base64 image: {pdfBase64.BinaryData.Length / 1024} KB");
}
// Comparison example
public void CompareFileSizes()
{
    ChromePdfRenderer renderer = new ChromePdfRenderer();

    // Method 1: External image reference
    string htmlExternal = "<img src='large-photo.jpg'>";
    PdfDocument pdfExternal = renderer.RenderHtmlAsPdf(htmlExternal, @"C:\images\");

    // Method 2: Base64 encoded image
    byte[] imageBytes = File.ReadAllBytes(@"C:\images\large-photo.jpg");
    string base64Image = Convert.ToBase64String(imageBytes);
    string htmlBase64 = $"<img src='data:image/jpeg;base64,{base64Image}'>";
    PdfDocument pdfBase64 = renderer.RenderHtmlAsPdf(htmlBase64);

    // Compare sizes
    Console.WriteLine($"Original image: {imageBytes.Length / 1024} KB");
    Console.WriteLine($"PDF with external image: {pdfExternal.BinaryData.Length / 1024} KB");
    Console.WriteLine($"PDF with base64 image: {pdfBase64.BinaryData.Length / 1024} KB");
}
' Comparison example
Public Sub CompareFileSizes()
    Dim renderer As New ChromePdfRenderer()

    ' Method 1: External image reference
    Dim htmlExternal As String = "<img src='large-photo.jpg'>"
    Dim pdfExternal As PdfDocument = renderer.RenderHtmlAsPdf(htmlExternal, "C:\images\")

    ' Method 2: Base64 encoded image
    Dim imageBytes As Byte() = File.ReadAllBytes("C:\images\large-photo.jpg")
    Dim base64Image As String = Convert.ToBase64String(imageBytes)
    Dim htmlBase64 As String = $"<img src='data:image/jpeg;base64,{base64Image}'>"
    Dim pdfBase64 As PdfDocument = renderer.RenderHtmlAsPdf(htmlBase64)

    ' Compare sizes
    Console.WriteLine($"Original image: {imageBytes.Length \ 1024} KB")
    Console.WriteLine($"PDF with external image: {pdfExternal.BinaryData.Length \ 1024} KB")
    Console.WriteLine($"PDF with base64 image: {pdfBase64.BinaryData.Length \ 1024} KB")
End Sub
$vbLabelText   $csharpLabel

最適な結果を得るために

  • 小さなアイコンやロゴ（<50KB）にはbase64を使用
  • 大きな画像や写真には外部参照を使用
  • エンコーディング前に圧縮を考慮
  • コンテンツタイプに適した画像形式を使用

高度なPDF最適化テクニックについては、PDF圧縮ガイドをご覧ください。

よくある質問

HTMLをPDFに変換する際、CSSやJavaScriptのアセットが正しく読み込まれるようにするにはどうすればよいですか？

IronPDFではHTMLからPDFへの変換時にBaseUrlOrPathパラメータを指定することができます。このパラメータはウェブURLまたはローカルファイルパスで、HTML内のすべての相対アセットパスのベースリファレンスとなり、CSS、JavaScript、画像が適切に読み込まれるようにします。

BaseUrlOrPathパラメータは何に使うのですか？

IronPDFのBaseUrlOrPathパラメータは、HTMLからPDFへの変換時にすべてのアセット(CSS、JavaScript、画像)が相対的に読み込まれるベースURLを指定します。リモートアセットには'http'で始まるウェブURL、ディスクベースのアセットにはローカルファイルパスを設定できます。

たった1行のコードでアセットを含むPDFをレンダリングするには？

IronPDFのChromePdfRendererを使って1行でHTMLをアセットと一緒にレンダリングすることができます: `new IronPdf.ChromePdfRenderer().RenderHtmlAsPdf("", @"C:∕Assets").SaveAs("with-assets.pdf");`.これは、すべてのアセットが適切に読み込まれるように BaseUrlOrPath を設定します。

PDF生成のためにMVCアプリケーションで画像パスを構成するにはどうすればよいですか？

IronPDFを使用するMVCアプリケーションでは、baseUrlOrPathをwwwrootサブディレクトリに設定し(例: @"wwwroot/image")、相対パスでHTMLのsrc属性を設定します(例: "../image/Sample.jpg")。こうすることで、画像がウェブサイト上でも生成されたPDF内でも正しく表示されるようになります。

HTMLをPDFに変換する際、ローカルとリモートの両方のアセットを使用できますか？

はい、IronPDFはローカルとリモートの両方のアセットをサポートしています。リモートアセットについては、BaseUrlOrPathを'http'で始まるウェブURLに設定してください。ローカルアセットにはディスク上のファイルパスを使用してください。この柔軟性により、PDF生成時にさまざまなソースからアセットを参照することができます。

BaseUrlOrPathパラメータを設定しないとどうなりますか？

IronPDFでBaseUrlOrPathパラメータを設定しないと、HTMLの相対アセットパスが正しく解決されず、生成されるPDFのCSSスタイル、JavaScript機能、画像が欠落します。HTMLに相対アセット参照が含まれている場合は、必ずこのパラメータを指定してください。

カーティス・チャウ
カーティス・チャウ
  今すぐエンジニアリングチームとチャット
テクニカルライター

Curtis Chauは、カールトン大学でコンピュータサイエンスの学士号を取得し、Node.js、TypeScript、JavaScript、およびReactに精通したフロントエンド開発を専門としています。直感的で美しいユーザーインターフェースを作成することに情熱を持ち、Curtisは現代のフレームワークを用いた開発や、構造の良い視覚的に魅力的なマニュアルの作成を楽しんでいます。

開発以外にも、CurtisはIoT（Internet of Things）への強い関心を持ち、ハードウェアとソフトウェアの統合方法を模索しています。余暇には、ゲームをしたりDiscordボットを作成したりして、技術に対する愛情と創造性を組み合わせています。

準備はできましたか？
Nuget ダウンロード 19,014,616 | バージョン: 2026.5 just released
Still Scrolling Icon

まだスクロールしていますか?

すぐに証拠が欲しいですか? PM > Install-Package IronPdf
サンプルを実行するHTML が PDF に変換されるのを確認します。