Image to Base64 Conversion Guide: Complete Tutorial with Examples

1. Read image file as binary data (bytes)
2. Encode binary data to Base64 string
3. Add data URI prefix: data:[MIME-type];base64,
4. Combine prefix with Base64 string
5. Use in HTML, CSS, or JavaScript

Example:
Binary image data → Base64 encoding → /9j/4AAQSkZJRg...
Final result → data:image/jpeg;base64,/9j/4AAQSkZJRg...

Data URI Format:
data:[MIME-type];base64,[Base64-encoded-data]

Examples:

JPEG Image:
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD...

PNG Image:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

GIF Image:
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP...

WebP Image:
data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgA...

SVG Image:
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDov...

MIME Types:
- image/jpeg or image/jpg
- image/png
- image/gif
- image/webp
- image/svg+xml
- image/bmp
- image/x-icon

// Convert uploaded image to Base64 using FileReader
function convertImageToBase64(file) {
  return new Promise((resolve, reject) => {
    // Validate file type
    if (!file.type.startsWith('image/')) {
      reject(new Error('File is not an image'));
      return;
    }

    // Create FileReader instance
    const reader = new FileReader();

    // Set up event handlers
    reader.onload = (event) => {
      // event.target.result contains the Base64 data URI
      resolve(event.target.result);
    };

    reader.onerror = (error) => {
      reject(error);
    };

    // Read file as Data URL (Base64)
    reader.readAsDataURL(file);
  });
}

// Usage with file input
document.getElementById('imageInput').addEventListener('change', async (e) => {
  const file = e.target.files[0];

  if (file) {
    try {
      const base64 = await convertImageToBase64(file);
      console.log('Base64 string:', base64);

      // Display the image
      document.getElementById('preview').src = base64;

      // Or get just the Base64 data without prefix
      const base64Data = base64.split(',')[1];
      console.log('Base64 data only:', base64Data);
    } catch (error) {
      console.error('Error converting image:', error);
    }
  }
});

// Convert image element to Base64 using Canvas
function imageToBase64(img, outputFormat = 'image/png', quality = 0.92) {
  // Create canvas element
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // Set canvas dimensions to match image
  canvas.width = img.naturalWidth || img.width;
  canvas.height = img.naturalHeight || img.height;

  // Draw image to canvas
  ctx.drawImage(img, 0, 0);

  // Convert canvas to Base64
  // outputFormat: 'image/png', 'image/jpeg', 'image/webp'
  // quality: 0 to 1 (only for lossy formats like JPEG)
  return canvas.toDataURL(outputFormat, quality);
}

// Example 1: Convert existing image
const img = document.getElementById('myImage');
img.onload = () => {
  const base64 = imageToBase64(img, 'image/jpeg', 0.85);
  console.log('Base64:', base64);
};

// Example 2: Load image from URL and convert
function urlToBase64(url, outputFormat = 'image/png') {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'Anonymous'; // Handle CORS

    img.onload = () => {
      const base64 = imageToBase64(img, outputFormat);
      resolve(base64);
    };

    img.onerror = reject;
    img.src = url;
  });
}

// Usage
urlToBase64('/images/photo.jpg', 'image/jpeg')
  .then(base64 => console.log('Converted:', base64))
  .catch(err => console.error('Error:', err));

// Example 3: Resize image before converting
function resizeAndConvert(img, maxWidth, maxHeight, format = 'image/jpeg') {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  let width = img.width;
  let height = img.height;

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

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

  return canvas.toDataURL(format, 0.9);
}

// Convert image from URL to Base64 using Fetch API
async function fetchImageAsBase64(url) {
  try {
    // Fetch the image
    const response = await fetch(url);

    // Check if request was successful
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    // Get image as blob
    const blob = await response.blob();

    // Convert blob to Base64
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onloadend = () => resolve(reader.result);
      reader.onerror = reject;
      reader.readAsDataURL(blob);
    });
  } catch (error) {
    console.error('Error fetching image:', error);
    throw error;
  }
}

// Usage
fetchImageAsBase64('https://example.com/image.jpg')
  .then(base64 => {
    console.log('Base64:', base64);
    document.getElementById('img').src = base64;
  })
  .catch(err => console.error(err));

// Alternative: Using blob URL (more efficient for display)
async function getImageBlobUrl(url) {
  const response = await fetch(url);
  const blob = await response.blob();
  return URL.createObjectURL(blob);
}

// Batch convert multiple images
async function convertMultipleImages(urls) {
  const promises = urls.map(url => fetchImageAsBase64(url));
  return await Promise.all(promises);
}

// Usage
const imageUrls = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.png'
];

convertMultipleImages(imageUrls)
  .then(base64Images => {
    console.log('All images converted:', base64Images);
  });

import React, { useState } from 'react';

function ImageToBase64Converter() {
  const [base64, setBase64] = useState('');
  const [preview, setPreview] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleFileChange = async (event) => {
    const file = event.target.files[0];

    if (!file) return;

    // Validate file type
    if (!file.type.startsWith('image/')) {
      setError('Please select an image file');
      return;
    }

    // Validate file size (5MB limit)
    if (file.size > 5 * 1024 * 1024) {
      setError('Image must be less than 5MB');
      return;
    }

    setLoading(true);
    setError('');

    try {
      const base64String = await convertToBase64(file);
      setBase64(base64String);
      setPreview(base64String);
    } catch (err) {
      setError('Error converting image: ' + err.message);
    } finally {
      setLoading(false);
    }
  };

  const convertToBase64 = (file) => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result);
      reader.onerror = (error) => reject(error);
      reader.readAsDataURL(file);
    });
  };

  const copyToClipboard = () => {
    navigator.clipboard.writeText(base64);
    alert('Base64 copied to clipboard!');
  };

  const downloadAsText = () => {
    const blob = new Blob([base64], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'base64.txt';
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div className="converter">
      <h2>Image to Base64 Converter</h2>

      <input
        type="file"
        accept="image/*"
        onChange={handleFileChange}
        disabled={loading}
      />

      {loading && <p>Converting...</p>}
      {error && <p className="error">{error}</p>}

      {preview && (
        <div className="preview">
          <h3>Preview:</h3>
          <img src={preview} alt="Preview" style={{ maxWidth: '300px' }} />
        </div>
      )}

      {base64 && (
        <div className="result">
          <h3>Base64 Output:</h3>
          <textarea
            value={base64}
            readOnly
            rows={5}
            style={{ width: '100%', fontFamily: 'monospace' }}
          />
          <div className="actions">
            <button onClick={copyToClipboard}>Copy to Clipboard</button>
            <button onClick={downloadAsText}>Download as Text</button>
          </div>
        </div>
      )}
    </div>
  );
}

export default ImageToBase64Converter;

// Node.js: Convert image file to Base64
const fs = require('fs');
const path = require('path');

