When building your apps you might have the need to compress your images in a way that you still wouldn't lose the quality. Heavy image assets may have a toll on application performance, the best image formats are the network-friendly type.
I will demonstrate how to easily use image compression in your web applications using this Libwebp.Net an asynchronous utility for encoding images to Google's .webp format. Seamlessly compress images to lossy and lossless formats in your .NET projects to improve network performance and reduce file size on disk. WebP generally has better compression than JPEG, PNG, and GIF and is designed to supersede them. You can see the library in action by using the webclient, your result will be downloaded into your browser.
Using the Library
General Usage
Below shows the basic use of the library using a console app.
class Program {
static async Task Main(string[] args) {
// get file to encode
using
var file = new FileStream(@ "C:\Users\fodoo\Desktop\logo.png", FileMode.Open);
// copy file to Memory
using
var ms = new MemoryStream();
await file.CopyToAsync(ms);
//setup configuration for the encoder
var config = new WebpConfigurationBuilder().Output("output.webp").Build();
// create an encoder and pass in the configuration
var encoder = new WebpEncoder(config);
// start encoding by passing your memorystream and filename
var output = await encoder.EncodeAsync(ms, Path.GetFileName(file.Name));
/* your converted file is returned as FileStream, do what you want download,
copy to disk, write to db or save on cloud storage,*/
Console.WriteLine($ "Your output file : {Path.GetFileName(output.Name)}");
Console.WriteLine($ "Length in bytes : {output.Length}");
}
}
Asp.Net Core
Below demonstrates how the library is used in Asp.Net Core to convert uploaded images. This library is currently supported only in Windows Environments.
public async Task < IActionResult > UploadAsync(IFormFile file) {
if (file == null) throw new FileNotFoundException();
//you can handle file checks ie. extensions, file size etc..
//creating output file name
// your name can be a unique Guid or any name of your choice with .webp extension..eg output.webp
//in my case i am removing the extension from the uploaded file and appending
// the .webp extension
var oFileName = $ "{Path.GetFileNameWithoutExtension(file.FileName)}.webp";
// create your webp configuration
var config = new WebpConfigurationBuilder().Preset(Preset.PHOTO).Output(oFileName).Build();
//create an encoder and pass in your configuration
var encoder = new WebpEncoder(config);
//copy file to memory stream
var ms = new MemoryStream();
file.CopyTo(ms);
//call the encoder and pass in the Memorystream and input FileName
//the encoder after encoding will return a FileStream output
//Optional cast to Stream to return file for download
Stream fs = await encoder.EncodeAsync(ms, file.FileName);
/*Do whatever you want with the file....download, copy to disk or
save to cloud*/
return File(fs, "application/octet-stream", oFileName);
}
[Coming SOON!!!] Asp.Net Core MiddleWare
Libewebp.Net.Middleware is a separate package that depends on Libewebp.Net and allows you to inject image compression in your Asp.Net pipeline. This middleware will compress your specified image types using lossy and lossless algorithms.
Advanced Encoding
The encoder contains a lot advanced parameters. LibWebP.Net supports libWebp's advanced encoding API which can be used to better balance the trade-off between compression efficiency and processing time. You can get access to the advanced encode parameters by adding the various options below to your WebpConfigurationBuilder
// create your WebP Configuration using fluent builder
var configuration = new WebpConfigurationBuilder().Output("image.webp").Preset(Preset.DEFAULT).QualityFactor(200).AlphaQ(10)
//.... add more advanced options//
.Build();
Options
These options are currently supported in the library, use it to manipulate the compression algorithm for your desired output.
| Option |
Description |
| AlphaQ(int value) |
transparency-compression quality (0..100) |
| CompressionMethod(int value) |
compression method (0=fast, 6=slowest) |
| Lossless() |
encode image losslessly |
| Preset(string value) |
one of default, photo, picture, drawing, icon, textd |
| QualityFactor(float value) |
quality factor (0:small..100:big) |