Script Tool Compress Gambar - Dalam era digital saat ini, optimisasi gambar merupakan langkah penting untuk meningkatkan kecepatan dan efisiensi situs web Anda. Salah satu cara yang efektif untuk melakukan ini adalah dengan menggunakan skrip sederhana untuk mengompresi gambar secara otomatis. Artikel ini akan membahas bagaimana Anda dapat membuat dan menggunakan skrip tersebut untuk meningkatkan performa situs web Anda.

Mengapa Kompresi Gambar Penting?

Sebelum kita melangkah lebih jauh, penting untuk memahami mengapa kompresi gambar diperlukan. Gambar yang besar dapat memperlambat waktu muat halaman web, mengurangi pengalaman pengguna, dan bahkan mempengaruhi peringkat SEO situs Anda. Dengan mengompresi gambar, Anda dapat mengurangi ukuran file tanpa mengorbankan kualitas gambar, sehingga meningkatkan kecepatan muat halaman dan efisiensi bandwidth.

Script ini bisa di pasang di web manapun asal bisa input html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Compressor</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        footer {
            background-color: #f8f9fa;
            padding: 20px 0;
            border-top: 1px solid #e9ecef;
        }
        footer p {
            margin: 0;
        }
        footer a {
            color: #007bff;
            text-decoration: none;
        }
        footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center">Image Compressor</h1>
        <form id="upload-form" class="mt-4">
            <div class="form-group">
                <label for="files">Choose images to compress</label>
                <input type="file" class="form-control" id="files" multiple required>
            </div>
            <button type="submit" class="btn btn-primary">Compress and Download All</button>
        </form>
        <div id="result" class="mt-4"></div>
    </div>

    <footer class="text-center mt-5 py-3">
        <p>by <strong>Andi - Asli Lamongan</strong>. <a href="https://disatu.web.id" target="_blank">Disatu.web.id</a></p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/browser-image-compression@1.0.16/dist/browser-image-compression.js"></script>
    <script>
        // Author: Andi Setiawan - Asli Lamongan. Website: Disatu.web.id

        document.getElementById('upload-form').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const fileInput = document.getElementById('files');
            const files = fileInput.files;
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = '';  // Clear previous results

            if (files.length > 0) {
                const options = {
                    maxSizeMB: 0.5,  // Reduce maxSizeMB to achieve smaller file sizes
                    maxWidthOrHeight: 1920,
                    useWebWorker: true
                };

                for (let i = 0; i < files.length; i++) {
                    const file = files[i];

                    try {
                        const compressedFile = await imageCompression(file, options);

                        const downloadLink = document.createElement('a');
                        const fileName = file.name.split('.').slice(0, -1).join('.') + ' by disatu.web.id.' + file.name.split('.').pop();
                        downloadLink.href = URL.createObjectURL(compressedFile);
                        downloadLink.download = fileName;
                        downloadLink.textContent = `Download ${fileName}`;
                        downloadLink.className = 'btn btn-success mt-3 mr-2';

                        resultDiv.appendChild(downloadLink);

                    } catch (error) {
                        console.error(error);
                    }
                }
            }
        });
    </script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Silahkan Di Kembangkan Lagi agar bagus dan sempurna.

Demo Sedikit Modifikasi Script

Script Tool Compress Gambar

Mengapa Kompresi Gambar Penting?

Tag: