---
layout: default
title: Resize Image - Change Image Dimensions
description: Resize images by width, height, percentage, or aspect ratio. Maintain quality while changing dimensions.
permalink: /playground/tools/resize-image/
---

<link rel="stylesheet" href="../shared/tool-layout.css">

<div class="tool-wrapper">
    <div class="tool-breadcrumb">
        <a href="/playground/tools/">← Back to Tools</a>
    </div>

    <div class="tool-header">
        <h1>Resize Image</h1>
        <p class="tool-description">Change image dimensions while maintaining quality</p>
    </div>

    <div id="alert" class="alert"></div>

    <div class="tool-content">
        <div class="drop-zone" id="dropZone">
            <div class="drop-zone-icon">🖼️</div>
            <div class="drop-zone-text">Click to select images or drag them here</div>
            <div class="drop-zone-hint">Supports JPG, PNG, GIF, WebP</div>
        </div>
        <input type="file" id="fileInput" class="file-input" accept="image/*" multiple>

        <div id="resizeOptions" style="display: none; margin-top: 2rem;">
            <h3>Resize Options</h3>
            <div style="display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1rem;">
                <div>
                    <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Resize Mode:</label>
                    <select id="resizeMode" style="padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px; width: 100%; max-width: 300px;">
                        <option value="percentage">By Percentage</option>
                        <option value="width">By Width</option>
                        <option value="height">By Height</option>
                        <option value="exact">Exact Dimensions</option>
                    </select>
                </div>

                <div id="percentageInput">
                    <label for="percentage" style="display: block; margin-bottom: 0.5rem;">Scale to (%):</label>
                    <input type="number" id="percentage" value="50" min="1" max="500"
                           style="padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px; width: 100px;">
                    <span style="margin-left: 0.5rem;">%</span>
                </div>

                <div id="widthInput" style="display: none;">
                    <label for="width" style="display: block; margin-bottom: 0.5rem;">Width (pixels):</label>
                    <input type="number" id="width" value="800" min="1"
                           style="padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px; width: 150px;">
                    <label style="display: block; margin-top: 0.5rem;">
                        <input type="checkbox" id="maintainAspectWidth" checked>
                        Maintain aspect ratio
                    </label>
                </div>

                <div id="heightInput" style="display: none;">
                    <label for="height" style="display: block; margin-bottom: 0.5rem;">Height (pixels):</label>
                    <input type="number" id="height" value="600" min="1"
                           style="padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px; width: 150px;">
                    <label style="display: block; margin-top: 0.5rem;">
                        <input type="checkbox" id="maintainAspectHeight" checked>
                        Maintain aspect ratio
                    </label>
                </div>

                <div id="exactInput" style="display: none;">
                    <label for="exactWidth" style="display: block; margin-bottom: 0.5rem;">Width (pixels):</label>
                    <input type="number" id="exactWidth" value="800" min="1"
                           style="padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px; width: 150px; margin-bottom: 1rem;">
                    <label for="exactHeight" style="display: block; margin-bottom: 0.5rem;">Height (pixels):</label>
                    <input type="number" id="exactHeight" value="600" min="1"
                           style="padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px; width: 150px;">
                </div>

                <div>
                    <label for="outputFormat" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Output Format:</label>
                    <select id="outputFormat" style="padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px; width: 150px;">
                        <option value="original">Same as original</option>
                        <option value="jpeg">JPEG</option>
                        <option value="png">PNG</option>
                        <option value="webp">WebP</option>
                    </select>
                </div>
            </div>
        </div>

        <div id="fileList" class="file-list" style="display: none;">
            <h3>Images <span id="imageCount" style="opacity: 0.6; font-weight: normal; font-size: 0.9rem;"></span></h3>
            <div id="fileItems"></div>
        </div>

        <div class="progress-container" id="progressContainer">
            <div class="progress-bar">
                <div class="progress-fill" id="progressFill"></div>
            </div>
            <div class="progress-text" id="progressText">Processing...</div>
        </div>

        <div class="btn-group">
            <button id="clearBtn" class="btn btn-secondary" style="display: none;">
                Clear All
            </button>
            <button id="resizeBtn" class="btn btn-primary" style="display: none;" disabled>
                Resize Images
            </button>
        </div>
    </div>

    <div class="feature-list">
        <h3>Features</h3>
        <ul>
            <li>Resize by percentage, width, height, or exact dimensions</li>
            <li>Maintain aspect ratio automatically</li>
            <li>Batch resize multiple images</li>
            <li>Choose output format (JPEG, PNG, WebP)</li>
            <li>High-quality resizing algorithm</li>
            <li>100% client-side processing</li>
            <li>No file uploads - complete privacy</li>
            <li>Works offline</li>
        </ul>
    </div>
</div>

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