bentopdf/src/pages/compress-pdf-to-200kb.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Primary Meta Tags -->
    <title>Compress PDF to 200KB Free Online | BentoPDF</title>
    <meta name="title" content="Compress PDF to 200KB Free Online | BentoPDF" />
    <meta
      name="description"
      content="Reduce a PDF below 200KB for application portals and email forms. Free, no uploads. Runs entirely in your browser."
    />
    <meta
      name="keywords"
      content="compress pdf to 200kb, compress pdf, reduce pdf size, pdf compressor"
    />
    <meta name="author" content="BentoPDF" />
    <meta
      name="robots"
      content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
    />

    <!-- Canonical URL -->
    <link
      rel="canonical"
      href="https://www.bentopdf.com/compress-pdf-to-200kb"
    />

    <!-- Open Graph / Facebook / LinkedIn -->
    <meta property="og:type" content="website" />
    <meta
      property="og:url"
      content="https://www.bentopdf.com/compress-pdf-to-200kb"
    />
    <meta
      property="og:title"
      content="Compress PDF to 200KB Free Online | BentoPDF"
    />
    <meta
      property="og:description"
      content="Reduce a PDF below 200KB for application portals and email forms. Free, no uploads. Runs entirely in your browser."
    />
    <meta
      property="og:image"
      content="https://www.bentopdf.com/images/og-compress-pdf.png"
    />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:site_name" content="BentoPDF" />

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta
      name="twitter:url"
      content="https://www.bentopdf.com/compress-pdf-to-200kb"
    />
    <meta
      name="twitter:title"
      content="Compress PDF to 200KB Free - BentoPDF"
    />
    <meta
      name="twitter:description"
      content="Reduce a PDF below 200KB for application portals and email forms. Free, no uploads. Runs entirely in your browser."
    />
    <meta
      name="twitter:image"
      content="https://www.bentopdf.com/images/twitter-compress-pdf.png"
    />
    <meta name="twitter:site" content="@BentoPDF" />

    <!-- Mobile Web App -->
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="Compress PDF to 200KB" />

    <link href="/src/css/styles.css" rel="stylesheet" />

    <!-- Web App Manifest -->
    <link rel="manifest" href="/site.webmanifest" />

    <!-- Favicons -->
    <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
    <link
      rel="icon"
      type="image/png"
      sizes="192x192"
      href="/images/favicon-192x192.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="512x512"
      href="/images/favicon-512x512.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="/images/apple-touch-icon.png"
    />
    <link rel="icon" href="/favicon.ico" sizes="32x32" />
  </head>

  <body class="antialiased bg-gray-900">
    {{> navbar }}

    <div
      id="uploader"
      class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900"
    >
      <div
        id="tool-uploader"
        class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700"
      >
        <button
          id="back-to-tools"
          class="flex items-center gap-2 text-indigo-300 hover:text-indigo-400 mb-6 font-semibold"
        >
          <i data-lucide="arrow-left" class="cursor-pointer"></i>
          <span class="cursor-pointer" data-i18n="tools.backToTools">
            Back to Tools
          </span>
        </button>

        <h1 class="text-2xl font-bold text-white mb-2">
          Compress PDF to 200KB
        </h1>
        <p class="text-gray-400 mb-6">
          Reduce your PDF below 200KB without losing readability.
        </p>

        <div
          id="drop-zone"
          class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300"
        >
          <div class="flex flex-col items-center justify-center pt-5 pb-6">
            <i class="ph ph-upload-simple text-4xl mb-3 text-gray-400"></i>
            <p class="mb-2 text-sm text-gray-400">
              <span class="font-semibold" data-i18n="upload.clickToSelect"
                >Click to select files</span
              >
              <span data-i18n="upload.orDragAndDrop">or drag and drop</span>
            </p>
            <p
              class="text-xs text-gray-500"
              data-i18n="upload.hints.oneOrMorePdfs"
            >
              One or more PDF files
            </p>
            <p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">
              Your files never leave your device.
            </p>
          </div>
          <input
            id="file-input"
            type="file"
            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
            accept="application/pdf"
            multiple
          />
        </div>

        <div id="file-controls" class="hidden mt-4 flex gap-3">
          <button
            id="add-more-btn"
            class="btn bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2"
          >
            <i data-lucide="plus"></i>
            <span data-i18n="upload.addMore">Add More Files</span>
          </button>
          <button
            id="clear-files-btn"
            class="btn bg-gray-700 hover:bg-gray-600 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2"
          >
            <i data-lucide="trash-2"></i>
            <span data-i18n="upload.clearAll">Clear All</span>
          </button>
        </div>

        <div id="file-display-area" class="mt-4 space-y-2"></div>

        {{> compress-options targetSize="200" targetUnit="kb" }}
      </div>
    </div>

    <div
      id="loader-modal"
      class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
    >
      <div
        class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl"
      >
        <div class="solid-spinner"></div>
        <p id="loader-text" class="text-white text-lg font-medium">
          Processing...
        </p>
      </div>
    </div>

    <div
      id="alert-modal"
      class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden"
    >
      <div
        class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700"
      >
        <h3
          id="alert-title"
          class="text-xl font-bold text-white mb-2"
          data-i18n="alert.title"
          data-i18n="alert.title"
        >
          Alert
        </h3>
        <p id="alert-message" class="text-gray-300 mb-6"></p>
        <button
          id="alert-ok"
          class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200"
        >
          OK
        </button>
      </div>
    </div>

    <section class="max-w-4xl mx-auto px-4 pt-12">
      <p id="direct-answer" class="text-gray-300 text-lg leading-relaxed">
        To get a PDF under 200KB, add the file below and click Compress PDF. The
        target size is already set to 200 KB, so Hyper Compress finds the best
        quality that fits. The compression happens locally in your browser, with
        no upload, no signup, and no file limit.
      </p>
    </section>
    <section class="max-w-4xl mx-auto px-4 pt-8">
      <h2 class="text-2xl font-bold text-white mb-3">
        When 200KB is the target
      </h2>
      <p class="text-gray-400 leading-relaxed">
        A 200KB ceiling shows up on bank KYC uploads, scholarship and exam
        registration portals, and many national e-government services. It is a
        friendlier target than 100KB: most everyday documents reach it at the
        Medium level with no visible quality loss.
      </p>
    </section>
    <section class="max-w-4xl mx-auto px-4 pt-8">
      <h2 class="text-2xl font-bold text-white mb-3">
        Getting a stubborn file under 200KB
      </h2>
      <p class="text-gray-400 leading-relaxed">
        If a scanned document stays above 200KB, the result tells you how close
        it got. For a scan with no text layer, Rasterize pages under Custom
        Settings can go smaller. Multi-page scans benefit from removing blank or
        irrelevant pages first: every scanned page you delete is often 100KB
        saved before compression even starts.
      </p>
    </section>

    <!-- How It Works Section -->
    <section class="max-w-4xl mx-auto px-4 py-12">
      <h2
        class="text-2xl md:text-3xl font-bold text-white mb-8 text-center"
        data-i18n="howItWorks.title"
      >
        How It Works
      </h2>
      <div class="space-y-6">
        <div class="flex items-start gap-4">
          <div
            class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
          >
            1
          </div>
          <div class="flex-1">
            <h3 class="text-lg font-semibold text-white mb-1">Upload PDFs</h3>
            <p class="text-gray-400">
              Click or drag and drop one or more PDF files
            </p>
          </div>
        </div>
        <div class="flex items-start gap-4">
          <div
            class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
          >
            2
          </div>
          <div class="flex-1">
            <h3 class="text-lg font-semibold text-white mb-1">
              Select Compression Level
            </h3>
            <p class="text-gray-400">
              Pick Low, Medium, High, or Lossless compression
            </p>
          </div>
        </div>
        <div class="flex items-start gap-4">
          <div
            class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
          >
            3
          </div>
          <div class="flex-1">
            <h3 class="text-lg font-semibold text-white mb-1">
              Customize & Compress
            </h3>
            <p class="text-gray-400">
              Optionally set a target size or adjust custom settings such as
              grayscale, then compress
            </p>
          </div>
        </div>
        <div class="flex items-start gap-4">
          <div
            class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
          >
            4
          </div>
          <div class="flex-1">
            <h3 class="text-lg font-semibold text-white mb-1">Download</h3>
            <p class="text-gray-400">
              Save your compressed PDFs - up to 90% smaller
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- Related Tools Section -->
    <section class="max-w-6xl mx-auto px-4 py-12">
      <h2
        class="text-2xl md:text-3xl font-bold text-white mb-6 text-center"
        data-i18n="relatedTools.title"
      >
        Related PDF Tools
      </h2>
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
        <a
          href="merge-pdf.html"
          class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
        >
          <h3 class="text-white font-semibold mb-1">Merge PDF</h3>
          <p class="text-gray-400 text-sm">Free online merge PDF tool</p>
        </a>
        <a
          href="split-pdf.html"
          class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
        >
          <h3 class="text-white font-semibold mb-1">Split PDF</h3>
          <p class="text-gray-400 text-sm">Free online split PDF tool</p>
        </a>
        <a
          href="pdf-to-jpg.html"
          class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
        >
          <h3 class="text-white font-semibold mb-1">PDF to JPG</h3>
          <p class="text-gray-400 text-sm">Free online PDF to JPG tool</p>
        </a>
      </div>
    </section>

    <!-- FAQ Section -->
    <section class="max-w-4xl mx-auto px-4 py-12">
      <h2
        class="text-2xl md:text-3xl font-bold text-white mb-6 text-center"
        data-i18n="faq.sectionTitle"
      >
        Frequently Asked Questions
      </h2>
      <div class="faq-list">
        <details class="faq-d">
          <summary class="faq-d-q">
            What quality should I expect at 200KB?<i
              data-lucide="plus"
              class="faq-d-icon"
            ></i>
          </summary>
          <p class="faq-d-a">
            Typed documents look identical. Scans keep readable text; photos
            inside the PDF will look slightly softer but remain clear on screen.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            The portal wants under 200KB but my file is 10MB. possible?<i
              data-lucide="plus"
              class="faq-d-icon"
            ></i>
          </summary>
          <p class="faq-d-a">
            Usually yes, if most of the weight is images. With the 200 KB target
            set, Hyper Compress keeps lowering image quality and resolution
            until the file fits, and tells you if it can't get there.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Do I need to sign up or pay?<i
              data-lucide="plus"
              class="faq-d-icon"
            ></i>
          </summary>
          <p class="faq-d-a">
            No. Every BentoPDF tool is free with no account, and because the
            work happens in your browser there are no server costs to pass on to
            you.
          </p>
        </details>
      </div>
    </section>
    {{> footer }}
    <script type="module" src="/src/js/utils/lucide-init.ts"></script>
    <script type="module" src="/src/js/utils/full-width.ts"></script>
    <script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
    <script type="module" src="/src/js/logic/compress-pdf-page.ts"></script>
    <script type="module" src="/src/js/mobileMenu.ts"></script>
    <script type="module" src="/src/js/main.ts"></script>

    <!-- JSON-LD Structured Data -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "SoftwareApplication",
        "name": "Compress PDF to 200KB - BentoPDF",
        "applicationCategory": "PDF Compression Tool",
        "operatingSystem": "Any - Web Browser",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        },
        "featureList": [
          "Reduce PDF file size",
          "Batch processing",
          "No file size limits",
          "Hyper Compress engine built in",
          "Compress to a target file size"
        ]
      }
    </script>

    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "HowTo",
        "name": "How to Compress PDF Files Online Free",
        "description": "Learn how to compress PDF files to reduce size while maintaining quality",
        "step": [
          {
            "@type": "HowToStep",
            "position": 1,
            "name": "Upload Your PDF",
            "text": "Click or drag and drop your PDF file into the upload area"
          },
          {
            "@type": "HowToStep",
            "position": 2,
            "name": "Choose Compression Level",
            "text": "Select your desired compression level: Low, Medium, High, or Lossless"
          },
          {
            "@type": "HowToStep",
            "position": 3,
            "name": "Compress and Download",
            "text": "Click 'Compress PDF' and download your optimized file"
          }
        ]
      }
    </script>

    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
          {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.bentopdf.com"
          },
          {
            "@type": "ListItem",
            "position": 2,
            "name": "Compress PDF to 200KB",
            "item": "https://www.bentopdf.com/compress-pdf-to-200kb"
          }
        ]
      }
    </script>
  </body>
</html>