{"id":702,"date":"2024-05-07T11:41:49","date_gmt":"2024-05-07T11:41:49","guid":{"rendered":"https:\/\/kb.shortpixel.com\/docs\/configure-nginx-to-transparently-serve-webp-files-when-supported\/"},"modified":"2025-10-27T17:13:09","modified_gmt":"2025-10-27T17:13:09","password":"","slug":"configure-nginx-to-transparently-serve-webp-files-when-supported","status":"publish","type":"docs","link":"https:\/\/kb.shortpixel.com\/knowledge-base\/article\/configure-nginx-to-transparently-serve-webp-files-when-supported\/","title":{"rendered":"Configure NGINX to transparently serve next-gen format files when supported"},"content":{"rendered":"\n<p>ShortPixel Image Optimizer (SPIO) has <a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/which-webp-files-delivery-method-is-the-best-for-me\/\" rel=\"noopener\">3 native WebP\/AVIF delivery methods<\/a>,&nbsp;but sometimes you are not able (or you will not want) to use any of them, especially if you have an NGINX server (which does not support&nbsp;<code class=\"inline-code\">.htaccess<\/code> files).&nbsp;If this is the case for you, and you have ShortPixel properly configured to <a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/how-to-serve-webp-files-using-spio\/\" rel=\"noopener\">generate <strong>(but not deliver)<\/strong> WebP or AVIF files<\/a>,&nbsp;the best option is to use the capabilities of NGINX and transparently serve the WebP\/AVIF version of your original file, if supported.<\/p>\n\n\n\n<p>The solution is simple, albeit manual: edit the NGINX configuration files,&nbsp;either <code class=\"inline-code\">nginx.conf<\/code> or, if you have a setup with multiple sites,&nbsp;the appropriate configuration file from&nbsp;<code class=\"inline-code\">\/etc\/nginx\/sites-available<\/code>.<\/p>\n\n\n\n<div class=\"callout-red\">\n<p><strong>Stop here!<\/strong> Before reading the instructions, make sure you understand the following:<\/p>\n<ul>\n<li><strong>This method may not work for websites with Cloudflare&#8217;s free plan<\/strong>because it does not support the <code class=\"inline-code\">Vary<\/code> header.<\/li>\n<li>After everything is configured, <strong>your WebP or AVIF files will show up with the same URL and extension<\/strong>. Your browser will display <code class=\"inline-code\">image.jpg<\/code>, but the image will actually be a WebP\/AVIF file.<\/li>\n<li>This solution is the version we have found to accomplish this task most successfully. <strong>If it does not work as expected or does not meet your requirements, we recommend you to get professional help from an NGINX expert.<\/strong> Hey, if you find something better, drop us a line too!<\/li>\n<li>If you are using a CDN provider that is not Cloudflare, or if you have a paid plan from Cloudflare, you need to make sure it supports the <code class=\"inline-code\">Vary<\/code> header and is properly configured to deliver WebP and AVIF from the same URL based on browser capabilities so that it knows (and caches and delivers accordingly) that there could be 3 different files to deliver for the same URL depending on the <code class=\"inline-code\">Accept<\/code> header sent by the browser.\n<ul>\n<li>Examples: <a href=\"https:\/\/support.bunny.net\/hc\/en-us\/articles\/360020604140-Understanding-Vary-Cache\" rel=\"noopener\">bunny.net<\/a> \/ <a href=\"https:\/\/blog.cloudflare.com\/vary-for-images-serve-the-correct-images-to-the-correct-browsers\/\" rel=\"noopener\">Cloudflare<\/a><\/li>\n<li>If you are using a CDN that does not support the&nbsp;<code class=\"inline-code\">Vary<\/code> header, or if you do not have the technical knowledge to implement it, you should not use this solution at all, or you may end up serving WebP\/AVIF images to browsers that do not support them. Instead, use one of the alternative solutions described at the end of this article.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n\n\n\n<p>The instructions defer depending on what format(s) you want to deliver.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"WebP-and-AVIF-IlqOA\">WebP and AVIF<\/h2>\n\n\n\n<p>These instructions are valid for when you have enabled the &#8220;Create WebP Images&#8221; <strong>and<\/strong> &#8220;Create AVIF Images&#8221; options, which means that you want to serve AVIF and WebP files (WebP will only be served when AVIF is not supported by the visitor&#8217;s browser).<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add the necessary AVIF MIME type in the NGINX configuration. For this, follow <a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/how-do-i-configure-my-web-server-to-deliver-avif-images\/\" rel=\"noopener\">this guide<\/a>.<\/li>\n\n\n\n<li>Insert this block <strong>before<\/strong> the server directive, which creates the <code class=\"inline-code\">$webp_suffix<\/code>&nbsp;and&nbsp;<code class=\"inline-code\">$avif_suffix<\/code>&nbsp;variables if the visitor&#8217;s browser has WebP and\/or AVIF capabilities:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>map $http_accept $webp_suffix {\n    default \"\";\n    \"~*webp\" \".webp\";\n}\n\nmap $http_accept $avif_suffix {\n    default \"\";\n    \"~*avif\" \".avif\";\n}<\/code><\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Insert this block <strong>inside <\/strong>the server directive:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>location ~* ^(\/wp-content\/.+).(png|jpe?g)$ {\n    set $base $1;\n    set $double_extension $1.$2;\n    add_header Vary Accept;\n    try_files $double_extension$avif_suffix$webp_suffix $base$avif_suffix$webp_suffix $double_extension$avif_suffix $base$avif_suffix $double_extension$webp_suffix $base$webp_suffix $uri =404;\n}<\/code><\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong>Disable ShortPixel&#8217;s native delivery methods<\/strong>. On your WordPress dashboard, go to Settings &gt; ShortPixel &gt; WebP\/AVIF &amp; CDN and <strong>uncheck <\/strong>both options: &#8220;Deliver the next generation images using the ShortPixel CDN&#8221; and &#8220;Serve WebP\/AVIF images from locally hosted files&#8221;:<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"509\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250305_103125-1024x509.jpg\" alt=\"\" class=\"wp-image-1772\" srcset=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250305_103125-1024x509.jpg 1024w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250305_103125-300x149.jpg 300w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250305_103125-768x382.jpg 768w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250305_103125-360x179.jpg 360w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250305_103125.jpg 1520w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Only-WebP-HQYV2\">Only WebP<\/h2>\n\n\n\n<p>These instructions are valid for when you have enabled only the &#8220;Create WebP Images&#8221; option, which means that you want to serve WebP files (and not AVIF).<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Insert this block <strong>before<\/strong> the server directive, which creates the&nbsp;<code class=\"inline-code\">$webp_suffix<\/code> if the browser supports WebP:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>map $http_accept $webp_suffix {\n    default \"\";\n    \"~*webp\" \".webp\";\n}<\/code><\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Insert this block <strong>inside <\/strong>the server directive:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>location ~* ^(\/wp-content\/.+).(png|jpe?g)$ {\n    set $base $1;\n    set $webp_uri $base$webp_suffix;\n    set $webp_old_uri $base.$2$webp_suffix;\n    set $root \"&lt;&lt;FULL PATH OF WP-CONTENT PARENT&gt;&gt;\";\n    root $root;\n    add_header Vary Accept;\n    if ( !-f $root$webp_uri ) {\n        add_header X_WebP_SP_Miss $root$webp_uri;\n    }\n    try_files $webp_uri $webp_old_uri $uri =404;\n}<\/code><\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Make sure to replace <code class=\"inline-code\">&lt;&lt;FULL PATH OF WP-CONTENT PARENT&gt;&gt;<\/code> with the actual <strong>absolute path <\/strong>to the wp-content folder, without the folder itself. Example: <code class=\"inline-code\">\/home\/john\/public_html\/<\/code>. The&nbsp;<code class=\"inline-code\">X_WebP_SP_Miss<\/code>&nbsp;header is not necessary, but useful for testing &#8211; this header is set if the browser has WebP capabilities, but no WebP version of the image is found on disk. You can disable it later by commenting out the entire&nbsp;<code class=\"inline-code\">if<\/code> directive.<\/li>\n\n\n\n<li><strong>Disable ShortPixel&#8217;s native delivery methods<\/strong>. On your WordPress dashboard, go to Settings &gt; ShortPixel &gt; WebP\/AVIF &amp; CDN and <strong>uncheck <\/strong>both options: &#8220;Deliver the next generation images using the ShortPixel CDN&#8221; and &#8220;Serve WebP\/AVIF images from locally hosted files&#8221;.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Only-AVIF-CAVKa\">Only AVIF<\/h2>\n\n\n\n<p>These instructions are valid for when you have enabled only the &#8220;Create AVIF Images&#8221; option, which means that you want to serve AVIF files (and not WebP).<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add the necessary AVIF MIME type in the NGINX configuration. For this, follow <a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/how-do-i-configure-my-web-server-to-deliver-avif-images\/\" rel=\"noopener\">this guide<\/a>.<\/li>\n\n\n\n<li>Insert this block <strong>before<\/strong> the server directive, which creates the&nbsp;<code class=\"inline-code\">$avif_suffix<\/code> if the browser has AVIF capability:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>map $http_accept $avif_suffix {\n    default \"\";\n    \"~*avif\" \".avif\";\n}<\/code><\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Insert this block <strong>inside <\/strong>the server directive:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>location ~* ^(\/wp-content\/.+).(png|jpe?g)$ {\n    set $base $1;\n    set $avif_uri $base$avif_suffix;\n    set $avif_old_uri $base.$2$avif_suffix;\n    set $root \"&lt;&lt;FULL PATH OF WP-CONTENT PARENT&gt;&gt;\";\n    root $root;\n    add_header Vary Accept;\n    if ( !-f $root$avif_uri ) {\n        add_header X_AVIF_SP_Miss $root$avif_uri;\n    }\n    try_files $avif_uri $avif_old_uri $uri =404;\n}<\/code><\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Make sure to replace <code class=\"inline-code\">&lt;&lt;FULL PATH OF WP-CONTENT PARENT&gt;&gt;<\/code> with the actual <strong>absolute path <\/strong>to the wp-content folder, without the folder itself. Example: <code class=\"inline-code\">\/home\/john\/public_html\/<\/code>. The&nbsp;<code class=\"inline-code\">X_AVIF_SP_Miss<\/code> header is not necessary, but useful for testing &#8211; this header is set if the browser has AVIF capabilities, but no AVIF version of the image is found on disk. You can disable it later by commenting out the entire&nbsp;<code class=\"inline-code\">if<\/code> directive.<\/li>\n\n\n\n<li><strong>Disable ShortPixel&#8217;s native delivery methods<\/strong>. On your WordPress dashboard, go to Settings &gt; ShortPixel &gt; WebP\/AVIF &amp; CDN and <strong>uncheck <\/strong>both options: &#8220;Deliver the next generation images using the ShortPixel CDN&#8221; and &#8220;Serve WebP\/AVIF images from locally hosted files&#8221;.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Example-Plesk-njoD1\">Example (Plesk)<\/h2>\n\n\n\n<p>Let us say you want to deliver only WebP files. If you use Plesk to manage your NGINX server, you can follow these instructions.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Connect to the Plesk server via <a href=\"https:\/\/support.plesk.com\/hc\/en-us\/articles\/115000172834\" rel=\"noopener\">SSH<\/a>.<\/li>\n\n\n\n<li>Create the&nbsp;<strong>\/etc\/nginx\/conf.d\/webp.conf<\/strong>&nbsp;file by entering the following command:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>touch \/etc\/nginx\/conf.d\/webp.conf<\/code><\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Open the webp.conf file in a text editor (e.g. <a href=\"https:\/\/support.plesk.com\/hc\/en-us\/articles\/360001084114\" rel=\"noopener\">vi editor<\/a>) and add the following content:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>map $http_accept $webp_suffix {\n  default \"\";\n  \"~*webp\" \".webp\";\n}<\/code><\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>Save the changes and close the file.<\/li>\n\n\n\n<li><p><a href=\"https:\/\/support.plesk.com\/hc\/en-us\/articles\/213413369\" rel=\"noopener\">Log in to Plesk<\/a> and go to&nbsp;<strong>Domains&nbsp;&gt; <em>yourdomain.com<\/em>&nbsp;&gt; Hosting &amp; DNS &gt; Apache &amp; nginx settings<\/strong>.<\/p><figure><img decoding=\"async\" style=\"width: 100%; max-width: 100%;\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-LCtFgJBmyh.png\"><\/figure><\/li>\n\n\n\n<li>Paste the following code snippet into the <strong>Additional nginx directives<\/strong> field. Don&#8217;t forget to replace&nbsp;<code class=\"inline-code\">YOUR_DOMAIN<\/code> with your actual&nbsp;domain name (without <code class=\"inline-code\">www<\/code> or <code class=\"inline-code\">https:\/\/<\/code>):<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>location ~* ^(\/wp-content\/.+).(png|jpe?g)$ {\n  set $base $1;\n  set $webp_uri $base$webp_suffix;\n  set $webp_old_uri $base.$2$webp_suffix;\n  set $root \"\/var\/www\/vhosts\/YOUR_DOMAIN\/httpdocs\/\";\n  root $root;\n  add_header Vary Accept;\n  if ( !-f $root$webp_uri ) {\n    add_header X_WebP_SP_Miss $root$webp_uri;\n  }\n  try_files $webp_uri $webp_old_uri $uri =404;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-aavyzIfZa9.png\" alt=\"\"\/><\/figure>\n\n\n\n<ol start=\"7\" class=\"wp-block-list\">\n<li>Go back to your SSH connection and enter the following command to restart the nginx service and apply the changes:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>service nginx restart<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Example-RunCloud-rECu3\">Example (RunCloud)<\/h2>\n\n\n\n<p>This guide was kindly provided to us by Gustavo, a dear customer of ShortPixel (thank you!). We assume that your server is running Ubuntu and your web app is running NGINX, and that you want to deliver both WebP and AVIF.<\/p>\n\n\n\n<div class=\"callout-yellow\">\n<b>Important<\/b>: Make sure that there is no expiration header cache rule set by NGINX that controls the expiration time of the files in question (jpg|jpeg|png|webp|avif). When this rule is enabled, the server returns only the original images (PNG or JPG) and not the optimized images (WebP or AVIF, as supported by the browser).\n<\/div>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Make sure that the required AVIF MIME types are present in the NGINX configuration. To do this, connect to your server and edit the <b>\/etc\/nginx-rc\/mime.types<\/b> file.<\/li>\n\n\n\n<li>Make sure you see the following lines, and if not, add them:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>image\/avif avif;\nimage\/avif-sequence avifs;<\/code><\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Now go to <b>\/etc\/nginx-rc\/conf.d\/<\/b> and once in it, create a configuration file there with the name of your choice (in this example it is&nbsp;<b>images.conf<\/b>).<\/li>\n\n\n\n<li>Edit the <b>images.conf<\/b> file and insert the following code:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>map $http_accept $webp_suffix {\n    default \"\";\n    \"~*webp\" \".webp\";\n}\n\nmap $http_accept $avif_suffix {\n    default \"\";\n    \"~*avif\" \".avif\";\n}<\/code><\/pre>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li><p>Log in to your RunCloud dashboard, select the web app of your choice and click on <b>NGINX Config<\/b>.<\/p><figure><img decoding=\"async\" style=\"max-width: 100%;\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-DcR7yL0Ha4.jpg\"><\/figure><\/li>\n\n\n\n<li>Click on the button <b>Add a New Config<\/b>.<\/li>\n\n\n\n<li>On the new screen, select the following:\n<ol class=\"wp-block-list\">\n<li>Predefined Config: <i>I want to write my own config<\/i><\/li>\n\n\n\n<li>Type: <i>location.main-before<\/i><\/li>\n\n\n\n<li>Config Name: whatever you want, e.g. <i>shortpixel<\/i><\/li>\n<\/ol>\n<\/li>\n\n\n\n<li>Insert this block:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>location ~* ^(\/wp-content\/.+).(png|jpe?g)$ {\n    set $base $1;\n    set $double_extension $1.$2;\n    add_header Vary Accept;\n    try_files $double_extension$avif_suffix$webp_suffix $base$avif_suffix$webp_suffix $double_extension$avif_suffix $base$avif_suffix $double_extension$webp_suffix $base$webp_suffix $uri =404;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-LSQRgTrbQ8.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<ol start=\"9\" class=\"wp-block-list\">\n<li><p>Save the new file and go to the main dashboard of your server in RunCloud. There go to Services &gt; NGINX and click on <b>Reload<\/b>.<\/p><figure><img decoding=\"async\" style=\"max-width: 100%;\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-jy9zzWPL7R.jpg\"><\/figure><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">For WP Engine Users<\/h2>\n\n\n\n<p>WP Engine doesn\u2019t allow direct NGINX config edits, so use this simplified rules block that handles WebP\/AVIF detection inline (without <code>map<\/code> directives) and works within WP Engine\u2019s environment.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Both WebP and AVIF<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># ShortPixel WP Engine rules for both WebP and AVIF\nset $avif_suffix \".avif\";\nif ($http_accept !~* \"image\/avif\") {\n    set $avif_suffix \"\";\n}\n \nset $webp_suffix \".webp\";\nif ($http_accept !~* \"image\/webp\") {\n    set $webp_suffix \"\";\n}\n \nlocation ~* ^(\/wp-content\/.+)\\.(png|jpe?g)$ {\n    set $base $1;\n    set $double_extension $1.$2;\n    add_header Vary Accept;\n    expires 365d;\n    try_files $double_extension$avif_suffix$webp_suffix $base$avif_suffix$webp_suffix $double_extension$avif_suffix $base$avif_suffix $double_extension$webp_suffix $base$webp_suffix $uri =404;\n}\n# End ShortPixel rules<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">AVIF only<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># ShortPixel WP Engine rules for AVIF-only delivery\nset $avif_suffix \".avif\";\nif ($http_accept !~* \"image\/avif\") {\n    set $avif_suffix \"\";\n}\n \nlocation ~* ^(\/wp-content\/.+)\\.(png|jpe?g)$ {\n    set $base $1;\n    set $double_extension $1.$2;\n    add_header Vary Accept;\n    expires 365d;\n    try_files $double_extension$avif_suffix $base$avif_suffix $uri =404;\n}\n# End ShortPixel rules<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">WebP only<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># ShortPixel WP Engine rules for WebP-only delivery\nset $webp_suffix \".webp\";\nif ($http_accept !~* \"image\/webp\") {\n    set $webp_suffix \"\";\n}\n\nlocation ~* ^(\/wp-content\/.+)\\.(png|jpe?g)$ {\n    set $base $1;\n    set $double_extension $1.$2;\n    add_header Vary Accept;\n    expires 365d;\n    try_files $double_extension$webp_suffix $base$webp_suffix $uri =404;\n}\n# End ShortPixel rules<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Alternatives<\/h2>\n\n\n\n<p>If you cannot use this method,&nbsp;you should try an alternative solution for WebP or AVIF image delivery:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use one of the WebP\/AVIF delivery options built into SPIO: <a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/how-to-serve-webp-files-using-spio\/\" rel=\"noopener\">WebP instructions<\/a> \/ <a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/how-to-create-and-serve-avif-files-using-shortpixel-image-optimizer\/\" rel=\"noopener\">AVIF instructions<\/a>.<\/li>\n\n\n\n<li>Replace ShortPixel Image Optimizer with <a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-adaptive-images\/\" rel=\"noopener\">ShortPixel Adaptive Images<\/a>.<\/li>\n\n\n\n<li>Use another plugin to deliver the WebP\/AVIF&nbsp;files created by ShortPixel, such as <a href=\"https:\/\/wordpress.org\/plugins\/cache-enabler\/\" rel=\"noopener\">Cache Enabler<\/a> or <a href=\"https:\/\/wp-rocket.me\/\" rel=\"noopener\">WP Rocket<\/a>.<\/li>\n\n\n\n<li>If you use LiteSpeed Cache, you can <a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/how-to-deliver-the-webps-generated-with-shortpixel-with-the-litespeed-cache-plugin\/\" rel=\"noopener\">use it to deliver the WebP files generated by ShortPixel<\/a>.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>ShortPixel Image Optimizer (SPIO) has 3 native WebP\/AVIF delivery methods,&nbsp;but sometimes you are not able (or you will not want) to use any of them, especially if you have an NGINX server (which does not support&nbsp;.htaccess files).&nbsp;If this is the case for you, and you have ShortPixel properly configured to generate (but not deliver) WebP [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[37],"glossaries":[],"doc_tag":[],"class_list":["post-702","docs","type-docs","status-publish","hentry","doc_category-shortpixel-image-optimizer"],"blocksy_meta":[],"year_month":"2026-04","word_count":1933,"total_views":"3108","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"admin","author_nicename":"admin_mdli53m5","author_url":"https:\/\/kb.shortpixel.com\/author\/admin_mdli53m5\/"},"doc_category_info":[{"term_name":"ShortPixel Image Optimizer","term_url":"https:\/\/kb.shortpixel.com\/knowledge-base\/category\/shortpixel-image-optimizer\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/docs\/702","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/comments?post=702"}],"version-history":[{"count":6,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/docs\/702\/revisions"}],"predecessor-version":[{"id":2779,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/docs\/702\/revisions\/2779"}],"wp:attachment":[{"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/media?parent=702"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/doc_category?post=702"},{"taxonomy":"glossaries","embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/glossaries?post=702"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/doc_tag?post=702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}