Image Metadata Editor —Edit Title, Description & Copyright

🖼️

Drop a JPEG here or click to browse

JPEG only —metadata writing requires JFIF/EXIF segment support

No EXIF data detected in this image.

Title

Author / Artist

Keywords Comma-separated

Description / Caption

<div class="notice">
          ⚀The new metadata is written into a fresh JPEG copy using Comment (COM) segments. Original EXIF camera data (aperture, GPS, etc.) is preserved as-is. IPTC fields require dedicated software for full IPTC/XMP embedding.
        </div>
        <button class="save-btn" id="saveBtn">Download Updated JPEG</button>
      </div>
    </div>
  </div>

<div class="ds-seo-content">
  <section class="ds-seo-section">
    <h2 class="ds-seo-section__title">What is Image Metadata Editor?</h2>
    <p>Image Metadata Editor lets you open a JPEG, read its existing EXIF camera information (make, model, date, dimensions), and add or edit descriptive metadata fields: Title, Author, Copyright, Keywords, and Description. The new metadata is embedded as JPEG COM segments in a downloaded copy of the file.</p>
  </section>
  <section class="ds-seo-section">
    <h2 class="ds-seo-section__title">How to Use Image Metadata Editor</h2>
    <ol>
      <li>Drop a JPEG file onto the drop zone or click to browse.</li>
      <li>Read any existing EXIF data shown in the summary panel.</li>
      <li>Fill in the metadata fields: title, author, copyright, keywords, and description.</li>
      <li>Click "Download Updated JPEG" to save the edited file.</li>
    </ol>
  </section>
</div>

<div class="ds-related-tools">
  <h2 class="ds-related-title">Related Tools</h2>
  <div class="ds-related-grid">
    <a href="exif-viewer.html" class="ds-related-card"><span class="ds-related-icon">🔍</span><div><div class="ds-related-name">EXIF Viewer</div><div class="ds-related-desc">Read camera model, GPS, exposure, and full EXIF metadata from any image</div></div></a>
    <a href="remove-exif.html" class="ds-related-card"><span class="ds-related-icon">🛡️</span><div><div class="ds-related-name">Remove EXIF Data</div><div class="ds-related-desc">Strip GPS location and EXIF metadata from photos</div></div></a>
    <a href="image-to-base64.html" class="ds-related-card"><span class="ds-related-icon">🔢</span><div><div class="ds-related-name">Image to Base64</div><div class="ds-related-desc">Convert any image to a Base64 string or data URI for embedding in HTML/CSS</div></div></a>
  </div>
</div>

<details class="ds-seo-more">
  <summary class="ds-seo-more__toggle">
    <span>Understand Image Metadata</span>
    <span class="ds-seo-more__arrow">▾</span>
  </summary>
  <div class="ds-seo-more__body">
    <details class="ds-seo-collapse">
      <summary>Example</summary>
      <div class="ds-seo-collapse__body">
        <div class="ds-seo-example">
          <div class="ds-seo-example__row">
            <span class="ds-seo-example__label">Input</span>
            <span class="ds-seo-example__value">photo.jpg (no metadata)</span>
          </div>
          <div class="ds-seo-example__row">
            <span class="ds-seo-example__label">Output</span>
            <span class="ds-seo-example__value">photo_edited.jpg with Title: Sunset | Author: Jane Smith | Copyright: 2024</span>
          </div>
        </div>
      </div>
    </details>
    <details class="ds-seo-collapse">
      <summary>Common Use Cases</summary>
      <div class="ds-seo-collapse__body">
        <ul>
          <li>Add copyright before sharing photos online</li>
          <li>Label archived images with title and description</li>
          <li>Correct or add author attribution to JPEG files</li>
          <li>Add keywords to make photos searchable</li>
        </ul>
      </div>
    </details>
    <details class="ds-seo-collapse">
      <summary>Why Use This Tool</summary>
      <div class="ds-seo-collapse__body">
        <ul>
          <li>Add copyright and author info before publishing photos.</li>
          <li>Pre-fills Author field from existing EXIF Artist tag if present.</li>
          <li>Non-destructive —creates a new file, never overwrites the original.</li>
          <li>100% local —no image is ever uploaded.</li>
        </ul>
      </div>
    </details>
    <details class="ds-seo-collapse">
      <summary>Frequently Asked Questions</summary>
      <div class="ds-seo-collapse__body">
        <div class="ds-seo-faq-item"><strong>What metadata fields can I edit?</strong><p>You can add or edit Title, Author/Artist, Copyright, Keywords, and Description/Caption. These are written as JPEG COM (Comment) segments in the output file, which are readable by most photo software.</p></div>
        <div class="ds-seo-faq-item"><strong>Will my EXIF camera data be preserved?</strong><p>Yes. The tool writes the new metadata as additional COM segments while keeping the original JPEG data intact, including any existing EXIF segments.</p></div>
        <div class="ds-seo-faq-item"><strong>Why JPEG only?</strong><p>JPEG COM segments are a simple, universal way to embed text metadata that works without external libraries. PNG, WebP, and TIFF use different metadata formats that require more complex parsers and writers.</p></div>
        <div class="ds-seo-faq-item"><strong>Is this the same as full IPTC/XMP editing?</strong><p>No. Full IPTC/XMP editing requires dedicated software. This tool writes metadata as JPEG comment fields, which is readable by most tools but is not the same as structured IPTC or XMP blocks.</p></div>
      </div>
    </details>
  </div>
