gotodev-image-optimizer 0.1.0

package/src/core/analyzer.ts

@@ -0,0 +1,189 @@
+import sharp from 'sharp'
+import { computeCenterWeight, computeEdgeDensity, computeEntropy } from '../utils/entropy.ts'
+import type { TileAnalysis, TileQuality } from './types.ts'
+
+export interface AnalysisResult {
+  tiles: TileAnalysis[]
+  tileQualities: TileQuality[]
+  overallImportance: number
+  tileSize: number
+  width: number
+  height: number
+}
+
+function computeSkinRatio(pixels: Uint8Array, width: number, height: number): number {
+  let skin = 0
+  const total = width * height
+
+  for (let i = 0; i < total; i++) {
+    const r = pixels[i * 3] ?? 0
+    const g = pixels[i * 3 + 1] ?? 0
+    const b = pixels[i * 3 + 2] ?? 0
+
+    const cr = (r - 128) * 0.713 + (g - 128) * -0.287 + (b - 128) * -0.426 + 128
+    const cb = (r - 128) * -0.169 + (g - 128) * -0.331 + (b - 128) * 0.5 + 128
+
+    if (cr >= 133 && cr <= 173 && cb >= 77 && cb <= 127) {
+      skin++
+    }
+  }
+
+  return total > 0 ? skin / total : 0
+}
+
+export async function analyzeImage(
+  imagePath: string,
+  tileSize = 64,
+  detectFaces = false,
+): Promise<AnalysisResult> {
+  const metadata = await sharp(imagePath).metadata()
+  const width = metadata.width ?? 0
+  const height = metadata.height ?? 0
+
+  if (width === 0 || height === 0) {
+    throw new Error('Could not read image dimensions')
+  }
+
+  const tilesX = Math.ceil(width / tileSize)
+  const tilesY = Math.ceil(height / tileSize)
+  const tiles: TileAnalysis[] = []
+
+  let totalImportance = 0
+
+  for (let ty = 0; ty < tilesY; ty++) {
+    for (let tx = 0; tx < tilesX; tx++) {
+      const left = tx * tileSize
+      const top = ty * tileSize
+      const tileW = Math.min(tileSize, width - left)
+      const tileH = Math.min(tileSize, height - top)
+
+      const buffer = await sharp(imagePath)
+        .extract({ left, top, width: tileW, height: tileH })
+        .raw()
+        .toBuffer()
+
+      const raw = new Uint8Array(buffer)
+      const pixelCount = tileW * tileH
+      const gray = new Uint8Array(pixelCount)
+
+      for (let i = 0; i < pixelCount; i++) {
+        const r = raw[i * 3] ?? 0
+        const g = raw[i * 3 + 1] ?? 0
+        const b = raw[i * 3 + 2] ?? 0
+        gray[i] = Math.round(r * 0.299 + g * 0.587 + b * 0.114)
+      }
+
+      const entropy = computeEntropy(gray)
+      const edgeDensity = computeEdgeDensity(gray, tileW, tileH)
+      const centerWeight = computeCenterWeight(tx, ty, tilesX, tilesY)
+
+      const normalizedEntropy = entropy / 8.0
+      let importance = Math.min(1, normalizedEntropy * 0.4 + edgeDensity * 0.6)
+
+      if (detectFaces && importance < 0.9) {
+        const skinRatio = computeSkinRatio(raw, tileW, tileH)
+        if (skinRatio > 0.05) {
+          importance = Math.min(1, importance + 0.3)
+        }
+      }
+
+      tiles.push({
+        x: tx,
+        y: ty,
+        entropy,
+        edgeDensity,
+        importance,
+        centerWeight,
+      })
+
+      totalImportance += importance
+    }
+  }
+
+  const tileQualities = computeTileQualities(tiles)
+
+  return {
+    tiles,
+    tileQualities,
+    overallImportance: tiles.length > 0 ? totalImportance / tiles.length : 0,
+    tileSize,
+    width,
+    height,
+  }
+}
+
+function computeTileQualities(tiles: TileAnalysis[]): TileQuality[] {
+  const tileQualities: TileQuality[] = []
+
+  for (const tile of tiles) {
+    let importance = tile.importance
+
+    // Edge-density bonus: protect text and fine details
+    if (tile.edgeDensity > 0.3) {
+      const bonus = Math.min(0.2, (tile.edgeDensity - 0.3) * 0.5)
+      importance = Math.min(1, importance + bonus)
+    }
+
+    // Center-weight bonus: photo subjects tend to be centered
+    if (tile.centerWeight > 0.7) {
+      importance = Math.min(1, importance + (tile.centerWeight - 0.7) * 0.3)
+    }
+
+    tileQualities.push({
+      x: tile.x,
+      y: tile.y,
+      saliency: importance,
+      quality: 0,
+      weight: importance ** 2 + 0.1,
+    })
+  }
+
+  return tileQualities
+}
+
+export function computeTargetQuality(
+  analysis: AnalysisResult,
+  baseQuality = 80,
+  options?: {
+    minQuality?: number
+    maxQuality?: number
+  },
+): number {
+  if (analysis.tiles.length === 0) return baseQuality
+
+  const minQuality = options?.minQuality ?? Math.max(20, baseQuality - 30)
+  const maxQuality = options?.maxQuality ?? Math.min(95, baseQuality + 10)
+
+  const tileQualities = analysis.tileQualities
+
+  // Compute per-tile quality and weight
+  const weighted = tileQualities.map((tq) => ({
+    quality: minQuality + tq.saliency * (maxQuality - minQuality),
+    weight: tq.weight,
+  }))
+
+  // Sort by quality descending
+  weighted.sort((a, b) => b.quality - a.quality)
+
+  // Top 30% tiles get 70% weight — prioritizes important content
+  const splitIndex = Math.max(1, Math.ceil(weighted.length * 0.3))
+  const highPriority = weighted.slice(0, splitIndex)
+  const lowPriority = weighted.slice(splitIndex)
+
+  const highW = highPriority.reduce((s, t) => s + t.weight, 0)
+  const lowW = lowPriority.reduce((s, t) => s + t.weight, 0)
+
+  const highAvg = highPriority.reduce((s, t) => s + t.quality * t.weight, 0) / (highW || 1)
+  const lowAvg = lowPriority.reduce((s, t) => s + t.quality * t.weight, 0) / (lowW || 1)
+
+  const weightedQuality = highAvg * 0.7 + lowAvg * 0.3
+
+  // Variance boost: high variance = mixed content → protect detail
+  const qualities = weighted.map((t) => t.quality)
+  const mean = qualities.reduce((s, q) => s + q, 0) / qualities.length
+  const variance = qualities.reduce((s, q) => s + (q - mean) ** 2, 0) / qualities.length
+  const stdDev = Math.sqrt(variance)
+  const varianceBoost = stdDev > 12 ? Math.min(5, stdDev * 0.12) : 0
+
+  return Math.round(Math.min(maxQuality, Math.max(minQuality, weightedQuality + varianceBoost)))
+}

package/src/core/encoder.ts

@@ -0,0 +1,244 @@
+import { readFileSync } from 'node:fs'
+import sharp from 'sharp'
+import { contentHash, sriHash } from '../utils/hash.ts'
+import type { AnalysisResult } from './analyzer.ts'
+import { analyzeImage, computeTargetQuality } from './analyzer.ts'
+import { isAnimatedFormat } from './formats.ts'
+import { preprocessImage } from './preprocessor.ts'
+import { sanitizeSvg } from './sanitizer.ts'
+import { autoTuneQuality } from './tuner.ts'
+import type { ImageVariant, ManifestEntry, OutputFormat, QualityTier, TierConfig } from './types.ts'
+import {
+  validateFileSize,
+  validateImageContent,
+  validateOutputFormat,
+  validatePath,
+} from './validator.ts'
+
+export interface EncodeOptions {
+  widths: number[]
+  formats: OutputFormat[]
+  tiers: Record<QualityTier, TierConfig>
+  autoTune: boolean
+  adaptive: boolean
+  preprocess: boolean
+  faceDetection: boolean
+  outDir: string
+}
+
+export interface EncodeResult {
+  entries: Record<string, ManifestEntry>
+}
+
+function readFileSafe(filePath: string): Buffer {
+  validatePath(filePath)
+  const buffer = readFileSync(filePath)
+  validateFileSize(buffer.length)
+  return buffer
+}
+
+async function encodeVariant(
+  source: string | Buffer,
+  width: number,
+  format: OutputFormat,
+  quality: number,
+  outDir: string,
+): Promise<ImageVariant | null> {
+  try {
+    validateOutputFormat(format)
+
+    const img = typeof source === 'string' ? sharp(source) : sharp(source)
+    const metadata = await img.metadata()
+
+    if ((metadata.width ?? 0) <= width) {
+      const buffer = await img[format]({ quality }).toBuffer()
+      const hash = contentHash(buffer)
+      const ext = format === 'jpeg' ? 'jpg' : format
+      const filename = `${hash}-${width}.${ext}`
+      const outPath = `${outDir}/${filename}`
+
+      await sharp(buffer).toFile(outPath)
+
+      return {
+        src: filename,
+        width,
+        format,
+        size: buffer.length,
+        integrity: sriHash(buffer),
+      }
+    }
+
+    const resized =
+      typeof source === 'string'
+        ? await sharp(source).resize(width).toBuffer()
+        : await sharp(source).resize(width).toBuffer()
+    const encoded = await sharp(resized)[format]({ quality }).toBuffer()
+    const hash = contentHash(encoded)
+    const ext = format === 'jpeg' ? 'jpg' : format
+    const filename = `${hash}-${width}.${ext}`
+    const outPath = `${outDir}/${filename}`
+
+    await sharp(encoded).toFile(outPath)
+
+    return {
+      src: filename,
+      width,
+      format,
+      size: encoded.length,
+      integrity: sriHash(encoded),
+    }
+  } catch {
+    return null
+  }
+}
+
+export async function encodeImage(
+  imagePath: string,
+  options: EncodeOptions,
+): Promise<ManifestEntry> {
+  const buffer = readFileSafe(imagePath)
+  const ext = imagePath.split('.').pop() ?? 'jpg'
+  const format = validateImageContent(buffer, ext)
+
+  if (format === 'svg') {
+    const content = buffer.toString('utf-8')
+    const sanitized = sanitizeSvg(content)
+    const hash = contentHash(Buffer.from(sanitized))
+    const filename = `${hash}.svg`
+    const svgBuffer = Buffer.from(sanitized)
+
+    return {
+      src: filename,
+      width: 0,
+      height: 0,
+      format: 'svg',
+      placeholder: '',
+      tiers: {} as Record<QualityTier, string>,
+      variants: [
+        {
+          src: filename,
+          width: 0,
+          format: 'webp',
+          size: svgBuffer.length,
+          integrity: sriHash(svgBuffer),
+        },
+      ],
+    }
+  }
+
+  if (isAnimatedFormat(format)) {
+    const img = sharp(buffer, { animated: true })
+    const metadata = await img.metadata()
+    const width = metadata.width ?? 0
+    const height = metadata.height ?? 0
+
+    const webpBuffer = await img.webp({ quality: 75 }).toBuffer()
+    const hash = contentHash(webpBuffer)
+    const filename = `${hash}.webp`
+
+    return {
+      src: filename,
+      width,
+      height,
+      format: 'gif',
+      placeholder: '',
+      tiers: {} as Record<QualityTier, string>,
+      variants: [
+        {
+          src: filename,
+          width,
+          format: 'webp',
+          size: webpBuffer.length,
+          integrity: sriHash(webpBuffer),
+        },
+      ],
+    }
+  }
+
+  const metadata = await sharp(buffer).metadata()
+  const originalWidth = metadata.width ?? 0
+  const originalHeight = metadata.height ?? 0
+
+  let placeholder = ''
+  if (originalWidth > 0 && originalHeight > 0) {
+    const placeholderBuffer = await sharp(buffer)
+      .resize(32, 32, { fit: 'inside' })
+      .webp({ quality: 20 })
+      .toBuffer()
+    placeholder = `data:image/webp;base64,${placeholderBuffer.toString('base64')}`
+  }
+
+  const tiers: Partial<Record<QualityTier, string>> = {}
+  const variants: ImageVariant[] = []
+
+  let analysis: AnalysisResult | null = null
+  let preprocessedSource: Buffer | null = null
+
+  if (options.adaptive || options.preprocess) {
+    try {
+      analysis = await analyzeImage(imagePath, 64, options.faceDetection)
+    } catch {}
+  }
+
+  if (options.preprocess && analysis) {
+    try {
+      preprocessedSource = await preprocessImage(imagePath, analysis)
+    } catch {}
+  }
+
+  const source = preprocessedSource ?? imagePath
+
+  for (const [tierKey, tierConfig] of Object.entries(options.tiers)) {
+    const tier = tierKey as QualityTier
+    let quality = tierConfig.quality
+
+    if (options.adaptive && analysis) {
+      try {
+        quality = computeTargetQuality(analysis, quality, {
+          minQuality: Math.max(20, quality - 30),
+          maxQuality: Math.min(95, quality + 10),
+        })
+      } catch {}
+    }
+
+    if (options.autoTune) {
+      try {
+        const tuned = await autoTuneQuality(source, 'webp', {
+          threshold: 0.97,
+          minQuality: Math.max(40, quality - 10),
+          maxQuality: Math.min(95, quality + 5),
+        })
+        quality = tuned.quality
+      } catch {}
+    }
+
+    const widths = tierConfig.widths.filter((w) => w <= originalWidth)
+    if (widths.length === 0) {
+      widths.push(originalWidth)
+    }
+
+    for (const w of widths) {
+      for (const fmt of options.formats) {
+        const variant = await encodeVariant(source, w, fmt, quality, options.outDir)
+        if (variant) {
+          variants.push(variant)
+        }
+      }
+    }
+
+    const bestVariant = variants.find((v) => v.format === 'webp')
+    if (bestVariant) {
+      tiers[tier] = bestVariant.src
+    }
+  }
+
+  return {
+    src: imagePath.split('/').pop() ?? 'image',
+    width: originalWidth,
+    height: originalHeight,
+    format,
+    placeholder,
+    tiers: tiers as Record<QualityTier, string>,
+    variants,
+  }
+}

