{"id":703,"date":"2024-05-07T11:41:50","date_gmt":"2024-05-07T11:41:50","guid":{"rendered":"https:\/\/kb.shortpixel.com\/docs\/delivering-webp-images-via-htaccess\/"},"modified":"2025-11-21T06:41:33","modified_gmt":"2025-11-21T06:41:33","password":"","slug":"delivering-webp-images-via-htaccess","status":"publish","type":"docs","link":"https:\/\/kb.shortpixel.com\/knowledge-base\/article\/delivering-webp-images-via-htaccess\/","title":{"rendered":"Caveats of delivering WebP or AVIF images via .htaccess"},"content":{"rendered":"\n<p>With ShortPixel Image Optimizer you can deliver WebP or AVIF images via .htaccess. You just need to enable the &#8220;<strong>Without altering the page code (via .htaccess)<\/strong>&#8221; option, which you can find at <strong>Settings &gt; ShortPixel &gt; WebP\/AVIF &amp; CDN &gt; Serve WebP\/AVIF images from locally hosted files (without using a CDN).<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"1584\" height=\"978\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250312_092154.jpg\" alt=\"\" class=\"wp-image-1818\" style=\"width:1356px;height:auto\" srcset=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250312_092154.jpg 1584w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250312_092154-300x185.jpg 300w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250312_092154-1024x632.jpg 1024w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250312_092154-768x474.jpg 768w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250312_092154-1536x948.jpg 1536w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250312_092154-360x222.jpg 360w\" sizes=\"(max-width: 1584px) 100vw, 1584px\" \/><\/figure>\n\n\n\n<section class=\"callout-yellow\">First of all, make sure you understand the following:\n<ul>\n<li>If you optimized your entire Media Library&nbsp;<em>before<\/em>&nbsp;selecting the &#8220;Create WebP versions of the images&#8221; option, check out this article: <a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/i-optimized-already-all-the-images-but-then-i-realized-that-i-didnt-select-the-option-to-generate-webp-what-can-i-do\/\" rel=\"noopener\">I optimized already all the images but then I realized that I didn\u2019t select the option to generate WebP or AVIF, what can I do?<\/a><\/li>\n<li>Sometimes the WebP or AVIF versions of a file are <strong>intentionally<\/strong> not created because they are larger than the original image. Therefore, since they don&#8217;t exist, they won&#8217;t be served to your users. For more information, see this article: <a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/why-is-my-image-not-converted-to-webp\/\" rel=\"noopener\">Why is my image not converted to WebP or AVIF?<\/a><\/li>\n<\/ul>\n<\/section>\n\n\n\n<p>Now, due to the variety of possible server configurations, you need to consider some caveats when using the&nbsp;.htaccess file to seamlessly deliver the WebP or AVIF versions of your JPG\/PNG files (without altering the page code).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>This method does not work for websites with Cloudflare&#8217;s free plan<\/strong> because it does not support the <code>Vary<\/code> header (see next bullet)<\/li>\n\n\n\n<li>If you are using a CDN provider that is not Cloudflare, or if you have a <strong>paid plan from Cloudflare<\/strong>, you need to make sure it supports the&nbsp;<code>Vary<\/code>&nbsp;header and is properly configured to deliver WebP and\/or AVIF from the same URL based on browser capabilities so that it knows (and caches and delivers accordingly) that there are 2 different files to deliver for the same URL depending on the&nbsp;<code>Accept<\/code>&nbsp;header sent by the browser.\n<ul class=\"wp-block-list\">\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\n\n\n<li>If you are using a CDN that does not support the&nbsp;<code>Vary<\/code>&nbsp;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\n\n\n<li>For the same reason, this method may not work correctly with solutions like <a href=\"https:\/\/varnish-cache.org\/intro\/index.html#intro\" rel=\"noopener\">Varnish<\/a> either.<\/li>\n\n\n\n<li>The current block of code that our plugin inserts into your .htaccess file is the version that we find does the job best. We have websites where it works, and websites where it does not. The results, as expected, vary.<\/li>\n\n\n\n<li>If you find a better version, you are free to use a file manager and edit the code block yourself <strong>(be sure you know what you are doing<\/strong>, or you risk breaking your site). Hey, if you find something better, drop us a line too!<\/li>\n\n\n\n<li>If you use Cloudways, enable the <strong>WebP Redirection<\/strong> as per the instructions <a href=\"https:\/\/support.cloudways.com\/en\/articles\/5799334-how-to-use-and-serve-webp-images-in-wordpress#h_0b5f5447f3\" target=\"_blank\" rel=\"noopener\">here<\/a> (step #2).<\/li>\n\n\n\n<li>Your files will be served as WebP or AVIF, but <strong>you will see the original file extension in the browser<\/strong>.\u00a0Example:<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"1696\" height=\"1246\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-vTuRJi61KK.jpg\" alt=\"\" class=\"wp-image-2654\" style=\"width:1372px;height:auto\" srcset=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-vTuRJi61KK.jpg 1696w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-vTuRJi61KK-300x220.jpg 300w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-vTuRJi61KK-1024x752.jpg 1024w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-vTuRJi61KK-768x564.jpg 768w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-vTuRJi61KK-1536x1128.jpg 1536w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-vTuRJi61KK-360x264.jpg 360w\" sizes=\"(max-width: 1696px) 100vw, 1696px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>We have included a very simple test in the settings of our plugin, right under the &#8220;Without altering the page code (via .htaccess)&#8221; option, that will let you see if your particular server <code>CAN<\/code> or <code>CAN'T<\/code> achieve\u00a0this (in other words, if our best-effort code version really works for you or not). This simple test will not fix any problems, but it will at least show you on the spot whether the WebP or AVIF images in your pages are loaded or not when delivered via .htaccess. This way you can more easily and quickly decide which option to use.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1183\" height=\"427\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250312_093120.jpg\" alt=\"\" class=\"wp-image-1819\" srcset=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250312_093120.jpg 1183w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250312_093120-300x108.jpg 300w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250312_093120-1024x370.jpg 1024w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250312_093120-768x277.jpg 768w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250312_093120-360x130.jpg 360w\" sizes=\"(max-width: 1183px) 100vw, 1183px\" \/><\/figure>\n\n\n\n<p>If you cannot use this method,&nbsp;you should try an alternative solution for next generation image delivery:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use the second local WebP\/AVIF delivery option built into SPIO (using the &lt;PICTURE&gt; tag syntax): <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><a href=\"https:\/\/kb.shortpixel.com\/knowledge-base\/article\/deliver-webp-avif-images-using-the-shortpixel-cdn-in-spio\/\">Deliver images using the ShortPixel CDN in SPIO<\/a>.<\/li>\n\n\n\n<li>If you have an NGINX server, you can <a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/configure-nginx-to-transparently-serve-webp-files-when-supported\/\" rel=\"noopener\">configure NGINX to transparently serve next-gen format files when supported<\/a>.<\/li>\n\n\n\n<li>Add <a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-adaptive-images\/\" rel=\"noopener\">ShortPixel Adaptive Images<\/a> to your site and use it to serve the next-gen images. Read more about the differences between ShortPixel Image Optimizer and ShortPixel Adaptive Images here: <a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/shortpixel-adaptive-images-vs-shortpixel-image-optimizer\/\" rel=\"noopener\">ShortPixel Adaptive Images vs. ShortPixel Image Optimizer<\/a>.<\/li>\n\n\n\n<li>Use another plugin to deliver the WebP\/AVIF 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>With ShortPixel Image Optimizer you can deliver WebP or AVIF images via .htaccess. You just need to enable the &#8220;Without altering the page code (via .htaccess)&#8221; option, which you can find at Settings &gt; ShortPixel &gt; WebP\/AVIF &amp; CDN &gt; Serve WebP\/AVIF images from locally hosted files (without using a CDN). First of all, make [&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-703","docs","type-docs","status-publish","hentry","doc_category-shortpixel-image-optimizer"],"blocksy_meta":[],"year_month":"2026-04","word_count":744,"total_views":"2114","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\/703","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=703"}],"version-history":[{"count":6,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/docs\/703\/revisions"}],"predecessor-version":[{"id":2807,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/docs\/703\/revisions\/2807"}],"wp:attachment":[{"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/media?parent=703"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/doc_category?post=703"},{"taxonomy":"glossaries","embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/glossaries?post=703"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/doc_tag?post=703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}