画像のwebp化、ウェブサイトの必須要素なのはわかってるけれど、ちょっとめんどくさいですよね。
もちろんfigmaとかPhotoshopでもwebpでの出力はできる。もちろんPowerShellなどのシェルスクリプトでも出来る。
だけど毎回開かないといけない。これはこれでめんどくさい。

もちろんオンラインツールとかもあるけれど、セキュリティを考えるとどうも気が引ける。

そこで作りました。

ウェブサーバーとか不要です。ブラウザで開くだけで安心。

WEBP一括変換ツールダウンロード（無料）

もちろん広告とか何もなし。純粋なhtmlとjsですので、ご自由にご利用ください。

WEBP一括変換ツールダウンロード
クオリティ変更可能WEBP一括変換ツールダウンロード

使い方

  1. ダウンロードしたファイルを、ブラウザで開く
  2. webpに変換したい画像をまとめてドラッグ・ドロップ
  3. zip形式でダウンロードされます

ブラウザでの開き方

  1. ChromeやEdgeなどいつも使っているブラウザを開く。YahooでもGoogleでも何が開いてあってもいい。
  2. ダウンロードしたファイルのアイコンをその開いているページの上にドラッグ・ドロップ
  3. 勝手に新しいタブが開いて、利用できるようになります。

利用制限・お約束

  • 個人だろうが、商用だろうが、用途は問いません。
  • 自由に改変してください。
  • 記事で紹介する場合、だれかに教える場合は、このページのことを教えてください。
  • 利用などは自己責任です。このファイルやソースコードで何かあっても知りません。
  • 心配な人はソースコードをそのままコピペして、ご利用ください。

ソースコード