// Method 1: Synchronous
function imageToBase64Sync(imagePath) {
  // Read image file as buffer
  const imageBuffer = fs.readFileSync(imagePath);

  // Convert to Base64
  const base64String = imageBuffer.toString('base64');

  // Get MIME type from file extension
  const ext = path.extname(imagePath).toLowerCase();
  const mimeTypes = {
    '.jpg': 'image/jpeg',
    '.jpeg': 'image/jpeg',
    '.png': 'image/png',
    '.gif': 'image/gif',
    '.webp': 'image/webp',
    '.svg': 'image/svg+xml'
  };
  const mimeType = mimeTypes[ext] || 'image/jpeg';

  // Create data URI
  return `data:${mimeType};base64,${base64String}`;
}

// Method 2: Asynchronous (recommended)
function imageToBase64Async(imagePath) {
  return new Promise((resolve, reject) => {
    fs.readFile(imagePath, (err, data) => {
      if (err) {
        reject(err);
        return;
      }

      const base64 = data.toString('base64');
      const ext = path.extname(imagePath).toLowerCase();
      const mimeType = getMimeType(ext);
      const dataUri = `data:${mimeType};base64,${base64}`;

      resolve(dataUri);
    });
  });
}

// Method 3: Using fs/promises (modern Node.js)
const fsPromises = require('fs').promises;

async function imageToBase64Modern(imagePath) {
  try {
    const imageBuffer = await fsPromises.readFile(imagePath);
    const base64 = imageBuffer.toString('base64');
    const mimeType = getMimeType(path.extname(imagePath));
    return `data:${mimeType};base64,${base64}`;
  } catch (error) {
    throw new Error(`Failed to convert image: ${error.message}`);
  }
}

function getMimeType(ext) {
  const types = {
    '.jpg': 'image/jpeg',
    '.jpeg': 'image/jpeg',
    '.png': 'image/png',
    '.gif': 'image/gif',
    '.webp': 'image/webp',
    '.svg': 'image/svg+xml',
    '.bmp': 'image/bmp'
  };
  return types[ext.toLowerCase()] || 'image/jpeg';
}

// Usage examples
const imagePath = './images/photo.jpg';

// Sync
const base64Sync = imageToBase64Sync(imagePath);
console.log('Sync result:', base64Sync.substring(0, 100) + '...');

// Async
imageToBase64Async(imagePath)
  .then(base64 => console.log('Async result:', base64.substring(0, 100) + '...'))
  .catch(err => console.error('Error:', err));

// Modern async/await
(async () => {
  const base64 = await imageToBase64Modern(imagePath);
  console.log('Modern result:', base64.substring(0, 100) + '...');
})();

const express = require('express');
const multer = require('multer');
const app = express();

// Configure multer for memory storage
const upload = multer({
  storage: multer.memoryStorage(),
  limits: {
    fileSize: 5 * 1024 * 1024 // 5MB limit
  },
  fileFilter: (req, file, cb) => {
    // Accept images only
    if (!file.mimetype.startsWith('image/')) {
      cb(new Error('Only image files are allowed'), false);
      return;
    }
    cb(null, true);
  }
});

