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.
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.
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.
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.
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:
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.
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.
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.
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.
Image Credit: Adobe Firefly