</details>

</div>
<script>
  'use strict';

let originalBuf = null;
  let origFileName = 'image.jpg';

// Minimal EXIF reader for display only
  function readExif(buf) {
    const dv = new DataView(buf);
    const fields = {};
    if (dv.getUint16(0) !== 0xFFD8) { document.getElementById('exifReadout').textContent = 'Not a valid JPEG.'; return; }
    let pos = 2;
    while (pos < dv.byteLength - 1) {
      const marker = dv.getUint16(pos);
      if (marker === 0xFFE1) {
        const segLen = dv.getUint16(pos + 2);
        const id = String.fromCharCode(...new Uint8Array(buf, pos + 4, 4));
        if (id === 'Exif') {
          const tiff = pos + 10;
          const le = dv.getUint16(tiff) === 0x4949;
          const ifd0 = tiff + dv.getUint32(tiff + 4, le);
          const n = dv.getUint16(ifd0, le);
          for (let i = 0; i < n; i++) {
            const eOff = ifd0 + 2 + i * 12;
            const tag = dv.getUint16(eOff, le);
            const type = dv.getUint16(eOff + 2, le);
            const count = dv.getUint32(eOff + 4, le);
            if (type === 2) {
              const dataOff = count > 4 ? tiff + dv.getUint32(eOff + 8, le) : eOff + 8;
              let s = '';
              const bytes = new Uint8Array(buf, dataOff, count);
              for (let j = 0; j < count; j++) { if (!bytes[j]) break; s += String.fromCharCode(bytes[j]); }
              if (tag === 0x010F) fields['Make'] = s.trim();
              if (tag === 0x0110) fields['Model'] = s.trim();
              if (tag === 0x0132) fields['DateTime'] = s.trim();
              if (tag === 0x013B) fields['Artist'] = s.trim();
            }
            if (tag === 0xA002 && (type === 3 || type === 4)) {
              fields['Width'] = type === 3 ? dv.getUint16(eOff + 8, le) : dv.getUint32(eOff + 8, le);
            }
            if (tag === 0xA003 && (type === 3 || type === 4)) {
              fields['Height'] = type === 3 ? dv.getUint16(eOff + 8, le) : dv.getUint32(eOff + 8, le);
            }
          }
        }
        pos += 2 + segLen;
        continue;
      }
      if ((marker & 0xFF00) !== 0xFF00) break;
      if (marker === 0xFFD9) break;
      pos += 2 + dv.getUint16(pos + 2);
    }

document.getElementById('exifReadout').innerHTML = parts.length
      ? parts.join('  ·  ')
      : 'No readable EXIF fields found. You can still add metadata fields below.';
  }

// Write metadata as JPEG COM segments
  document.getElementById('saveBtn').addEventListener('click', () => {
    if (!originalBuf) return;

const fields = {
      title: document.getElementById('mTitle').value.trim(),
      author: document.getElementById('mAuthor').value.trim(),
      copyright: document.getElementById('mCopyright').value.trim(),
      keywords: document.getElementById('mKeywords').value.trim(),
      description: document.getElementById('mDesc').value.trim()
    };

const comments = Object.entries(fields)
      .filter(([, v]) => v)
      .map(([k, v]) => `${k.charAt(0).toUpperCase() + k.slice(1)}: ${v}`);

// Build new JPEG: keep SOI + existing segments, inject COM before SOS/EOI
    const encoder = new TextEncoder();
    const parts = [];
    // SOI
    parts.push(new Uint8Array([0xFF, 0xD8]));
    // COM segments
    for (const comment of comments) {
      const data = encoder.encode(comment);
      const segLen = data.length + 2;
      const seg = new Uint8Array(4 + data.length);
      seg[0] = 0xFF; seg[1] = 0xFE;
      seg[2] = (segLen >> 8) & 0xFF; seg[3] = segLen & 0xFF;
      seg.set(data, 4);
      parts.push(seg);
    }
    // Rest of original JPEG (skip original SOI, keep everything else)
    parts.push(originalBuf.slice(2));

const totalLen = parts.reduce((s, p) => s + p.length, 0);
    const out = new Uint8Array(totalLen);
    let offset = 0;
    for (const p of parts) { out.set(p, offset); offset += p.length; }