{"id":3585,"date":"2025-04-27T06:12:14","date_gmt":"2025-04-27T06:12:14","guid":{"rendered":"https:\/\/awp.agency\/blog\/el-mejor-plugin-gratuito-avif-y-webp-para-wordpress\/"},"modified":"2025-07-19T23:40:13","modified_gmt":"2025-07-20T02:40:13","slug":"the-best-free-avif-and-webp-plugin-for-wordpress","status":"publish","type":"post","link":"https:\/\/awp.agency\/en\/blog\/el-mejor-plugin-gratuito-avif-y-webp-para-wordpress\/","title":{"rendered":"The best free AVIF and WEBP plugin for WordPress"},"content":{"rendered":"<p class=\"wp-block-paragraph\">For the past few years, I was always trying to find the best plugin that would allow converting images in WordPress to modern formats like WEBP and, more recently AVIF. In most of the options I tried, it didn't work correctly for Elementor background images (or any images that are included in CSS files.)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In other cases, as with Webp Express, I could use rewrite rules on apache servers to correctly serve the images in the formats that are compatible with the browsers of each user of our website. However, this plugin has the limitation of not working well on NGINX or LiteSpeed servers. Besides, it is not compatible with AVIF.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CompressX: The best plugin I've found so far<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, in the last few months I have been using <a href=\"https:\/\/wordpress.org\/plugins\/compressx\/\" target=\"_blank\" rel=\"noopener\">CompressX<\/a> which is giving me very good results, allowing to convert and serve correctly the images in modern and optimized formats. Even with the background images (images coming from css files) on all types of servers where I have tested it (Apache, NGNIX and LiteSpeed).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In addition, the interface is easy to use. We simply activate the automatic conversion, choose the php library we will use to convert the images and the formats we want:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/awp.agency\/wp-content\/uploads\/2025\/07\/image-1024x277.png\" alt=\"\" class=\"wp-image-254\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">It is advisable to click on \"Check enviroment\" to see what version of Imagick we have on our server. If we decide to use Imagick, it is important to keep in mind that versions lower than 7.x, may cause problems when converting PNGs to AVIF.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this case we can disable this conversion or use GD.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/awp.agency\/wp-content\/uploads\/2025\/07\/image-1-1024x143.png\" alt=\"\" class=\"wp-image-255\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, we can also bulk convert all current images on the site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Considerations when migrating the site with optimized images<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">I have noticed that sometimes it is necessary to deactivate the plugin and re-activate it to make the redirects to the optimized versions of the images work after a hosting migration.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How do I know if optimized images are being displayed?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When we open the developer tools and enter our site, in the network tab, we will be able to filter by image files and see their format:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/awp.agency\/wp-content\/uploads\/2025\/07\/image-2.png\" alt=\"\" class=\"wp-image-256\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How do I know if the images are being redirected correctly according to the compatibility of each user's browser?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Although <a href=\"https:\/\/caniuse.com\/avif\" target=\"_blank\" rel=\"noopener\">AVIF <\/a>and <a href=\"https:\/\/caniuse.com\/webp\" data-type=\"link\" data-id=\"https:\/\/caniuse.com\/webp\" target=\"_blank\" rel=\"noopener\">WEBP <\/a>are quite compatible nowadays. The ideal is to have a fallback for the case of older browsers that are incompatible. This plugin does it automatically and we can check it as follows:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">We enter <a href=\"https:\/\/www.postman.com\/\" data-type=\"link\" data-id=\"https:\/\/www.postman.com\/\" target=\"_blank\" rel=\"noopener\">postman<\/a>If you do not have an account, create an account and create a new HTTP request.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/awp.agency\/wp-content\/uploads\/2025\/07\/image-3.png\" alt=\"\" class=\"wp-image-257\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">We copy the URL of one of the images of our site and put it in Postman.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/awp.agency\/wp-content\/uploads\/2025\/07\/image-5-1024x318.png\" alt=\"\" class=\"wp-image-259\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In the headers part, we configure Accept as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/awp.agency\/wp-content\/uploads\/2025\/07\/image-6-1024x96.png\" alt=\"\" class=\"wp-image-260\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To test compatibility with webp:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>image\/webp,image\/jpeg,image\/apng<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">To test avif compatibility:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>image\/avif,image\/jpeg,image\/apng<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">To test compatibility with jpeg and png only:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>image\/jpeg,image\/apng<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">We send the request and go to the response headers:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/awp.agency\/wp-content\/uploads\/2025\/07\/image-7-1024x106.png\" alt=\"\" class=\"wp-image-261\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In the Content-Type part we must see the format that we specify in our request.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We should repeat the test with the 3 formats (AVIF, WEBP and PNG\/JPEG) to make sure that the right format is delivered according to the request.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This \"Accept\" header is normally sent by each user's browser, specifying which image formats are compatible with it. So, with these tests, we can confirm the correct configuration of our server for compatibility in the delivery of images for all users.<\/p>","protected":false},"excerpt":{"rendered":"<p>Durante los \u00faltimos a\u00f1os, siempre estuve intentando buscar el mejor plugin que permita convertir las im\u00e1genes en WordPress a formatos modernos como WEBP y, m\u00e1s recientemente AVIF. En la mayor\u00eda de las opciones que prob\u00e9, no funcionaba correctamente para im\u00e1genes de fondo de Elementor (o cualquier imagen que est\u00e9 incluida en archivos CSS.) En otros [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":3594,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3585","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-optimizacion-wordpress"],"_links":{"self":[{"href":"https:\/\/awp.agency\/en\/wp-json\/wp\/v2\/posts\/3585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/awp.agency\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/awp.agency\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/awp.agency\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/awp.agency\/en\/wp-json\/wp\/v2\/comments?post=3585"}],"version-history":[{"count":1,"href":"https:\/\/awp.agency\/en\/wp-json\/wp\/v2\/posts\/3585\/revisions"}],"predecessor-version":[{"id":3593,"href":"https:\/\/awp.agency\/en\/wp-json\/wp\/v2\/posts\/3585\/revisions\/3593"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/awp.agency\/en\/wp-json\/wp\/v2\/media\/3594"}],"wp:attachment":[{"href":"https:\/\/awp.agency\/en\/wp-json\/wp\/v2\/media?parent=3585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/awp.agency\/en\/wp-json\/wp\/v2\/categories?post=3585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/awp.agency\/en\/wp-json\/wp\/v2\/tags?post=3585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}