image-squash-pro/about.html at main · TutorialsAndroid/image-squash-pro · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!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>
      About – ImageSquash Pro | Private Client‑Side Image Compressor
    </title>
    <meta
      name="title"
      content="About – ImageSquash Pro | Private Client‑Side Image Compressor"
    />
    <meta
      name="description"
      content="Discover the story behind ImageSquash Pro – a free, open‑source bulk image compressor that runs offline in your browser. No server, no tracking, maximum privacy."
    />
    <meta
      name="keywords"
      content="about image squasher, private image compressor, client-side compression, open source image tool, browser image processor, privacy first, no upload compressor, HTML5 canvas compressor, image squash pro about, offline image tool"
    />
    <meta name="author" content="ImageSquash Pro" />
    <meta name="robots" content="index, follow" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta
      property="og:url"
      content="https://tutorialsandroid.github.io/image-squash-pro/about.html"
    />
    <meta
      property="og:title"
      content="About ImageSquash Pro – 100% Private Image Compression"
    />
    <meta
      property="og:description"
      content="Why we built a tool that never uploads your files. Learn about the privacy‑first, browser‑based bulk image compressor."
    />
    <meta
      property="og:image"
      content="https://raw.githubusercontent.com/TutorialsAndroid/image-squash-pro/refs/heads/main/assets/banner.png"
    />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta
      name="twitter:url"
      content="https://tutorialsandroid.github.io/image-squash-pro/about.html"
    />
    <meta name="twitter:title" content="About ImageSquash Pro" />
    <meta
      name="twitter:description"
      content="100% offline, 0% server. Discover the open‑source image compressor that respects your privacy."
    />
    <meta
      name="twitter:image"
      content="https://raw.githubusercontent.com/TutorialsAndroid/image-squash-pro/refs/heads/main/assets/banner.png"
    />

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="favicon/favicon.ico" />

    <!-- STYLES -->
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="css/about.css" />
  </head>
  <body>
    <!-- HEADER -->
    <div id="header"></div>

    <main class="about-wrapper">
      <div class="about-hero">
        <h1>Privacy‑first image compression, built for professionals</h1>
        <p class="subtitle">
          ImageSquash Pro was born from the frustration of trusting sensitive
          assets to random online compressors. We fixed that — permanently.
        </p>
      </div>

      <div class="about-section">
        <h2><span class="section-icon">🔒</span> Why ImageSquash exists</h2>
        <p>
          Most image compressors upload your files to a server. That might be
          fine for cat photos, but not for design mockups, client deliverables,
          medical imagery, or confidential documents.
          <strong>ImageSquash is different.</strong> Every single pixel stays on
          your own machine — the code runs entirely in your browser using the
          HTML5 Canvas API. No server, no upload, no tracking.
        </p>
        <p>
          We believe you shouldn’t have to choose between performance and
          privacy. Now you don’t have to.
        </p>
      </div>

      <div class="about-section">
        <h2><span class="section-icon">⚡</span> What it does</h2>
        <div class="feature-grid">
          <div class="feature-item">
            <div class="feature-icon">🗜️</div>
            <h3>Extreme compression</h3>
            <p>
              Regularly shrinks 80 MB images to ~200 KB without noticeable
              quality loss. Smart resizing + modern codecs (WebP, JPEG, PNG).
            </p>
          </div>
          <div class="feature-item">
            <div class="feature-icon">📦</div>
            <h3>Batch processing</h3>
            <p>
              Drop dozens of files at once. Compress them all with a single
              click. Download as individual images or a single ZIP.
            </p>
          </div>
          <div class="feature-item">
            <div class="feature-icon">🎛️</div>
            <h3>Full control</h3>
            <p>
              Five presets (Maximum → Low) plus full custom mode: adjust
              quality, maximum dimensions, and output format.
            </p>
          </div>
          <div class="feature-item">
            <div class="feature-icon">💻</div>
            <h3>Offline capable</h3>
            <p>
              Once loaded, turn off your WiFi — ImageSquash works 100% offline.
              No network requests, ever.
            </p>
          </div>
        </div>
      </div>

      <div class="about-section">
        <h2><span class="section-icon">🔐</span> Your privacy guarantee</h2>
        <p>
          ImageSquash never sends your files anywhere. The entire tool is a
          single HTML file (plus a CDN for ZIP creation). You can inspect every
          line of code — it’s open source and hosted on GitHub Pages.
        </p>
        <p>
          <strong>Zero analytics, zero tracking, zero logs.</strong> We have no
          servers to collect your data, and no interest in doing so.
        </p>
      </div>

      <div class="about-section">
        <h2><span class="section-icon">⚙️</span> Tech stack</h2>
        <ul class="tech-list">
          <li>HTML5 Canvas API</li>
          <li>Vanilla JavaScript (ES6+)</li>
          <li>JSZip</li>
          <li>CSS3 (Grid, Flexbox, custom properties)</li>
          <li>GitHub Pages</li>
        </ul>
      </div>

      <div class="about-section">
        <h2><span class="section-icon">🤝</span> Open source & community</h2>
        <p>
          ImageSquash Pro is MIT licensed and welcomes contributions. Found a
          bug, have an idea? Open an issue or PR on our
          <a
            href="https://github.com/TutorialsAndroid/image-squash-pro"
            target="_blank"
            rel="noopener noreferrer"
            style="color: var(--primary); font-weight: 600"
            >GitHub repository</a
          >.
        </p>
      </div>

      <a href="index.html" class="back-link"> ← Back to Compressor </a>
    </main>

    <!-- Same footer -->
    <div id="footer"></div>

    <!-- Load header component -->
    <script>
      fetch("components/header.html")
        .then((response) => response.text())
        .then((data) => {
          document.getElementById("header").innerHTML = data;

          // Set active nav link based on current URL hash or path
          const currentPage = window.location.pathname.split("/").pop(); // "index.html" or "about.html"
          const links = document.querySelectorAll(".nav-link");
          links.forEach((link) => {
            const href = link.getAttribute("href").split("/").pop();
            if (href === currentPage) {
              link.classList.add("active");
            } else {
              link.classList.remove("active");
            }
          });
        });
    </script>

    <!-- Load footer component -->
    <script>
      fetch("components/footer.html")
        .then((response) => response.text())
        .then((data) => {
          document.getElementById("footer").innerHTML = data;
        });
    </script>

    <!-- Scripts -->
    <script src="js/fab.js"></script>
    <script src="js/analytics.js"></script>
  </body>
</html>