Enable WebP Images on Your DNN Website for Optimized Images
Uploading images optimized for the web is one of the easiest ways to improve website load times and user experience. WebP format images have quickly become the best solution when optimizing your images for the web.
About WebP Images:
What is WebP?
WebP images is is an image compression format designed by Google and built specifically to produce images for the web. Like JPEG images, WebP images can create highly high-quality images but often with a smaller total file size.
Transparency Supported, Ditch Your .png Images!
One of the biggest offenders of image sizes on the internet is .png images. It is very commonly used because it supports transparent backgrounds — unfortunately, .png images cone with a much larger file size than .jpg images.
WebP is Well Supported on Browsers
As of 2023, WebP images have 95.75% support across all browsers. If you factor out Internet Explorer browsers, you will see WebP images have been supported on all major browsers for years.
Comparing WebP, JPEG, and PNG
Photo Credit: Samantha Behling
Here is the original image we are working with — a 20,300kB image (20.3mB) of the Giant’s Causeway.
First, we can see the image is massive and should never be uploaded to a website for a banner or gallery. In most images, scaling the image to 1200 pixels wide will get you a large image that still looks great on the web.
Scaling the image down to 1200x800 and saving the image at different compressions and formats give us different results:
| Format | Compression | File Size |
|---|---|---|
| PNG | NA | 2,200kB (2.2mB) |
| JPG | 100% (highest quality) | 1,400kB (1.4mB) |
| JPG | 75% (high quality) | 324kB |
| JPG | 50% (medium quality) | 184kB |
| WebP | 100% (highest quality) | 1,300kB (1.3mB) |
| WebP | 75% (high quality) | 144kB |
| WebP | 50% (medium quality) | 106kB |
Notice that the WebP image at 75% compression is 180kB smaller than the JPG version. Do note that your file size savings will vary from image-to-image and your compression settings.
How to Enable Uploading WebP Images on a DNN Website
DNN has security measures put in place that do not allow for content editors to upload WebP images. Luckily, updating the settings in DNN to support uploading WebP images is easy. Here are the step-by-step instructions for uploading WebP images on your DNN website.
- Log into your DNN website as a Host level user.
- Hover over the gear icon from the persona bar.
- Click on “Security” from the menu.
- Click on the “More Security Settings” tab.
- Update the “Allowable File Extensions” definition list to include webp.
- To enable uploading webp images for end-users, add webp to the definition list under “Default End User Extension Whitelist”.
- Click Save.
Your website will recycle after this change, and you should now be able to upload webp images through the tools and modules that allow you to upload files.
Noted Compatability Issues:
As of December 2023, the module EasyDnnNews does not support WebP images. Trying to upload images through their gallery provider will display an error indicating the image type is not a supported format.