package/src/core/formats.ts

@@ -0,0 +1,97 @@
+import type { ImageFormat, OutputFormat } from './types.ts'
+
+const MAGIC_BYTES: Record<string, Uint8Array> = {
+  jpeg: new Uint8Array([0xff, 0xd8, 0xff]),
+  png: new Uint8Array([0x89, 0x50, 0x4e, 0x47]),
+  webp: new Uint8Array([0x52, 0x49, 0x46, 0x46]),
+  gif: new Uint8Array([0x47, 0x49, 0x46, 0x38]),
+  bmp: new Uint8Array([0x42, 0x4d]),
+  tiff: new Uint8Array([0x49, 0x49, 0x2a, 0x00]),
+  ico: new Uint8Array([0x00, 0x00, 0x01, 0x00]),
+  svg: new Uint8Array([0x3c]), // '<'
+}
+
+const EXTENSION_MAP: Record<string, ImageFormat> = {
+  jpg: 'jpeg',
+  jpeg: 'jpeg',
+  png: 'png',
+  webp: 'webp',
+  avif: 'avif',
+  gif: 'gif',
+  svg: 'svg',
+  bmp: 'bmp',
+  tiff: 'tiff',
+  tif: 'tiff',
+  ico: 'ico',
+}
+
+export function detectFormat(buffer: Uint8Array, extension: string): ImageFormat {
+  const extFormat = EXTENSION_MAP[extension.toLowerCase()]
+  if (extFormat === 'svg') return 'svg'
+
+  for (const [format, magic] of Object.entries(MAGIC_BYTES)) {
+    if (buffer.length >= magic.length) {
+      let match = true
+      for (let i = 0; i < magic.length; i++) {
+        if (buffer[i] !== magic[i]) {
+          match = false
+          break
+        }
+      }
+      if (match) {
+        if (format === 'webp') {
+          const riffType = new TextDecoder().decode(buffer.slice(8, 12))
+          if (riffType === 'WEBP') return 'webp'
+          continue
+        }
+        return format as ImageFormat
+      }
+    }
+  }
+
+  return extFormat ?? 'jpeg'
+}
+
+export function getExtension(format: ImageFormat): string {
+  const map: Record<ImageFormat, string> = {
+    jpeg: 'jpg',
+    png: 'png',
+    webp: 'webp',
+    avif: 'avif',
+    gif: 'gif',
+    svg: 'svg',
+    bmp: 'bmp',
+    tiff: 'tiff',
+    ico: 'ico',
+  }
+  return map[format]
+}
+
+export function getMimeType(format: ImageFormat | OutputFormat): string {
+  const map: Record<string, string> = {
+    jpeg: 'image/jpeg',
+    png: 'image/png',
+    webp: 'image/webp',
+    avif: 'image/avif',
+    gif: 'image/gif',
+    svg: 'image/svg+xml',
+    bmp: 'image/bmp',
+    tiff: 'image/tiff',
+    ico: 'image/x-icon',
+  }
+  return map[format] ?? 'application/octet-stream'
+}
+
+export function isRasterFormat(format: ImageFormat): boolean {
+  return format !== 'svg'
+}
+
+export function isAnimatedFormat(format: ImageFormat): boolean {
+  return format === 'gif'
+}
+
+export function outputFormatsFrom(format: ImageFormat): OutputFormat[] {
+  if (format === 'svg') return []
+  if (format === 'gif') return ['webp', 'jpeg']
+  return ['avif', 'webp', 'jpeg']
+}

