1. IronPDF
  2. Guías
  3. DataUris y Empotramiento de Imágenes
Cómo incrustar imágenes con URI de datos en C# | IronPDF

Embed Images with DataURIs in C# & VB PDF Rendering

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

Incruste imágenes directamente en documentos PDF utilizando DataURIs en C# y VB.NET con IronPDF, eliminando las dependencias de archivos externos mediante la conversión de bytes de imagen a cadenas base64 e incluyéndolas en línea dentro del marcado HTML para una renderización perfecta del PDF.

Al trabajar con cadenas y documentos HTML, a menudo es esencial evitar dependencias de directorios de activos. El esquema data URI ofrece una solución eficaz.

El esquema de URI de datos incorpora los datos directamente en el código HTML o CSS, eliminando la necesidad de archivos separados. los DataURI permiten inyectar imágenes, archivos y tipos de letra directamente en un documento HTML en forma de cadena.

Inicio rápido: incrustar imágenes en PDFs usando DataURIs

Transforme contenido HTML en documentos PDF incrustando imágenes mediante DataURIs con IronPDF. Esta guía muestra cómo generar archivos PDF con imágenes incrustadas utilizando un código sencillo y eficaz. IronPDF convierte HTML a PDF manteniendo la integridad de la imagen. He aquí un ejemplo sencillo que muestra cómo incrustar una imagen directamente en un documento PDF utilizando DataURI con un código mínimo.

Nuget IconEmpieza a crear PDF con NuGet ahora:

  1. Instalar IronPDF con el gestor de paquetes NuGet

    PM > Install-Package IronPdf

  2. Copie y ejecute este fragmento de código.

    new IronPdf.ChromePdfRenderer.StaticRenderHtmlAsPdf("<img src='data:image/png;base64,...' />").SaveAs("output.pdf");

  3. Despliegue para probar en su entorno real

    Empieza a utilizar IronPDF en tu proyecto hoy mismo con una prueba gratuita
    arrow pointer

Flujo de trabajo mínimo (5 pasos)

  1. Descargar IronPDF de NuGet
  2. Leer los bytes de la imagen utilizando el método ReadAllBytes
  3. Utilice el método ToBase64String para convertir bytes a base64
  4. Incluya la información base64 en la etiqueta img
  5. Pasar el HTML a PDF


¿Cómo incrustar imágenes con DataURI en PDF?

La incrustación de imágenes mediante DataURIs incluye imágenes directamente dentro del marcado HTML sin hacer referencia a archivos externos. Este enfoque funciona bien cuando se generan PDF en entornos de nube, sistemas distribuidos o cuando se garantiza que todos los recursos son autocontenidos. La conversión de HTML a PDF de IronPDF es totalmente compatible con DataURIs, lo que permite la creación de PDF profesionales con imágenes incrustadas.

El proceso consta de tres pasos: leer los datos de la imagen, convertirlos al formato base64 e incrustarlos en una etiqueta HTML img. Este método funciona con varios formatos de imagen, incluidos PNG, JPEG, GIF y SVG, lo que proporciona flexibilidad en los flujos de trabajo de generación de PDF. La técnica es la misma tanto si se trabaja con imágenes Azure Blob Storage como con archivos locales.

Ejemplo básico de incrustación de imágenes

Este ejemplo completo muestra cómo incrustar una imagen en un PDF utilizando DataURIs:

:path=/static-assets/pdf/content-code-examples/how-to/datauris-image.cs
using IronPdf;
using System;

// Read byte from image file
var pngBinaryData = System.IO.File.ReadAllBytes("My_image.png");

// Convert bytes to base64
var ImgDataURI = @"data:image/png;base64," + Convert.ToBase64String(pngBinaryData);

// Import base64 to img tag
var ImgHtml = $"<img src='{ImgDataURI}'>";

ChromePdfRenderer Renderer = new ChromePdfRenderer();

// Render the HTML string
var pdf = Renderer.RenderHtmlAsPdf(ImgHtml);

pdf.SaveAs("datauri_example.pdf");
$vbLabelText   $csharpLabel

Los desarrolladores de VB.NET pueden conseguir la misma funcionalidad utilizando la biblioteca VB.NET PDF de IronPDF:

Imports IronPdf
Imports System

' Read byte from image file
Dim pngBinaryData As Byte() = System.IO.File.ReadAllBytes("My_image.png")

' Convert bytes to base64
Dim ImgDataURI As String = "data:image/png;base64," & Convert.ToBase64String(pngBinaryData)

