Image to Base64 Converter (Online Encoder & Decoder)

// Server Component with Base64 Optimization
import { encodeBase64, optimizeImage } from '@lib/image-utils';

export async function ProductImage({ imageUrl }: { imageUrl: string }) {
  // Edge runtime optimization
  const response = await fetch(imageUrl, { 
    cache: 'force-cache',
    next: { revalidate: 3600 }
  });
  
  const buffer = await response.arrayBuffer();
  const optimized = await optimizeImage(buffer); // WebP conversion
  const base64 = encodeBase64(optimized);
  
  return (
    <Image
      src={`data:image/webp;base64,${base64}`}
      alt="Product"
      fill
      priority
      className="object-cover"
      sizes="(max-width: 768px) 100vw, 50vw"
    />
  );
}

# FastAPI endpoint with Base64 image processing
from fastapi import FastAPI, UploadFile
from pydantic import BaseModel
import base64
import io
from PIL import Image
import cv2  # OpenCV for AI preprocessing

app = FastAPI()

class Base64Response(BaseModel):
    base64: str
    width: int
    height: int
    format: str
    size_kb: float

@app.post("/api/v1/encode", response_model=Base64Response)
async def encode_image(
    file: UploadFile,
    optimize: bool = True,
    target_format: str = "webp"
):
    """Encode image with optional AI preprocessing"""
    contents = await file.read()
    
    # AI-powered optimization pipeline
    if optimize:
        img = Image.open(io.BytesIO(contents))
        # Apply modern compression
        if target_format == "webp":
            img = img.convert("RGB")
            output = io.BytesIO()
            img.save(output, format="WEBP", quality=85, method=6)
            contents = output.getvalue()
    
    # Base64 encoding with metadata
    encoded = base64.b64encode(contents).decode('ascii')
    
    return Base64Response(
        base64=f"data:image/{target_format};base64,{encoded}",
        width=img.width,
        height=img.height,
        format=target_format,
        size_kb=len(contents) / 1024
    )

// WebAssembly module for edge processing
use wasm_bindgen::prelude::*;
use base64::{engine::general_purpose, Engine as _};
use image::{ImageFormat, imageops::FilterType};

#[wasm_bindgen]
pub struct ImageProcessor {
    width: u32,
    height: u32,
    format: String,
}

#[wasm_bindgen]
impl ImageProcessor {
    #[wasm_bindgen(constructor)]
    pub fn new() -> Self {
        ImageProcessor {
            width: 0,
            height: 0,
            format: String::new(),
        }
    }

    #[wasm_bindgen]
    pub fn encode_to_base64(
        &mut self,
        buffer: &[u8],
        target_width: u32,
        target_height: u32,
        quality: u8,
    ) -> String {
        // High-performance image processing
        let img = image::load_from_memory(buffer).unwrap();
        let resized = img.resize(target_width, target_height, FilterType::Lanczos3);
        
        let mut output = Vec::new();
        resized.write_to(
            &mut std::io::Cursor::new(&mut output),
            ImageFormat::WebP
        ).unwrap();
        
        self.width = resized.width();
        self.height = resized.height();
        self.format = "webp".to_string();
        
        general_purpose::STANDARD.encode(&output)
    }
}