// POST endpoint to convert uploaded image to Base64
app.post('/api/image-to-base64', upload.single('image'), (req, res) => {
  try {
    if (!req.file) {
      return res.status(400).json({ error: 'No image file provided' });
    }

    // Convert buffer to Base64
    const base64 = req.file.buffer.toString('base64');
    const dataUri = `data:${req.file.mimetype};base64,${base64}`;

    res.json({
      success: true,
      base64: dataUri,
      size: req.file.size,
      mimeType: req.file.mimetype,
      originalName: req.file.originalname
    });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// POST endpoint to convert Base64 back to image
app.post('/api/base64-to-image', express.json({ limit: '10mb' }), (req, res) => {
  try {
    const { base64, filename = 'image.png' } = req.body;

    if (!base64) {
      return res.status(400).json({ error: 'No Base64 data provided' });
    }

    // Extract Base64 data and MIME type
    const matches = base64.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/);

    if (!matches || matches.length !== 3) {
      return res.status(400).json({ error: 'Invalid Base64 format' });
    }

    const mimeType = matches[1];
    const base64Data = matches[2];

    // Convert to buffer
    const imageBuffer = Buffer.from(base64Data, 'base64');

    // Send as downloadable file
    res.setHeader('Content-Type', mimeType);
    res.setHeader('Content-Disposition', `attachment; filename="${filename}"`);
    res.send(imageBuffer);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// Error handling middleware
app.use((error, req, res, next) => {
  if (error instanceof multer.MulterError) {
    if (error.code === 'LIMIT_FILE_SIZE') {
      return res.status(400).json({ error: 'File too large (max 5MB)' });
    }
  }
  res.status(500).json({ error: error.message });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

const fs = require('fs').promises;
const path = require('path');

// Process all images in a directory
async function convertDirectoryToBase64(directoryPath, outputPath) {
  try {
    // Read directory
    const files = await fs.readdir(directoryPath);

    // Filter image files
    const imageFiles = files.filter(file => {
      const ext = path.extname(file).toLowerCase();
      return ['.jpg', '.jpeg', '.png', '.gif', '.webp'].includes(ext);
    });

    console.log(`Found ${imageFiles.length} images`);

    // Convert each image
    const results = [];
    for (const file of imageFiles) {
      const filePath = path.join(directoryPath, file);
      const base64 = await convertImage(filePath);

      results.push({
        filename: file,
        base64: base64,
        size: (await fs.stat(filePath)).size
      });

      console.log(`Converted: ${file}`);
    }

    // Save results to JSON file
    await fs.writeFile(
      outputPath,
      JSON.stringify(results, null, 2)
    );

    console.log(`Saved ${results.length} images to ${outputPath}`);
    return results;
  } catch (error) {
    console.error('Error processing directory:', error);
    throw error;
  }
}

async function convertImage(imagePath) {
  const buffer = await fs.readFile(imagePath);
  const base64 = buffer.toString('base64');
  const ext = path.extname(imagePath).toLowerCase();
  const mimeType = getMimeType(ext);
  return `data:${mimeType};base64,${base64}`;
}

function getMimeType(ext) {
  const types = {
    '.jpg': 'image/jpeg',
    '.jpeg': 'image/jpeg',
    '.png': 'image/png',
    '.gif': 'image/gif',
    '.webp': 'image/webp'
  };
  return types[ext] || 'image/jpeg';
}

// Parallel processing for better performance
async function convertDirectoryParallel(directoryPath, outputPath) {
  const files = await fs.readdir(directoryPath);
  const imageFiles = files.filter(file =>
    ['.jpg', '.jpeg', '.png', '.gif', '.webp']
      .includes(path.extname(file).toLowerCase())
  );

  // Convert all images in parallel
  const promises = imageFiles.map(async (file) => {
    const filePath = path.join(directoryPath, file);
    const base64 = await convertImage(filePath);
    const stats = await fs.stat(filePath);

    return {
      filename: file,
      base64: base64,
      size: stats.size
    };
  });

  const results = await Promise.all(promises);
  await fs.writeFile(outputPath, JSON.stringify(results, null, 2));

  return results;
}

// Usage
convertDirectoryToBase64('./images', './output/images.json')
  .then(results => console.log(`Converted ${results.length} images`))
  .catch(err => console.error(err));

const sharp = require('sharp');
const fs = require('fs').promises;

// Optimize and convert image to Base64
async function optimizeAndConvert(inputPath, options = {}) {
  const {
    maxWidth = 1920,
    maxHeight = 1080,
    quality = 80,
    format = 'jpeg'
  } = options;

  try {
    // Process image with Sharp
    const buffer = await sharp(inputPath)
      .resize(maxWidth, maxHeight, {
        fit: 'inside',
        withoutEnlargement: true
      })
      .toFormat(format, { quality })
      .toBuffer();

    // Convert to Base64
    const base64 = buffer.toString('base64');
    const mimeType = `image/${format}`;
    const dataUri = `data:${mimeType};base64,${base64}`;

    return {
      dataUri,
      size: buffer.length,
      format
    };
  } catch (error) {
    throw new Error(`Failed to optimize image: ${error.message}`);
  }
}

// Optimize with multiple output formats
async function optimizeMultipleFormats(inputPath) {
  const formats = ['jpeg', 'webp', 'png'];
  const results = {};

  for (const format of formats) {
    const result = await optimizeAndConvert(inputPath, {
      format,
      quality: format === 'png' ? 90 : 80
    });
    results[format] = result;
  }

  // Find smallest format
  const smallest = Object.entries(results).reduce((min, [format, data]) =>
    data.size < min.size ? { format, ...data } : min
  , { size: Infinity });

  console.log(`Best format: ${smallest.format} (${smallest.size} bytes)`);
  return { results, smallest };
}

// Create responsive image set
async function createResponsiveBase64(inputPath) {
  const sizes = [
    { name: 'thumbnail', width: 150, quality: 70 },
    { name: 'small', width: 400, quality: 75 },
    { name: 'medium', width: 800, quality: 80 },
    { name: 'large', width: 1200, quality: 85 }
  ];

  const results = {};

  for (const { name, width, quality } of sizes) {
    const buffer = await sharp(inputPath)
      .resize(width, null, { withoutEnlargement: true })
      .jpeg({ quality })
      .toBuffer();

    const base64 = buffer.toString('base64');
    results[name] = {
      dataUri: `data:image/jpeg;base64,${base64}`,
      width,
      size: buffer.length
    };
  }

  return results;
}

// Usage examples
async function main() {
  // Simple optimization
  const optimized = await optimizeAndConvert('./photo.jpg', {
    maxWidth: 1200,
    quality: 85,
    format: 'webp'
  });
  console.log('Optimized size:', optimized.size);

  // Compare formats
  const comparison = await optimizeMultipleFormats('./photo.jpg');
  console.log('Format comparison:', comparison.smallest);

  // Responsive images
  const responsive = await createResponsiveBase64('./photo.jpg');
  console.log('Responsive sizes:', Object.keys(responsive));
}

main().catch(console.error);

// Display Base64 image in browser
function displayBase64Image(base64String, elementId) {
  const img = document.getElementById(elementId);
  img.src = base64String;
}

// Create image element from Base64
function createImageFromBase64(base64String) {
  const img = document.createElement('img');
  img.src = base64String;
  img.alt = 'Base64 Image';
  return img;
}

// Display with error handling
function safeDisplayBase64(base64String, containerId) {
  const container = document.getElementById(containerId);

  if (!base64String || !base64String.startsWith('data:image/')) {
    container.innerHTML = '<p>Invalid image data</p>';
    return;
  }

  const img = new Image();

  img.onload = () => {
    container.innerHTML = '';
    container.appendChild(img);
  };

  img.onerror = () => {
    container.innerHTML = '<p>Failed to load image</p>';
  };

  img.src = base64String;
}

// Usage
const base64 = 'data:image/png;base64,iVBORw0KGgo...';
displayBase64Image(base64, 'myImage');

// Or
const newImg = createImageFromBase64(base64);
document.body.appendChild(newImg);

// Download Base64 image as file
function downloadBase64Image(base64String, filename = 'image.png') {
  // Extract Base64 data and MIME type
  const arr = base64String.split(',');
  const mimeMatch = arr[0].match(/:(.*?);/);
  const mime = mimeMatch ? mimeMatch[1] : 'image/png';
  const bstr = atob(arr[1]);

  // Convert to Uint8Array
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }

  // Create blob
  const blob = new Blob([u8arr], { type: mime });

  // Create download link
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;

  // Trigger download
  document.body.appendChild(link);
  link.click();

  // Cleanup
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

// Alternative method using fetch API
function downloadBase64Alt(base64String, filename = 'image.png') {
  fetch(base64String)
    .then(res => res.blob())
    .then(blob => {
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = filename;
      link.click();
      URL.revokeObjectURL(url);
    });
}

// Get file extension from MIME type
function getExtensionFromBase64(base64String) {
  const mimeMatch = base64String.match(/data:(image\/[a-zA-Z+]+);/);
  if (!mimeMatch) return 'png';

  const mime = mimeMatch[1];
  const extensions = {
    'image/jpeg': 'jpg',
    'image/png': 'png',
    'image/gif': 'gif',
    'image/webp': 'webp',
    'image/svg+xml': 'svg'
  };
  return extensions[mime] || 'png';
}

// Download with auto-detected extension
function smartDownloadBase64(base64String, baseName = 'image') {
  const ext = getExtensionFromBase64(base64String);
  downloadBase64Image(base64String, `${baseName}.${ext}`);
}

// Usage
const base64 = 'data:image/png;base64,iVBORw0KGgo...';
downloadBase64Image(base64, 'my-image.png');

// Or with auto-extension
smartDownloadBase64(base64, 'downloaded-image');

const fs = require('fs').promises;
const path = require('path');

// Save Base64 string to image file
async function base64ToFile(base64String, outputPath) {
  try {
    // Extract Base64 data (remove data URI prefix if present)
    let base64Data = base64String;
    if (base64String.includes(',')) {
      base64Data = base64String.split(',')[1];
    }

    // Convert Base64 to buffer
    const imageBuffer = Buffer.from(base64Data, 'base64');

    // Write to file
    await fs.writeFile(outputPath, imageBuffer);

    console.log(`Image saved to ${outputPath}`);
    return outputPath;
  } catch (error) {
    throw new Error(`Failed to save image: ${error.message}`);
  }
}

// Extract MIME type and save with correct extension
async function base64ToFileAuto(base64String, outputDir, baseName = 'image') {
  // Extract MIME type
  const matches = base64String.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/);

  if (!matches) {
    throw new Error('Invalid Base64 image format');
  }

  const mimeType = matches[1];
  const base64Data = matches[2];

  // Determine file extension
  const extensions = {
    'image/jpeg': '.jpg',
    'image/png': '.png',
    'image/gif': '.gif',
    'image/webp': '.webp',
    'image/svg+xml': '.svg',
    'image/bmp': '.bmp'
  };
  const ext = extensions[mimeType] || '.png';

  // Create output path
  const outputPath = path.join(outputDir, `${baseName}${ext}`);

  // Save file
  const buffer = Buffer.from(base64Data, 'base64');
  await fs.writeFile(outputPath, buffer);

  return {
    path: outputPath,
    mimeType,
    size: buffer.length
  };
}

// Process multiple Base64 images
async function saveMultipleBase64Images(images, outputDir) {
  // Ensure output directory exists
  await fs.mkdir(outputDir, { recursive: true });

  const results = [];
  for (let i = 0; i < images.length; i++) {
    const result = await base64ToFileAuto(
      images[i],
      outputDir,
      `image_${i + 1}`
    );
    results.push(result);
  }

  return results;
}

// Usage examples
const base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANS...';

// Simple save
base64ToFile(base64Image, './output/image.png')
  .then(() => console.log('Saved!'))
  .catch(err => console.error(err));

// Auto-detect format
base64ToFileAuto(base64Image, './output', 'my-image')
  .then(result => console.log('Saved:', result))
  .catch(err => console.error(err));

// Batch save
const base64Images = [
  'data:image/png;base64,...',
  'data:image/jpeg;base64,...'
];

saveMultipleBase64Images(base64Images, './output')
  .then(results => console.log('Saved', results.length, 'images'))
  .catch(err => console.error(err));

// Validate Base64 image data
function isValidBase64Image(str) {
  // Check format
  const dataUriRegex = /^data:image\/(png|jpeg|jpg|gif|webp|svg\+xml|bmp);base64,/;
  if (!dataUriRegex.test(str)) {
    return { valid: false, error: 'Invalid data URI format' };
  }

  // Extract Base64 part
  const base64Data = str.split(',')[1];

  // Check if valid Base64
  const base64Regex = /^[A-Za-z0-9+\/]*={0,2}$/;
  if (!base64Regex.test(base64Data)) {
    return { valid: false, error: 'Invalid Base64 encoding' };
  }

  // Check length (must be multiple of 4)
  if (base64Data.length % 4 !== 0) {
    return { valid: false, error: 'Invalid Base64 length' };
  }

  return { valid: true };
}

// Get image info from Base64
function getBase64ImageInfo(base64String) {
  try {
    // Extract MIME type
    const mimeMatch = base64String.match(/^data:(image\/[a-z+]+);base64,/);
    if (!mimeMatch) {
      throw new Error('Invalid format');
    }

    const mimeType = mimeMatch[1];
    const base64Data = base64String.split(',')[1];

    // Calculate size
    const padding = (base64Data.match(/=/g) || []).length;
    const sizeInBytes = (base64Data.length * 3) / 4 - padding;

    // Decode first few bytes to verify image header
    const binaryString = atob(base64Data.substring(0, 100));
    const bytes = new Uint8Array(binaryString.length);
    for (let i = 0; i < binaryString.length; i++) {
      bytes[i] = binaryString.charCodeAt(i);
    }

    // Check file signatures
    const signatures = {
      'PNG': [0x89, 0x50, 0x4E, 0x47],
      'JPEG': [0xFF, 0xD8, 0xFF],
      'GIF': [0x47, 0x49, 0x46],
      'WebP': [0x52, 0x49, 0x46, 0x46]
    };

    let detectedFormat = 'unknown';
    for (const [format, signature] of Object.entries(signatures)) {
      if (signature.every((byte, i) => bytes[i] === byte)) {
        detectedFormat = format;
        break;
      }
    }

    return {
      mimeType,
      format: detectedFormat,
      sizeInBytes,
      sizeInKB: (sizeInBytes / 1024).toFixed(2),
      base64Length: base64Data.length,
      valid: true
    };
  } catch (error) {
    return {
      valid: false,
      error: error.message
    };
  }
}

// Validate with size limit
function validateBase64Image(base64String, maxSizeMB = 5) {
  const validation = isValidBase64Image(base64String);
  if (!validation.valid) {
    return validation;
  }

  const info = getBase64ImageInfo(base64String);
  if (!info.valid) {
    return info;
  }

  const maxSizeBytes = maxSizeMB * 1024 * 1024;
  if (info.sizeInBytes > maxSizeBytes) {
    return {
      valid: false,
      error: `Image too large (${info.sizeInKB}KB > ${maxSizeMB}MB)`
    };
  }

  return { valid: true, info };
}

// Usage
const base64 = 'data:image/png;base64,iVBORw0KGgo...';

const validation = validateBase64Image(base64, 5);
if (validation.valid) {
  console.log('Valid image:', validation.info);
} else {
  console.error('Invalid:', validation.error);
}

<!-- Basic Base64 image -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." alt="Small icon">

<!-- With width/height -->
<img
  src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA..."
  alt="Logo"
  width="100"
  height="50"
>

<!-- With loading attribute -->
<img
  src="data:image/webp;base64,UklGRiQAAABXRUJQ..."
  alt="Optimized image"
  loading="lazy"
>

<!-- In picture element for responsive images -->
<picture>
  <source
    srcset="data:image/webp;base64,UklGR..."
    type="image/webp"
  >
  <source
    srcset="data:image/jpeg;base64,/9j/4AAQ..."
    type="image/jpeg"
  >
  <img
    src="data:image/jpeg;base64,/9j/4AAQ..."
    alt="Fallback"
  >
</picture>

<!-- Using as background with inline style -->
<div style="
  width: 200px;
  height: 200px;
  background-image: url('data:image/png;base64,iVBORw0KGgo...');
  background-size: cover;
"></div>

/* Basic background image */
.icon {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANS...');
  background-size: 24px 24px;
  width: 24px;
  height: 24px;
}

/* Multiple background images */
.header {
  background-image:
    url('data:image/png;base64,iVBORw0KGgo...'), /* overlay */
    url('data:image/jpeg;base64,/9j/4AAQ...'); /* background */
  background-size: cover, contain;
  background-position: center, top;
}

/* Pseudo-elements */
.button::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bW...');
  background-size: contain;
  margin-right: 8px;
}

/* Media queries for responsive Base64 images */
.logo {
  background-image: url('data:image/png;base64,iVBORw0K...'); /* small */
}

@media (min-width: 768px) {
  .logo {
    background-image: url('data:image/png;base64,/9j/4AAQ...'); /* large */
  }
}

/* Dark mode with Base64 */
.icon {
  background-image: url('data:image/png;base64,iVBORw0K...'); /* light */
}

@media (prefers-color-scheme: dark) {
  .icon {
    background-image: url('data:image/png;base64,/9j/4AAQ...'); /* dark */
  }
}

/* SVG as Base64 in CSS */
.arrow {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTEyIDJsLTggOGg2djEwaDR2LTEwaDZsLTggLTh6Ii8+PC9zdmc+');
}

<!-- Method 1: Inline SVG (Best for simple icons) -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2l-8 8h6v10h4v-10h6l-8-8z"/>
</svg>

<!-- Advantages: -->
<!-- - Smallest size (no Base64 overhead) -->
<!-- - Directly editable and styleable with CSS -->
<!-- - Best performance -->

<!-- Method 2: Base64 encoded SVG -->
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTEyIDJsLTggOGg2djEwaDR2LTEwaDZsLTggLTh6Ii8+PC9zdmc+" alt="Arrow">

<!-- Advantages: -->
<!-- - Works as img src -->
<!-- - Self-contained -->

<!-- Method 3: URL-encoded SVG (Better than Base64!) -->
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2l-8 8h6v10h4v-10h6l-8-8z'/%3E%3C/svg%3E" alt="Arrow">

<!-- Advantages: -->
<!-- - Smaller than Base64 (no 33% overhead) -->
<!-- - Human-readable -->
<!-- - Better compression -->

<!-- Recommendation: -->
<!-- For SVG specifically, prefer: -->
<!-- 1. Inline SVG (best) -->
<!-- 2. URL-encoded SVG (good) -->
<!-- 3. External SVG file (good for caching) -->
<!-- 4. Base64 SVG (avoid - worst option) -->

<!-- Responsive images with Base64 -->
<picture>
  <!-- Small screens: small Base64 image -->
  <source
    media="(max-width: 640px)"
    srcset="data:image/jpeg;base64,/9j/4AAQSkZJRg..."
  >

  <!-- Medium screens: medium Base64 image -->
  <source
    media="(max-width: 1024px)"
    srcset="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ..."
  >

  <!-- Large screens: large Base64 image -->
  <img
    src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD..."
    alt="Responsive image"
  >
</picture>

<!-- Using JavaScript for device pixel ratio -->
<script>
function getResponsiveBase64() {
  const dpr = window.devicePixelRatio || 1;
  const width = window.innerWidth;

  // Small image for low DPR and small screens
  if (dpr === 1 && width < 640) {
    return 'data:image/jpeg;base64,/9j/4AAQ...'; // small
  }

  // Medium image
  if (width < 1024) {
    return 'data:image/jpeg;base64,/9j/4AAQSK...'; // medium
  }

  // Large image
  return 'data:image/jpeg;base64,/9j/4AAQSkZJRgAB...'; // large
}

document.getElementById('responsive-img').src = getResponsiveBase64();
</script>

// Analyze Base64 size impact
function analyzeBase64Size(base64String) {
  // Extract Base64 data
  const base64Data = base64String.split(',')[1] || base64String;

  // Calculate sizes
  const base64Length = base64Data.length;
  const padding = (base64Data.match(/=/g) || []).length;
  const originalBytes = (base64Length * 3) / 4 - padding;
  const overhead = base64Length - originalBytes;
  const overheadPercent = ((overhead / originalBytes) * 100).toFixed(2);

  // Estimate gzipped size (rough approximation)
  const estimatedGzippedSize = originalBytes * 1.1; // ~10% overhead with gzip

  return {
    originalSize: formatBytes(originalBytes),
    base64Size: formatBytes(base64Length),
    overhead: formatBytes(overhead),
    overheadPercent: `${overheadPercent}%`,
    estimatedGzipped: formatBytes(estimatedGzippedSize),
    recommendation: getRecommendation(originalBytes)
  };
}

function formatBytes(bytes) {
  if (bytes < 1024) return bytes + ' B';
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
  return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
}

function getRecommendation(bytes) {
  if (bytes < 2048) return '✅ Excellent for Base64';
  if (bytes < 5120) return '✅ Good for Base64';
  if (bytes < 10240) return '⚠️ Use sparingly';
  return '❌ Too large for Base64';
}

// Example usage
const base64Image = 'data:image/png;base64,iVBORw0KGgo...';
const analysis = analyzeBase64Size(base64Image);

console.log('Size Analysis:');
console.log('Original:', analysis.originalSize);
console.log('Base64:', analysis.base64Size);
console.log('Overhead:', analysis.overhead, `(${analysis.overheadPercent})`);
console.log('Gzipped (est):', analysis.estimatedGzipped);
console.log('Recommendation:', analysis.recommendation);

// Performance tips for Base64 images

// 1. Lazy load Base64 images
class LazyBase64Loader {
  constructor() {
    this.observer = new IntersectionObserver(
      (entries) => this.handleIntersection(entries),
      { rootMargin: '50px' }
    );
  }

  observe(element) {
    this.observer.observe(element);
  }

  handleIntersection(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        const base64 = img.dataset.base64;
        if (base64) {
          img.src = base64;
          img.removeAttribute('data-base64');
          this.observer.unobserve(img);
        }
      }
    });
  }
}

// Usage: <img data-base64="data:image/png;base64,..." alt="Lazy loaded">
const loader = new LazyBase64Loader();
document.querySelectorAll('[data-base64]').forEach(img => loader.observe(img));

// 2. Progressive loading with low-quality placeholder
function loadProgressiveImage(container, thumbnailBase64, fullBase64) {
  // Show low-quality thumbnail immediately
  const thumbnail = new Image();
  thumbnail.src = thumbnailBase64;
  thumbnail.style.filter = 'blur(10px)';
  container.appendChild(thumbnail);

  // Load full image in background
  const fullImage = new Image();
  fullImage.onload = () => {
    fullImage.style.opacity = '0';
    container.appendChild(fullImage);

    // Fade in full image
    requestAnimationFrame(() => {
      fullImage.style.transition = 'opacity 0.3s';
      fullImage.style.opacity = '1';
    });

    // Remove thumbnail after transition
    setTimeout(() => thumbnail.remove(), 300);
  };
  fullImage.src = fullBase64;
}

// 3. Cache decoded images
const imageCache = new Map();

function getCachedBase64Image(base64String) {
  if (imageCache.has(base64String)) {
    return imageCache.get(base64String);
  }

  const img = new Image();
  img.src = base64String;
  imageCache.set(base64String, img);
  return img;
}

// 4. Decode off main thread with Web Workers
// worker.js
self.onmessage = function(e) {
  const { base64, id } = e.data;

  // Validate and process
  if (base64.startsWith('data:image/')) {
    self.postMessage({ id, status: 'success', base64 });
  } else {
    self.postMessage({ id, status: 'error', error: 'Invalid format' });
  }
};

// Main thread
const worker = new Worker('worker.js');
worker.onmessage = function(e) {
  const { id, status, base64 } = e.data;
  if (status === 'success') {
    document.getElementById(id).src = base64;
  }
};

// 5. Measure performance impact
function measureBase64Performance(base64String) {
  const start = performance.now();

  const img = new Image();
  img.onload = () => {
    const loadTime = performance.now() - start;
    console.log(`Base64 image loaded in ${loadTime.toFixed(2)}ms`);
  };
  img.src = base64String;
}

// Compress image before Base64 encoding
async function compressAndConvert(file, options = {}) {
  const {
    maxWidth = 1920,
    maxHeight = 1080,
    quality = 0.8,
    outputFormat = 'image/jpeg'
  } = options;

  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.onload = (e) => {
      const img = new Image();

      img.onload = () => {
        // Calculate new dimensions
        let { width, height } = img;

        if (width > maxWidth) {
          height = (height * maxWidth) / width;
          width = maxWidth;
        }

        if (height > maxHeight) {
          width = (width * maxHeight) / height;
          height = maxHeight;
        }

        // Create canvas
        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 Base64 with compression
        const base64 = canvas.toDataURL(outputFormat, quality);

        resolve({
          base64,
          originalSize: file.size,
          compressedSize: Math.round((base64.length * 3) / 4),
          width,
          height
        });
      };

      img.onerror = reject;
      img.src = e.target.result;
    };

    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// Usage
document.getElementById('upload').addEventListener('change', async (e) => {
  const file = e.target.files[0];

  const result = await compressAndConvert(file, {
    maxWidth: 1200,
    quality: 0.85,
    outputFormat: 'image/jpeg'
  });

  console.log('Original:', result.originalSize, 'bytes');
  console.log('Compressed:', result.compressedSize, 'bytes');
  console.log('Reduction:',
    ((1 - result.compressedSize / result.originalSize) * 100).toFixed(2) + '%'
  );

  document.getElementById('preview').src = result.base64;
});

// Browser Image Compression API (if available)
async function compressWithAPI(file) {
  if ('CompressionStream' in window) {
    const stream = file.stream().pipeThrough(
      new CompressionStream('gzip')
    );
    const blob = await new Response(stream).blob();
    return blob;
  }
  return file;
}

// Lazy load Base64 images strategy
class Base64LazyLoader {
  constructor(options = {}) {
    this.threshold = options.threshold || 0.1;
    this.rootMargin = options.rootMargin || '50px';
    this.loadedImages = new Set();

    this.observer = new IntersectionObserver(
      (entries) => this.handleIntersection(entries),
      {
        threshold: this.threshold,
        rootMargin: this.rootMargin
      }
    );
  }

  handleIntersection(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting && !this.loadedImages.has(entry.target)) {
        this.loadImage(entry.target);
      }
    });
  }

  loadImage(element) {
    const base64 = element.dataset.src;
    if (!base64) return;

    // Show loading state
    element.classList.add('loading');

    const img = new Image();
    img.onload = () => {
      element.src = base64;
      element.classList.remove('loading');
      element.classList.add('loaded');
      this.loadedImages.add(element);
      this.observer.unobserve(element);
    };

    img.onerror = () => {
      element.classList.add('error');
      console.error('Failed to load image');
    };

    img.src = base64;
  }

  observe(element) {
    this.observer.observe(element);
  }

  disconnect() {
    this.observer.disconnect();
  }
}