' Import base64 to img tag
Dim ImgHtml As String = $"<img src='{ImgDataURI}'>"

Dim Renderer As New ChromePdfRenderer()

' Render the HTML string
Dim pdf = Renderer.RenderHtmlAsPdf(ImgHtml)

pdf.SaveAs("datauri_example.pdf")
Imports IronPdf
Imports System

' Read byte from image file
Dim pngBinaryData As Byte() = System.IO.File.ReadAllBytes("My_image.png")

' Convert bytes to base64
Dim ImgDataURI As String = "data:image/png;base64," & Convert.ToBase64String(pngBinaryData)

' Import base64 to img tag
Dim ImgHtml As String = $"<img src='{ImgDataURI}'>"

Dim Renderer As New ChromePdfRenderer()

' Render the HTML string
Dim pdf = Renderer.RenderHtmlAsPdf(ImgHtml)

pdf.SaveAs("datauri_example.pdf")
VB .NET

¿Por qué debería usar DataURIs en lugar de referencias a archivos?

los DataURI ofrecen varias ventajas sobre las referencias de archivo tradicionales a la hora de generar PDF. En primer lugar, eliminan las dependencias de archivos externos, lo que hace que la generación de PDF sea más fiable y portátil. Esto es crucial en entornos de nube como Azure o AWS Lambda, donde el acceso al sistema de archivos puede ser limitado o sensible al rendimiento.

En segundo lugar, los DataURI garantizan que los PDF sean completamente autónomos. A la hora de compartir o distribuir los PDF generados, los enlaces de imágenes rotos o la falta de recursos no son una preocupación. Esto hace que DataURIs sea ideal para generar informes, facturas o documentos que requieran archivo o distribución por correo electrónico.

En tercer lugar, DataURIs puede mejorar el rendimiento en determinados escenarios. Dado que los datos de imagen se incrustan directamente en HTML, no se producen peticiones HTTP adicionales ni operaciones del sistema de archivos durante la renderización. De este modo, se agiliza la generación de PDF, especialmente cuando se manejan varias imágenes pequeñas.

¿Qué formatos de imagen se admiten?

IronPDF es compatible con los principales formatos de imagen a través de DataURIs, lo que proporciona flexibilidad en los flujos de trabajo de generación de PDF:

  • PNG: Ideal para imágenes con transparencia o gráficos con bordes afilados. Utilice data:image/png;base64,
  • JPEG: mejor para fotografías e imágenes complejas con muchos colores. Utilice data:image/jpeg;base64,
  • GIF: Adecuado para animaciones sencillas o imágenes con colores limitados. Utilice data:image/gif;base64,
  • SVG: Perfecto para gráficos vectoriales escalables. Utilice data:image/svg+xml;base64,
  • WebP: Formato moderno con excelente compresión. Utilice data:image/webp;base64,

El siguiente ejemplo muestra cómo manejar diferentes formatos de imagen:

using IronPdf;
using System;
using System.IO;

public class MultiFormatImageEmbedding
{
    public static void EmbedVariousImageFormats()
    {
        var renderer = new ChromePdfRenderer();

        // Function to create DataURI from image file
        string CreateDataUri(string filePath, string mimeType)
        {
            var imageBytes = File.ReadAllBytes(filePath);
            return $"data:{mimeType};base64,{Convert.ToBase64String(imageBytes)}";
        }

        // Create HTML with multiple image formats
        var html = $@"
        <html>
        <body>
            <h1>Multi-Format Image Test</h1>
            <img src='{CreateDataUri("logo.png", "image/png")}' alt='PNG Logo' />
            <img src='{CreateDataUri("photo.jpg", "image/jpeg")}' alt='JPEG Photo' />
            <img src='{CreateDataUri("icon.svg", "image/svg+xml")}' alt='SVG Icon' />
        </body>
        </html>";

        var pdf = renderer.RenderHtmlAsPdf(html);
        pdf.SaveAs("multi_format_images.pdf");
    }
}
using IronPdf;
using System;
using System.IO;