package/src/core/manifest.ts

@@ -0,0 +1,38 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs'
+import { dirname } from 'node:path'
+import type { BuildManifest, ManifestEntry } from './types.ts'
+
+const MANIFEST_VERSION = '1.0.0'
+
+export function createManifest(): BuildManifest {
+  return {
+    version: MANIFEST_VERSION,
+    generatedAt: new Date().toISOString(),
+    entries: {},
+  }
+}
+
+export function addToManifest(manifest: BuildManifest, key: string, entry: ManifestEntry): void {
+  manifest.entries[key] = entry
+}
+
+export function writeManifest(manifest: BuildManifest, outPath: string): void {
+  const dir = dirname(outPath)
+  if (!existsSync(dir)) {
+    mkdirSync(dir, { recursive: true })
+  }
+  writeFileSync(outPath, JSON.stringify(manifest, null, 2))
+}
+
+export function loadManifest(manifestPath: string): BuildManifest | null {
+  try {
+    const content = readFileSafe(manifestPath)
+    return JSON.parse(content) as BuildManifest
+  } catch {
+    return null
+  }
+}
+
+function readFileSafe(path: string): string {
+  return readFileSync(path, 'utf-8')
+}

package/src/core/preprocessor.ts

@@ -0,0 +1,58 @@
+import sharp from 'sharp'
+import type { AnalysisResult } from './analyzer.ts'
+
+const OVERLAP_PX = 8
+
+export async function preprocessImage(
+  imagePath: string,
+  analysis: AnalysisResult,
+): Promise<Buffer> {
+  const { width, height, tileSize, tiles } = analysis
+
+  const sorted = [...tiles].sort((a, b) => b.importance - a.importance)
+  const topCount = Math.max(1, Math.ceil(sorted.length * 0.2))
+  const importantTiles = sorted.slice(0, topCount)
+
+  const composites: { input: Buffer; top: number; left: number }[] = []
+
+  for (const tile of importantTiles) {
+    const tileLeft = tile.x * tileSize
+    const tileTop = tile.y * tileSize
+    const tileW = Math.min(tileSize, width - tileLeft)
+    const tileH = Math.min(tileSize, height - tileTop)
+
+    const padL = tileLeft > 0 ? OVERLAP_PX : 0
+    const padT = tileTop > 0 ? OVERLAP_PX : 0
+    const padR = tileLeft + tileW < width ? OVERLAP_PX : 0
+    const padB = tileTop + tileH < height ? OVERLAP_PX : 0
+
+    const extLeft = tileLeft - padL
+    const extTop = tileTop - padT
+    const extWidth = tileW + padL + padR
+    const extHeight = tileH + padT + padB
+
+    const sigma = 1 + tile.importance * 1.2
+
+    const sharpened = await sharp(imagePath)
+      .extract({ left: extLeft, top: extTop, width: extWidth, height: extHeight })
+      .sharpen(sigma)
+      .png()
+      .toBuffer()
+
+    const trimmed = await sharp(sharpened)
+      .extract({ left: padL, top: padT, width: tileW, height: tileH })
+      .png()
+      .toBuffer()
+
+    composites.push({ input: trimmed, top: tileTop, left: tileLeft })
+  }
+
+  if (composites.length === 0) {
+    return sharp(imagePath).png().toBuffer()
+  }
+
+  return sharp(imagePath)
+    .composite(composites.map((c) => ({ input: c.input, top: c.top, left: c.left })))
+    .png()
+    .toBuffer()
+}

