{"id":13530,"date":"2025-11-08T10:09:08","date_gmt":"2025-11-08T08:09:08","guid":{"rendered":"https:\/\/shortpixel.com/blog\/?p=13530"},"modified":"2025-12-03T01:38:07","modified_gmt":"2025-12-02T23:38:07","slug":"how-to-optimize-images-on-a-locally-hosted-website","status":"publish","type":"post","link":"https:\/\/shortpixel.com\/blog\/how-to-optimize-images-on-a-locally-hosted-website\/","title":{"rendered":"How to Optimize Images on a Locally Hosted Website"},"content":{"rendered":"\n<p>Working on a website that&#8217;s still on your local machine? Maybe you&#8217;re building on a staging server, or perhaps you&#8217;re working with a non-WordPress website altogether. Either way, you still need optimized images, but you can&#8217;t just install a plugin and call it a day?<\/p>\n\n\n\n<p>That&#8217;s where <a href=\"https:\/\/shortpixel.com\/archives\">ShortPixel Archive Optimizer<\/a> comes in. It lets you optimize images in bulk without needing a WordPress website or even a live website at all.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Who Is This Guide For?<\/h2>\n\n\n\n<p>This workflow is perfect if you&#8217;re in one of these situations:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You&#8217;re developing a website locally on your computer<\/li>\n\n\n\n<li>Your website is on a staging server that isn&#8217;t publicly accessible<\/li>\n\n\n\n<li>You&#8217;re working with a non-WordPress website (static HTML, custom CMS, etc.)<\/li>\n\n\n\n<li>You have images you need to optimize but can&#8217;t use a WordPress plugin<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group has-border-color has-palette-color-8-background-color has-background is-layout-constrained wp-container-core-group-is-layout-239228e0 wp-block-group-is-layout-constrained\" style=\"border-color:#888888;border-width:1px;border-radius:20px;padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-outermost-icon-block\"><div class=\"icon-container\" style=\"width:25px;transform:rotate(0deg) scaleX(1) scaleY(1)\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Layer_1\" viewBox=\"0 0 90.96 101.06\"><defs><style>.cls-1{fill:#efcc08;}<\/style><\/defs><path d=\"m53.54,79.72h-16.25c-1.48,0-2.68-1.2-2.68-2.68v-1.88c.02-1.62-.06-2.75-.23-3.39-.91-3.34-3.33-6.14-5.66-8.86-.77-.89-1.5-1.74-2.17-2.59-3.36-4.28-5.15-9.41-5.15-14.85,0-13.28,10.81-24.08,24.09-24.08s24.08,10.8,24.08,24.08c0,5.44-1.78,10.58-5.15,14.85-.59.76-1.27,1.55-1.98,2.39-2.39,2.82-5.07,5.96-5.99,9.28-.16.59-.24,1.66-.23,3.15v1.9c0,1.48-1.19,2.68-2.67,2.68h0Z\"><\/path><path class=\"cls-1\" d=\"m39.97,74.36h10.89c.03-2.08.23-3.11.42-3.78,1.24-4.47,4.32-8.1,7.03-11.28.71-.84,1.34-1.57,1.89-2.27,2.62-3.33,4.01-7.32,4.01-11.55,0-10.33-8.4-18.73-18.72-18.73s-18.73,8.4-18.73,18.73c0,4.22,1.38,8.21,4.01,11.54.62.79,1.3,1.57,2.02,2.4,2.47,2.87,5.54,6.43,6.78,10.95.18.71.39,1.78.42,3.99h0Z\"><\/path><path d=\"m53.54,90.34h-16.25c-1.48,0-2.68-1.2-2.68-2.68s1.19-2.67,2.68-2.67h16.25c1.48,0,2.67,1.19,2.67,2.67s-1.19,2.68-2.67,2.68h0Z\"><\/path><path d=\"m49.48,101.06h-8.12c-1.48,0-2.68-1.2-2.68-2.68s1.2-2.68,2.68-2.68h8.12c1.47,0,2.68,1.2,2.68,2.68s-1.2,2.68-2.68,2.68h0Z\"><\/path><path d=\"m88.29,48.16h-10.7c-1.48,0-2.68-1.19-2.68-2.68s1.2-2.68,2.68-2.68h10.7c1.48,0,2.67,1.2,2.67,2.68s-1.19,2.68-2.67,2.68h0Z\"><\/path><path d=\"m13.38,48.16H2.67c-1.48,0-2.67-1.19-2.67-2.68s1.19-2.68,2.67-2.68h10.7c1.48,0,2.68,1.2,2.68,2.68,0,1.48-1.2,2.68-2.68,2.68h0Z\"><\/path><path d=\"m45.48,16.06c-1.48,0-2.68-1.19-2.68-2.68V2.68c0-1.48,1.2-2.68,2.68-2.68s2.68,1.2,2.68,2.68v10.7c0,1.48-1.19,2.68-2.68,2.68h0Z\"><\/path><path d=\"m75.74,78.42c-.68,0-1.36-.26-1.89-.79l-7.57-7.57c-1.04-1.04-1.04-2.74,0-3.79,1.05-1.04,2.74-1.04,3.78,0l7.57,7.57c1.05,1.05,1.05,2.75,0,3.79-.52.53-1.2.78-1.9.78h0Z\"><\/path><path d=\"m22.77,25.46c-.68,0-1.37-.26-1.9-.79l-7.56-7.56c-1.05-1.05-1.05-2.75,0-3.79,1.05-1.04,2.74-1.04,3.78,0l7.57,7.57c1.05,1.04,1.05,2.75,0,3.79-.52.53-1.21.79-1.9.79h0Z\"><\/path><path d=\"m15.21,78.42c-.68,0-1.37-.26-1.89-.78-1.05-1.04-1.05-2.74,0-3.79l7.57-7.57c1.04-1.04,2.73-1.04,3.78,0,1.05,1.05,1.05,2.75,0,3.79l-7.57,7.57c-.53.52-1.21.78-1.89.78h0Z\"><\/path><path d=\"m68.18,25.46c-.68,0-1.37-.26-1.9-.79-1.04-1.04-1.04-2.74,0-3.78l7.57-7.57c1.04-1.04,2.74-1.05,3.78,0,1.05,1.05,1.05,2.74,0,3.79l-7.56,7.56c-.52.53-1.21.79-1.9.79h0Z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-medium-font-size\"><strong><strong>Quick note<\/strong><\/strong><\/p>\n<\/div>\n\n\n\n<p>If you already have a live WordPress website, you can skip all this and just use the<a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-image-optimiser\/\" target=\"_blank\" rel=\"noopener\"> ShortPixel Image Optimizer plugin<\/a>. It handles everything automatically, no manual uploads or downloads needed.<\/p>\n<\/div>\n\n\n\n<p>Ready to start?<br>Here\u2019s exactly how to optimize your images step by step with <strong>ShortPixel Archive Optimizer:<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Create a ZIP Archive of Your Images<\/h2>\n\n\n\n<p>First, gather all the images you want to optimize into a single ZIP file.<\/p>\n\n\n\n<p>If you have multiple image folders, you can simply compress the main folder into a ZIP file that contains all of them. You can also upload your entire website\u2019s folder, the ShortPixel Archive Optimizer will process it and optimize only the images.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2025\/11\/image.png\"><img decoding=\"async\" width=\"1116\" height=\"642\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2025\/11\/image.png\" alt=\"\" class=\"wp-image-13531\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image.png 1116w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-300x173.png 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-1024x589.png 1024w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-768x442.png 768w\" sizes=\"(max-width: 1116px) 100vw, 1116px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Login or Sign Up for ShortPixel<\/h2>\n\n\n\n<p><a href=\"https:\/\/shortpixel.com\/login\">Login<\/a> to your ShortPixel account or <a href=\"https:\/\/shortpixel.com\/free-sign-up\">create an account<\/a> if you do not have one already.<\/p>\n\n\n\n<p>ShortPixel gives you 100 image credits per month for free. For most small projects, this is plenty to get started. If you need more, paid plans start at a few dollars for extra credits.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Find the Archive Optimizer<\/h2>\n\n\n\n<p>Once you&#8217;re in the dashboard, look for the <strong>Archive Optimizer<\/strong> section in the left side menu.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2025\/11\/image-1-scaled.png\"><img decoding=\"async\" width=\"2560\" height=\"1271\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2025\/11\/image-1-scaled.png\" alt=\"\" class=\"wp-image-13532\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-1-scaled.png 2560w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-1-300x149.png 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-1-1024x508.png 1024w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-1-768x381.png 768w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-1-1536x763.png 1536w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-1-2048x1017.png 2048w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4: Choose Your Optimization Settings<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<p>Before uploading your archive, you can choose a specific optimization level or you can leave everything as it is. ShortPixel offers three options:<\/p>\n\n\n\n<p><strong>Glossy<\/strong>&nbsp;<\/p>\n\n\n\n<p>This is the sweet spot for most people. It creates smaller file sizes while keeping your images looking great. You&#8217;ll get excellent compression without noticeable quality loss, perfect for websites where visual quality matters.<\/p>\n\n\n\n<p><strong>Lossy<\/strong><\/p>\n\n\n\n<p>This option pushes compression further, resulting in even smaller files. There might be very minor quality differences if you zoom in closely, but for most web use cases, the images still look perfectly fine. Great if file size is your top priority.<\/p>\n\n\n\n<p><strong>Lossless<\/strong><\/p>\n\n\n\n<p>This preserves your images exactly as they are, with zero quality loss. The files will be smaller than the originals, but not as dramatically reduced as with the other options. Choose this if you&#8217;re working with images that need to remain pixel-perfect (like logos or technical diagrams).<\/p>\n\n\n\n<p>Pick the option that makes sense for your project, then move to the next step.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2025\/11\/image-3.png\"><img decoding=\"async\" width=\"1482\" height=\"678\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2025\/11\/image-3.png\" alt=\"\" class=\"wp-image-13534\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-3.png 1482w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-3-300x137.png 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-3-1024x468.png 1024w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-3-768x351.png 768w\" sizes=\"(max-width: 1482px) 100vw, 1482px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Optional: Try Modern Image Formats<\/h2>\n\n\n\n<p>If you want files even smaller, you can convert your images to WebP or AVIF instead of JPEG or PNG. These are next-gen formats that compress better and improve SEO while looking the same.<\/p>\n\n\n\n<p>ShortPixel can do this conversion during the optimization process if you want to try it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 5: Upload Your Archive<\/h2>\n\n\n\n<p>Now for the easy part. In the <strong>Archive Optimizer<\/strong>, you\u2019ll see an upload area where you can either <strong>drag and drop your ZIP file<\/strong> or <strong>click \u201cUpload\u201d<\/strong> to select it manually.<br>Once the file is ready, click <strong>\u201cStart Upload\u201d<\/strong> to begin the optimization process.<\/p>\n\n\n\n<p>ShortPixel will extract the images from your archive, optimize them using the settings you selected, and then repackage everything into a new ZIP file.<br>You can watch the progress bar as it works, or simply wait. When the process finishes, you\u2019ll get an email notification letting you know that your optimized archive is ready for download.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2025\/11\/image-4.png\"><img decoding=\"async\" width=\"1608\" height=\"826\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2025\/11\/image-4.png\" alt=\"\" class=\"wp-image-13535\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-4.png 1608w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-4-300x154.png 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-4-1024x526.png 1024w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-4-768x395.png 768w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-4-1536x789.png 1536w\" sizes=\"(max-width: 1608px) 100vw, 1608px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 6: Download Your Optimized Images<\/h2>\n\n\n\n<p>When the optimization is complete, you&#8217;ll see a download button appear. Click it to download your newly optimized archive.<\/p>\n\n\n\n<p>The file structure inside the ZIP will match your original upload, so all your images will be in the same folders and have the same filenames, so you can easily overwrite your original folder which had unoptimized images.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2025\/11\/image-5.png\"><img decoding=\"async\" width=\"1562\" height=\"660\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2025\/11\/image-5.png\" alt=\"\" class=\"wp-image-13536\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-5.png 1562w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-5-300x127.png 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-5-1024x433.png 1024w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-5-768x325.png 768w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2025\/11\/image-5-1536x649.png 1536w\" sizes=\"(max-width: 1562px) 100vw, 1562px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 7: Replace the Old Images in Your Project<\/h2>\n\n\n\n<p>Extract the downloaded ZIP file to access your optimized images.<\/p>\n\n\n\n<p>Now, go back to your local website or project folder and replace the old images with the optimized versions. Since the filenames and folder structure are identical, you can simply overwrite the old files.<\/p>\n\n\n\n<p>If you&#8217;re working with version control (like Git), make sure to commit these changes so the optimized versions are part of your project going forward.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">You&#8217;re Done!<\/h2>\n\n\n\n<p>That&#8217;s it. Your website now has optimized images that will load faster, use less bandwidth and disk space once you deploy to production.<\/p>\n\n\n\n<p>If you eventually move this website to a WordPress environment, remember that you can switch to using the ShortPixel Image Optimizer plugin for automatic, ongoing optimization. But for local and staging work, the Archive Optimizer is your best friend.<\/p>\n\n\n\n<p><strong>Happy optimizing!<\/strong><\/p>\n\n\n\n<div class=\"wp-block-group has-border-color has-palette-color-4-border-color has-palette-color-6-background-color has-background is-vertical is-content-justification-left is-layout-flex wp-container-core-group-is-layout-e21fc307 wp-block-group-is-layout-flex\" style=\"border-width:1px;border-radius:20px;margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60);padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)\">\n<h3 class=\"wp-block-heading\" id=\"cta-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">Try ShortPixel for free!<\/h3>\n\n\n\n<p>Easily resize your pictures and cut down pixels fast using ShortPixel\u2019s free online tool.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/shortpixel.com\/online-image-compression\" target=\"_blank\" rel=\"noreferrer noopener\">Get Started<\/a><\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Working on a website that&#8217;s still on your local machine? Maybe you&#8217;re building on a staging server, or perhaps you&#8217;re working with a non-WordPress website altogether. Either way, you still need optimized images, but you can&#8217;t just install a plugin and call it a day? That&#8217;s where ShortPixel Archive Optimizer comes in. It lets you [&hellip;]<\/p>\n","protected":false},"author":37,"featured_media":13914,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-13530","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-image-optimization"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/13530","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/comments?post=13530"}],"version-history":[{"count":2,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/13530\/revisions"}],"predecessor-version":[{"id":13539,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/13530\/revisions\/13539"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media\/13914"}],"wp:attachment":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media?parent=13530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/categories?post=13530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/tags?post=13530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}