public class MultiFormatImageEmbedding
{
    public static void EmbedVariousImageFormats()
    {
        var renderer = new ChromePdfRenderer();

        // Function to create DataURI from image file
        string CreateDataUri(string filePath, string mimeType)
        {
            var imageBytes = File.ReadAllBytes(filePath);
            return $"data:{mimeType};base64,{Convert.ToBase64String(imageBytes)}";
        }

        // Create HTML with multiple image formats
        var html = $@"
        <html>
        <body>
            <h1>Multi-Format Image Test</h1>
            <img src='{CreateDataUri("logo.png", "image/png")}' alt='PNG Logo' />
            <img src='{CreateDataUri("photo.jpg", "image/jpeg")}' alt='JPEG Photo' />
            <img src='{CreateDataUri("icon.svg", "image/svg+xml")}' alt='SVG Icon' />
        </body>
        </html>";

        var pdf = renderer.RenderHtmlAsPdf(html);
        pdf.SaveAs("multi_format_images.pdf");
    }
}
$vbLabelText   $csharpLabel

Para el manejo avanzado de imágenes, incluyendo añadir imágenes a PDFs existentes, IronPDF proporciona un soporte completo.

¿Cómo afecta la codificación Base64 al tamaño de los archivos?

La codificación Base64 aumenta el tamaño de los datos en aproximadamente un 33%. Base64 representa datos binarios utilizando sólo 64 caracteres ASCII, lo que requiere 4 caracteres para representar cada 3 bytes de datos originales. Aunque esto aumenta el tamaño total, el impacto en la generación de PDF suele ser mínimo en comparación con las ventajas de los documentos autocontenidos.

Optimice el tamaño de los archivos cuando utilice DataURIs siguiendo estas prácticas:

  1. Comprimir imágenes antes de codificarlas: Utilice herramientas o bibliotecas para optimizar los archivos de imagen antes de convertirlos a base64
  2. Elige los formatos adecuados: Utilice JPEG para fotos, PNG para gráficos con transparencia
  3. Redimensiona las imágenes adecuadamente: No incrustar imágenes más grandes de lo necesario para la salida en PDF
  4. Considere la compresión de PDF: Utilice las funciones de compresión de IronPDF después de la generación

Este ejemplo muestra la optimización de imágenes antes de incrustarlas:

using IronPdf;
using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;

public class OptimizedImageEmbedding
{
    public static void EmbedOptimizedImage(string imagePath, int maxWidth = 800)
    {
        // Load and resize image if necessary
        using (var originalImage = Image.FromFile(imagePath))
        {
            var resizedImage = originalImage;

            if (originalImage.Width > maxWidth)
            {
                var ratio = (double)maxWidth / originalImage.Width;
                var newHeight = (int)(originalImage.Height * ratio);
                resizedImage = new Bitmap(originalImage, maxWidth, newHeight);
            }

            // Convert to optimized JPEG
            using (var ms = new MemoryStream())
            {
                var encoder = ImageCodecInfo.GetImageEncoders()
                    .First(c => c.FormatID == ImageFormat.Jpeg.Guid);
                var encoderParams = new EncoderParameters(1);
                encoderParams.Param[0] = new EncoderParameter(
                    System.Drawing.Imaging.Encoder.Quality, 85L);

                resizedImage.Save(ms, encoder, encoderParams);
                var imageBytes = ms.ToArray();

                // Create DataURI
                var dataUri = $"data:image/jpeg;base64,{Convert.ToBase64String(imageBytes)}";

                // Generate PDF
                var html = $@"
                <html>
                <body>
                    <h1>Optimized Image Example</h1>
                    <img src='{dataUri}' style='max-width: 100%;' />
                </body>
                </html>";

                var renderer = new ChromePdfRenderer();
                var pdf = renderer.RenderHtmlAsPdf(html);
                pdf.SaveAs("optimized_image.pdf");
            }

            if (resizedImage != originalImage)
                resizedImage.Dispose();
        }
    }
}
using IronPdf;
using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;

