gotodev-image-optimizer 0.1.1 → 0.1.2

package/src/adaptive/tier.ts

@@ -1,34 +0,0 @@
-import type { ManifestEntry, QualityTier } from '../core/types.ts'
-
-export function resolveTierSrc(metadata: ManifestEntry, tier: QualityTier): string {
-  const tierSrc = metadata.tiers[tier]
-  if (tierSrc) return tierSrc
-
-  const tierOrder: QualityTier[] = ['ultra', 'high', 'medium', 'low']
-  const tierIndex = tierOrder.indexOf(tier)
-
-  for (let i = tierIndex - 1; i >= 0; i--) {
-    const fallbackTier = tierOrder[i]
-    if (!fallbackTier) break
-    const fallback = metadata.tiers[fallbackTier]
-    if (fallback) return fallback
-  }
-
-  return metadata.src
-}
-
-export function resolveVariantsForTier(
-  metadata: ManifestEntry,
-  tier: QualityTier,
-): ManifestEntry['variants'] {
-  const tierWidths: Record<QualityTier, number> = {
-    ultra: 1920,
-    high: 1024,
-    medium: 768,
-    low: 480,
-  }
-
-  const maxWidth = tierWidths[tier]
-
-  return metadata.variants.filter((v) => v.width <= maxWidth)
-}

package/src/components/GImage.tsx