// HTML structure:
// <img data-src="data:image/jpeg;base64,..." alt="Lazy loaded" class="lazy-base64">

// CSS:
/*
.lazy-base64 {
  opacity: 0;
  transition: opacity 0.3s;
}

.lazy-base64.loaded {
  opacity: 1;
}

.lazy-base64.loading {
  background: #f0f0f0;
  min-height: 200px;
}
*/

// Initialize
const lazyLoader = new Base64LazyLoader({
  rootMargin: '100px',
  threshold: 0.01
});

document.querySelectorAll('.lazy-base64').forEach(img => {
  lazyLoader.observe(img);
});

// Webpack configuration for automatic Base64 encoding
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            // Inline images smaller than 8KB as Base64
            maxSize: 8 * 1024
          }
        },
        generator: {
          filename: 'images/[name].[hash][ext]'
        }
      }
    ]
  }
};

// Using url-loader (alternative)
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 8KB
              fallback: 'file-loader',
              name: '[name].[hash].[ext]',
              outputPath: 'images/'
            }
          }
        ]
      }
    ]
  }
};

// With image optimization
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 80
              },
              optipng: {
                enabled: true
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4
              },
              gifsicle: {
                interlaced: false
              },
              webp: {
                quality: 75
              }
            }
          }
        ]
      }
    ]
  }
};