public class OptimizedImageEmbedding
{
    public static void EmbedOptimizedImage(string imagePath, int maxWidth = 800)
    {
        // Load and resize image if necessary
        using (var originalImage = Image.FromFile(imagePath))
        {
            var resizedImage = originalImage;

            if (originalImage.Width > maxWidth)
            {
                var ratio = (double)maxWidth / originalImage.Width;
                var newHeight = (int)(originalImage.Height * ratio);
                resizedImage = new Bitmap(originalImage, maxWidth, newHeight);
            }

            // Convert to optimized JPEG
            using (var ms = new MemoryStream())
            {
                var encoder = ImageCodecInfo.GetImageEncoders()
                    .First(c => c.FormatID == ImageFormat.Jpeg.Guid);
                var encoderParams = new EncoderParameters(1);
                encoderParams.Param[0] = new EncoderParameter(
                    System.Drawing.Imaging.Encoder.Quality, 85L);

                resizedImage.Save(ms, encoder, encoderParams);
                var imageBytes = ms.ToArray();

                // Create DataURI
                var dataUri = $"data:image/jpeg;base64,{Convert.ToBase64String(imageBytes)}";

                // Generate PDF
                var html = $@"
                <html>
                <body>
                    <h1>Optimized Image Example</h1>
                    <img src='{dataUri}' style='max-width: 100%;' />
                </body>
                </html>";

                var renderer = new ChromePdfRenderer();
                var pdf = renderer.RenderHtmlAsPdf(html);
                pdf.SaveAs("optimized_image.pdf");
            }

            if (resizedImage != originalImage)
                resizedImage.Dispose();
        }
    }
}
$vbLabelText   $csharpLabel

Técnicas avanzadas y mejores prácticas

Cuando trabaje con DataURIs en entornos de producción, implemente mecanismos de almacenamiento en caché para evitar codificar repetidamente las mismas imágenes. Esto es especialmente importante cuando se generan varios PDF con recursos compartidos. Aproveche las funciones async de IronPDF para mejorar el rendimiento al procesar varias imágenes.

Para documentos complejos con muchas imágenes, utilice un enfoque híbrido en el que las imágenes críticas se incrusten como DataURIs mientras que las imágenes más grandes y opcionales se referencien externamente. Esto equilibra documentos autocontenidos con tamaños de archivo razonables.

También puede servir una cadena HTML completa o un documento PDF como una matriz de bytes utilizando la integración ASP.NET MVC de IronPDF. Esta técnica funciona bien cuando se crean aplicaciones web que generan y sirven PDF de forma dinámica.

Para técnicas avanzadas de manipulación de PDF, como marcas de agua, firmas digitales y creación de formularios, IronPDF proporciona documentación completa y ejemplos para crear soluciones PDF sólidas.

Preguntas Frecuentes

¿Qué son los DataURI y por qué utilizarlos para la generación de PDF?

DataURIs es un esquema que incrusta datos directamente en código HTML o CSS como cadenas codificadas en base64, eliminando la necesidad de archivos de imagen separados. IronPDF es totalmente compatible con DataURI, por lo que es ideal para entornos en la nube, sistemas distribuidos o cuando se necesitan PDF autónomos sin dependencias de archivos externos.

¿Cómo convierto una imagen a un formato DataURI para incrustarla en un PDF?

Con IronPDF, convertir una imagen a DataURI implica tres pasos: Primero, leer los bytes de la imagen utilizando System.IO.File.ReadAllBytes(). Segundo, convertir los bytes a base64 usando Convert.ToBase64String(). Por último, incrustar la cadena base64 en una etiqueta HTML img con el formato 'data:image/png;base64,[base64string]'.

¿Qué formatos de imagen se admiten al incrustar imágenes como DataURI?

IronPDF admite la incrustación de varios formatos de imagen como DataURI, incluidos PNG, JPEG, GIF y SVG. Esta flexibilidad le permite trabajar con diferentes tipos de imágenes manteniendo un control total sobre el flujo de trabajo de generación de PDF.

¿Puedo incrustar varias imágenes mediante DataURI en un solo PDF?

Sí, IronPDF le permite incrustar varias imágenes utilizando DataURIs en un único documento PDF. Simplemente convierta cada imagen a su representación base64 e inclúyalas en su marcado HTML antes de renderizarlas con ChromePdfRenderer de IronPDF.

¿Influye en el rendimiento utilizar DataURI en lugar de referencias a archivos?

Mientras que las DataURI aumentan el tamaño de la cadena HTML debido a la codificación base64, IronPDF gestiona la conversión de forma eficiente. La compensación merece la pena cuando se necesitan PDF autónomos sin dependencias externas, especialmente en entornos en la nube o distribuidos.

Curtis Chau
Curtis Chau
  Chatea con el equipo de ingeniería ahora
Escritor Técnico

Curtis Chau tiene una licenciatura en Ciencias de la Computación (Carleton University) y se especializa en el desarrollo front-end con experiencia en Node.js, TypeScript, JavaScript y React. Apasionado por crear interfaces de usuario intuitivas y estéticamente agradables, disfruta trabajando con frameworks modernos y creando manuales bien ...

Leer más
¿Listo para empezar?
Nuget Descargas 17,012,929 | Versión: 2025.12 recién lanzado