---
layout: default
title: Upscale Image - Free Image Upscaler Tool
description: Upscale images 2x or 4x with enhanced sharpening. Increase resolution while maintaining quality. Free and private.
---

<link rel="stylesheet" href="../shared/tool-layout.css">
<style>
.settings-panel {
    background: var(--card-bg, #f8f9fa);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.settings-panel h2 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    color: var(--text-secondary, #6c757d);
}

.scale-selector {
    margin: 20px 0;
}

.scale-selector label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-primary, #212529);
}

.scale-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.scale-btn {
    flex: 1;
    padding: 14px 20px;
    font-size: 18px;
    font-weight: 700;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    background: white;
    color: #212529;
    cursor: pointer;
    transition: all 0.2s;
}

.scale-btn:hover {
    border-color: #ff6b35;
}

.scale-btn.active {
    background: #ff6b35;
    color: white;
    border-color: #ff6b35;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin-bottom: 20px;
}

.checkbox-group input[type="checkbox"] {
    width: 24px;
    height: 24px;
    cursor: pointer;
    accent-color: #ff6b35;
}

.checkbox-group label {
    font-weight: 500;
    cursor: pointer;
    margin: 0;
    user-select: none;
}

.output-info {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 20px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
}

.preview-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

@media (max-width: 768px) {
    .preview-container {
        grid-template-columns: 1fr;
    }
}

.preview-box {
    text-align: center;
}

.preview-box h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-secondary, #6c757d);
}

.preview-canvas {
    max-width: 100%;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    background: #f8f9fa;
}

.preview-dimensions {
    font-size: 12px;
    color: #6c757d;
    margin-top: 5px;
}

@media (max-width: 768px) {
    .preview-container {
        grid-template-columns: 1fr;
    }
}
</style>

<div class="tool-container">
    <div class="tool-header">
        <h1>Upscale Image</h1>
        <p class="tool-description">Increase image resolution with enhanced sharpening. Perfect for enlarging photos while maintaining quality.</p>
    </div>

    <div id="uploadSection" class="upload-section">
        <div class="drop-zone" id="dropZone">
            <svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"></path>
            </svg>
            <h2>Drop image here</h2>
            <p>or click to browse</p>
            <input type="file" id="fileInput" accept="image/*" style="display: none;">
            <button class="btn-primary" onclick="document.getElementById('fileInput').click()">
                Select Image
            </button>
        </div>
    </div>

    <div id="settingsSection" class="settings-section" style="display: none;">
        <div class="settings-panel">
            <h2>SETTINGS</h2>

            <div class="scale-selector">
                <label>SCALE FACTOR</label>
                <div class="scale-buttons">
                    <button class="scale-btn active" data-scale="2">2x</button>
                    <button class="scale-btn" data-scale="4">4x</button>
                </div>
            </div>

            <div class="checkbox-group">
                <input type="checkbox" id="hdMode" checked>
                <label for="hdMode">HD Mode (Enhanced Sharpening)</label>
            </div>

            <div class="output-info" id="outputInfo">
                Output: <span id="outputDimensions">-</span>
            </div>

            <button id="processBtn" class="btn-primary" style="width: 100%; padding: 16px; font-size: 16px;">
                PROCESS NOW
            </button>
            <p style="text-align: center; font-size: 12px; color: #6c757d; margin-top: 10px;">
                Processed locally in your browser
            </p>
        </div>

        <div id="previewSection" style="display: none;">
            <div class="preview-container">
                <div class="preview-box">
                    <h3>Before</h3>
                    <canvas id="beforeCanvas" class="preview-canvas"></canvas>
                    <div class="preview-dimensions" id="beforeDimensions"></div>
                </div>
                <div class="preview-box">
                    <h3>After</h3>
                    <canvas id="afterCanvas" class="preview-canvas"></canvas>
                    <div class="preview-dimensions" id="afterDimensions"></div>
                </div>
            </div>

            <div class="button-group">
                <button id="downloadBtn" class="btn-primary">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"></path>
                    </svg>
                    Download Image
                </button>
                <button onclick="location.reload()" class="btn-secondary">Upscale Another</button>
            </div>
        </div>
    </div>

    <div class="info-section">
        <div class="info-card">
            <h3>How It Works</h3>
            <ol>
                <li>Upload your image</li>
                <li>Choose scale factor (2x or 4x)</li>
                <li>Enable HD Mode for enhanced sharpening</li>
                <li>Download your upscaled image</li>
            </ol>
        </div>

        <div class="info-card">
            <h3>Best Results</h3>
            <ul>
                <li>Works with all image formats</li>
                <li>HD Mode improves edge definition</li>
                <li>2x recommended for photos</li>
                <li>4x good for graphics and illustrations</li>
            </ul>
        </div>

        <div class="info-card">
            <h3>Privacy & Security</h3>
            <ul>
                <li>100% client-side processing</li>
                <li>Images never uploaded to servers</li>
                <li>No data collection or tracking</li>
                <li>Works offline after first load</li>
            </ul>
        </div>

        <div class="info-card warning">
            <h3>⚠️ Note</h3>
            <p>This tool uses browser-native upscaling with optional sharpening. While it produces good results for most images, it cannot add detail that wasn't in the original image. For best quality, start with high-resolution source images.</p>
        </div>
    </div>
</div>

<script src="../shared/tool-utils.js"></script>
<script src="tool.js"></script>