// In your code:
import logo from './logo.png'; // Auto-inlined if < 8KB

function App() {
  return <img src={logo} alt="Logo" />;
}

// Conditionally use Base64 based on context
class SmartImageLoader {
  constructor() {
    this.useBase64 = this.shouldUseBase64();
  }

  shouldUseBase64() {
    // Check connection type
    const connection = navigator.connection || navigator.mozConnection;

    // Don't use Base64 on slow connections
    if (connection) {
      const slowConnections = ['slow-2g', '2g', '3g'];
      if (slowConnections.includes(connection.effectiveType)) {
        return false;
      }

      // Check save-data preference
      if (connection.saveData) {
        return false;
      }
    }

    // Check device memory
    if (navigator.deviceMemory && navigator.deviceMemory < 4) {
      return false; // Low memory device
    }

    // Check if on mobile
    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
    if (isMobile) {
      return false; // Prefer external images on mobile
    }

    return true;
  }

  loadImage(element, base64Src, externalSrc) {
    if (this.useBase64 && base64Src) {
      element.src = base64Src;
    } else {
      element.src = externalSrc;
    }
  }
}

// Usage
const loader = new SmartImageLoader();

document.querySelectorAll('[data-base64-src]').forEach(img => {
  loader.loadImage(
    img,
    img.dataset.base64Src,  // Base64 version
    img.dataset.externalSrc // External file version
  );
});

