compress.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Compressor - Free, Private, No Upload | IrisFiles</title>
  <meta name="description" content="Compress JPG, PNG, and WebP images in your browser. No upload required. Adjust quality with a slider and see file size reduction instantly. Batch support.">
  <meta property="og:title" content="Image Compressor - Free, Private, No Upload | IrisFiles">
  <meta property="og:description" content="Compress JPG, PNG, and WebP images in your browser. No upload required. Adjust quality with a slider and see file size reduction instantly. Batch support.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://irisfiles.com/compress">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="Image Compressor - Free, Private, No Upload | IrisFiles">
  <meta name="twitter:description" content="Compress JPG, PNG, and WebP images in your browser. No upload required. Adjust quality with a slider and see file size reduction instantly. Batch support.">
  <meta property="og:image" content="https://irisfiles.com/img/og-default.png">
  <meta name="twitter:image" content="https://irisfiles.com/img/og-default.png">
  <link rel="canonical" href="https://irisfiles.com/compress">
  <link rel="stylesheet" href="css/style.css?v=ce77e82d">
  <link rel="icon" href="/favicon.png" type="image/png">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <script type="application/ld+json">
  [
    {
      "@context": "https://schema.org",
      "@type": "WebApplication",
      "name": "Image Compressor - IrisFiles",
      "url": "https://irisfiles.com/compress",
      "description": "Compress images in your browser with adjustable quality. No server upload. Private and free.",
      "applicationCategory": "MultimediaApplication",
      "operatingSystem": "Any",
      "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" }
    },
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [
        {
          "@type": "Question",
          "name": "How does image compression work?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "IrisFiles re-encodes your image at a lower quality setting using your browser's Canvas API. For JPG and WebP, this means more aggressive lossy compression that discards visual details the human eye is less sensitive to. PNG files are lossless, so the quality slider has minimal effect on them. Lower quality means smaller files but more visible artifacts for lossy formats."
          }
        },
        {
          "@type": "Question",
          "name": "What quality setting should I use?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "For photos shared online or via email, 75-85% offers a good balance of quality and file size. For archival or print, stay at 92% or above. Below 60%, compression artifacts become noticeable in most photos. The slider lets you preview the tradeoff."
          }
        }
      ]
    }
  ]
  </script>
</head>
<body>
  <header class="header">
    <div class="container container--wide">
      <a href="/" class="logo">Iris<span>Files</span></a>
      <nav class="nav">
        <a href="/about">About</a>
        <a href="https://ko-fi.com/irisfiles" class="support-btn" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 8h1.5a2.5 2.5 0 010 5H17"/><path d="M3 8h14v9a4 4 0 01-4 4H7a4 4 0 01-4-4V8z" fill="currentColor" stroke="none" opacity=".15"/><path d="M3 8h14v9a4 4 0 01-4 4H7a4 4 0 01-4-4V8z"/><path d="M6 1v3M10 1v3M14 1v3" opacity=".6"/></svg> Support this project</a>
      </nav>
    </div>
  </header>

  <main class="container">
    <a href="/" class="back-link"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 12L6 8l4-4"/></svg> Back</a>
<div id="drop-zone" class="drop-zone">
      <h1 class="drop-zone__title">Compress Images privately.</h1>
      <p class="drop-zone__subtitle">Everything runs in your browser. Nothing is uploaded. Ever.</p>
      <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M28 8H12a4 4 0 00-4 4v24a4 4 0 004 4h24a4 4 0 004-4V20L28 8z"/><path d="M28 8v12h12"/><path d="M24 34v-8m-4 4l4-4 4 4"/></svg>
      <p>Drop images here, or click to browse</p>
      <p class="drop-zone__disclaimer">Provided as-is with no warranty. Always keep backups of your original files.</p>
      <input type="file" id="file-input" accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp" multiple>
    </div>

    <div class="controls">
      <div class="quality-control">
        <label for="quality-slider">Quality:</label>
        <input type="range" id="quality-slider" min="10" max="100" step="1" value="80">
        <span id="quality-value" class="quality-value">80%</span>
      </div>
      <div id="quality-note" class="quality-note"></div>
    </div>

    <div id="file-list" class="file-list"></div>

    <div class="batch-actions">
      <button id="download-all" class="btn btn--primary" style="display:none">Download All as ZIP</button>
      <button id="clear-all" class="btn btn--secondary" style="display:none">Clear All</button>
    </div>

    <div class="related-tools">
      <h2>Related Tools</h2>
      <div class="related-tools__links">
        <a href="/heic-to-jpg">HEIC to JPG</a>
        <a href="/png-to-jpg">PNG to JPG</a>
        <a href="/webp-to-jpg">WebP to JPG</a>
      </div>
    </div>

    <section class="faq">
      <h2>Frequently Asked Questions</h2>
      <div class="faq-item">
        <button class="faq-question">How does image compression work?</button>
        <div class="faq-answer">
          <p>IrisFiles re-encodes your image at a lower quality setting using your browser's Canvas API. For JPG and WebP, this means more aggressive lossy compression. Lower quality means smaller files but more visible artifacts. Animated GIF, WebP and APNG files are refused because Canvas re-encoding would keep only the first frame.</p>
        </div>
      </div>
      <div class="faq-item">
        <button class="faq-question">What quality setting should I use?</button>
        <div class="faq-answer">
          <p>For photos shared online or via email, 75-85% offers a good balance. For archival or print, stay at 92% or above. Below 60%, compression artifacts become noticeable in most photos.</p>
        </div>
      </div>
      <div class="faq-item">
        <button class="faq-question">Is this compressor safe to use?</button>
        <div class="faq-answer">
          <p>Yes. Everything happens in your browser. No files are uploaded to any server. IrisFiles has no server component at all, so there is zero risk of your images being stored or shared.</p>
        </div>
      </div>
      <div class="faq-item">
        <button class="faq-question">Can I compress HEIC images?</button>
        <div class="faq-answer">
          <p>The compressor works with JPG, PNG, and WebP. For HEIC files, first convert them to JPG using our <a href="/heic-to-jpg">HEIC to JPG converter</a>, then compress the result here if needed.</p>
        </div>
      </div>
    </section>
  </main>

  <footer class="footer">
    <div class="container">
      <div class="footer-links">
        <a href="/">All Converters</a>
        <a href="/heic-to-jpg">HEIC to JPG</a>
        <a href="/png-to-jpg">PNG to JPG</a>
        <a href="/about">About</a>
      </div>
      <p>IrisFiles. All processing happens in your browser.</p>
    </div>
  </footer>

  <div id="converter-config" data-source-formats="" data-target-mime="" data-target-ext="" data-mode="compress"></div>
  <script src="js/fflate.min.js"></script>
  <script type="module" src="js/boot.js"></script>
</body>
</html>