With slimmage.js, you can use WebP for supporting browsers - without breaking the others. Slimmage makes responsive images easy to implement - both client and true image size is controlled with css
Install-Package ImageResizer.Plugins.WebPin the NuGet package manager, or add
ImageResizer.Plugins.WebP.dllto your project.
<add name="WebPEncoder" />and/or
<add name="WebPDecoder" />inside
Simply reference a .webp file as you would a .jpg
A 100px wide jpeg will be returned.
If the extension is not .webp, you can add
&decoder=webp to force webp decoding first, instead of waiting for the fallback path.
&format=webp to any URL to encode the result in webp format instead of jpg/png
- Lossless=true/false (defaults false)
- NoAlpha=true/false (defaults false)
Rule of thumb for converting jpeg quality values to webp
In general, webp achieves the same visual quality with a much lower
The first value is the jpeg quality, second is webp quality for same visual clarity.
HTTP Error 404.3 - Not Found
The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map.
When you get this error, you'll need to add a mime-type mapping in web.config
<configuration> <system.webServer> <staticContent> <mimeMap fileExtension=".webp" mimeType="image/webp" /> </staticContent> </system.webServer> </configuration>
This plugin (WebP plugins) is part of the Elite Edition
Where is the plugins section?
<plugins> section is located in Web.config, and is nested inside the
<resizer> element, which is nested inside
<configuration>. For examples, see this sample Web.config file.
Where can I find the dll?
We prefer that you install via NuGet, but you can also find the plugin DLL files in the /dlls/release folder of your download.
How do I typically install a plugin via Web.Config?
- In Visual Studio, right click on your project and choose "Add reference". Browse to the plugin DLL and click "OK".
- In the <plugins> section of Web.config, insert <add name="PluginName" />
- Look at the plugin documentation to see what configuration options (if any) are available.