🖊 Resize Signature to 20 KB
Supports PNG, JPG, JPEG — Processed entirely in your browser
Drag & Drop your Signature Image Here
or click the button below to browse your device
Accepted formats: PNG, JPG, JPEG | No file size limit
Compression Result
/* ============================================= RESET & BASE STYLES ============================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --primary: #2563eb; --primary-dark: #1e40af; --primary-light: #dbeafe; --accent: #1e40af; --bg: #f8fafc; --bg-white: #ffffff; --text-dark: #0f172a; --text-mid: #334155; --text-light: #64748b; --border: #e2e8f0; --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 16px rgba(37,99,235,.10), 0 2px 6px rgba(0,0,0,.07); --shadow-lg: 0 10px 40px rgba(37,99,235,.13), 0 4px 14px rgba(0,0,0,.08); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --transition: all .28s cubic-bezier(.4,0,.2,1); } html { scroll-behavior: smooth; } body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text-dark); line-height: 1.65; font-size: 16px; } img { max-width: 100%; display: block; } a { text-decoration: none; color: var(--primary); } a:hover { color: var(--primary-dark); } .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; } .section { padding: 72px 0; } .section-alt { background: var(--bg-white); } .section-label { display: inline-block; background: var(--primary-light); color: var(--primary); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 14px; border-radius: 50px; margin-bottom: 14px; } .section-title { font-size: clamp(1.6rem, 4vw, 2.25rem); font-weight: 800; color: var(--text-dark); line-height: 1.25; margin-bottom: 16px; } .section-desc { font-size: 1.05rem; color: var(--text-light); max-width: 620px; } .text-center { text-align: center; } .text-center .section-desc { margin: 0 auto; } /* ============================================= HEADER / NAV ============================================= */ header { background: var(--bg-white); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 999; box-shadow: var(--shadow-sm); } nav { display: flex; align-items: center; justify-content: space-between; height: 64px; } .logo { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 800; color: var(--primary); } .logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border-radius: 9px; display: flex; align-items: center; justify-content: center; } .logo-icon svg { width: 20px; height: 20px; fill: #fff; } .nav-links { display: flex; gap: 28px; list-style: none; } .nav-links a { font-size: .92rem; font-weight: 500; color: var(--text-mid); transition: var(--transition); } .nav-links a:hover { color: var(--primary); } .nav-cta { background: var(--primary); color: #fff !important; padding: 8px 20px; border-radius: 50px; } .nav-cta:hover { background: var(--primary-dark) !important; color: #fff !important; } /* ============================================= HERO SECTION ============================================= */ .hero { background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 40%, #2563eb 100%); color: #fff; padding: 80px 0 88px; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -60%; right: -15%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,255,255,.07) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .hero::after { content: ''; position: absolute; bottom: -40%; left: -10%; width: 450px; height: 450px; background: radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .hero-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 48px; } .hero-text { flex: 1; } .hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: 50px; padding: 5px 14px; font-size: .8rem; font-weight: 600; letter-spacing: .04em; margin-bottom: 20px; backdrop-filter: blur(4px); } .hero-badge span { width: 6px; height: 6px; background: #4ade80; border-radius: 50%; } .hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; line-height: 1.15; margin-bottom: 20px; } .hero h1 em { font-style: normal; background: linear-gradient(90deg, #93c5fd, #bfdbfe); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-desc { font-size: 1.08rem; opacity: .88; max-width: 520px; margin-bottom: 32px; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 700; padding: 13px 28px; border-radius: 50px; border: none; cursor: pointer; transition: var(--transition); white-space: nowrap; } .btn-white { background: #fff; color: var(--primary); } .btn-white:hover { background: #e0e7ff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.15); } .btn-outline-white { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.55); } .btn-outline-white:hover { background: rgba(255,255,255,.12); border-color: #fff; transform: translateY(-2px); } .hero-stats { display: flex; gap: 32px; flex-wrap: wrap; } .stat { text-align: left; } .stat-num { font-size: 1.8rem; font-weight: 900; line-height: 1; } .stat-label { font-size: .8rem; opacity: .75; margin-top: 2px; } .hero-visual { flex: 0 0 360px; display: flex; align-items: center; justify-content: center; } .hero-card { background: rgba(255,255,255,.12); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-lg); padding: 28px; width: 100%; max-width: 340px; } .hero-card-title { font-size: .85rem; font-weight: 600; opacity: .8; margin-bottom: 16px; } .hero-sig-area { background: rgba(255,255,255,.95); border-radius: var(--radius-md); height: 110px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .hero-sig-area svg { opacity: .25; width: 48px; height: 48px; fill: var(--primary); } .hero-card-row { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,.1); border-radius: var(--radius-sm); padding: 10px 14px; font-size: .82rem; margin-bottom: 8px; } .hero-card-row span:last-child { font-weight: 700; color: #4ade80; } .hero-progress-bar { background: rgba(255,255,255,.2); border-radius: 50px; height: 6px; overflow: hidden; margin-top: 4px; } .hero-progress-fill { background: linear-gradient(90deg, #4ade80, #22d3ee); border-radius: 50px; height: 100%; width: 20%; animation: fillPulse 2.5s ease-in-out infinite; } @keyframes fillPulse { 0%,100% { opacity: .8; } 50% { opacity: 1; } } /* ============================================= TOOL SECTION ============================================= */ #tool { scroll-margin-top: 80px; } .tool-card { background: var(--bg-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border); overflow: hidden; } .tool-header { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); padding: 24px 32px; color: #fff; } .tool-header h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: 4px; } .tool-header p { font-size: .9rem; opacity: .8; } .tool-body { padding: 32px; } /* Upload Zone */ .upload-zone { border: 2px dashed var(--border); border-radius: var(--radius-md); padding: 48px 24px; text-align: center; cursor: pointer; transition: var(--transition); background: var(--bg); position: relative; overflow: hidden; } .upload-zone:hover, .upload-zone.drag-over { border-color: var(--primary); background: var(--primary-light); } .upload-zone.drag-over { transform: scale(1.01); } .upload-icon { width: 68px; height: 68px; background: var(--primary-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; transition: var(--transition); } .upload-zone:hover .upload-icon { background: var(--primary); } .upload-icon svg { width: 30px; height: 30px; fill: var(--primary); transition: var(--transition); } .upload-zone:hover .upload-icon svg { fill: #fff; } .upload-title { font-size: 1.05rem; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; } .upload-sub { font-size: .88rem; color: var(--text-light); margin-bottom: 20px; } .btn-upload { background: var(--primary); color: #fff; padding: 11px 26px; border-radius: 50px; border: none; font-size: .92rem; font-weight: 700; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 7px; } .btn-upload:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,99,235,.35); } .upload-hint { font-size: .78rem; color: var(--text-light); margin-top: 12px; } #fileInput { display: none; } /* Settings Row */ .settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; } .setting-group label { display: block; font-size: .82rem; font-weight: 700; color: var(--text-mid); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; } .setting-group select, .setting-group input[type="number"] { width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: .92rem; color: var(--text-dark); background: var(--bg); transition: var(--transition); outline: none; appearance: none; } .setting-group select:focus, .setting-group input[type="number"]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); } .select-wrapper { position: relative; } .select-wrapper::after { content: '▾'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-light); pointer-events: none; font-size: .8rem; } /* Target Size Pill */ .target-info { display: flex; align-items: center; gap: 10px; background: #eff6ff; border: 1.5px solid #bfdbfe; border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 24px; } .target-info svg { width: 18px; height: 18px; fill: var(--primary); flex-shrink: 0; } .target-info span { font-size: .88rem; color: var(--primary-dark); font-weight: 500; } .target-info strong { font-weight: 800; } /* Compress Button */ .btn-compress { width: 100%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; padding: 16px; border-radius: var(--radius-md); border: none; font-size: 1.05rem; font-weight: 800; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 10px; letter-spacing: .01em; margin-bottom: 24px; position: relative; overflow: hidden; } .btn-compress::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.15), transparent); opacity: 0; transition: var(--transition); } .btn-compress:hover:not(:disabled)::before { opacity: 1; } .btn-compress:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(37,99,235,.4); } .btn-compress:disabled { opacity: .55; cursor: not-allowed; transform: none; } .btn-compress svg { width: 20px; height: 20px; fill: #fff; } /* Loading Spinner */ .spinner { width: 20px; height: 20px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; display: none; } @keyframes spin { to { transform: rotate(360deg); } } /* Progress Bar */ .progress-container { display: none; margin-bottom: 24px; } .progress-label { display: flex; justify-content: space-between; font-size: .82rem; font-weight: 600; color: var(--text-mid); margin-bottom: 8px; } .progress-bar { background: var(--border); border-radius: 50px; height: 8px; overflow: hidden; } .progress-fill { background: linear-gradient(90deg, var(--primary), #22d3ee); border-radius: 50px; height: 100%; width: 0%; transition: width .3s ease; } /* Preview Section */ .preview-section { display: none; } .preview-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; } .preview-divider hr { flex: 1; border: none; border-top: 1.5px solid var(--border); } .preview-divider span { font-size: .8rem; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; } .preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; } .preview-box { background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .preview-box-header { padding: 10px 16px; background: var(--bg-white); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .preview-box-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .preview-box-label.original { color: #64748b; } .preview-box-label.compressed { color: var(--primary); } .preview-size-badge { font-size: .76rem; font-weight: 700; padding: 3px 10px; border-radius: 50px; } .badge-original { background: #f1f5f9; color: #64748b; } .badge-compressed { background: var(--primary-light); color: var(--primary); } .badge-success { background: #dcfce7; color: #16a34a; } .preview-img-wrap { padding: 16px; display: flex; align-items: center; justify-content: center; min-height: 140px; background: repeating-conic-gradient(#f1f5f9 0% 25%, #fff 0% 50%) 0 0 / 16px 16px; } .preview-img-wrap img { max-width: 100%; max-height: 200px; object-fit: contain; border-radius: 4px; box-shadow: var(--shadow-sm); } /* Savings Banner */ .savings-banner { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border: 1.5px solid #86efac; border-radius: var(--radius-md); padding: 16px 20px; display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .savings-icon { width: 42px; height: 42px; background: #16a34a; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .savings-icon svg { width: 22px; height: 22px; fill: #fff; } .savings-text h4 { font-size: .95rem; font-weight: 800; color: #15803d; margin-bottom: 2px; } .savings-text p { font-size: .84rem; color: #166534; } /* Download Button */ .btn-download { width: 100%; background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; padding: 15px; border-radius: var(--radius-md); border: none; font-size: 1.02rem; font-weight: 800; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 10px; } .btn-download:hover { background: linear-gradient(135deg, #15803d, #14532d); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(22,163,74,.35); } .btn-download svg { width: 20px; height: 20px; fill: #fff; } .btn-reset { width: 100%; background: var(--bg); color: var(--text-mid); padding: 12px; border-radius: var(--radius-md); border: 1.5px solid var(--border); font-size: .92rem; font-weight: 600; cursor: pointer; transition: var(--transition); margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; } .btn-reset:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .btn-reset svg { width: 16px; height: 16px; fill: currentColor; } /* Alert Message */ .alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: .88rem; font-weight: 500; margin-bottom: 16px; display: none; } .alert-error { background: #fef2f2; border: 1.5px solid #fecaca; color: #dc2626; } .alert-warning { background: #fffbeb; border: 1.5px solid #fde68a; color: #b45309; } /* ============================================= ABOUT SECTION ============================================= */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .about-content h2 { margin-bottom: 16px; } .about-content p { font-size: .97rem; color: var(--text-mid); line-height: 1.75; margin-bottom: 14px; } .about-content p:last-child { margin-bottom: 0; } .about-highlights { display: flex; flex-direction: column; gap: 14px; } .highlight-card { background: var(--bg-white); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; display: flex; align-items: flex-start; gap: 14px; transition: var(--transition); box-shadow: var(--shadow-sm); } .highlight-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateX(4px); } .highlight-icon { width: 42px; height: 42px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .highlight-icon svg { width: 22px; height: 22px; fill: #fff; } .highlight-icon.blue { background: var(--primary); } .highlight-icon.green { background: #16a34a; } .highlight-icon.purple { background: #7c3aed; } .highlight-icon.orange { background: #ea580c; } .highlight-text h4 { font-size: .95rem; font-weight: 700; color: var(--text-dark); margin-bottom: 3px; } .highlight-text p { font-size: .84rem; color: var(--text-light); } /* ============================================= HOW TO USE ============================================= */ .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; margin-top: 48px; } .step-card { background: var(--bg-white); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 28px 22px; text-align: center; transition: var(--transition); box-shadow: var(--shadow-sm); position: relative; } .step-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-4px); } .step-number { width: 48px; height: 48px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; font-weight: 900; color: #fff; margin: 0 auto 16px; } .step-icon { font-size: 1.5rem; margin-bottom: 4px; } .step-card h3 { font-size: 1rem; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; } .step-card p { font-size: .85rem; color: var(--text-light); line-height: 1.55; } /* Connector arrows between steps */ .steps-connector { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: 48px; flex-wrap: wrap; } /* ============================================= FEATURES SECTION ============================================= */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 48px; } .feature-card { background: var(--bg-white); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 32px 24px; text-align: center; transition: var(--transition); box-shadow: var(--shadow-sm); } .feature-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-5px); } .feature-icon-wrap { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; } .feature-icon-wrap svg { width: 28px; height: 28px; fill: #fff; } .fi-blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); } .fi-green { background: linear-gradient(135deg, #22c55e, #15803d); } .fi-purple { background: linear-gradient(135deg, #a855f7, #7e22ce); } .fi-orange { background: linear-gradient(135deg, #f97316, #c2410c); } .feature-card h3 { font-size: 1rem; font-weight: 800; color: var(--text-dark); margin-bottom: 10px; } .feature-card p { font-size: .88rem; color: var(--text-light); line-height: 1.6; } .feature-checkmark { display: inline-flex; align-items: center; gap: 5px; background: #f0fdf4; color: #16a34a; font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 50px; margin-top: 12px; } /* ============================================= USE CASES STRIP ============================================= */ .use-cases-strip { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); padding: 48px 0; color: #fff; } .use-cases-strip h2 { font-size: 1.5rem; font-weight: 800; text-align: center; margin-bottom: 32px; } .use-cases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; } .use-case-item { background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-md); padding: 20px 16px; text-align: center; transition: var(--transition); } .use-case-item:hover { background: rgba(255,255,255,.22); transform: translateY(-3px); } .use-case-emoji { font-size: 2rem; margin-bottom: 8px; } .use-case-item h4 { font-size: .88rem; font-weight: 700; } .use-case-item p { font-size: .78rem; opacity: .75; margin-top: 4px; } /* ============================================= FAQ SECTION ============================================= */ .faq-list { max-width: 780px; margin: 48px auto 0; } .faq-item { background: var(--bg-white); border: 1.5px solid var(--border); border-radius: var(--radius-md); margin-bottom: 12px; overflow: hidden; transition: var(--transition); } .faq-item:hover { border-color: #bfdbfe; } .faq-item.open { border-color: var(--primary); box-shadow: var(--shadow-md); } .faq-question { width: 100%; background: none; border: none; padding: 20px 24px; text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: var(--transition); } .faq-question:hover { background: #f8fafc; } .faq-q-text { font-size: .97rem; font-weight: 700; color: var(--text-dark); } .faq-icon { width: 28px; height: 28px; background: var(--primary-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition); } .faq-icon svg { width: 14px; height: 14px; fill: var(--primary); transition: var(--transition); } .faq-item.open .faq-icon { background: var(--primary); } .faq-item.open .faq-icon svg { fill: #fff; transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .3s ease; } .faq-answer-inner { padding: 0 24px 20px; font-size: .93rem; color: var(--text-mid); line-height: 1.7; border-top: 1px solid var(--border); padding-top: 16px; } .faq-item.open .faq-answer { max-height: 300px; } /* ============================================= FOOTER ============================================= */ footer { background: #0f172a; color: #94a3b8; padding: 48px 0 28px; } .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; padding-bottom: 36px; border-bottom: 1px solid #1e293b; margin-bottom: 28px; } .footer-brand .logo { margin-bottom: 14px; color: #fff; } .footer-brand p { font-size: .88rem; line-height: 1.7; max-width: 300px; } .footer-col h4 { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #e2e8f0; margin-bottom: 14px; } .footer-col ul { list-style: none; } .footer-col ul li { margin-bottom: 10px; } .footer-col ul li a { font-size: .88rem; color: #64748b; transition: var(--transition); } .footer-col ul li a:hover { color: #93c5fd; } .footer-privacy { display: inline-flex; align-items: center; gap: 6px; background: #1e293b; border-radius: 50px; padding: 6px 14px; font-size: .78rem; color: #4ade80; margin-top: 14px; } .footer-privacy svg { width: 12px; height: 12px; fill: #4ade80; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .footer-bottom p { font-size: .84rem; } .footer-links { display: flex; gap: 20px; } .footer-links a { font-size: .84rem; color: #64748b; transition: var(--transition); } .footer-links a:hover { color: #93c5fd; } /* ============================================= RESPONSIVE ============================================= */ @media (max-width: 900px) { .hero-inner { flex-direction: column; } .hero-visual { display: none; } .about-grid { grid-template-columns: 1fr; gap: 36px; } .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .section { padding: 52px 0; } .settings-row { grid-template-columns: 1fr; } .preview-grid { grid-template-columns: 1fr; } .tool-body { padding: 20px; } .tool-header { padding: 18px 20px; } .hero { padding: 56px 0 64px; } .hero h1 { font-size: 1.85rem; } .hero-stats { gap: 20px; } .footer-top { grid-template-columns: 1fr; gap: 28px; } .footer-bottom { flex-direction: column; text-align: center; } .nav-links { display: none; } } /* ============================================= SCROLL ANIMATIONS ============================================= */ .fade-up { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } /* ============================================= MISC UTILITIES ============================================= */ .highlight { color: var(--primary); } .green-text { color: #16a34a; } /* Trust bar */ .trust-bar { background: var(--bg-white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 18px 0; } .trust-items { display: flex; align-items: center; justify-content: center; gap: 36px; flex-wrap: wrap; } .trust-item { display: flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 600; color: var(--text-mid); } .trust-item svg { width: 16px; height: 16px; fill: var(--primary); }
The fastest free tool to compress or resize your signature image to exactly 20 KB — perfect for government forms, exam applications, job portals, and document uploads.
Upload your signature image below and compress it to exactly 20 KB in seconds — no registration required.
Supports PNG, JPG, JPEG — Processed entirely in your browser
Drag & Drop your Signature Image Here
or click the button below to browse your device
Accepted formats: PNG, JPG, JPEG | No file size limit
In today's digital world, almost every government form, competitive exam application, and online job portal requires candidates to upload a signature image with strict file size limits. The most common requirement is a signature resize 20 KB limit — yet most modern smartphones and scanners produce images many times larger.
When your signature image exceeds the allowed file size, online forms reject the upload instantly, causing delays in your application process. This is where a dedicated signature image compressor becomes essential. Whether you are filling out a UPSC form, a bank job application, a university admission form, or a passport application — the ability to compress signature to 20KB quickly is a critical need.
Large signature files can also cause issues such as form submission errors, increased page load times on portals, and inconsistent document formatting. The common file size requirements seen across portals include 10 KB, 20 KB, 30 KB, and 50 KB — with 20 KB being the most frequent standard.
Our resize signature for form upload tool solves all these problems in one click. It uses your browser's built-in Canvas API to intelligently reduce image dimensions and quality until the target size is achieved — all without uploading your signature to any external server. Your data stays completely private and secure on your device at all times.
With support for PNG, JPG, and JPEG formats, this signature size reducer online is compatible with all major form portals and government websites.
All processing happens in your browser. Your signature image is never uploaded to any server.
Advanced iterative compression ensures your signature lands at or very close to 20 KB every time.
Compression completes in under 2 seconds using optimized browser-based canvas rendering.
Works perfectly on smartphones, tablets, and desktops — compress your signature from any device.
Compress your signature image to 20 KB in just five simple steps — no technical knowledge required.
Click the upload button or drag and drop your signature image (PNG, JPG, or JPEG) into the tool area.
The default target is set to 20 KB. You can adjust it to any value between 5 KB and 100 KB as needed.
Press the compress button. The tool automatically reduces file size using intelligent quality and dimension adjustment.
Compare your original and compressed signature side by side. Check that the signature remains clearly readable.
Click the Download button to save your compressed signature. It is now ready to upload on any government or exam portal.
Aadhaar, PAN, Passport applications
UPSC, SSC, IBPS, State exams
NCS, Sarkari Naukri portals
Admission & scholarship forms
Account opening & loan forms
Any portal with 20 KB limit
Everything you need to compress, resize, and download your signature with confidence.
Our intelligent iterative algorithm adjusts JPEG quality and image dimensions to land your output as close to 20 KB as possible — no guesswork.
Compression runs entirely in your browser using the HTML5 Canvas API. No waiting for server uploads — get your result in under 2 seconds.
Your signature never leaves your device. There is zero risk of data leaks, unauthorized access, or server storage of your personal signature image.
Fully responsive design ensures a seamless experience whether you are on an Android phone, iPhone, tablet, or desktop computer.
Everything you need to know about resizing your signature image to 20 KB.