// Prefers-reduced-data media query
function loadBasedOnDataPreference() {
  const prefersReducedData = window.matchMedia(
    '(prefers-reduced-data: reduce)'
  ).matches;

  return prefersReducedData ? 'external' : 'base64';
}

// Network-aware loading
async function networkAwareLoad(base64Src, externalSrc) {
  // Check if online
  if (!navigator.onLine) {
    return base64Src; // Use Base64 when offline
  }

  // Measure connection speed
  const connection = navigator.connection;
  if (connection && connection.downlink < 1) {
    return externalSrc; // Use external on slow connection
  }

  return base64Src;
}

<!-- Content Security Policy for Data URIs -->

<!-- Strict CSP: Block all data URIs -->
<meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; img-src 'self' https:;">

<!-- Allow data URIs for images only -->
<meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; img-src 'self' data: https:;">

<!-- Allow data URIs for images and fonts -->
<meta http-equiv="Content-Security-Policy"
      content="default-src 'self';
               img-src 'self' data: https:;
               font-src 'self' data:;">

<!-- Server-side CSP header (recommended) -->
<!--
Content-Security-Policy:
  default-src 'self';
  img-src 'self' data: https:;
  style-src 'self' 'unsafe-inline';
  script-src 'self';
-->

<!-- Testing CSP with report-only mode -->
<meta http-equiv="Content-Security-Policy-Report-Only"
      content="default-src 'self';
               img-src 'self' data:;
               report-uri /csp-violation-report;">

