{"id":707,"date":"2024-05-07T11:41:54","date_gmt":"2024-05-07T11:41:54","guid":{"rendered":"https:\/\/kb.shortpixel.com\/docs\/how-to-serve-webp-files-using-spio\/"},"modified":"2025-08-27T08:46:24","modified_gmt":"2025-08-27T08:46:24","password":"","slug":"how-to-serve-webp-files-using-spio","status":"publish","type":"docs","link":"https:\/\/kb.shortpixel.com\/knowledge-base\/article\/how-to-serve-webp-files-using-spio\/","title":{"rendered":"How to create and serve WebP files using ShortPixel Image Optimizer"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/xrKQju91SG0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n\n\n\n<p>Using\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-image-optimiser\/\" rel=\"noopener\">ShortPixel Image Optimizer<\/a>\u00a0(SPIO), you can create WebP images alongside existing images when optimizing them.<\/p>\n\n\n\n<p>WebP is&nbsp;a modern&nbsp;image format&nbsp;created by&nbsp;Google that provides superior&nbsp;lossless and lossy&nbsp;compression for images on the web. <a href=\"https:\/\/developers.google.com\/speed\/webp\/\" target=\"_blank\" rel=\"noopener\">According to Google<\/a>,&nbsp;WebP lossless images are&nbsp;26% smaller&nbsp;in size compared to PNGs.&nbsp;Lossless WebP&nbsp;supports transparency&nbsp;(also known as alpha channel) at a cost of just&nbsp;22% additional bytes. For cases when lossy RGB compression is acceptable,&nbsp;lossy WebP also supports transparency, typically providing 3 times smaller file sizes compared to PNG \u2013 that\u2019s a huge improvement!&nbsp;<\/p>\n\n\n\n<p>Read more about why WebP is beneficial for your website here: <a href=\"https:\/\/shortpixel.com\/blog\/how-webp-images-can-speed-up-your-site\/\" target=\"_blank\" rel=\"noopener\">How WebP images can speed up your (WordPress) site &#8211; ShortPixel Blog<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"howto\">How to create WebP images?<\/h2>\n\n\n\n<p>Just enable the \u201c<strong>Create WebP Images<\/strong>\u201d option in the \u201cWebP\/AVIF &amp; CDN\u201d section of the ShortPixel settings in your WordPress dashboard.<\/p>\n\n\n\n<div class=\"callout-yellow\">\nWebP images are created only after your images have been optimized. In other words, for existing images in your Media Library, simply enabling the option is not enough\u2014<strong>you need to optimize them again after enabling it<\/strong>. Keep reading if you have already optimized them.\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"553\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250309_161436-1024x553.jpg\" alt=\"\" class=\"wp-image-1800\" srcset=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250309_161436-1024x553.jpg 1024w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250309_161436-300x162.jpg 300w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250309_161436-768x415.jpg 768w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250309_161436-360x195.jpg 360w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250309_161436.jpg 1125w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"already-optimized\">What to do if I want to create WebP but I already optimized my images?<\/h3>\n\n\n\n<p>First of all, make sure you\u00a0<strong>update SPIO to the latest version<\/strong>. This is very important because versions newer than 4.X allow you to create WebP files for images that have already been optimized. With older versions, you\u2019ll have to restore your images and optimize them again, spending credits unnecessarily.<\/p>\n\n\n\n<p>Once SPIO is updated to the latest version, follow these three steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to Media > Bulk ShortPixel and click on \u201cStart Optimization\u201d.<\/li>\n\n\n\n<li>On step 1, under \u201cOptimize\u201d, make sure the toggle for \u201cMedia Library\u201d is turned on. Then, under \u201cOptions\u201d,\u00a0select\u00a0the option to create WebP files.<\/li>\n\n\n\n<li>Follow the further instructions.<\/li>\n<\/ol>\n\n\n\n<p>For more information, please read&nbsp;<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\">this article<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"frontend\">How to deliver the WebP images on the front-end?<\/h2>\n\n\n\n<p>Creating WebP images is only the first step! You also need to make them available to all your users. Fortunately, SPIO provides two different methods for doing this.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Option 1 &#8211; Using the ShortPixel CDN<\/h3>\n\n\n\n<p>The easiest way to deliver your WebP files is by using the ShortPixel CDN. First, on your WordPress dashboard, go to Settings > ShortPixel > WebP\/AVIF &amp; CDN, and enable the \u201c<strong>Deliver the next generation images using the ShortPixel CDN<\/strong>\u201d option.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"464\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250302_101033-1024x464.jpg\" alt=\"\" class=\"wp-image-1753\" srcset=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250302_101033-1024x464.jpg 1024w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250302_101033-300x136.jpg 300w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250302_101033-768x348.jpg 768w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250302_101033-360x163.jpg 360w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250302_101033.jpg 1266w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>When enabled, the plugin will replace every image URL on your site with CDN URLs that will automatically deliver the WebP format if the browser supports it. For example, if your image URL is\u00a0<code>https:\/\/example.com\/wp-content\/uploads\/2025\/02\/image.jpg<\/code>, the new URL will look similar to this:\u00a0<code>https:\/\/spcdn.shortpixel.ai\/spio\/ret_img,q_orig,to_webp,s_webp\/example.com\/wp-content\/uploads\/2025\/02\/image.jpg<\/code><\/p>\n\n\n\n<p>To learn more about this delivery method,&nbsp;<a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/deliver-webp-avif-images-using-the-shortpixel-cdn-in-spio\/\" rel=\"noopener\">click here<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Option 2 &#8211; Without using a CDN<\/h3>\n\n\n\n<p>If you don\u2019t want to use the ShortPixel CDN to deliver the WebP files, you can simply deliver the locally generated files from your server. To do this,\u00a0<strong>enable the \u201cServe WebP\/AVIF images from locally hosted filed (without using a CDN)\u201d.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"398\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250302_105948-1024x398.jpg\" alt=\"\" class=\"wp-image-1754\" srcset=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250302_105948-1024x398.jpg 1024w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250302_105948-300x117.jpg 300w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250302_105948-768x299.jpg 768w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250302_105948-360x140.jpg 360w, https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2024\/05\/Screenshot-20250302_105948.jpg 1409w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Then choose one of the following methods:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Using the &lt;PICTURE> tag syntax:<\/strong>\u00a0This method alters the page code and changes each\u00a0<code>&lt;img><\/code>\u00a0tag with a\u00a0<code>&lt;picture><\/code>\u00a0tag.<\/li>\n\n\n\n<li><strong>Without altering the page code (via .htaccess)<\/strong>: With this method, a new block of code is inserted into the .htaccess file. This is the recommended option.<\/li>\n<\/ol>\n\n\n\n<div class=\"callout-blue\">Read this article to learn more about which delivery method you should use: <a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/which-webp-files-delivery-method-is-the-best-for-me\" rel=\"noopener\">Which WebP files delivery method is the best for me?<\/a>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"troubleshooting\">Troubleshooting the WebP delivery<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"served-correctly\">How to check if your WebP images are served correctly<\/h3>\n\n\n\n<p>You can use the browser&#8217;s <strong>developer tools<\/strong> to test if your images are served as WebP. First, go to your website and then press F12. A window similar to the one below should appear. Next, click the <strong>Network <\/strong>tab and then click the <strong>Img<\/strong> filter.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-w63zsp5EpX.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Press <strong>F5 on Windows <\/strong>or<strong> CTRL + R on Mac<\/strong>&nbsp;to reload the page, then <strong>scroll down<\/strong>&nbsp;to load all images.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-xB9Hfry770.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p>You should see all images with the\u00a0Type\u00a0<code>webp<\/code>,\u00a0<strong>regardless of the extension of the file<\/strong>.\u00a0There is a possibility that in this case you will also see some other irrelevant things, like\u00a0<code>svg+xml<\/code>\u00a0or\u00a0<code>text\/html<\/code>. You can ignore those.<\/p>\n\n\n\n<p>If you can see the\u00a0Type\u00a0<code>webp<\/code>, congratulations! You are now successfully serving WebP images to compatible web browsers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Only some of the images are served as WebP<\/h3>\n\n\n\n<p>If, after checking whether your images are served as WebP, you find that\u00a0<strong>only some (not all)<\/strong>\u00a0are in WebP format, there are two possible reasons for this:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Our algorithms may have determined that the WebP version of an image is more than 5% larger than the original. In such cases, our plugin does not store the WebP file on your server to minimize credit consumption and, as a result, does not serve it to your website visitors. To learn more about this behavior, please check this article:\u00a0<a href=\"https:\/\/kb.shortpixel.com\/knowledge-base\/article\/why-is-my-image-not-converted-to-webp\/\">Why is my image not converted to WebP or AVIF?<\/a><\/li>\n\n\n\n<li>If you are using the ShortPixel CDN to deliver images (with the \u201cDeliver the next generation images using the ShortPixel CDN\u201d option enabled), the process works as follows: The first time an image is accessed, it is registered for storage in the ShortPixel CDN. However, to avoid making users wait a few seconds, the original image is immediately served via an HTTP 307 redirect. After a short delay\u2014typically a few seconds, or a few minutes in rare cases\u2014the image should be fully available on the CDN and will be displayed upon page refresh. Keep in mind that the time it takes for the WebP version to appear may also depend on your browser\u2019s cache. In short, if you are using the ShortPixel CDN, we kindly ask you to\u00a0<strong>wait a few minutes<\/strong>.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"not-served-correctly\">None of the images are served as WebP<\/h3>\n\n\n\n<p>If the delivery method that you have chosen doesn\u2019t seem to be working at all, and no image is served as WebP, take a look at these articles first:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If you selected \u201cUsing the &lt;PICTURE> tag syntax\u201d, check this:\u00a0<a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/generate-webp-mark-up-option-doesnt-work\/\" rel=\"noopener\">The \u201cUsing the &lt;PICTURE> tag syntax\u201d option doesn\u2019t work; next-gen images won\u2019t show up<\/a>.<\/li>\n\n\n\n<li>If you selected \u201cWithout altering the page code (via .htaccess)\u201d, check this:\u00a0<a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/delivering-webp-images-via-htaccess\/\" rel=\"noopener\">Caveats of delivering WebP or AVIF images via .htaccess<\/a><\/li>\n\n\n\n<li>If you selected \u201cDeliver the next generation images using the ShortPixel CDN\u201d, check this:\u00a0<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<\/ul>\n\n\n\n<p>If you still cannot solve the problem, or if our delivery methods do not meet your needs, you should try an alternative solution for serving WebP images, such as\u2026<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>replacing ShortPixel Image Optimizer with\u00a0ShortPixel Adaptive Images\u00a0(SPAI). If you want to learn more about SPAI, read\u00a0<a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/how-shortpixel-adaptive-images-work\/\" rel=\"noopener\">this article<\/a>.<\/li>\n\n\n\n<li>configuring your NGINX server\u00a0(if relevant) to transparently serve WebP files: <a href=\"https:\/\/kb.shortpixel.com\/knowledge-base\/article\/configure-nginx-to-transparently-serve-webp-files-when-supported\/\">Configure NGINX to transparently serve AVIF files when supported<\/a>.<\/li>\n\n\n\n<li>configuring LiteSpeed Cache (if relevant) to deliver the WebP files: <a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/how-to-deliver-the-webps-generated-with-shortpixel-with-the-litespeed-cache-plugin\/\" rel=\"noopener\">How to deliver the WebP generated by ShortPixel with LiteSpeed Cache<\/a>.<\/li>\n\n\n\n<li>using another plugin\u00a0to deliver the WebP files generated 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>.\u00a0If you choose this option,\u00a0remember to\u00a0<strong>uncheck\u00a0<\/strong>both the \u201cDeliver the next generation images using the ShortPixel CDN\u201d and \u201cServe WebP\/AVIF images from locally hosted files (without using a CDN)\u201d options in your ShortPixel settings.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Using\u00a0ShortPixel Image Optimizer\u00a0(SPIO), you can create WebP images alongside existing images when optimizing them. WebP is&nbsp;a modern&nbsp;image format&nbsp;created by&nbsp;Google that provides superior&nbsp;lossless and lossy&nbsp;compression for images on the web. According to Google,&nbsp;WebP lossless images are&nbsp;26% smaller&nbsp;in size compared to PNGs.&nbsp;Lossless WebP&nbsp;supports transparency&nbsp;(also known as alpha channel) at a cost of just&nbsp;22% additional bytes. For cases [&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-707","docs","type-docs","status-publish","hentry","doc_category-shortpixel-image-optimizer"],"blocksy_meta":[],"year_month":"2026-04","word_count":1252,"total_views":"3276","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\/707","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=707"}],"version-history":[{"count":2,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/docs\/707\/revisions"}],"predecessor-version":[{"id":2644,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/docs\/707\/revisions\/2644"}],"wp:attachment":[{"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/media?parent=707"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/doc_category?post=707"},{"taxonomy":"glossaries","embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/glossaries?post=707"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/doc_tag?post=707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}