---
layout: default
title: JPG Converter - Convert JPG to PNG or Animated GIF
description: Convert JPG images to PNG or create animated GIFs from multiple images.
permalink: /playground/tools/jpg-converter/
---

<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>JPG Converter</h1>
        <p class="tool-description">Convert JPG to PNG or create animated GIFs</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">JPG, JPEG files</div>
        </div>
        <input type="file" id="fileInput" class="file-input" accept="image/jpeg,image/jpg" multiple>

        <div id="controlsContainer" style="display: none; margin-top: 2rem;">
            <h3>Conversion Options</h3>

            <div class="input-group">
                <label for="conversionType">Convert to:</label>
                <select id="conversionType" style="padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px;">
                    <option value="png">PNG (Lossless)</option>
                    <option value="gif">Animated GIF</option>
                </select>
            </div>

            <div id="gifOptions" style="display: none; margin-top: 1rem;">
                <div class="input-group">
                    <label for="gifDelay">Frame Delay: <span id="delayValue">500</span>ms</label>
                    <input type="range" id="gifDelay" min="100" max="3000" value="500" step="100"
                           style="width: 100%; max-width: 400px;">
                </div>

                <div class="input-group">
                    <label for="gifQuality">GIF Quality: <span id="gifQualityValue">10</span></label>
                    <input type="range" id="gifQuality" min="1" max="30" value="10"
                           style="width: 100%; max-width: 400px;">
                    <div style="font-size: 0.9rem; color: var(--tool-text-secondary); margin-top: 0.5rem;">
                        Lower = better quality, larger file
                    </div>
                </div>

                <div class="input-group">
                    <label>
                        <input type="checkbox" id="gifLoop" checked>
                        Loop animation
                    </label>
                </div>
            </div>
        </div>

        <div id="fileListContainer" style="display: none; margin-top: 2rem;">
            <h3>Selected Images <span id="fileCount"></span></h3>
            <div id="fileList"></div>
        </div>

        <div class="btn-group" style="margin-top: 2rem;">
            <button id="clearBtn" class="btn btn-secondary" style="display: none;">
                Clear
            </button>
            <button id="convertBtn" class="btn btn-primary" style="display: none;">
                Convert
            </button>
        </div>

        <div id="progressContainer" style="display: none; margin-top: 1.5rem;">
            <div style="font-weight: 600; margin-bottom: 0.5rem;">Converting...</div>
            <div class="progress-bar">
                <div id="progressFill" class="progress-fill"></div>
            </div>
            <div id="progressText" style="margin-top: 0.5rem; font-size: 0.9rem; color: var(--tool-text-secondary);"></div>
        </div>
    </div>

    <div class="feature-list">
        <h3>Features</h3>
        <ul>
            <li>Convert JPG to PNG (lossless)</li>
            <li>Create animated GIFs from multiple JPGs</li>
            <li>Adjustable frame delay</li>
            <li>GIF quality control</li>
            <li>Loop/no-loop options</li>
            <li>Batch PNG conversion</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="https://cdn.jsdelivr.net/npm/gif.js@0.2.0/dist/gif.js"></script>
<script src="tool.js"></script>