Base64 Resim Başlıkları ve Altbilgileri ile Dosya Boyutunu Azaltın

This article was translated from English: Does it need improvement?
Translated
View the article in English

Büyük çok sayfalı bir PDF üzerinde bir başlığa veya alt bilgiye Base64 resmi eklemek, çıktı dosyasını büyük ölçüde artırabilir. Çözüm, sayfa başına metinlerin {page} gibi normal şekilde render edilmesine izin verirken resmi her sayfada bir kez gömmektir.

Şişkinlik, render işleyicisinin birleştirilmiş parçayı nasıl yönettiğinden ötürü meydana gelir. Tek bir parça hem resmi hem de {page} gibi dinamik içeriği tuttuğunda, motor tüm HTML'i dinamik olarak değerlendirir ve Base64 resmi her sayfada yeniden ekler. İşi iki geçişe ayırmak resmi statik tutar ve sayfa numarası katmanını küçük tutar.

Çözüm

1. Başlığı veya Alt Bilgiyi İki Parçaya Ayırın

İçeriği statik bir parça ve dinamik bir parça olarak ayırın. Resmi ve asla değişmeyen metni statik parçaya yerleştirin. {page} gibi sayfa başına içeriği dinamik parçaya koyun. Dinamik metnin statik katmanın üzerine doğru şekilde oturması için her iki parçaya da aynı tablo düzenini ve hücre genişliklerini verin.

2. Önce Statik Parçayı Ekleyin

AddHtmlHeadersAndFooters sadece statik parça ile çağırın. Base64 resmi render edilir ve tek seferde gömülür.

3. İkinci Geçişte Dinamik Parçayı Ekleyin

AddHtmlHeadersAndFooters tekrar sadece dinamik parça ile çağırın. Bu geçiş resim taşımadığı için sayfa başına içerik küçük kalır.

using IronPdf;

var pdf = PdfDocument.FromFile("input.pdf");

// Static layer: holds the Base64 image. The page-number cell is left empty.
string staticFooter = @"
<table style='width:100%; table-layout:fixed;'>
  <tr>
    <td style='width:20%;'>
      <img src='data:image/png;base64,iVBORw0KGg...' style='width:150px;' />
    </td>
    <td style='width:80%; text-align:right;'></td>
  </tr>
</table>";

// Dynamic layer: holds only {page}. Same layout, but no image.
string dynamicFooter = $@"
<table style='width:100%; table-layout:fixed;'>
  <tr>
    <td style='width:20%;'></td>
    <td style='width:80%; text-align:right; font-size:10px;'>Page {{page}} of {pdf.PageCount}</td>
  </tr>
</table>";

// Pass 1: add the static image footer (image embedded once).
pdf.AddHtmlHeadersAndFooters(new ChromePdfRenderOptions
{
    HtmlFooter = new HtmlHeaderFooter { HtmlFragment = staticFooter, MaxHeight = 40 }
});

// Pass 2: add the dynamic page-number footer (no image, stays small).
pdf.AddHtmlHeadersAndFooters(new ChromePdfRenderOptions
{
    HtmlFooter = new HtmlHeaderFooter { HtmlFragment = dynamicFooter, MaxHeight = 40 }
});

pdf.SaveAs("output.pdf");
using IronPdf;

var pdf = PdfDocument.FromFile("input.pdf");

// Static layer: holds the Base64 image. The page-number cell is left empty.
string staticFooter = @"
<table style='width:100%; table-layout:fixed;'>
  <tr>
    <td style='width:20%;'>
      <img src='data:image/png;base64,iVBORw0KGg...' style='width:150px;' />
    </td>
    <td style='width:80%; text-align:right;'></td>
  </tr>
</table>";

// Dynamic layer: holds only {page}. Same layout, but no image.
string dynamicFooter = $@"
<table style='width:100%; table-layout:fixed;'>
  <tr>
    <td style='width:20%;'></td>
    <td style='width:80%; text-align:right; font-size:10px;'>Page {{page}} of {pdf.PageCount}</td>
  </tr>
