Resize Image in HTML in C#

Resize raster images such as PNG, JPEG, GIF, TIFF, and BMP in HTML documents programmatically!

Resize Images Programmatically

We often have images in an HTML document whose size does not meet our requirements, so we have to resize them. Resizing images in HTML is essential for optimizing web content, ensuring images fit seamlessly into the document layout, and enhancing the overall user experience. To resize an image in HTML, we’ll use Aspose.HTML for .NET , a powerful HTML processing API, that allows developers to manipulate HTML documents. Let’s dive deeper into image management with Aspose.HTML, exploring how you can resize images in HTML documents.

First, make sure you have Aspose.HTML for .NET installed in your project. The installation process of this library is quite simple. Open the NuGet package manager, search for Aspose.HTML, and install. You may also use the following command from the Package Manager Console:

Install Aspose.HTML for .NET

Install-Package Aspose.HTML

Resize Image in HTML using C#

Using Aspose.HTML for .NET class library, you can easily create your own application, since our API provides a powerful toolset to analyze and collect information from HTML documents. If you want to use HTML manipulating features in your product, let’s look at the simple C# example of loading an HTML file, resizing image into it, and saving the mоdified document with Aspose.HTML for .NET API:

Note: One way to resize an image is to specify its height and width. Resizing images by specifying height and width may result in a shrunk or stretched image.

C# code to resize image in HTML

using Aspose.Html;
using System.IO;
...

    // Prepare a path to a source HTML file
    string documentPath = Path.Combine(DataDir, "document.html");

    // Prepare a path for resulting file saving 
    string savePath = Path.Combine(OutputDir, "resize-image.html");

    // Create an instance of an HTML document
    using (var document = new HTMLDocument(documentPath))
    {
        var body = document.Body;

        // Create a CSS Selector that selects <img> element that is the last child of its parent
        var element = document.QuerySelector("img:last-child");

        // Set width and height attributes with the desired size for the selected element
        element.SetAttribute("width", "100");
        element.SetAttribute("height", "100");

        // Save the HTML document to a file
        document.Save(savePath);
    }

Steps to Resize Image in HTML

If you enjoy manipulating images in code and having fun modifying images with your own code, this is the place for you! Aspose.HTML allows developers to manipulate images in HTML documents: you can add, remove, or find images in HTML documents and resize them. You can resize image in HTML with a few lines of C# code:

Use the HTMLDocument() constructor to initialize an HTML document from a URL.
The Body property of the HTMLDocument class points to the document’s <body> element.
Utilize the QuerySelector() method to select the desired <img> element within the HTML document.
Set the width and height attributes of the selected image element to the desired size values.
Call the Save() mrthod to save the modified HTML document to a new file.

Aspose.HTML for .NET is an advanced HTML parsing library that allows you to create, edit, and convert HTML, XHTML, MD, EPUB, and MHTML files. It supports various popular formats, including PDF, DOCX, and images. The library easily handles CSS, HTML Canvas, SVG, XPath, and JavaScript, expanding its manipulation capabilities. For more details about C# library installation and system requirements, please refer to Aspose.HTML Documentation .