本ツールは、以下のようになっています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Acrocraft WebP Converter</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <style>
        body { font-family: 'Helvetica Neue', sans-serif; background: #1a1a1a; color: #fff; text-align: center; padding: 40px; }
        #drop-zone { border: 2px dashed #444; border-radius: 20px; padding: 80px; background: #2a2a2a; cursor: pointer; transition: 0.3s; }
        #drop-zone.hover { border-color: #007bff; background: #333; }
        .info { margin-top: 20px; color: #888; font-size: 0.9em; }
        #status { margin-top: 20px; font-weight: bold; color: #00ffcc; }
    </style>
</head>
<body>
    <h1>WebP 変換スタジオ</h1>
    <p>統一規格：Quality 0.75 / ZIP一括出力</p>
    
    <div id="drop-zone">ここに複数の画像をまとめてドロップ</div>
    <div id="status"></div>
    <div class="info">※画像はサーバーに送信されず、ブラウザ内のみで安全に処理されます。</div>

    <script>
        const dropZone = document.getElementById('drop-zone');
        const status = document.getElementById('status');

        dropZone.ondragover = () => { dropZone.classList.add('hover'); return false; };
        dropZone.ondragleave = () => { dropZone.classList.remove('hover'); return false; };

        dropZone.ondrop = async (e) => {
            e.preventDefault();
            dropZone.classList.remove('hover');
            
            const files = Array.from(e.dataTransfer.files).filter(f => f.type.match('image.*'));
            if (files.length === 0) return;

            status.innerText = `${files.length}枚の画像を調律中...`;
            const zip = new JSZip();
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');

            for (let file of files) {
                const img = await new Promise(resolve => {
                    const reader = new FileReader();
                    reader.onload = (re) => {
                        const i = new Image();
                        i.onload = () => resolve(i);
                        i.src = re.target.result;
                    };
                    reader.readAsDataURL(file);
                });

                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, 0, 0);

                // WebP変換 (Quality 0.75)
                const dataUrl = canvas.toDataURL('image/webp', 0.75);
                const base64Data = dataUrl.split(',')[1];
                
                // ZIPにファイルを追加
                const fileName = file.name.replace(/\.[^/.]+$/, "") + ".webp";
                zip.file(fileName, base64Data, {base64: true});
            }

            // ZIP生成とダウンロード
            const content = await zip.generateAsync({type: "blob"});
            const link = document.createElement('a');
            link.href = URL.createObjectURL(content);
            link.download = `converted_webp_${new Date().getTime()}.zip`;
            link.click();

            status.innerText = `${files.length}枚の変換が完了しました！`;
        };
    </script>
</body>
</html>

簡単な調整方法

58行目の値を変更することで、クオリティの変更が可能です。

const dataUrl = canvas.toDataURL('image/webp', 0.75);

クオリティの仕組み（Canvas API）

toDataURL(type, quality) の第2引数は、0.0 から 1.0 までの数値で指定します。

  • 1.0 (最高品質): ほぼ劣化なし。ただしファイルサイズは大きくなります。
  • 0.92 (標準): ブラウザ（Chromeなど）のデフォルト値。
  • 0.75 (瑞宜さんの統一規格): 画質の劣化が目立たず、ファイルサイズを劇的に削れる「Web制作の黄金比」。
  • 0.1 (最低品質): モザイクのような荒い画像になりますが、サイズは最小です。

Googleのエンジニアが推奨するWebPの標準的な圧縮設定（cwebp）でも、デフォルトのクオリティは 75 に設定されています。

また、クオリティを簡単に変更したい方は、クオリティ変更可能WEBP一括変換ツールをご利用ください。

クオリティ変換可能WEBP一括変換ツール

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Acrocraft WebP Studio</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <style>
        body { font-family: 'Helvetica Neue', sans-serif; background: #1a1a1a; color: #fff; text-align: center; padding: 40px; }
        #drop-zone { border: 2px dashed #444; border-radius: 20px; padding: 60px; background: #2a2a2a; cursor: pointer; transition: 0.3s; margin-bottom: 20px; }
        #drop-zone.hover { border-color: #00ffcc; background: #333; }
        
        /* 調律パネルのスタイル */
        .controls { background: #333; padding: 20px; border-radius: 10px; display: inline-block; margin-bottom: 20px; }
        input[type=range] { width: 200px; cursor: pointer; vertical-align: middle; }
        .q-value { font-size: 1.5em; font-weight: bold; color: #00ffcc; margin-left: 10px; vertical-align: middle; }
        
        #status { font-weight: bold; color: #00ffcc; min-height: 1.2em; }
    </style>
</head>
<body>
    <h1>WebP 変換スタジオ</h1>
    
    <div class="controls">
        <label>Quality :</label>
        <input type="range" id="quality-slider" min="0.05" max="1.0" step="0.05" value="0.75">
        <span id="quality-display" class="q-value">0.75</span>
    </div>

    <div id="drop-zone">ここに複数の画像をドロップ</div>
    <div id="status"></div>

    <script>
        const dropZone = document.getElementById('drop-zone');
        const status = document.getElementById('status');
        const slider = document.getElementById('quality-slider');
        const display = document.getElementById('quality-display');

        // スライダーの値が変更されたら表示を更新
        slider.oninput = function() {
            display.innerText = parseFloat(this.value).toFixed(2);
        };

        dropZone.ondragover = () => { dropZone.classList.add('hover'); return false; };
        dropZone.ondragleave = () => { dropZone.classList.remove('hover'); return false; };

        dropZone.ondrop = async (e) => {
            e.preventDefault();
            dropZone.classList.remove('hover');
            
            const files = Array.from(e.dataTransfer.files).filter(f => f.type.match('image.*'));
            if (files.length === 0) return;

            const currentQuality = parseFloat(slider.value);
            status.innerText = `${files.length}枚を Quality ${currentQuality} で調律中...`;
            
            const zip = new JSZip();
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');

            for (let file of files) {
                const img = await new Promise(resolve => {
                    const reader = new FileReader();
                    reader.onload = (re) => {
                        const i = new Image();
                        i.onload = () => resolve(i);
                        i.src = re.target.result;
                    };
                    reader.readAsDataURL(file);
                });

                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, 0, 0);

                // スライダーで指定されたクオリティで変換
                const dataUrl = canvas.toDataURL('image/webp', currentQuality);
                const base64Data = dataUrl.split(',')[1];
                
                const fileName = file.name.replace(/\.[^/.]+$/, "") + ".webp";
                zip.file(fileName, base64Data, {base64: true});
            }

            const content = await zip.generateAsync({type: "blob"});
            const link = document.createElement('a');
            link.href = URL.createObjectURL(content);
            link.download = `webp_q${currentQuality}_${new Date().getTime()}.zip`;
            link.click();

            status.innerText = `完了！ (Quality: ${currentQuality})`;
        };
    </script>
</body>
</html>

 

こんな感じになっています。

 

ACROCRAFT 峯崎

この文章を書いた人

学生時代よりウェブ技術に興味を持ち、独学でウェブ制作を開始。当時からPerl、CSSなどの技術を用いたサイト構築に取り組んでいました。 その後、営業会社にて法人営業を経験し、ウェブ開発・運営に本格復帰して以降は、WordPressを活用した多様なサイト開発、及びECサイトの制作・運用に従事。 ウェブ戦略の立案から実行、効果測定までを一貫して担当しています。

お知らせ一覧を見る