EasyDNN News 10.7 - Added support for WebP image format and responsive images <srcset>

Improve the loading speed of articles on mobile and desktop devices. EasyDNN News 10.7 brings with it a very significant feature that improves the loading speed for articles, especially on mobile devices. The new feature is support for the WebP image format.

What is WebP image format?

WebP is a new image format currently being developed and promoted by Google. The advantage to WebP format is the ability to generate smaller files than those in JPEG, PNG or GIF formats. Thanks to this new image format, images load more quickly, something which is especially important for mobile devices where internet speed can be limited, and users are required to pay for data transfer. Google suggests using WebP in page speed tests. As a consequence, web pages that use the WebP format can be better ranged on Search Engine Results Pages (SERP).

How WebP works in the EasyDNN News module

Although most new browsers support the WebP image format, some older ones do not. The EasyDNN News module checks to see if the browser supports WebP, and if it does, then WebP is served to a browser. If it does not support WebP, then JPG files are served to the browser. You can still only upload images to the module in JPG, PNG or GIF format, and WebP is generated from the uploaded images.

How to enable WebP support in the EasyDNN News module?

The option can be enabled in Settings > Advanced display settings > Enable WebP image format.

It is important to mention that in order to use the WebP format, it is necessary to add the MIME type for WebP format: <mimeMap fileExtension=".webp" mimeType="image/webp" />.

If the MIME type for WebP format is not added, images within articles won't be displayed. You can also adjust the compression level in the module settings.

When this option is enabled, the module automatically generates WebP images and serves the WebP format to the browser if it supports it. A user doesn’t have to take care of it.

Responsive images <srcset>

In version 10.7, we have also added support for responsive images <srcset> for the main article image in the detail templates. What is this all about? The module generates images of different dimensions. Depending upon the screen resolution, it displays the image that is the best fit for the resolution. For instance, an image is displayed on desktops as an 800px width image. This is too much for most mobile devices, and, in this case, it would be displayed as a 400px width image on mobile devices.

A smaller file size means that the image will load faster. The result is a better user experience and savings on mobile device data plans.

An example of adding a responsive image <srcset> to a template:

<picture>
<source media="(max-width: 480px)" srcset="[EasyDNNnews|:Image:Width:400:Height:400:Resize:Proportional]">
<source media="(max-width: 640px)" srcset="[EasyDNNnews|:Image:Width:600:Height:600:Resize:Proportional]">
<img alt="[EasyDNNnews:Title]" src="[EasyDNNnews|:Image]"/>
</picture>

Important note: The symbol | must be removed from the tokens. Here is | used only to make the tokens visible in the article.

Regardless of the DNN version you are using, we recommend EasyDNN News 10.7. With previously added, multiple features that improve SEO (article), the new features significantly improve page loading speed and, in such way, also improve SEO. EasyDNN News 10.7 is compatible with the DNN versions from 6.2 to 9.4.4.

You can download a free 15-day trial version of the module from our website. You can purchase a commercial version of the module from the DNN store, individually or as a part of the EasyDNN Theme & Module Collection. If you have a valid subscription, you can download EasyDNN News 10.7 from DNN store > Patches.