package/src/core/sanitizer.ts

@@ -0,0 +1,43 @@
+export function sanitizeSvg(input: string): string {
+  let sanitized = input
+
+  sanitized = sanitized.replace(/<script[\s\S]*?<\/script>/gi, '')
+  sanitized = sanitized.replace(/<\s*script[^>]*\/?>/gi, '')
+
+  sanitized = sanitized.replace(/\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '')
+
+  sanitized = sanitized.replace(/javascript\s*:/gi, '')
+  sanitized = sanitized.replace(/data\s*:\s*text\s*\/\s*html/gi, '')
+  sanitized = sanitized.replace(/document\./gi, '')
+  sanitized = sanitized.replace(/window\./gi, '')
+  sanitized = sanitized.replace(/eval\s*\(/gi, '')
+  sanitized = sanitized.replace(/new\s+Function\s*\(/gi, '')
+  sanitized = sanitized.replace(/setTimeout\s*\(/gi, '')
+  sanitized = sanitized.replace(/setInterval\s*\(/gi, '')
+
+  return sanitized
+}
+
+export function validateSvgContent(input: string): boolean {
+  const dangerous = [
+    'script',
+    'onerror',
+    'onload',
+    'onclick',
+    'onmouseover',
+    'javascript:',
+    'data:text/html',
+    'document.cookie',
+    '<?',
+    '<%',
+  ]
+
+  const lower = input.toLowerCase()
+  for (const pattern of dangerous) {
+    if (lower.includes(pattern)) {
+      return false
+    }
+  }
+
+  return true
+}