Webp converter4/11/2023 ![]() When creating the ImageFactory we define that it should not keep ExifData, since we are generally not interested in personal information like GPS coordinates. This class uses the factory pattern, which makes it possible to Load an image and then apply filters or change different attributes in any order. In the using-case, we make an ImageFactory, which is a class from the ImageProcessor package. In order for us to write the WebP image, a new FileStream is created. The FileStream can be used in a using block because it implements the IDisposable interface and it, therefore, disposes itself automatically when exiting the block. First, we use the FileStream as we would normally do to save the original image. ImageFactory.Load(image.OpenReadStream())įinally, the images should be saved to the server. Using (ImageFactory imageFactory = new ImageFactory(preserveExifData: false)) Using (var webPFileStream = new FileStream(webPImagePath, FileMode.Create)) Using (var normalFileStream = new FileStream(normalImagePath, FileMode.Create)) Save the image in its original format for fallback This includes a path where the original file will be saved and the path of the new WebP image. We also need some different paths for saving the files and serving them later. Monitoring errors and uptime on your ASP.NET Core applications? Then we will check the file type, which right now we only allow PNG's and JPEG's, but it could easily be expanded to allow gifs or other image types. We will first check to see if there was even a posted file and if there is only one. The IFormFile that the action takes as a parameter could be other things besides an image, so we will first check for this. String webPImagePath = Path.Combine(imagesPath, webPFileName) String normalImagePath = Path.Combine(imagesPath, image.FileName) String webPFileName = Path.GetFileNameWithoutExtension(image.FileName) + ".webp" String imagesPath = Path.Combine(hostingEnvironment.WebRootPath, "images") If (!allowedImageTypes.Contains(())) return View() Check if valid image type (can be extended with more rigorous checks) We will now fill out the action step by step. We have also added a barebone Action for our post assuming the previous frontend is the Index of Home. It will be needed for getting the path to write to when saving the files. NET, so there is no need to add it in startup.cs. We also need to take hostingEnvironment through the constructor of the controller via Dependency Injection. We first of all need to import a couple of libraries that we will need when implementing the following. Public IActionResult Index(IFormFile image) This.hostingEnvironment = hostingEnvironment Public HomeController(IHostingEnvironment hostingEnvironment) Then we can get started coding the action that will accept the post from the frontend. Then for the backend, we need two packages that can be installed through the Package Manager using these commands: Install-Package This just serves as the simplest example of a frontend for the current test. The first thing we will make is a simple form to post images. We get started first by creating a fresh ASP.NET Core MVC project. It is also (not surprising) suggested as one of the possible image formats to use if you have many big images on your site when using Google's website performance tool Lighthouse. Luckily the HTML5 tag Picture makes it possible to serve a normal HTML image as a fallback. WebP is supported in over 80% percent of all browsers with the biggest drawback being that it is not supported by any of the Safari browsers. In this article, we will show you how to convert images to WebP using a product named ImageProcessor. This makes it possible to serve more content to your users even for the ones who may browse your site with a slow 3G connection. Google has developed an image format called WebP, which packs as much detail as PNGs or JPEGs, but it uses files up to 34% smaller. Many websites rely on user-uploaded images as content and want to be able to present as much content as possible to their users at a tolerable speed. Written by Kristoffer Strube, October 01, 2019
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |