image-to-webp-base64.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta http-equiv="Content-Security-Policy"
    content="default-src 'none'; img-src data: blob:; style-src 'unsafe-inline'; script-src 'unsafe-inline';">
  <title>Image to WebP &amp; Base64</title>
  <link rel="icon" type="image/svg+xml"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2371a9ff' d='M3 4h18v16H3z'/%3E%3Cpath fill='%2310141d' d='m5 17 4-5 3 3 3-4 4 6zM7 7h4v3H7z'/%3E%3C/svg%3E">
  <style>
    :root {
      color-scheme: dark;
      --bg: #10141d;
      --panel: #181e2b;
      --line: #2d374a;
      --text: #e7edf8;
      --muted: #aab7cf;
      --accent: #71a9ff;
      --ok: #65d39b;
      --error: #ff8989
    }

    * {
      box-sizing: border-box
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif
    }

    main {
      max-width: 1040px;
      margin: auto;
      padding: 30px
    }

    .title {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .logo {
      width: 32px;
      height: 32px;
      flex: none
    }

    h1 {
      margin: 0;
      font-size: 26px
    }

    header p,
    .hint,
    .note,
    footer {
      color: var(--muted)
    }

    header p {
      margin: 6px 0 24px
    }

    .drop {
      border: 2px dashed #476385;
      border-radius: 12px;
      background: var(--panel);
      padding: 34px;
      text-align: center;
      transition: .15s
    }

    .drop.drag {
      background: #202d42;
      border-color: var(--accent)
    }

    input[type=file] {
      display: none
    }

    .button,
    button {
      cursor: pointer;
      background: #202939;
      color: var(--text);
      border: 1px solid #43536d;
      border-radius: 7px;
      padding: 8px 12px;
      font: inherit
    }

    .button {
      display: inline-block;
      background: var(--accent);
      color: #081323;
      font-weight: 700;
      border: 0;
      padding: 9px 14px
    }

    .button:hover,
    button:hover {
      filter: brightness(1.1)
    }

    button:focus-visible,
    .button:focus-visible,
    input:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px
    }

    .hint {
      margin: 12px 0 0
    }

    .controls {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px;
      background: var(--line);
      margin: 24px 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden
    }

    .control {
      background: var(--panel);
      padding: 14px
    }

    .control label {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      font-weight: 600
    }

    .control output {
      color: var(--accent);
      font-variant-numeric: tabular-nums
    }

    .range-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 10px
    }

    input[type=range] {
      accent-color: var(--accent);
      width: 100%
    }

    .presets {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 10px
    }

    .presets button {
      padding: 5px 9px;
      font-size: 12px
    }

    .presets button.active {
      background: #263a59;
      border-color: var(--accent);
      color: var(--text)
    }

    .note {
      margin: 0 0 18px;
      font-size: 12px
    }

    .results {
      display: grid;
      gap: 14px
    }

    .result {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      overflow: hidden
    }

    .result-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 14px;
      border-bottom: 1px solid var(--line)
    }

    .file-name {
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .status {
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap
    }

    .status.ok {
      color: var(--ok)
    }

    .preview {
      display: block;
      max-width: min(100%, 600px);
      max-height: 360px;
      margin: 16px auto;
      border-radius: 6px;
      background: repeating-conic-gradient(#202939 0 25%, #18202e 0 50%) 50%/16px 16px
    }

    .facts {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
      gap: 1px;
      background: var(--line);
      border-top: 1px solid var(--line)
    }

    .fact {
      background: var(--panel);
      padding: 10px 14px
    }

    .fact span {
      display: block;
      color: var(--muted);
      font-size: 12px
    }

    .fact strong {
      display: block;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .base64 {
      width: calc(100% - 28px);
      height: 130px;
      margin: 14px;
      padding: 9px;
      resize: vertical;
      background: #10141d;
      color: var(--text);
      border: 1px solid #43536d;
      border-radius: 6px;
      font: 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace
    }

    .actions {
      display: flex;
      justify-content: flex-end;
      gap: 7px;
      flex-wrap: wrap;
      padding: 0 14px 14px
    }

    .actions button.primary {
      background: var(--accent);
      color: #081323;
      border: 0;
      font-weight: 700
    }

    footer {
      border-top: 1px solid var(--line);
      margin-top: 28px;
      padding: 16px 0;
      font-size: 12px
    }

    footer a {
      color: #a9c8ff
    }

    @media(max-width:600px) {
      main {
        padding: 18px
      }

      .drop {
        padding: 25px 12px
      }

      .controls {
        grid-template-columns: 1fr
      }

      .result-head {
        align-items: flex-start;
        flex-direction: column
      }

      .status {
        white-space: normal
      }
    }
  </style>
</head>

<body>
  <main>
    <header>
      <div class="title"><svg class="logo" viewBox="0 0 24 24" aria-hidden="true">
          <path fill="#71a9ff" d="M3 4h18v16H3z" />
          <path fill="#10141d" d="m5 17 4-5 3 3 3-4 4 6zM7 7h4v3H7z" />
        </svg>
        <h1>Image to WebP &amp; Base64</h1>
      </div>
      <p>A self-contained, offline image converter. Your files never leave this browser.</p>
    </header>
    <div id="drop" class="drop" role="button" tabindex="0" aria-describedby="drop-hint">
      <label class="button" for="file">Choose image files</label><input id="file" type="file" accept="image/*" multiple>
      <div id="drop-hint" class="hint">Select one or more images, or drag and drop them here</div>
    </div>
    <section class="controls" aria-label="Conversion settings">
      <div class="control"><label for="quality">WebP quality <output id="quality-value">85</output></label>
        <div class="range-row"><input id="quality" type="range" min="0" max="100" value="85"></div>
      </div>
      <div class="control"><label for="scale">Resize <output id="scale-value">100%</output></label>
        <div class="range-row"><input id="scale" type="range" min="1" max="100" value="100"></div>
        <div class="presets" aria-label="Resize presets"><button type="button" data-scale="100"
            class="active">100%</button><button type="button" data-scale="75">75%</button><button type="button"
            data-scale="50">50%</button><button type="button" data-scale="25">25%</button><button type="button"
            data-scale="10">10%</button></div>
      </div>
    </section>
    <p class="note">Settings apply when files are added. Convert again after changing a setting to create new output.
    </p>
    <div id="results" class="results" aria-live="polite"></div>
    <footer>No network requests, or analytics are used.</footer>

  </main>
  <script>
    const $ = s => document.querySelector(s), drop = $('#drop'), file = $('#file'), results = $('#results'), quality = $('#quality'), scale = $('#scale');
    const bytes = n => n < 1024 ? `${n} B` : n < 1048576 ? `${(n / 1024).toFixed(1)} KB` : `${(n / 1048576).toFixed(2)} MB`;
    function update() { $('#quality-value').textContent = quality.value; $('#scale-value').textContent = `${scale.value}%`; document.querySelectorAll('[data-scale]').forEach(b => b.classList.toggle('active', b.dataset.scale === scale.value)); }
    quality.addEventListener('input', update); scale.addEventListener('input', update); document.querySelectorAll('[data-scale]').forEach(b => b.addEventListener('click', () => { scale.value = b.dataset.scale; update() }));
    function receive(files) { [...files].filter(f => f.type.startsWith('image/')).forEach(convert) }
    drop.addEventListener('click', e => { if (e.target.tagName !== 'LABEL') file.click() }); drop.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); file.click() } }); file.addEventListener('change', e => { receive(e.target.files); file.value = '' });['dragenter', 'dragover'].forEach(t => drop.addEventListener(t, e => { e.preventDefault(); drop.classList.add('drag') }));['dragleave', 'drop'].forEach(t => drop.addEventListener(t, e => { e.preventDefault(); drop.classList.remove('drag') })); drop.addEventListener('drop', e => receive(e.dataTransfer.files));
    function convert(source) {
      const card = document.createElement('article'); card.className = 'result'; card.innerHTML = `<div class="result-head"><span class="file-name"></span><span class="status">Converting…</span></div>`; card.querySelector('.file-name').textContent = source.name; results.prepend(card); const reader = new FileReader(); reader.onerror = () => failed('Could not read this file.'); reader.onload = () => { const img = new Image(); img.onerror = () => failed('This image format cannot be decoded by this browser.'); img.onload = () => { const factor = Number(scale.value) / 100, w = Math.max(1, Math.round(img.naturalWidth * factor)), h = Math.max(1, Math.round(img.naturalHeight * factor)), canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'); canvas.width = w; canvas.height = h; ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high'; ctx.drawImage(img, 0, 0, w, h); canvas.toBlob(blob => { if (!blob) { failed('WebP encoding is not supported by this browser.'); return } const dataReader = new FileReader(); dataReader.onload = () => render(blob, dataReader.result, img.naturalWidth, img.naturalHeight, w, h); dataReader.onerror = () => failed('Could not create Base64 output.'); dataReader.readAsDataURL(blob) }, 'image/webp', Number(quality.value) / 100) }; img.src = reader.result }; reader.readAsDataURL(source);
      function failed(message) { card.querySelector('.status').textContent = message; card.querySelector('.status').className = 'status'; }
      function render(blob, dataUrl, ow, oh, w, h) { const encodedBytes = new Blob([dataUrl]).size, base = source.name.replace(/\.[^.]+$/, '') || 'image'; card.querySelector('.status').textContent = 'Ready'; card.querySelector('.status').className = 'status ok'; const preview = new Image(); preview.className = 'preview'; preview.src = dataUrl; preview.alt = `Converted preview of ${source.name}`; const facts = document.createElement('div'); facts.className = 'facts'; facts.innerHTML = `<div class="fact"><span>Dimensions</span><strong>${ow} × ${oh} → ${w} × ${h}</strong></div><div class="fact"><span>Original</span><strong>${bytes(source.size)}</strong></div><div class="fact"><span>WebP</span><strong>${bytes(blob.size)}</strong></div><div class="fact"><span>Base64 data URL</span><strong>${bytes(encodedBytes)}</strong></div>`; const text = document.createElement('textarea'); text.className = 'base64'; text.readOnly = true; text.spellcheck = false; text.value = dataUrl; text.setAttribute('aria-label', `Base64 data URL for ${source.name}`); const actions = document.createElement('div'); actions.className = 'actions'; const copy = document.createElement('button'); copy.textContent = 'Copy Base64'; copy.className = 'primary'; copy.onclick = async () => { try { await navigator.clipboard.writeText(dataUrl); copy.textContent = 'Copied'; setTimeout(() => copy.textContent = 'Copy Base64', 1500) } catch { text.select(); document.execCommand('copy'); copy.textContent = 'Copied'; setTimeout(() => copy.textContent = 'Copy Base64', 1500) } }; const download = document.createElement('button'); download.textContent = 'Download WebP'; download.onclick = () => { const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = `${base}.webp`; a.click(); setTimeout(() => URL.revokeObjectURL(a.href), 1000) }; actions.append(copy, download); card.append(preview, facts, text, actions) }
    }
  </script>
</body>

</html>