</table>";

// Pass 1: add the static image footer (image embedded once).
pdf.AddHtmlHeadersAndFooters(new ChromePdfRenderOptions
{
    HtmlFooter = new HtmlHeaderFooter { HtmlFragment = staticFooter, MaxHeight = 40 }
});

// Pass 2: add the dynamic page-number footer (no image, stays small).
pdf.AddHtmlHeadersAndFooters(new ChromePdfRenderOptions
{
    HtmlFooter = new HtmlHeaderFooter { HtmlFragment = dynamicFooter, MaxHeight = 40 }
});

pdf.SaveAs("output.pdf");
Imports IronPdf

Dim pdf = PdfDocument.FromFile("input.pdf")

' Static layer: holds the Base64 image. The page-number cell is left empty.
Dim staticFooter As String = "
<table style='width:100%; table-layout:fixed;'>
  <tr>
    <td style='width:20%;'>
      <img src='data:image/png;base64,iVBORw0KGg...' style='width:150px;' />
    </td>
    <td style='width:80%; text-align:right;'></td>
  </tr>
</table>"

' Dynamic layer: holds only {page}. Same layout, but no image.
Dim dynamicFooter As String = $"
<table style='width:100%; table-layout:fixed;'>
  <tr>
    <td style='width:20%;'></td>
    <td style='width:80%; text-align:right; font-size:10px;'>Page {{page}} of {pdf.PageCount}</td>
  </tr>
</table>"

' Pass 1: add the static image footer (image embedded once).
pdf.AddHtmlHeadersAndFooters(New ChromePdfRenderOptions With {
    .HtmlFooter = New HtmlHeaderFooter With {.HtmlFragment = staticFooter, .MaxHeight = 40}
})

' Pass 2: add the dynamic page-number footer (no image, stays small).
pdf.AddHtmlHeadersAndFooters(New ChromePdfRenderOptions With {
    .HtmlFooter = New HtmlHeaderFooter With {.HtmlFragment = dynamicFooter, .MaxHeight = 40}
})

pdf.SaveAs("output.pdf")
$vbLabelText   $csharpLabel

İki table-layout:fixed parçası aynı hücre genişliklerini paylaştığı için ikinci geçişteki sayfa numarası, ilk geçişteki boş hücrenin tam olduğu yere oturur. Aynı teknik başlıklar için de geçerlidir: resmi statik geçişte tutun ve herhangi bir dinamik başlık metnini ikinci geçişte yerleştirin.

UyarıHer iki parça aynı tablo yapısını ve hücre genişliklerini paylaşmazsa, sayfa numarası gibi dinamik metin statik katmanın üzerine hizalanmaz.

Seçenek: Harici Bir Görüntü veya SVG'ye Referans Verin

Resmin Base64 olarak gömülmesine gerek yoksa, <img> harici bir dosyaya yönlendirme yapmak veya bir SVG kullanmak, Base64 stringden daha fazla çıktıyı küçültebilir.

Curtis Chau
Teknik Yazar

Curtis Chau, Bilgisayar Bilimleri alanında Lisans Derecesine (Carleton Üniversitesi) sahip ve Node.js, TypeScript, JavaScript ve React konularında uzmanlaşmış ön uç geliştirmeyle ilgileniyor. Sezgisel ve estetik açıdan hoş kullanıcı arayüzleri oluşturma tutkunu, Curtis modern çerçevelerle çalışmayı ve iyi yapı...

Daha Fazla Oku
Başlamaya Hazır mısınız?
Nuget İndirmeler 20,296,129 | Sürüm: 2026.7 yeni yayınlandı
Still Scrolling Icon

Hâlâ Kaydırıyor Musunuz?

Hızlıca kanıt ister misiniz? PM > Install-Package IronPdf
bir örnek çalıştır HTML'nizi bir PDF'ye dönüştüğünü izleyin.