<!--
Security Considerations:
1. data: in img-src allows Base64 images
2. data: in style-src allows Base64 in CSS (risky!)
3. data: in script-src is dangerous (allows inline scripts)
4. Never use data: in script-src or object-src
5. Be specific: Use data: only where needed
-->

// Prevent XSS attacks with Base64 images
function sanitizeBase64Image(base64String) {
  // 1. Validate data URI format
  const dataUriRegex = /^data:image\/(png|jpeg|jpg|gif|webp|svg\+xml|bmp);base64,/;
  if (!dataUriRegex.test(base64String)) {
    throw new Error('Invalid data URI format');
  }

  // 2. Extract and validate MIME type
  const mimeMatch = base64String.match(/^data:(image\/[a-z+]+);base64,/);
  const allowedMimeTypes = [
    'image/png',
    'image/jpeg',
    'image/jpg',
    'image/gif',
    'image/webp',
    'image/svg+xml',
    'image/bmp'
  ];

  if (!mimeMatch || !allowedMimeTypes.includes(mimeMatch[1])) {
    throw new Error('Invalid or disallowed MIME type');
  }

  // 3. Validate Base64 format
  const base64Data = base64String.split(',')[1];
  const base64Regex = /^[A-Za-z0-9+\/]*={0,2}$/;

  if (!base64Regex.test(base64Data)) {
    throw new Error('Invalid Base64 encoding');
  }

  // 4. Check for SVG and sanitize if present
  const mimeType = mimeMatch[1];
  if (mimeType === 'image/svg+xml') {
    return sanitizeSvgBase64(base64String);
  }

  return base64String;
}

function sanitizeSvgBase64(base64String) {
  try {
    // Decode SVG
    const base64Data = base64String.split(',')[1];
    const svgString = atob(base64Data);

    // Remove dangerous elements and attributes
    const dangerousPatterns = [
      /<script[^>]*>.*?<\/script>/gi,
      /on\w+\s*=\s*["'][^"']*["']/gi, // Event handlers
      /javascript:/gi,
      /<iframe/gi,
      /<object/gi,
      /<embed/gi
    ];

    let sanitized = svgString;
    dangerousPatterns.forEach(pattern => {
      sanitized = sanitized.replace(pattern, '');
    });

    // Re-encode
    const cleanBase64 = btoa(sanitized);
    return `data:image/svg+xml;base64,${cleanBase64}`;
  } catch (error) {
    throw new Error('Failed to sanitize SVG');
  }
}

// Usage with error handling
function safeDisplayBase64(base64String, elementId) {
  try {
    const sanitized = sanitizeBase64Image(base64String);
    document.getElementById(elementId).src = sanitized;
  } catch (error) {
    console.error('XSS prevention:', error);
    // Display error placeholder or default image
    document.getElementById(elementId).src = '/images/error.png';
  }
}

// DOMPurify for comprehensive sanitization
function sanitizeWithDOMPurify(base64String) {
  // Requires DOMPurify library
  if (typeof DOMPurify !== 'undefined') {
    return DOMPurify.sanitize(base64String, {
      ALLOWED_URI_REGEXP: /^data:image\/(png|jpeg|jpg|gif|webp);base64,/
    });
  }
  return sanitizeBase64Image(base64String);
}

// Comprehensive file validation
async function validateImageFile(file) {
  const errors = [];

  // 1. Check file type
  const allowedTypes = [
    'image/jpeg',
    'image/jpg',
    'image/png',
    'image/gif',
    'image/webp',
    'image/svg+xml'
  ];

  if (!allowedTypes.includes(file.type)) {
    errors.push(`Invalid file type: ${file.type}`);
  }

  // 2. Check file extension
  const allowedExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg'];
  const extension = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();

  if (!allowedExtensions.includes(extension)) {
    errors.push(`Invalid file extension: ${extension}`);
  }

  // 3. Check file size
  const maxSize = 5 * 1024 * 1024; // 5MB
  if (file.size > maxSize) {
    errors.push(`File too large: ${(file.size / 1024 / 1024).toFixed(2)}MB (max 5MB)`);
  }

  // 4. Verify file signature (magic bytes)
  try {
    const isValid = await verifyFileSignature(file);
    if (!isValid) {
      errors.push('File signature does not match declared type');
    }
  } catch (error) {
    errors.push('Failed to verify file signature');
  }

  return {
    valid: errors.length === 0,
    errors
  };
}

async function verifyFileSignature(file) {
  return new Promise((resolve) => {
    const reader = new FileReader();

    reader.onload = (e) => {
      const arr = new Uint8Array(e.target.result).subarray(0, 4);
      let header = '';
      for (let i = 0; i < arr.length; i++) {
        header += arr[i].toString(16).padStart(2, '0');
      }

      // Check magic bytes
      const signatures = {
        '89504e47': 'image/png',
        'ffd8ffe0': 'image/jpeg',
        'ffd8ffe1': 'image/jpeg',
        'ffd8ffe2': 'image/jpeg',
        '47494638': 'image/gif',
        '52494646': 'image/webp' // First 4 bytes of RIFF
      };

      const detected = signatures[header.substring(0, 8)];
      resolve(detected === file.type ||
              (detected === 'image/jpeg' && file.type === 'image/jpg'));
    };

    reader.onerror = () => resolve(false);
    reader.readAsArrayBuffer(file.slice(0, 4));
  });
}

// Usage
document.getElementById('upload').addEventListener('change', async (e) => {
  const file = e.target.files[0];

  if (file) {
    const validation = await validateImageFile(file);

    if (validation.valid) {
      console.log('File is valid, proceeding with upload');
      // Convert to Base64
    } else {
      console.error('Validation errors:', validation.errors);
      alert('Invalid file:\n' + validation.errors.join('\n'));
    }
  }
});

// Implement size limits for Base64 images
class ImageSizeLimiter {
  constructor(options = {}) {
    this.maxFileSize = options.maxFileSize || 5 * 1024 * 1024; // 5MB
    this.maxBase64Size = options.maxBase64Size || 7 * 1024 * 1024; // ~7MB Base64
    this.maxWidth = options.maxWidth || 4096;
    this.maxHeight = options.maxHeight || 4096;
  }

