Manage Images in HTML with C#

HTML Image Management API for .NET

Aspose.HTML for .NET provides DOM and resource APIs for working with images referenced by HTML documents. A C# application can create or update an HTMLImageElement , locate image elements with CSS selectors, remove them from the DOM, resolve referenced resources, and save the modified HTML.

Choose an HTML Image Workflow

• Add Images to HTML . Create an <img> element, set its source, alternative text, dimensions, and optional modern attributes, then insert it at the required DOM position.
• Extract Images from HTML . Find image references, resolve relative URLs against the document base address, and save supported local, remote, or embedded resources.
• Remove Images from HTML . Delete selected <img> elements from the DOM and distinguish markup removal from deleting physical image files or CSS background resources.
• Resize Images in HTML . Set intrinsic dimensions and responsive CSS for displayed images without claiming to resample the referenced source file.

Update an Existing HTML Image in C#

This example loads an HTML file, selects an existing image by its ID, changes the referenced resource and alternative text, provides intrinsic dimensions, and saves the updated document. The image file must remain available at the path assigned to Src.

using Aspose.Html;

// Load the source HTML file
using HTMLDocument document = new HTMLDocument("input.html");

// Select and update the existing image element
HTMLImageElement image =  document.QuerySelector("#product-image") as HTMLImageElement;

if (image != null)
{
    image.Src = "images/updated-product.webp";
    image.Alt = "Updated product shown from the front";
    image.SetAttribute("width", "960");
    image.SetAttribute("height", "640");
}

// Save the modified HTML document
document.Save("output.html");

Core Steps for Managing Images in HTML

1. Load the source file, URL, string, or stream with an HTMLDocument constructor and provide the correct base address when relative resources must be resolved.
2. Locate one image with QuerySelector() or collect multiple matches with QuerySelectorAll() .
3. Create, update, remove, or inspect the selected image elements according to the required workflow.
4. Handle referenced image resources separately when files must be copied, downloaded, embedded, optimized, or deleted.
5. Call Save() to write markup changes, or continue to a conversion workflow when the HTML must be rendered to PDF or an image format.

HTML Image Elements, Sources, and Resources

• Image attributes. Read or update src, alt, width, height, loading, decoding, srcset, sizes, and other attributes supported by the target markup.
• DOM placement. Add an image to the document body or a selected container, move it to another parent, replace it, or remove it from the document tree.
• Resource locations. Work with relative paths, absolute HTTP or HTTPS URLs, file URLs, and embedded data URIs while accounting for the document base address.
• Element selection. Use IDs, classes, attribute selectors, structural selectors, XPath, or DOM traversal to target one image or a collection of images.
• Displayed dimensions. Combine intrinsic width and height values with CSS for fixed or responsive layout.
• Non-img images. CSS background images, SVG content, <picture> sources, favicons, and image inputs use different elements or style rules and require separate selection logic.
• Output APIs. Pass the prepared document to a conversion workflow when the complete rendered page must be saved as PNG, JPEG, TIFF, or another supported format.

HTML Image Documentation and API Reference

Read How to Add Image to HTML for <img> elements, embedded data, and CSS background examples. The Working with HTML Documents section explains document loading, editing, saving, and resource handling. Use the HTMLImageElement reference for image properties and inherited DOM methods.

Get Started with Aspose.HTML for .NET API

Install Aspose.HTML for .NET from NuGet with the .NET CLI:

dotnet add package Aspose.HTML

You can also use the NuGet Package Manager UI or run Install-Package Aspose.HTML in the Package Manager Console. See the installation guide for setup details, or request a temporary license to evaluate the API without evaluation limitations.

HTML Image Management FAQ

1. Does Aspose.HTML edit the pixels in PNG or JPEG files?

No. Image-management operations update HTML elements, attributes, styles, and referenced resources. Resampling, cropping, compression, and pixel-level editing require a separate image-processing step.

2. How are relative image paths resolved when processing HTML?

Relative src values are resolved against the document’s base address, which normally comes from the loaded file or URL. When HTML is created from a string or stream, provide a base URL if the application must resolve relative resource paths correctly.

3. Is extracting images from HTML the same as converting HTML to an image?

No. Extraction saves resources referenced by elements or styles, such as a JPEG used by an <img> element. HTML-to-image conversion renders the complete page layout into a new raster output.