How to save images in .webp and reduce quality of image asp.net mvc 5

 How to save images in .webp and reduce quality of image asp.net mvc 5 and C# code

In an ASP.NET MVC 5 project, you can still use `SixLabors.ImageSharp` to process images and save them in different formats, including WebP. However, since ASP.NET MVC 5 projects often have slightly different configurations compared to console or class library projects, here's how you can integrate `SixLabors.ImageSharp` in an MVC 5 project:

1. **Install SixLabors.ImageSharp**: Make sure you have installed the `SixLabors.ImageSharp` package. You can do this via NuGet Package Manager in Visual Studio or using the Package Manager Console with the command:

    ```

    Install-Package SixLabors.ImageSharp

    ```

2. **Use ImageSharp in Your Controller or Service**: You can use `ImageSharp` in your controller or a service class. Here's an example of how you can resize and save an image as WebP format:

    ```csharp

    using System.IO;

    using System.Net.Http;

    using System.Text.RegularExpressions;

    using System.Threading.Tasks;

    using System.Web.Mvc; // Import ASP.NET MVC namespaces

    using SixLabors.ImageSharp;

    using SixLabors.ImageSharp.Processing;

    using SixLabors.ImageSharp.Formats.WebP;

    public class HomeController : Controller

    {

        public async Task<ActionResult> Index()

        {

            string imageUrl = "https://example.com/image.jpg"; // Replace with your image URL

            string title = "FolderName"; // Replace with your folder name

            int i = 1; // Replace with your image number

            

            string fpattern = "[^a-zA-Z_]+";

            string replacement = " ";

            string folderPath = Server.MapPath("~/Imagefolder/" + title); // Map to the physical path of the folder

            Directory.CreateDirectory(folderPath);

            using (HttpClient client = new HttpClient())

            {

                HttpResponseMessage response = await client.GetAsync(imageUrl);

                response.EnsureSuccessStatusCode();

                byte[] imageBytes = await response.Content.ReadAsByteArrayAsync();

                

                string imageName = Regex.Replace(Path.GetFileNameWithoutExtension(new Uri(imageUrl).LocalPath), fpattern, replacement).Trim();

                string magen = title + " " + i;

                string imagePath = Path.Combine(folderPath, magen + ".webp");

                using (Image image = Image.Load(imageBytes))

                {

                    // Compress the image to reduce file size

                    var encoder = new WebPEncoder();

                    var encoderOptions = new WebPEncoderOptions

                    {

                        Quality = 50 // Adjust the quality level as needed (0 to 100)

                    };

                    

                    // Save the compressed image as .webp

                    using (FileStream outputStream = System.IO.File.Create(imagePath))

                    {

                        image.Save(outputStream, encoder, encoderOptions);

                    }

                }

            }

            

            return View();

        }

    }

    ```

3. **Adjust Folder Paths**: Ensure that you adjust the folder paths according to your project structure. In this example, I've used `Server.MapPath` to map the virtual path to a physical path where the images will be saved.

4. **Use Async/Await**: Since you're making HTTP requests and performing I/O operations asynchronously, it's a good practice to use async/await to avoid blocking the thread.

By following these steps, you should be able to use `SixLabors.ImageSharp` in your ASP.NET MVC 5 project to process images and save them in the WebP format.