  async validate(file) {
    const errors = [];

    // Check file size
    if (file.size > this.maxFileSize) {
      errors.push(`File size ${this.formatBytes(file.size)} exceeds limit of ${this.formatBytes(this.maxFileSize)}`);
    }

    // Check dimensions
    try {
      const dimensions = await this.getImageDimensions(file);

      if (dimensions.width > this.maxWidth) {
        errors.push(`Image width ${dimensions.width}px exceeds limit of ${this.maxWidth}px`);
      }

      if (dimensions.height > this.maxHeight) {
        errors.push(`Image height ${dimensions.height}px exceeds limit of ${this.maxHeight}px`);
      }
    } catch (error) {
      errors.push('Failed to read image dimensions');
    }

    // Estimate Base64 size
    const estimatedBase64Size = Math.ceil(file.size * 1.37); // ~33% overhead + prefix
    if (estimatedBase64Size > this.maxBase64Size) {
      errors.push(`Estimated Base64 size exceeds limit`);
    }

    return {
      valid: errors.length === 0,
      errors,
      fileSize: file.size,
      estimatedBase64Size
    };
  }

  getImageDimensions(file) {
    return new Promise((resolve, reject) => {
      const img = new Image();
      const url = URL.createObjectURL(file);

      img.onload = () => {
        URL.revokeObjectURL(url);
        resolve({
          width: img.naturalWidth,
          height: img.naturalHeight
        });
      };

      img.onerror = () => {
        URL.revokeObjectURL(url);
        reject(new Error('Failed to load image'));
      };

      img.src = url;
    });
  }

  formatBytes(bytes) {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
    return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
  }
}

// Server-side validation (Node.js)
const sharp = require('sharp');

async function validateImageServer(buffer, options = {}) {
  const maxSize = options.maxSize || 5 * 1024 * 1024;
  const maxWidth = options.maxWidth || 4096;
  const maxHeight = options.maxHeight || 4096;

  // Check buffer size
  if (buffer.length > maxSize) {
    throw new Error(`File too large: ${buffer.length} bytes`);
  }

  // Get metadata
  const metadata = await sharp(buffer).metadata();

  // Check dimensions
  if (metadata.width > maxWidth || metadata.height > maxHeight) {
    throw new Error(`Image too large: ${metadata.width}x${metadata.height}`);
  }

  // Verify format
  const allowedFormats = ['jpeg', 'png', 'gif', 'webp'];
  if (!allowedFormats.includes(metadata.format)) {
    throw new Error(`Invalid format: ${metadata.format}`);
  }

  return {
    valid: true,
    width: metadata.width,
    height: metadata.height,
    format: metadata.format,
    size: buffer.length
  };
}

// Decision tree for using Base64 images
function shouldUseBase64(imageInfo) {
  const {
    sizeInBytes,
    usage, // 'icon', 'logo', 'photo', 'background', etc.
    updateFrequency, // 'never', 'rarely', 'often'
    needsSEO,
    isAboveFold,
    deviceType // 'mobile', 'desktop'
  } = imageInfo;

  // Decision tree

  // 1. Size check (most important)
  if (sizeInBytes > 10 * 1024) {
    return {
      useBase64: false,
      reason: 'Image too large (> 10KB)'
    };
  }

  // 2. SEO requirement
  if (needsSEO) {
    return {
      useBase64: false,
      reason: 'SEO images should be external files'
    };
  }

  // 3. Update frequency
  if (updateFrequency === 'often') {
    return {
      useBase64: false,
      reason: 'Frequently updated images should be external (better caching)'
    };
  }

  // 4. Mobile device check
  if (deviceType === 'mobile' && sizeInBytes > 5 * 1024) {
    return {
      useBase64: false,
      reason: 'Large images on mobile should be external'
    };
  }

  // 5. Small icons and logos
  if ((usage === 'icon' || usage === 'logo') && sizeInBytes < 5 * 1024) {
    return {
      useBase64: true,
      reason: 'Small icons/logos are ideal for Base64'
    };
  }

  // 6. Above-the-fold images
  if (isAboveFold && sizeInBytes < 5 * 1024) {
    return {
      useBase64: true,
      reason: 'Small above-fold images prevent layout shift'
    };
  }

  // 7. Background patterns
  if (usage === 'background' && sizeInBytes < 2 * 1024) {
    return {
      useBase64: true,
      reason: 'Tiny background patterns work well as Base64'
    };
  }

  // Default: use external files
  return {
    useBase64: false,
    reason: 'External files provide better caching and performance'
  };
}

// Usage examples
const icon = shouldUseBase64({
  sizeInBytes: 2048,
  usage: 'icon',
  updateFrequency: 'never',
  needsSEO: false,
  isAboveFold: true,
  deviceType: 'desktop'
});
console.log('Icon:', icon); // useBase64: true

const photo = shouldUseBase64({
  sizeInBytes: 50 * 1024,
  usage: 'photo',
  updateFrequency: 'rarely',
  needsSEO: true,
  isAboveFold: true,
  deviceType: 'desktop'
});
console.log('Photo:', photo); // useBase64: false

<!-- Base64 images work identically to external images for accessibility -->

<!-- Good: Base64 with proper alt text -->
<img
  src="data:image/png;base64,iVBORw0KGgo..."
  alt="Company logo - Tech Solutions Inc"
  role="img"
>

<!-- Good: Decorative image -->
<img
  src="data:image/png;base64,iVBORw0KGgo..."
  alt=""
  role="presentation"
  aria-hidden="true"
>

<!-- Good: Complex image with aria-describedby -->
<img
  src="data:image/jpeg;base64,/9j/4AAQ..."
  alt="Sales chart"
  aria-describedby="chart-description"
>
<div id="chart-description" class="sr-only">
  Bar chart showing sales increased 25% from Q1 to Q2
</div>

<!-- Good: Figure with caption -->
<figure>
  <img
    src="data:image/png;base64,iVBORw0KGgo..."
    alt="Screenshot of new dashboard interface"
  >
  <figcaption>
    New dashboard interface launched in version 2.0
  </figcaption>
</figure>

<!-- Good: Icon with accessible text -->
<button>
  <img
    src="data:image/svg+xml;base64,PHN2Zy..."
    alt=""
    aria-hidden="true"
  >
  <span>Delete item</span>
</button>

<!-- Good: Icon-only button -->
<button aria-label="Close dialog">
  <img
    src="data:image/png;base64,iVBORw0KGgo..."
    alt="Close"
  >
</button>

<!-- CSS: Screen reader only text -->
<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

<!-- Best Practices: -->
<!-- 1. Always provide alt text for content images -->
<!-- 2. Use alt="" for decorative images -->
<!-- 3. Ensure sufficient color contrast -->
<!-- 4. Provide text alternatives for complex images -->
<!-- 5. Test with screen readers -->