パーツ一覧 >ツール > 【簡単】画像圧縮＆WebP変換ツール

【簡単】画像圧縮＆WebP変換ツール

Webサイトの表示が遅い…原因は「画像」かもしれません

高画質な写真やイラストは魅力的ですが、ファイルサイズが大きすぎるとページの読み込みに時間がかかり、訪問者が離脱する原因になります。特にスマートフォンからのアクセスでは、表示速度は非常に重要です。

この問題を解決する最も効果的な方法の一つが**「画像の最適化」**です。

主な画像ファイル形式

Webでよく使われる画像形式には、それぞれ得意なことと不得意なことがあります。

  • JPEG (ジェイペグ): フルカラーの写真に適しています。非可逆圧縮という方式で、人間の目では分かりにくい部分のデータを少し犠牲にすることで、ファイルサイズを劇的に小さくできます。
  • PNG (ピング): ロゴやイラスト、背景が透明な画像に適しています。可逆圧縮という方式で、画質を一切劣化させずにファイルサイズを圧縮できますが、写真のような複雑な画像ではJPEGよりサイズが大きくなる傾向があります。
  • WebP (ウェッピー): Googleが開発した新しい画像フォーマットです。JPEGのような高画質な写真も、PNGのような背景透明画像も、より小さいファイルサイズで実現できます。現在、ほとんどのモダンブラウザが対応しており、Webサイトの高速化に欠かせない技術となりつつあります。

画像最適化ツール (圧縮 & WebP変換)

「理屈はわかったけど、実際にどうすればいいの？」という方のために、誰でも簡単に画像を最適化できるツールを作成しました。

以下のツールに画像ファイルをドラッグ＆ドロップするだけで、自動的に圧縮・WebP変換が行われ、ダウンロードできます。

このツールのソースコード

このツールは、サーバーへのアップロードを必要とせず、お使いのブラウザ内だけで全ての処理が完結します。以下にそのソースコードを掲載しますので、ご自身のサイトに設置したい場合などにご活用ください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画像最適化ツール (WebP変換 & 圧縮)</title>
    <style>
        /* CSS styles are embedded here for brevity */
    </style>
</head>
<body>

<div class="container">
    <h1>画像最適化ツール</h1>
    <p style="text-align:center;">画像をドラッグ＆ドロップ（またはクリックして選択）するだけで、簡単に圧縮＆WebP変換ができます。<br>処理はすべてブラウザ内で完結するため、画像がサーバーにアップロードされることはありません。</p>

    <div id="dropZone" class="drop-zone">
        <!-- Drop zone content -->
    </div>

    <div class="controls">
        <!-- Controls for quality and width -->
    </div>

    <div id="spinner"></div>

    <div id="results" class="results">
        <!-- Original and Converted image boxes -->
    </div>
</div>

<script>
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('fileInput');
    const qualityRange = document.getElementById('qualityRange');
    const qualityValue = document.getElementById('qualityValue');
    const maxWidthRange = document.getElementById('maxWidthRange');
    const maxWidthValue = document.getElementById('maxWidthValue');
    const spinner = document.getElementById('spinner');
    const results = document.getElementById('results');

    // Event Listeners
    dropZone.addEventListener('click', () => fileInput.click());
    fileInput.addEventListener('change', (e) => handleFiles(e.target.files));
    
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('drag-over');
    });
    dropZone.addEventListener('dragleave', (e) => {
        e.preventDefault();
        dropZone.classList.remove('drag-over');
    });
    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('drag-over');
        handleFiles(e.dataTransfer.files);
    });

    qualityRange.addEventListener('input', () => qualityValue.textContent = qualityRange.value);
    maxWidthRange.addEventListener('input', () => maxWidthValue.textContent = maxWidthRange.value);

    function handleFiles(files) {
        if (files.length === 0) return;
        const file = files[0];
        if (!file.type.startsWith('image/')) {
            alert('画像ファイルを選択してください。');
            return;
        }
        processImage(file);
    }

    function processImage(file) {
        spinner.style.display = 'block';
        results.style.visibility = 'hidden';

        const reader = new FileReader();
        reader.onload = (e) => {
            const img = new Image();
            img.onload = () => {
                const quality = parseFloat(qualityRange.value);
                const maxWidth = parseInt(maxWidthRange.value);

                // Calculate new dimensions
                let width = img.width;
                let height = img.height;
                if (width > maxWidth) {
                    height = (maxWidth / width) * height;
                    width = maxWidth;
                }

                const canvas = document.createElement('canvas');
                canvas.width = width;
                canvas.height = height;
                const ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0, width, height);

                // Convert to WebP
                canvas.toBlob((blob) => {
                    const webpUrl = URL.createObjectURL(blob);
                    
                    // Update UI
                    document.getElementById('originalPreview').src = e.target.result;
                    document.getElementById('originalInfo').textContent = `ファイルサイズ: ${(file.size / 1024).toFixed(2)} KB`;

                    document.getElementById('convertedPreview').src = webpUrl;
                    const reduction = 100 - (blob.size / file.size) * 100;
                    document.getElementById('convertedInfo').textContent = `ファイルサイズ: ${(blob.size / 1024).toFixed(2)} KB (${reduction.toFixed(1)}%削減)`;
                    
                    const downloadButton = document.getElementById('downloadButton');
                    downloadButton.href = webpUrl;
                    const originalName = file.name.substring(0, file.name.lastIndexOf('.'));
                    downloadButton.download = `${originalName}.webp`;

                    spinner.style.display = 'none';
                    results.style.visibility = 'visible';

                }, 'image/webp', quality);
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
</script>

</body>
</html>
免責事項: 本コードを利用したことによって生じたいかなる損害についても、当サイトは一切の責任を負いません。自己責任の上でご利用ください。

導入でお困りですか？

専門家による導入サポート（有料）も承っております。お気軽にご相談ください。

お問い合わせはこちら