{"id":699,"date":"2024-05-07T11:41:46","date_gmt":"2024-05-07T11:41:46","guid":{"rendered":"https:\/\/kb.shortpixel.com\/docs\/step-by-step-guide-to-install-and-use-shortpixel-adaptive-images-spai\/"},"modified":"2025-08-27T08:46:44","modified_gmt":"2025-08-27T08:46:44","password":"","slug":"step-by-step-guide-to-install-and-use-shortpixel-adaptive-images-spai","status":"publish","type":"docs","link":"https:\/\/kb.shortpixel.com\/knowledge-base\/article\/step-by-step-guide-to-install-and-use-shortpixel-adaptive-images-spai\/","title":{"rendered":"Step-by-step guide to install and use ShortPixel Adaptive Images (SPAI)"},"content":{"rendered":"<section class=\"index-list\">\n<h4>In this article<\/h4>\n<ul>\n<li><a href=\"#installing\">Installing ShortPixel Adaptive Images<\/a><\/li>\n<li><a href=\"#onboarding\">Onboarding Wizard<\/a><\/li>\n<li><a href=\"#settings\">Settings<\/a><\/li>\n<li><a href=\"#checker\">Image Checker<\/a><\/li>\n<li><a href=\"#troubleshooting\">Troubleshooting<\/a><\/li>\n<\/ul>\n<\/section>\n<p> In this guide, you will see how you can install <a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-adaptive-images\/\" target=\"_blank\" rel=\"noopener\">ShortPixel Adaptive Images (SPAI)<\/a>, an explanation of its settings and how to know if SPAI is working well, and if it isn&#8217;t, how to solve it. Let&#8217;s go!<\/p>\n<h2 id=\"installing\">1. Installing ShortPixel Adaptive Images (SPAI)<\/h2>\n<p> There are 3 ways you can install SPAI, and they are the same as with every other plugin.<\/p>\n<h3>1.1 Using WordPress plugin search<\/h3>\n<ul>\n<li> Go to your WordPress&nbsp;admin area&nbsp;and click on&nbsp;<strong>Plugins <\/strong>&gt; <strong>Add New.<\/strong>&nbsp;<\/li>\n<li>Find the plugin by typing &#8220;<em>shortpixel adaptive images<\/em>&#8221; in the search field.<\/li>\n<\/ul>\n<p> <img decoding=\"async\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-RK4XAuhK7s.jpg\"><\/p>\n<ul>\n<li>Click on <strong>Install Now<\/strong>&nbsp;on the&nbsp;ShortPixel Adaptive Images box. Once installed, the button will change to&nbsp;<strong>Activate<\/strong>. Click on it and that&#8217;s it!<\/li>\n<\/ul>\n<h3>1.2 By uploading the plugin<\/h3>\n<p> You can also <strong><\/strong>download and upload the plugin<strong><\/strong> if you don&#8217;t feel like using the plugin search.<\/p>\n<ul>\n<li>Download&nbsp;the plugin by clicking <a href=\"https:\/\/downloads.wordpress.org\/plugin\/shortpixel-adaptive-images.latest-stable.zip\" rel=\"noopener\">here<\/a>.<\/li>\n<li>Go to your WordPress admin area and go to <strong> Plugins <\/strong><em>&gt; <\/em><strong>Add New<\/strong><em> &gt; <\/em><strong>Upload Plugin<\/strong><\/li>\n<\/ul>\n<p> <img decoding=\"async\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-ULUYMG9xB8.jpg\"><\/p>\n<ul>\n<li>Click <strong>Choose File<\/strong>, look for the <em>.zip<\/em> file that you downloaded, select it, and upload it by clicking on&nbsp;<strong>Install Now<\/strong>. After activating it, that&#8217;s it!<\/li>\n<\/ul>\n<h3>1.3 Manually using FTP<\/h3>\n<p> The 3rd way, which is for experienced users, is to <strong><\/strong>download and upload the plugin via FTP<strong>.<br \/><\/strong><\/p>\n<ul>\n<li>Download the plugin by clicking <a href=\"https:\/\/downloads.wordpress.org\/plugin\/shortpixel-adaptive-images.latest-stable.zip\" rel=\"noopener\">here<\/a>.<\/li>\n<li>Extract&nbsp;the<em> .zip<\/em> file on your computer. Extracting the plugin .zip file will create a new folder with the same name. This is the folder that you need to manually upload to your website using an FTP client.<\/li>\n<li>Open the FTP client and connect&nbsp;to your website using the login credentials provided by your web host.&nbsp;<\/li>\n<li>Once connected, you need to access the <code>\/wp-content\/plugins<\/code> path.<\/li>\n<li>Upload&nbsp;the folder you extracted from the .zip file to the <code>\/wp-content\/plugins<\/code>&nbsp;folder on your web server.<\/li>\n<\/ul>\n<p><strong><\/strong> <\/p>\n<p> <img decoding=\"async\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-wkXvyquXF1.jpg\"><\/p>\n<ul>\n<li> After uploading the files, go to the WordPress admin area and click on <strong>Plugins <\/strong>in the admin menu. You will see your plugin successfully installed on the plugins page.<\/li>\n<li>Click on the <strong> Activate&nbsp;<\/strong>link, as seen below.<\/li>\n<\/ul>\n<p> <img decoding=\"async\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-UM1L53qbEy.jpg\"><\/p>\n<h2 id=\"onboarding\">2. Onboarding Wizard<\/h2>\n<p> If it&#8217;s the first time you are using ShortPixel Adaptive Images, you will now be redirected to the Onboarding Wizard:<\/p>\n<p> <img decoding=\"async\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-cXGQvopYcK.jpg\">This 4-step wizard will help you configure SPAI properly so all your images are served from our CDN optimized.<\/p>\n<p> If, for example, you were already using SPAI and updated to the new version, you can <strong>restart the wizard<\/strong> by going to Settings &gt; ShortPixel AI and clicking on the &#8220;Setup Wizard&#8221; button located on the top right Help menu:<\/p>\n<p> <img decoding=\"async\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-YXRibBF5lq.jpg\"><\/p>\n<p> Please note that <strong style=\"background-color: initial;\"><a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-adaptive-images\/\" rel=\"noopener\">ShortPixel Adaptive Images<\/a> does not require an API Key<\/strong> to start working. You only need to <a href=\"https:\/\/help.shortpixel.com\/article\/94-how-to-associate-a-domain-to-my-account\" rel=\"noopener\">associate your website\/domain<\/a> to your account so that your ShortPixel credits will be used, and that will be automatically done by the Onboarding Wizard.<\/p>\n<section class=\"callout-yellow\">\n<p> After you complete the Onboarding Wizard, be sure to clear the cache of your site: <a href=\"https:\/\/help.shortpixel.com\/article\/426-how-to-clear-wordpress-cache\" rel=\"noopener\">How to clear WordPress cache<\/a><\/p>\n<\/section>\n<h2 id=\"settings\">3. Settings<\/h2>\n<p> ShortPixel is very easy to use, and it starts doing its magic right after activating and setting it up with the Onboarding Wizard. SPAI also provides you with some settings to tune your image optimization. To adjust the settings, just log in to your WordPress admin area and go to <strong>Settings &gt; ShortPixel AI<\/strong>.<\/p>\n<section class=\"callout-yellow\">\n<p> Remember to clear the cache of your site after changing your settings: <a href=\"https:\/\/help.shortpixel.com\/article\/426-how-to-clear-wordpress-cache\" rel=\"noopener\">How to clear WordPress cache<\/a><\/p>\n<\/section>\n<p>If you have just installed the plugin, you will see the settings in simple mode. This mode is ideal for those who just want to install-and-forget. Just enable or disable the settings you want and that&#8217;s it.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-k3aAfkjHOQ.jpg\"><\/p>\n<p>However, if you want,&nbsp;you can activate the advanced mode, where you can customise every single setting according to your preferences.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-XAaa1YbnEn.jpg\"><\/p>\n<p> The settings are organized in 4 tabs:<\/p>\n<ul>\n<li><a href=\"https:\/\/help.shortpixel.com\/article\/478-shortpixel-adaptive-images-settings-compression\" target=\"_blank\" rel=\"noopener\">Compression<\/a><\/li>\n<li><a href=\"https:\/\/help.shortpixel.com\/article\/479-shortpixel-adaptive-images-settings-behaviour\" target=\"_blank\" rel=\"noopener\">Behaviour<\/a><\/li>\n<li><a href=\"https:\/\/help.shortpixel.com\/article\/480-shortpixel-adaptive-images-settings---areas\" target=\"_blank\" rel=\"noopener\">Areas<\/a><\/li>\n<li><a href=\"https:\/\/help.shortpixel.com\/article\/481-shortpixel-adaptive-images-settings-exclusions\" target=\"_blank\" rel=\"noopener\">Exclusions<\/a><\/li>\n<\/ul>\n<p> Click on each link to learn more!<\/p>\n<h2 id=\"checker\">4. Image Checker<\/h2>\n<p> After all the settings are in place and the cache is cleared, be sure to check out the Image Checker tool: <a href=\"https:\/\/help.shortpixel.com\/article\/338-how-to-use-the-image-checker-tool\" target=\"_blank\" rel=\"noopener\">How to use the Image Checker tool<\/a>.<\/p>\n<p> <img decoding=\"async\" src=\"https:\/\/kb.shortpixel.com\/wp-content\/uploads\/2025\/08\/file-ecjZjX5iDA.jpg\"><\/p>\n<h2 id=\"troubleshooting\">5. Troubleshooting<\/h2>\n<section class=\"callout-yellow\">\n<p> <strong>Stop right here!<\/strong> Clear your cache before proceeding: <a href=\"https:\/\/help.shortpixel.com\/article\/426-how-to-clear-wordpress-cache\" rel=\"noopener\">How to clear WordPress cache<\/a><\/p>\n<\/section>\n<p> Now, the first question that comes to mind is: &#8220;<strong>Is SPAI working well on my website?<\/strong>&#8221; You can find out while reading <a href=\"https:\/\/help.shortpixel.com\/article\/240-is-shortpixel-adaptive-images-working-well-on-my-website\" target=\"_blank\" rel=\"noopener\">this article<\/a>!<\/p>\n<p> We also updated our knowledge base with many articles that will help you out when something is not working as expected:<\/p>\n<ul>\n<li>First of all, for the <strong>most common reasons of malfunctioning<\/strong>, check out <a href=\"https:\/\/help.shortpixel.com\/article\/220-i-installed-shortpixel-adaptive-images-but-it-doesnt-seem-to-work\" target=\"_blank\" rel=\"noopener\">this article<\/a>.&nbsp;<\/li>\n<li>If you notice that <strong>no images are properly sized,<\/strong> <a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/238-i-get-the-message-serve-scaled-images-when-using-spai-how-comes\" rel=\"noopener\">this article<\/a> helps you debug everything yourself, step-by-step.<\/li>\n<li>If, in general, SPAI works correctly, but you still have <strong>some images&nbsp;that are not being served by our CDN<\/strong>, try activating one of the following options, located on Settings &gt; ShortPixel AI &gt; Areas:\n<ul>\n<li><a href=\"https:\/\/help.shortpixel.com\/article\/273-how-does-the-replace-in-css-files-feature-work\" target=\"_blank\" rel=\"noopener\">Replace in CSS files<\/a><\/li>\n<li><a href=\"https:\/\/help.shortpixel.com\/article\/280-what-does-this-json-ajax-option-in-your-settings\" target=\"_blank\" rel=\"noopener\">Replace in JSON data<\/a><\/li>\n<li><a href=\"https:\/\/help.shortpixel.com\/article\/497-spai-replace-in-the-js-blocks\" rel=\"noopener\">Replace in the JS blocks<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Are you using GTmetrix or PageSpeed Insights? Do you get one or more image-related warning messages?\n<ul>\n<li>&#8220;<strong>Use explicit width and height on image elements<\/strong>&#8220;: <a href=\"https:\/\/help.shortpixel.com\/article\/245-i-receive-the-following-image-s-are-missing-width-and-or-height-attributes-when-testing-with-gtmetrix-why\" target=\"_blank\" rel=\"noopener\">Read this<\/a><\/li>\n<li>&#8220;<strong>P<\/strong><strong>roperly size images<\/strong>&#8220;: <a href=\"https:\/\/help.shortpixel.com\/article\/238-i-get-the-message-serve-scaled-images-when-using-spai-how-comes\" target=\"_blank\" rel=\"noopener\">Read this<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Do your images appear as &#8220;<strong>data:image\/svg<\/strong>&#8221; if you inspect the code<strong><\/strong>? Then <a href=\"https:\/\/help.shortpixel.com\/article\/228-why-are-my-images-appearing-as-data-image-svg-in-the-resource-inspector-and-not-appearing-on-my-page\" target=\"_blank\" rel=\"noopener\">read this<\/a>.<\/li>\n<li>SPAI is <strong>not serving the WebP<\/strong> images correctly? Maybe <a href=\"https:\/\/help.shortpixel.com\/article\/219-shortpixel-adaptive-images-doesnt-serve-webp-images-why-is-that\" target=\"_blank\" rel=\"noopener\">it does<\/a>!<\/li>\n<li>Do you get a <strong>500 error<\/strong> when installing the plugin? Make sure to <a href=\"https:\/\/help.shortpixel.com\/article\/210-when-i-try-to-install-your-plugin-i-get-a-500-error-how-can-i-solve-it\" target=\"_blank\" rel=\"noopener\">read this<\/a>.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In this article Installing ShortPixel Adaptive Images Onboarding Wizard Settings Image Checker Troubleshooting In this guide, you will see how you can install ShortPixel Adaptive Images (SPAI), an explanation of its settings and how to know if SPAI is working well, and if it isn&#8217;t, how to solve it. Let&#8217;s go! 1. Installing ShortPixel Adaptive [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[35],"glossaries":[],"doc_tag":[],"class_list":["post-699","docs","type-docs","status-publish","hentry","doc_category-shortpixel-adaptive-images"],"blocksy_meta":[],"year_month":"2026-04","word_count":891,"total_views":"2682","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 Adaptive Images","term_url":"https:\/\/kb.shortpixel.com\/knowledge-base\/category\/shortpixel-adaptive-images\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/docs\/699","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=699"}],"version-history":[{"count":1,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/docs\/699\/revisions"}],"predecessor-version":[{"id":2668,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/docs\/699\/revisions\/2668"}],"wp:attachment":[{"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/media?parent=699"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/doc_category?post=699"},{"taxonomy":"glossaries","embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/glossaries?post=699"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/kb.shortpixel.com\/wp-json\/wp\/v2\/doc_tag?post=699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}