index.html

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Image to Data URL Converter - Free Online Tool</title>
  <meta name="description"
    content="Free online tool to convert images to Data URLs (base64) for embedding in HTML, CSS, and JavaScript. Supports PNG, JPEG, GIF, SVG, and more." />
  <meta name="keywords" content="data url converter, base64 image, image to data uri, base64 encoder, web development tools" />
  <meta name="author" content="Richard Crane" />
  <meta name="robots" content="index, follow" />

  <!-- Canonical URL -->
  <link rel="canonical" href="https://datauri.ai/" />

  <!-- Open Graph Metadata -->
  <meta property="og:title" content="Image to Data URL Converter - Free Online Tool" />
  <meta property="og:description" content="Free online tool to convert images to Data URLs (base64) for embedding in HTML, CSS, and JavaScript. Supports PNG, JPEG, GIF, SVG, and more." />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://datauri.ai/" />
  <meta property="og:image" content="https://datauri.ai/icon-192.png" />
  <meta property="og:site_name" content="DataURI.ai" />
  <meta property="og:locale" content="en_US" />

  <!-- Twitter Card Metadata -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Image to Data URL Converter - Free Online Tool" />
  <meta name="twitter:description" content="Free online tool to convert images to Data URLs (base64) for embedding in HTML, CSS, and JavaScript. Supports PNG, JPEG, GIF, SVG, and more." />
  <meta name="twitter:image" content="https://datauri.ai/icon-192.png" />
  <meta name="twitter:creator" content="@richcrane" />

  <!-- Favicon and App Icons -->
  <link rel="manifest" href="manifest.json" />
  <meta name="theme-color" content="#8b5cf6" />
  <link rel="apple-touch-icon" href="icon-192.png" />
  <link rel="icon" href="favicon.ico" />
  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />

  <!-- Google AdSense -->
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1769530151228137"
    crossorigin="anonymous"></script>

  <!-- Stylesheets -->
  <link rel="stylesheet" href="styles.css" />
  <link rel="stylesheet" href="code-copy.css" />

  <style>
    .upload-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      border: 2px dashed #d1d5db;
      border-radius: 0.5rem;
      margin-bottom: 2rem;
      background-color: #f9fafb;
      transition: all 0.2s ease;
    }

    .upload-container:hover {
      border-color: #8b5cf6;
      background-color: #f3f4f6;
    }

    .upload-icon {
      width: 4rem;
      height: 4rem;
      color: #8b5cf6;
      margin-bottom: 1rem;
    }

    .upload-text {
      font-size: 1.25rem;
      font-weight: 500;
      color: #4b5563;
      margin-bottom: 1rem;
      text-align: center;
    }

    .upload-subtext {
      font-size: 0.875rem;
      color: #6b7280;
      margin-bottom: 1.5rem;
      text-align: center;
    }

    .file-input {
      display: none;
    }

    .upload-button {
      background-color: #8b5cf6;
      color: white;
      font-weight: 500;
      padding: 0.625rem 1.25rem;
      border-radius: 0.375rem;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .upload-button:hover {
      background-color: #7c3aed;
    }

    .result-container {
      display: none;
      margin-top: 0;
    }

    .result-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

    .result-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: #1f2937;
    }

    .copy-button {
      background-color: #8b5cf6;
      color: white;
      font-weight: 500;
      padding: 0.5rem 1rem;
      border-radius: 0.375rem;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .copy-button:hover {
      background-color: #7c3aed;
    }

    .result-preview {
      display: flex;
      margin-bottom: 1.5rem;
      border: 1px solid #e5e7eb;
      border-radius: 0.5rem;
      overflow: hidden;
    }

    .preview-image {
      max-width: 100%;
      max-height: 300px;
      margin: 0 auto;
      display: block;
      padding: 1rem;
    }

    .result-code {
      background-color: #f9fafb;
      border: 1px solid #e5e7eb;
      border-radius: 0.5rem;
      padding: 1rem;
      margin-bottom: 1.5rem;
      overflow-x: auto;
    }

    .result-code textarea {
      width: 100%;
      min-height: 100px;
      resize: vertical;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 0.875rem;
      line-height: 1.5;
      color: #1f2937;
      background-color: #f9fafb;
      border: none;
      padding: 0;
      margin: 0;
      overflow-wrap: break-word;
    }

    .result-code textarea:focus {
      outline: none;
    }

    .usage-examples {
      margin-top: 3rem;
    }

    .example {
      margin-bottom: 2rem;
      padding-bottom: 2rem;
      border-bottom: 1px solid #e5e7eb;
    }

    .example:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    .example-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: #1f2937;
      margin-bottom: 1rem;
    }

    .example-description {
      margin-bottom: 1rem;
    }

    .resources {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-top: 2rem;
    }

    .resource-card {
      flex: 1;
      min-width: 250px;
      border: 1px solid #e5e7eb;
      border-radius: 0.5rem;
      padding: 1.5rem;
      background-color: #f9fafb;
      transition: all 0.2s ease;
    }

    .resource-card:hover {
      border-color: #8b5cf6;
      transform: translateY(-2px);
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    .resource-title {
      font-size: 1.125rem;
      font-weight: 600;
      color: #1f2937;
      margin-bottom: 0.5rem;
    }

    .resource-description {
      font-size: 0.875rem;
      color: #4b5563;
      margin-bottom: 1rem;
    }

    .resource-link {
      display: inline-flex;
      align-items: center;
      color: #8b5cf6;
      font-weight: 500;
      font-size: 0.875rem;
      text-decoration: none;
    }

    .resource-link:hover {
      text-decoration: underline;
    }

    .resource-link-icon {
      width: 1rem;
      height: 1rem;
      margin-left: 0.25rem;
    }
  </style>
</head>

<body>
  <!-- Navigation -->
  <div class="nav-container">
    <nav class="nav">
      <a href="index.html" class="nav-link active">Home</a>
      <a href="about-data-urls.html" class="nav-link">About Data URLs</a>
      <a href="tutorials.html" class="nav-link">Tutorials</a>
      <a href="use-cases.html" class="nav-link">Use Cases</a>
      <a href="best-practices.html" class="nav-link">Best Practices</a>
      <a href="faq.html" class="nav-link">FAQ</a>
      <a href="about.html" class="nav-link">About</a>
    </nav>
  </div>

  <div class="container">
    <h1>Image to Data URL Converter</h1>
    
    <p>
      Convert your images to Data URLs (base64 encoded) for embedding directly in your HTML, CSS, or JavaScript code.
      This eliminates HTTP requests for small images, improving page load performance.
    </p>
    
    <div style="text-align: center; margin: 1.5rem 0;">
      <a href="https://github.com/ChiefInnovator/image-to-data-uri-converter" target="_blank" rel="noopener" class="github-button">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 8px;">
          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
        </svg>
        <span style="font-weight: 600;">GitHub: ChiefInnovator/image-to-data-uri-converter</span>
      </a>
    </div>

    <style>
      .github-button {
        display: inline-flex;
        align-items: center;
        background-color: #24292e;
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        text-decoration: none;
        font-size: 1.125rem;
        transition: all 0.2s ease;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      }
      
      .github-button:hover {
        background-color: #2c3136;
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        text-decoration: none;
      }
    </style>

    <!-- Learning Resources Section -->
    <div>
      <div class="learning-label">What is a Data URL?</div>
      <div class="resource-tabs">
        <a href="about-data-urls.html" class="resource-tab learn-more">
          <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          Learn More
        </a>
        <a href="https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes/data" target="_blank" rel="noopener" title="MDN: Data URLs - Official documentation on Data URLs, syntax, and usage." class="resource-tab mdn">
          <svg width="20" height="20" fill="none" stroke="#6366f1" stroke-width="2" viewBox="0 0 24 24">
            <rect x="4" y="4" width="16" height="16" rx="2" fill="#fff" stroke="#6366f1"/>
            <path d="M8 4v16" stroke="#6366f1" stroke-width="2"/>
          </svg>
          MDN Web Docs
        </a>
        <a href="https://en.wikipedia.org/wiki/Data_URI_scheme" target="_blank" rel="noopener" title="Wikipedia: Data URI scheme - General background information." class="resource-tab wiki">
          <svg width="20" height="20" fill="none" viewBox="0 0 24 24">
            <text x="3" y="18" font-family="serif" font-size="18" fill="#3b82f6">W</text>
          </svg>
          Wikipedia
        </a>
        <a href="https://www.youtube.com/results?search_query=data+urls" target="_blank" rel="noopener" title="YouTube: Data URLs - Video tutorials and explanations." class="resource-tab youtube">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <rect x="2" y="5" width="20" height="14" rx="4" fill="#FF0000"/>
            <polygon points="10,9 16,12 10,15" fill="#fff"/>
          </svg>
          YouTube
        </a>
      </div>
    </div>

    <div class="upload-container" id="upload-container">
      <svg class="upload-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
      </svg>
      <div class="upload-text">Drag and drop your image here</div>
      <div class="upload-subtext">or click to browse (PNG, JPEG, GIF, SVG, WebP, etc.)</div>
      <input type="file" id="file-input" class="file-input" accept="image/*" />
      <button class="upload-button" id="upload-button">Select Image</button>
    </div>

    <div class="result-container" id="result-container">
      <div class="result-header">
        <button class="copy-button" id="copy-button">Copy Data URL</button>
      </div>
      <div class="result-preview">
        <img id="preview-image" class="preview-image" src="" alt="Preview" />
      </div>
      <div class="result-code code-block">
        <textarea id="result-code" readonly></textarea>
      </div>
      <button class="upload-button" id="convert-another-button">Convert Another Image</button>
    </div>

    <div class="usage-examples">
      <h2>How to Use Data URLs</h2>

      <div class="example">
        <h3 class="example-title">HTML Example</h3>
        <p class="example-description">
          Embed images directly in your HTML using the img tag:
        </p>
        <div class="code-block">
          <pre><code>&lt;img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot"&gt;</code></pre>
        </div>
      </div>

      <div class="example">
        <h3 class="example-title">CSS Example</h3>
        <p class="example-description">
          Use Data URLs as background images in your CSS:
        </p>
        <div class="code-block">
          <pre><code>.element {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==');
  background-repeat: no-repeat;
  background-position: center;
}</code></pre>
        </div>
      </div>

      <div class="example">
        <h3 class="example-title">JavaScript Example</h3>
        <p class="example-description">
          Create images dynamically in JavaScript:
        </p>
        <div class="code-block">
          <pre><code>const img = new Image();
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==';
document.body.appendChild(img);</code></pre>
        </div>
      </div>
    </div>

    <div class="tip">
      <div class="tip-title">Best Practice</div>
      <div class="tip-content">
        Data URLs are best suited for small images (under 5KB). For larger images, traditional file references with proper caching are usually more efficient.
      </div>
    </div>

    <div class="resources">
      <div class="resource-card">
        <div class="resource-title">Learn More About Data URLs</div>
        <div class="resource-description">
          Understand what Data URLs are, how they work, and their benefits and limitations.
        </div>
        <a href="about-data-urls.html" class="resource-link">
          Read the Guide
          <svg class="resource-link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </a>
      </div>
      <div class="resource-card">
        <div class="resource-title">Step-by-Step Tutorials</div>
        <div class="resource-description">
          Follow our detailed tutorials to learn how to use Data URLs effectively in your projects.
        </div>
        <a href="tutorials.html" class="resource-link">
          View Tutorials
          <svg class="resource-link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </a>
      </div>
      <div class="resource-card">
        <div class="resource-title">Practical Use Cases</div>
        <div class="resource-description">
          Discover real-world applications and scenarios where Data URLs shine.
        </div>
        <a href="use-cases.html" class="resource-link">
          Explore Use Cases
          <svg class="resource-link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </a>
      </div>
    </div>
  </div>

  <footer class="footer">
    <div class="footer-content">
      <p>© <span id="current-year"></span>&nbsp;Richard Crane. All rights reserved.</p>
      <div>
        <a href="terms.html">Terms & Conditions</a>
        <a href="privacy.html">Privacy Policy</a>
        <a href="cookies.html">Cookie Support</a>
      </div>
    </div>
  </footer>

  <script>
    // Set current year in footer
    document.getElementById("current-year").textContent = new Date().getFullYear();

    // File upload and conversion logic
    const fileInput = document.getElementById("file-input");
    const uploadButton = document.getElementById("upload-button");
    const uploadContainer = document.getElementById("upload-container");
    const resultContainer = document.getElementById("result-container");
    const previewImage = document.getElementById("preview-image");
    const resultCode = document.getElementById("result-code");
    const copyButton = document.getElementById("copy-button");
    const convertAnotherButton = document.getElementById("convert-another-button");

    // Handle file selection
    uploadButton.addEventListener("click", () => {
      fileInput.click();
    });

    fileInput.addEventListener("change", handleFileSelect);

    // Handle drag and drop
    uploadContainer.addEventListener("dragover", (e) => {
      e.preventDefault();
      e.stopPropagation();
      uploadContainer.style.borderColor = "#8b5cf6";
      uploadContainer.style.backgroundColor = "#f3f4f6";
    });

    uploadContainer.addEventListener("dragleave", (e) => {
      e.preventDefault();
      e.stopPropagation();
      uploadContainer.style.borderColor = "#d1d5db";
      uploadContainer.style.backgroundColor = "#f9fafb";
    });

    uploadContainer.addEventListener("drop", (e) => {
      e.preventDefault();
      e.stopPropagation();
      uploadContainer.style.borderColor = "#d1d5db";
      uploadContainer.style.backgroundColor = "#f9fafb";

      const dt = e.dataTransfer;
      const files = dt.files;

      if (files.length > 0) {
        fileInput.files = files;
        handleFileSelect();
      }
    });

    // Handle file selection
    function handleFileSelect() {
      const file = fileInput.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = function (e) {
        const dataUrl = e.target.result;
        previewImage.src = dataUrl;
        resultCode.value = dataUrl;
        uploadContainer.style.display = "none";
        resultContainer.style.display = "block";
      };
      reader.readAsDataURL(file);
    }

    // Copy data URL to clipboard
    copyButton.addEventListener("click", () => {
      resultCode.select();
      document.execCommand("copy");
      copyButton.textContent = "Copied!";
      setTimeout(() => {
        copyButton.textContent = "Copy Data URL";
      }, 2000);
    });

    // Convert another image
    convertAnotherButton.addEventListener("click", () => {
      resultContainer.style.display = "none";
      uploadContainer.style.display = "flex";
      fileInput.value = "";
    });
  </script>
  <script src="scripts.js"></script>
</body>

</html>