Do you know avif?
avif stands for AV1 Image File Format, is a modern, open-source image compression format. The AVIF format is based on the AV1 video codec, which was developed by the Alliance for Open Media (AOMedia) to provide efficient and high-quality video compression. The AVIF format leverages advanced compression techniques employed by the AV1 codec to deliver exceptional image quality at a fraction of the file size of traditional image formats, such as JPEG and PNG.
The main key feature of avif image is that the file size of avif images can be up to 50% smaller in comparison to webp image format without loss of quality.
So why not use avif images instead of webp?
avif image format is not an replacement of webp images and webp is not an replacement of avif, because not all browsers support both image format types, so you must offer both image types and at least there are browsers that doen't support webp nor avif. While this only affects older browsers, old is relative. The Safari browser itself only supports webp since version > 13 and only with certain OS versions. The avif format looks even worse with regard to the Safari browser, so that at least version 16.4 is required for unrestricted avif support. All other of the most used browsers such as the Chrome Browser or Firefox have been able to use avif for much longer. An exception among the well-known browsers is the Edge Browser from Microsoft. Although this browser is based on the Chrome browser, this browser does not support the avif format to date.
[Update]
Since version 121 also the Edge Browser supports avif.
Although it may read as if avif is not an alternative to webp, due to the widespread use of the Chrome browser, Firefox and other browsers, it can be assumed that the majority of all users will benefit from the advantages of the avif format.
How can I use avif images?
Regardless of Wordpress and the LiteSpeed LScache Plugin (LSCWP) for Wordpress, HTML5 provides everything to not only use webp but also avif images, provided that you are able to convert the existing jpg or png images into the webp and/or avif convert format. Not only for Wordpress there are numerous plugins that convert jpg and png images. With these plugins you get the required image formats in the simplest way, but the biggest weakness of the plugins we know is that they are only insufficiently able to detect the browser support of webp and avif images. As a result, users of the Safari browser in particular, who support neither webp nor avif, still see one of the two image formats, although there is no support for it. No support means that the affected browsers will not display any images. HTML5 can solve this problem, but none of the themes we know of provide the necessary HTML code to take advantage of webp and avif without running the risk of providing a browser with the wrong image format.
That sounds very complicated. Isn't there a little easier way?
Unfortunately no and to your disappointment it gets even more complicated when you use the LiteSpeed Cache plugin. However, this thread was not written to ruin your day. This thread has a happy ending, but you should know why it was very difficult to resolve the issue. So hold on and read this thread to the end. It is worth it...!!!
Why is it particularly difficult to use avif images with the LiteSpeed Cache Plugin for Wordpress?
Basically, the same problems exist with the LScache plugin as without the LScache plugin. However, these are enormously expanded by the cache function, whereby at first it does not matter whether it is about webp or avif. In order to make the webp format available in Wordpress, you first need quic.cloud, because the webp images are not created by the plugin, but by quic.cloud. If you don't have a paid plan with quic.cloud, the time to convert the original images can take a long time because there is a daily limit of 200 images. If you overlook this, you get the webp images you need through quic.cloud, but even these webp images have limitations. Restriction means that LiteSpeed does not optimize the webp images, but only converts them. There is no compression involved in this conversion, which finally explains why the webp version of a jpg image has a larger file size than the original jpg image. As a result of this and due to the programming, the image format with the smallest file size is displayed. It is not uncommon for this not to be the webp image, but the jpg (original) image.
In the LiteSpeed Cache plugin, the use of webp images is provided via the webp replacement function. This replacement not only simply replaces the original image, but also changes the extension of the image in the HTML code. Image.jpg becomes image.jpg.webp. In relation to the cache function, this means that at least 2 different cache copies are required so that a browser with and without webp support can display the appropriate HTML code or cache copy. Thanks to the cache vary feature of the LiteSpeed web server's LScache engine, this is possible without any problems, but the LScache plugin for Wordpress generates faulty and incomplete cache vary modRerite rules in the .htaccess. As a result of this flaw, incorrect cache vary are created, causing either the correct browsers to display the wrong images, or the built-in cache warmup crawler warming up the wrong cache. Ultimately, this programming, which has been faulty for many years, means that the cache function and thus the speed advantage when loading a page is downright worthless. However, this does not only apply if the webp replacement function is enabled, but also when the webp replacement function is deactivated by activating the guest mode. What the guestmode paradox is all about, however, is another matter entirely.
When will the solution finally come that I can use avif images with the LScache plugin for Wordpress?
The answer to this question is that you cannot use avif images as long as LiteSpeed does not create the conditions for it. Referring to a comment by the LiteSpeed chief developer in LiteSpeed Slack, LiteSpeed has no plan to add the avif function to the LiteSpeed cache plugin. But don't worry. The world around LiteSpeed is much bigger than you and LiteSpeed might like to believe.
With the AWR Plugin for LiteSpeed LScache for Wordpress all previously described problems are solved. AWR stands for "avif & webp Replacement with Image Optimization". From this name of the plugin you can already conclude that it not only replaces the webp replacement function of the LScache plugin. It also provides the seemingly impossible avif replacement and also optimizes your default images. These functions are crowned by the fact that you do not need an external service like quic.cloud. All optimizations and conversions are done on your own server if your server meets the necessary requirements. Although these are small, the optimization of images in particular creates a very high server load. In order not to let the load become too high during the image process, the AWR plugin provides several functions so that you can also use the AWR plugin on shared hosting.
The AWR plugin was specially programmed for the LiteSpeed LScache plugin for Wordpress. It only works with this cache plugin and no other plugin.
The AWR plugin also offers you numerous "LiteSpeed Hacks". These hacks are modifications of the LScache plugin for Wordpress, which make it possible, for example, to make the built-in crawler avif ready, to "unblock" a crawler blocked by the hosting provider, or to make the built-in crawler more performant and therefore faster. In addition, these hacks make the built-in crawler "decimal numbers ready". The culmination of these hacks is a replacement of the lazy load and VPI function of the LScache plugin, which once again makes quic.cloud superfluous and less Javascript is required thanks to an improved lazy load. These hacks are supplemented by the so-called Fetch Priority Property, which has a significant impact on the prioritization of static sources to be loaded and prevents Content Shifting (CLS). These hacks not only give you more functions, they also save you a lot of time and money for quic.cloud.
We hope we didn't take up too much of your time, but we think it was worth reading this thread.
Learn about the AWR Plugin at the Kitt Cache Crawler page, the fastest Cache Crawler for LiteSpeed LScache.
https://www.cachecrawler.com/WP-Plugins/WP-Plugin-avif-webp-Replacement::6574.html
*************************************************************************************************************************************************************************************************
Join https://www.cachecrawler.com - Lightning fast Cache Warmup Crawler for Wordpress, OpenCart, PrestaShop, W3 Total Cache, WP Rocket, Shopware and Magento.
avif stands for AV1 Image File Format, is a modern, open-source image compression format. The AVIF format is based on the AV1 video codec, which was developed by the Alliance for Open Media (AOMedia) to provide efficient and high-quality video compression. The AVIF format leverages advanced compression techniques employed by the AV1 codec to deliver exceptional image quality at a fraction of the file size of traditional image formats, such as JPEG and PNG.
The main key feature of avif image is that the file size of avif images can be up to 50% smaller in comparison to webp image format without loss of quality.
So why not use avif images instead of webp?
avif image format is not an replacement of webp images and webp is not an replacement of avif, because not all browsers support both image format types, so you must offer both image types and at least there are browsers that doen't support webp nor avif. While this only affects older browsers, old is relative. The Safari browser itself only supports webp since version > 13 and only with certain OS versions. The avif format looks even worse with regard to the Safari browser, so that at least version 16.4 is required for unrestricted avif support. All other of the most used browsers such as the Chrome Browser or Firefox have been able to use avif for much longer. An exception among the well-known browsers is the Edge Browser from Microsoft. Although this browser is based on the Chrome browser, this browser does not support the avif format to date.
[Update]
Since version 121 also the Edge Browser supports avif.
Although it may read as if avif is not an alternative to webp, due to the widespread use of the Chrome browser, Firefox and other browsers, it can be assumed that the majority of all users will benefit from the advantages of the avif format.
How can I use avif images?
Regardless of Wordpress and the LiteSpeed LScache Plugin (LSCWP) for Wordpress, HTML5 provides everything to not only use webp but also avif images, provided that you are able to convert the existing jpg or png images into the webp and/or avif convert format. Not only for Wordpress there are numerous plugins that convert jpg and png images. With these plugins you get the required image formats in the simplest way, but the biggest weakness of the plugins we know is that they are only insufficiently able to detect the browser support of webp and avif images. As a result, users of the Safari browser in particular, who support neither webp nor avif, still see one of the two image formats, although there is no support for it. No support means that the affected browsers will not display any images. HTML5 can solve this problem, but none of the themes we know of provide the necessary HTML code to take advantage of webp and avif without running the risk of providing a browser with the wrong image format.
That sounds very complicated. Isn't there a little easier way?
Unfortunately no and to your disappointment it gets even more complicated when you use the LiteSpeed Cache plugin. However, this thread was not written to ruin your day. This thread has a happy ending, but you should know why it was very difficult to resolve the issue. So hold on and read this thread to the end. It is worth it...!!!
Why is it particularly difficult to use avif images with the LiteSpeed Cache Plugin for Wordpress?
Basically, the same problems exist with the LScache plugin as without the LScache plugin. However, these are enormously expanded by the cache function, whereby at first it does not matter whether it is about webp or avif. In order to make the webp format available in Wordpress, you first need quic.cloud, because the webp images are not created by the plugin, but by quic.cloud. If you don't have a paid plan with quic.cloud, the time to convert the original images can take a long time because there is a daily limit of 200 images. If you overlook this, you get the webp images you need through quic.cloud, but even these webp images have limitations. Restriction means that LiteSpeed does not optimize the webp images, but only converts them. There is no compression involved in this conversion, which finally explains why the webp version of a jpg image has a larger file size than the original jpg image. As a result of this and due to the programming, the image format with the smallest file size is displayed. It is not uncommon for this not to be the webp image, but the jpg (original) image.
In the LiteSpeed Cache plugin, the use of webp images is provided via the webp replacement function. This replacement not only simply replaces the original image, but also changes the extension of the image in the HTML code. Image.jpg becomes image.jpg.webp. In relation to the cache function, this means that at least 2 different cache copies are required so that a browser with and without webp support can display the appropriate HTML code or cache copy. Thanks to the cache vary feature of the LiteSpeed web server's LScache engine, this is possible without any problems, but the LScache plugin for Wordpress generates faulty and incomplete cache vary modRerite rules in the .htaccess. As a result of this flaw, incorrect cache vary are created, causing either the correct browsers to display the wrong images, or the built-in cache warmup crawler warming up the wrong cache. Ultimately, this programming, which has been faulty for many years, means that the cache function and thus the speed advantage when loading a page is downright worthless. However, this does not only apply if the webp replacement function is enabled, but also when the webp replacement function is deactivated by activating the guest mode. What the guestmode paradox is all about, however, is another matter entirely.
When will the solution finally come that I can use avif images with the LScache plugin for Wordpress?
The answer to this question is that you cannot use avif images as long as LiteSpeed does not create the conditions for it. Referring to a comment by the LiteSpeed chief developer in LiteSpeed Slack, LiteSpeed has no plan to add the avif function to the LiteSpeed cache plugin. But don't worry. The world around LiteSpeed is much bigger than you and LiteSpeed might like to believe.
With the AWR Plugin for LiteSpeed LScache for Wordpress all previously described problems are solved. AWR stands for "avif & webp Replacement with Image Optimization". From this name of the plugin you can already conclude that it not only replaces the webp replacement function of the LScache plugin. It also provides the seemingly impossible avif replacement and also optimizes your default images. These functions are crowned by the fact that you do not need an external service like quic.cloud. All optimizations and conversions are done on your own server if your server meets the necessary requirements. Although these are small, the optimization of images in particular creates a very high server load. In order not to let the load become too high during the image process, the AWR plugin provides several functions so that you can also use the AWR plugin on shared hosting.
The AWR plugin was specially programmed for the LiteSpeed LScache plugin for Wordpress. It only works with this cache plugin and no other plugin.
The AWR plugin also offers you numerous "LiteSpeed Hacks". These hacks are modifications of the LScache plugin for Wordpress, which make it possible, for example, to make the built-in crawler avif ready, to "unblock" a crawler blocked by the hosting provider, or to make the built-in crawler more performant and therefore faster. In addition, these hacks make the built-in crawler "decimal numbers ready". The culmination of these hacks is a replacement of the lazy load and VPI function of the LScache plugin, which once again makes quic.cloud superfluous and less Javascript is required thanks to an improved lazy load. These hacks are supplemented by the so-called Fetch Priority Property, which has a significant impact on the prioritization of static sources to be loaded and prevents Content Shifting (CLS). These hacks not only give you more functions, they also save you a lot of time and money for quic.cloud.
We hope we didn't take up too much of your time, but we think it was worth reading this thread.
Learn about the AWR Plugin at the Kitt Cache Crawler page, the fastest Cache Crawler for LiteSpeed LScache.
https://www.cachecrawler.com/WP-Plugins/WP-Plugin-avif-webp-Replacement::6574.html
*************************************************************************************************************************************************************************************************
Join https://www.cachecrawler.com - Lightning fast Cache Warmup Crawler for Wordpress, OpenCart, PrestaShop, W3 Total Cache, WP Rocket, Shopware and Magento.
Last edited:
