-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
331 lines (275 loc) · 15.9 KB
/
index.html
File metadata and controls
331 lines (275 loc) · 15.9 KB
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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
<!DOCTYPE html>
<html lang="en-IN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#16a34a">
<meta name="robots" content="index, follow, max-image-preview:large">
<title>Resize Image to 10kb, 20kb, 50kb | Photo ka Size Kam Kaise Kare (Online)</title>
<meta name="description" content="Photo ko 10 se 20 kb kaise banaye? Use this Free Tool to resize image to 20kb, 50kb for SSC, UPSC. Mobile se photo size kam karein instantly.">
<meta name="keywords" content="photo ko 10 se 20 kb kaise banaye, resize image to 20kb, image resizer 50kb, ssc photo resizer, photo size reducer 10kb to 20kb, how to reduce photo size in mobile, jpg size reducer">
<meta name="author" content="OrbitWebTools">
<link rel="canonical" href="https://orbitwebtools.github.io/image-resizer-20kb/" />
<meta property="og:type" content="website">
<meta property="og:title" content="Photo Size Kam Karein (20kb - 50kb) - Free Tool">
<meta property="og:description" content="Resize photos for SSC & UPSC to 20kb or 50kb instantly on mobile.">
<meta property="og:image" content="https://orbitwebtools.github.io/image-resizer-20kb/icon-512.png">
<link rel="manifest" href="manifest.json">
<link rel="icon" href="icon-192.png" type="image/png">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Image Resizer 20kb to 50kb",
"operatingSystem": "Web Browser, Android",
"applicationCategory": "PhotoEditor",
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "INR" },
"aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.8", "ratingCount": "1250" },
"description": "Tool to resize jpg images to 10kb, 20kb, 50kb for SSC and Govt exams."
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "Photo ko 10 se 20 kb kaise banaye?",
"acceptedAnswer": { "@type": "Answer", "text": "Upload your photo here, select '20' in target size, and click Compress. The tool will automatically reduce size to under 20kb." }
}, {
"@type": "Question",
"name": "Resize image 20kb to 50kb online free?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes, simply enter '50' in the size box to get an image between 20kb and 50kb for SSC forms." }
}]
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
:root { --primary: #16a34a; --primary-dark: #15803d; --bg: #f0fdf4; --surface: #ffffff; --text: #0f172a; --border: #bbf7d0; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; }
.container { max-width: 700px; margin: 0 auto; padding: 20px; flex: 1; width: 100%; }
/* HEADER */
header { text-align: center; margin: 1rem 0 1.5rem; }
.logo-text { font-size: 1.8rem; font-weight: 800; color: #14532d; letter-spacing: -0.5px; }
.sub-text { color: #4d7c0f; font-size: 0.95rem; margin-top: 5px; font-weight: 500; }
/* MAIN TOOL CARD */
.card { background: var(--surface); border-radius: 20px; padding: 25px; box-shadow: 0 10px 30px -10px rgba(22, 163, 74, 0.2); border: 2px solid #fff; }
.upload-box {
border: 2px dashed #86efac; background: #f0fdf4; border-radius: 16px;
padding: 2rem; text-align: center; cursor: pointer; transition: 0.3s;
position: relative; overflow: hidden;
}
.upload-box:hover { border-color: var(--primary); background: #dcfce7; transform: scale(1.01); }
.upload-icon { font-size: 3rem; margin-bottom: 10px; display: block; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.1)); }
/* INPUTS & PRESETS */
.controls { margin-top: 1.5rem; }
.label { font-weight: 700; color: #1e293b; font-size: 0.9rem; margin-bottom: 8px; display: block; }
.input-wrapper { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.kb-input {
flex: 1; padding: 15px; border: 2px solid #e2e8f0; border-radius: 10px;
font-size: 1.2rem; font-weight: 700; text-align: center; color: var(--primary);
}
.kb-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.chip {
background: #f1f5f9; border: 1px solid #cbd5e1; padding: 8px 16px;
border-radius: 50px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
color: #475569; transition: 0.2s;
}
.chip.active { background: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 4px 10px rgba(22, 163, 74, 0.3); }
/* ACTION BUTTON */
.btn-main {
width: 100%; background: linear-gradient(135deg, #16a34a, #15803d); color: white;
padding: 18px; border: none; border-radius: 12px; font-size: 1.1rem;
font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px -5px rgba(22, 163, 74, 0.4);
transition: transform 0.1s; display: flex; justify-content: center; align-items: center; gap: 10px;
}
.btn-main:active { transform: scale(0.98); }
.btn-main:disabled { opacity: 0.7; cursor: wait; filter: grayscale(1); }
/* RESULT SECTION */
#resultArea { display: none; margin-top: 25px; background: #ecfdf5; border-radius: 16px; padding: 20px; border: 1px solid #86efac; animation: slideUp 0.4s ease; }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.stats { display: flex; justify-content: space-between; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed #86efac; }
.stat-box small { display: block; color: #64748b; font-size: 0.8rem; font-weight: 600; }
.stat-box span { font-size: 1.2rem; font-weight: 800; }
.dl-btn {
display: block; text-align: center; background: #0f172a; color: white;
text-decoration: none; padding: 15px; border-radius: 10px; font-weight: 700;
}
/* SEO CONTENT */
.seo-content { margin-top: 3rem; background: white; padding: 25px; border-radius: 16px; border: 1px solid #e2e8f0; }
h2 { font-size: 1.3rem; margin-bottom: 1rem; color: #1e293b; }
h3 { font-size: 1.1rem; margin-top: 1.5rem; color: #334155; }
p, li { font-size: 0.95rem; color: #475569; margin-bottom: 10px; }
.highlight-box { background: #fffbeb; border-left: 4px solid #f59e0b; padding: 15px; margin: 20px 0; font-size: 0.9rem; border-radius: 0 8px 8px 0; }
footer { text-align: center; margin-top: 3rem; color: #94a3b8; font-size: 0.8rem; padding-bottom: 2rem; }
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo-text">⚡ Image Resizer 20kb</div>
<p class="sub-text">Photo ka Size Kam Karein (SSC & UPSC Special)</p>
</header>
<div class="card">
<div class="upload-box" id="dropArea">
<span class="upload-icon">🖼️</span>
<strong>Tap to Upload Photo</strong>
<p style="font-size:0.8rem; color:#64748b; margin-top:5px;">Supports JPG, JPEG, PNG</p>
<input type="file" id="fileInput" accept="image/*" style="display:none">
</div>
<div class="controls">
<label class="label">Target Size (KB mein):</label>
<div class="chips">
<div class="chip active" onclick="setPreset(20)">20 KB (SSC)</div>
<div class="chip" onclick="setPreset(50)">50 KB (SSC/UPSC)</div>
<div class="chip" onclick="setPreset(10)">10 KB (Sign)</div>
</div>
<div class="input-wrapper">
<input type="number" id="targetKB" class="kb-input" value="20">
<span style="font-weight:700; color:#64748b">KB (Max)</span>
</div>
</div>
<button id="compressBtn" class="btn-main">COMPRESS NOW 🚀</button>
<div id="resultArea">
<div class="stats">
<div class="stat-box">
<small>Original Size</small>
<span id="origSize" style="color:#ef4444">-</span>
</div>
<div class="stat-box" style="text-align:right">
<small>New Size</small>
<span id="newSize" style="color:#16a34a">-</span>
</div>
</div>
<div style="text-align:center; margin-bottom:15px; font-size:0.9rem; color:#059669; font-weight:600;">
✅ Compressed Successfully!
</div>
<a id="dlLink" href="#" class="dl-btn" download>Download Image ⬇️</a>
</div>
</div>
<div class="seo-content">
<h2>Photo ko 10 se 20 kb kaise banaye? (Mobile Se)</h2>
<p>Agar aap SSC CGL, MTS ya UPSC ka form bhar rahe hain, toh aapko photo ka size <strong>20kb se 50kb</strong> ke beech rakhna hota hai. Ye tool aapki madad karega:</p>
<div class="highlight-box">
<strong>💡 Quick Guide:</strong>
<ol style="margin-left:20px; margin-top:5px;">
<li>Upar 'Upload Photo' par click karein.</li>
<li>Niche size select karein (Jaise <strong>20 KB</strong>).</li>
<li>'Compress Now' button dabayein.</li>
<li>Bus ho gaya! Ab photo download kar lein.</li>
</ol>
</div>
<h3>Why use this tool?</h3>
<ul>
<li>⚡ <strong>Exact Size:</strong> Get photos exactly under 20kb, 50kb or 10kb.</li>
<li>🔒 <strong>100% Secure:</strong> Photos are edited in your browser, not uploaded to any server.</li>
<li>📱 <strong>Mobile Friendly:</strong> Works perfectly on Chrome mobile browser.</li>
</ul>
</div>
<footer>
<p>© 2025 OrbitWebTools • Privacy Policy</p>
</footer>
</div>
<script>
const fileInput = document.getElementById('fileInput');
const dropArea = document.getElementById('dropArea');
const compressBtn = document.getElementById('compressBtn');
const targetKBInput = document.getElementById('targetKB');
const resultArea = document.getElementById('resultArea');
const dlLink = document.getElementById('dlLink');
const origSizeSpan = document.getElementById('origSize');
const newSizeSpan = document.getElementById('newSize');
// Ad Config (Kept from your original code)
const AD_URL = "https://www.effectivegatecpm.com/mya99wcxc?key=64d9a20b4180ef34ece4742665c53be0";
window.setPreset = (val) => {
targetKBInput.value = val;
document.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
event.target.classList.add('active');
};
dropArea.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', (e) => {
if(e.target.files.length > 0) {
const file = e.target.files[0];
dropArea.innerHTML = `
<div style="font-size:2rem; margin-bottom:5px">✅</div>
<strong>${file.name}</strong><br>
<span style="font-size:0.8rem; color:#64748b">Size: ${(file.size/1024).toFixed(2)} KB</span>
`;
dropArea.style.borderColor = "#16a34a";
dropArea.style.background = "#dcfce7";
resultArea.style.display = 'none';
}
});
compressBtn.addEventListener('click', () => {
const file = fileInput.files[0];
if(!file) return alert("Please upload a photo first! (Photo pehle upload karein)");
let targetVal = parseInt(targetKBInput.value);
if(!targetVal || targetVal <= 0) targetVal = 20;
const targetSize = targetVal * 1024;
// Trigger Ad
if(AD_URL) window.open(AD_URL, '_blank');
compressBtn.innerHTML = "Working... ⏳";
compressBtn.disabled = true;
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (event) => {
const img = new Image();
img.src = event.target.result;
img.onload = () => {
const canvas = document.createElement('canvas');
let width = img.width;
let height = img.height;
// Maintain Aspect Ratio but limit max dimension
const MAX_WIDTH = 1800;
if(width > MAX_WIDTH) {
height = Math.round((height * MAX_WIDTH) / width);
width = MAX_WIDTH;
}
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
// Compression Algorithm
let min = 0;
let max = 1;
let quality = 0.8;
let dataUrl = "";
let attempts = 0;
const compressLoop = () => {
dataUrl = canvas.toDataURL('image/jpeg', quality);
const head = 'data:image/jpeg;base64,';
const size = Math.round((dataUrl.length - head.length) * 3 / 4);
if ((size <= targetSize && size > targetSize * 0.75) || attempts > 15 || (quality <= 0.05)) {
showResult(dataUrl, file.size, size);
} else {
if (size > targetSize) {
max = quality;
} else {
min = quality;
}
quality = (min + max) / 2;
attempts++;
requestAnimationFrame(compressLoop);
}
};
compressLoop();
};
};
});
function showResult(url, oldS, newS) {
origSizeSpan.innerText = (oldS/1024).toFixed(2) + " KB";
newSizeSpan.innerText = (newS/1024).toFixed(2) + " KB";
const cleanName = `ssc_resized_${targetKBInput.value}kb.jpg`;
dlLink.download = cleanName;
dlLink.href = url;
resultArea.style.display = 'block';
resultArea.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
compressBtn.innerHTML = "COMPRESS AGAIN 🚀";
compressBtn.disabled = false;
}
</script>
</body>
</html>