Base64 이미지 헤더 및 푸터로 파일 크기 줄이기

Updated: 2026년 7월 3일

대형 다중 페이지 PDF의 헤더나 푸터에 Base64 이미지를 추가하면 출력 파일이 급격히 팽창할 수 있습니다. 해결 방법은 각 페이지마다가 아닌 한 번에 이미지를 임베딩하는 것입니다. 그러면서도 페이지 별 텍스트인 {page}가 정상적으로 렌더링되도록 해야 합니다.

팽창은 렌더러가 결합된 프래그먼트를 처리하는 방식 때문에 발생합니다. 단일 프래그먼트가 이미지와 {page} 같은 동적 콘텐츠를 모두 포함할 때, 엔진은 모든 HTML을 동적으로 처리하고 Base64 이미지를 모든 페이지에 다시 임베딩합니다. 작업을 두 번에 걸쳐 나누면 이미지는 정적으로 유지되고 페이지 번호 레이어는 작아집니다.

해결책

1. 헤더나 푸터를 두 개의 프래그먼트로 나누기

콘텐츠를 정적 프래그먼트와 동적 프래그먼트로 분리하십시오. 변하지 않는 이미지와 텍스트는 정적 프래그먼트에 넣으세요. 페이지 별 콘텐츠는 {page} 같은 동적 프래그먼트에 넣으세요. 두 프래그먼트 모두 동일한 테이블 레이아웃과 셀 너비를 갖게 하여 동적 텍스트가 정적 레이어 위에 정확히 위치하도록 하세요.

2. 먼저 정적 프래그먼트를 추가

정적 프래그먼트만을 가지고 AddHtmlHeadersAndFooters를 호출하세요. Base64 이미지는 한 번만 렌더링되고 임베딩됩니다.

3. 두 번째 패스에서 동적 프래그먼트 추가

동적 프래그먼트만을 가지고 다시 AddHtmlHeadersAndFooters를 호출하세요. 이 패스는 이미지가 없으므로 페이지 별 콘텐츠는 작게 유지됩니다.

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");

두 table-layout:fixed 프래그먼트는 동일한 셀 너비를 공유하므로, 두 번째 패스의 페이지 번호는 첫 번째 패스의 빈 셀이 있었던 곳에 정확히 위치합니다. 동일한 기술을 헤더에 적용할 수 있습니다. 정적 패스에 이미지를 유지하고 동적 헤더 텍스트는 두 번째 패스에 배치하세요.

경고: 두 프래그먼트가 동일한 테이블 구조와 셀 너비를 공유하지 않으면 동적 텍스트, 페이지 번호 같은 내용이 정적 레이어 위에 정렬되지 않습니다.

옵션: 외부 이미지나 SVG 참조

Base64로 이미지 인라인이 필요하지 않다면, <img>를 외부 파일로 지정하거나 SVG를 사용하면 Base64 문자열보다 출력 크기를 더 줄일 수 있습니다.

Curtis Chau

지금 바로 엔지니어링 팀과 채팅하세요

기술 문서 작성자

커티스 차우는 칼턴 대학교에서 컴퓨터 과학 학사 학위를 취득했으며, Node.js, TypeScript, JavaScript, React를 전문으로 하는 프론트엔드 개발자입니다. 직관적이고 미적으로 뛰어난 사용자 인터페이스를 만드는 데 열정을 가진 그는 최신 프레임워크를 활용하고, 잘 구성되고 시각적으로 매력적인 매뉴얼을 제작하는 것을 즐깁니다.

...

더 읽어보기