@@ -1,218 +0,0 @@
-import { type ImgHTMLAttributes, useCallback, useEffect, useRef, useState } from 'react'
-import { getDeviceFingerprint, listenForChanges } from '../adaptive/fingerprint.ts'
-import { PredictiveLoader } from '../adaptive/predictive.ts'
-import { isAnimatedFormat } from '../core/formats.ts'
-import type { ManifestEntry, QualityTier } from '../core/types.ts'
-
-export interface GImageProps
-  extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'srcSet' | 'width' | 'height'> {
-  src: ManifestEntry | string
-  alt: string
-  priority?: boolean
-  sizes?: string
-  disableAdaptive?: boolean
-  placeholder?: 'blur' | 'none'
-  onLoad?: () => void
-  onError?: () => void
-}
-
-interface LoadState {
-  loaded: boolean
-  error: boolean
-  currentTier: QualityTier
-}
-
-export default function GImage({
-  src,
-  alt,
-  priority = false,
-  sizes = '100vw',
-  disableAdaptive = false,
-  placeholder: placeholderMode = 'blur',
-  className,
-  style,
-  loading: loadingProp,
-  onLoad,
-  onError,
-  ...imgProps
-}: GImageProps) {
-  const imgRef = useRef<HTMLImageElement>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const predictiveRef = useRef<PredictiveLoader | null>(null)
-  const [loadState, setLoadState] = useState<LoadState>({
-    loaded: false,
-    error: false,
-    currentTier: 'ultra',
-  })
-
-  const metadata: ManifestEntry | null =
-    typeof src === 'string'
-      ? null
-      : {
-          src: src.src,
-          width: src.width,
-          height: src.height,
-          format: src.format,
-          placeholder: src.placeholder,
-          variants: src.variants,
-          tiers: src.tiers,
-        }
-
-  useEffect(() => {
-    if (disableAdaptive || !metadata) {
-      setLoadState((prev) => ({ ...prev, currentTier: 'ultra' }))
-      return
-    }
-
-    const fp = getDeviceFingerprint()
-    setLoadState((prev) => ({ ...prev, currentTier: fp.tier }))
-
-    const cleanup = listenForChanges((newFp) => {
-      setLoadState((prev) => ({ ...prev, currentTier: newFp.tier }))
-    })
-
-    return cleanup
-  }, [disableAdaptive, metadata])
-
-  useEffect(() => {
-    if (priority || loadingProp === 'eager') {
-      setLoadState((prev) => ({ ...prev, loaded: true }))
-      return
-    }
-
-    if (!containerRef.current) return
-
-    predictiveRef.current = new PredictiveLoader()
-    predictiveRef.current.observe(containerRef.current, () => {
-      setLoadState((prev) => ({ ...prev, loaded: true }))
-    })
-
-    return () => {
-      predictiveRef.current?.destroy()
-    }
-  }, [priority, loadingProp])
-
-  const handleLoad = useCallback(() => {
-    setLoadState((prev) => ({ ...prev, loaded: true }))
-    onLoad?.()
-  }, [onLoad])
-
-  const handleError = useCallback(() => {
-    setLoadState((prev) => ({ ...prev, error: true }))
-    onError?.()
-  }, [onError])
-
-  if (!metadata) {
-    return (
-      <img
-        ref={imgRef}
-        {...imgProps}
-        src={typeof src === 'string' ? src : ''}
-        alt={alt ?? ''}
-        className={className}
-        style={style}
-        loading={priority ? 'eager' : (loadingProp ?? 'lazy')}
-        onLoad={handleLoad}
-        onError={handleError}
-      />
-    )
-  }
-
-  const aspectRatio =
-    metadata.width && metadata.height ? (metadata.height / metadata.width) * 100 : 0
-
-  const tier = loadState.currentTier
-  const tierVariants = metadata.variants.filter((v) => {
-    const tierWidths: Record<QualityTier, number> = {
-      ultra: 99999,
-      high: 1920,
-      medium: 1024,
-      low: 768,
-    }
-    return v.width <= tierWidths[tier]
-  })
-
-  const hasPlaceholder = placeholderMode === 'blur' && !!metadata.placeholder && !loadState.loaded
-  const isAnimated = isAnimatedFormat(metadata.format)
-
-  const pictureContent = (
-    <picture>
-      {!isAnimated && tierVariants.length > 0 && (
-        <>
-          <source
-            type="image/avif"
-            srcSet={tierVariants
-              .filter((v) => v.format === 'avif')
-              .map((v) => `${v.src} ${v.width}w`)
-              .join(', ')}
-            sizes={sizes}
-          />
-          <source
-            type="image/webp"
-            srcSet={tierVariants
-              .filter((v) => v.format === 'webp')
-              .map((v) => `${v.src} ${v.width}w`)
-              .join(', ')}
-            sizes={sizes}
-          />
-        </>
-      )}
-      <img
-        ref={imgRef}
-        {...imgProps}
-        src={tierVariants.find((v) => v.format === 'jpeg')?.src ?? metadata.src}
-        srcSet={
-          tierVariants
-            .filter((v) => v.format === 'jpeg' || v.format === 'png')
-            .map((v) => `${v.src} ${v.width}w`)
-            .join(', ') || undefined
-        }
-        sizes={sizes}
-        alt={alt ?? ''}
-        width={metadata.width}
-        height={metadata.height}
-        loading={loadState.loaded && !priority ? 'lazy' : 'eager'}
-        fetchPriority={priority ? 'high' : undefined}
-        decoding={priority ? 'auto' : 'async'}
-        className={className}
-        style={{
-          width: '100%',
-          height: 'auto',
-          display: 'block',
-          background: hasPlaceholder ? `${metadata.placeholder} center/cover no-repeat` : undefined,
-          filter: hasPlaceholder ? 'blur(20px)' : undefined,
-          transition: 'filter 0.4s ease-out, opacity 0.4s ease-out',
-          opacity: loadState.loaded ? 1 : 0.99,
-          ...style,
-        }}
-        onLoad={handleLoad}
-        onError={handleError}
-      />
-    </picture>
-  )
-
-  if (aspectRatio > 0) {
-    return (
-      <div
-        ref={containerRef}
-        style={{
-          position: 'relative',
-          width: '100%',
-          paddingBottom: `${aspectRatio}%`,
-          overflow: 'hidden',
-        }}
-      >
-        <div
-          style={{
-            position: 'absolute',
-            inset: 0,
-          }}
-        >
-          {pictureContent}
-        </div>
-      </div>
-    )
-  }
-
-  return <div ref={containerRef}>{pictureContent}</div>
-}

package/src/core/analyzer.ts

@@ -1,189 +0,0 @@
-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

@@ -1,244 +0,0 @@
-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,
-  }
-}