Image Optimization

Copyconst { widths, kind } = getWidths(config, width, sizes)
const last = widths.length - 1
 
return {
  sizes: !sizes && kind === 'w' ? '100vw' : sizes,
  srcSet: widths
    .map(
      (w, i) =>
        `${loader({ config, src, quality, width: w })} ${
          kind === 'w' ? w : i + 1
        }${kind}`
    )
    .join(', '),
 
  // It's intended to keep `src` the last attribute because React updates
  // attributes in order. If we keep `src` the first one, Safari will
  // immediately start to fetch `src`, before `sizes` and `srcSet` are even
  // updated by React. That causes multiple unnecessary requests if `srcSet`
  // and `sizes` are defined.
  // This bug cannot be reproduced in Chrome or Firefox.
  src: loader({ config, src, quality, width: widths[last] }),
}

Copyif (unoptimized) {
  if (src.startsWith('/') && !src.startsWith('//')) {
    let deploymentId = getDeploymentId()
    if (src.includes('/_next/static/immutable') && !getAssetToken()) {
      // immutable static asset and supported by platform, don't add `?dpl=`
      deploymentId = undefined
    } else if (deploymentId) {
      // We unfortunately can't easily use `new URL()` here, because it normalizes the URL which causes
      // double-encoding with the `encodeURIComponent(src)` below
      const qIndex = src.indexOf('?')
      if (qIndex !== -1) {
        const params = new URLSearchParams(src.slice(qIndex + 1))
        const srcDpl = params.get('dpl')
        if (!srcDpl) {
          // src is missing the dpl parameter, but we have a deploymentId, so add it to the src URL
          params.append('dpl', deploymentId)
          src = src.slice(0, qIndex) + '?' + params.toString()
        }
      } else {
        // src is missing the dpl parameter, but we have a deploymentId, so add it to the src URL
        src = src + `?dpl=${deploymentId}`
      }
    }
  }
  return { src, srcSet: undefined, sizes: undefined }
}

Copy  const q = findClosestQuality(quality, config)
 
  return `${config.path}?url=${encodeURIComponent(src)}&w=${width}&q=${q}${
    src.startsWith('/') && deploymentId ? `&dpl=${deploymentId}` : ''
  }`
}

Copyconst interpolatedName = loaderUtils.interpolateName(
  this,
  '/static/media/[name].[hash:8].[ext]',
  opts
)
const outputPath = assetPrefix + '/_next' + interpolatedName
let extension = loaderUtils.interpolateName(this, '[ext]', opts)
if (extension === 'jpg') {
  extension = 'jpeg'
}
 
const imageSizeSpan = imageLoaderSpan.traceChild('image-size-calculation')
const imageSize = await imageSizeSpan.traceAsyncFn(() =>
  getImageSize(content).catch((err) => err)
)
 
if (imageSize instanceof Error) {
  const err = imageSize
  err.name = 'InvalidImageFormatError'
  throw err
}

Copyexport async function getImageSize(buffer: Buffer): Promise<{
  width?: number
  height?: number
}> {
  const { width, height } = imageSizeOf(buffer)
  return { width, height }

Copyif (VALID_BLUR_EXT.includes(extension) && !isAnimated(content)) {
  // Shrink the image's largest dimension
  if (imageSize.width >= imageSize.height) {
    blurWidth = BLUR_IMG_SIZE
    blurHeight = Math.max(
      Math.round((imageSize.height / imageSize.width) * BLUR_IMG_SIZE),
      1
    )
  } else {
    blurWidth = Math.max(
      Math.round((imageSize.width / imageSize.height) * BLUR_IMG_SIZE),
      1
    )
    blurHeight = BLUR_IMG_SIZE
  }
 
  if (isDev) {
    // During `next dev`, we don't want to generate blur placeholders with webpack
    // because it can delay starting the dev server. Instead, we inline a
    // special url to lazily generate the blur placeholder at request time.
    const prefix = 'http://localhost'
    const url = new URL(`${basePath || ''}/_next/image`, prefix)
    url.searchParams.set('url', outputPath)
    url.searchParams.set('w', String(blurWidth))
    url.searchParams.set('q', String(BLUR_QUALITY))
    blurDataURL = url.href.slice(prefix.length)
  } else {
    const resizeImageSpan = tracing('image-resize')
    const resizedImage = await resizeImageSpan.traceAsyncFn(() =>
      optimizeImage({
        buffer: content,
        width: blurWidth,
        height: blurHeight,
        contentType: `image/${extension}`,
        quality: BLUR_QUALITY,
      })
    )
    const blurDataURLSpan = tracing('image-base64-tostring')
    blurDataURL = blurDataURLSpan.traceFn(
      () =>
        `data:image/${extension};base64,${resizedImage.toString('base64')}`
    )
  }
}

Copyexport function getImageBlurSvg({
  widthInt,
  heightInt,
  blurWidth,
  blurHeight,
  blurDataURL,
  objectFit,
}: {
  widthInt?: number
  heightInt?: number
  blurWidth?: number
  blurHeight?: number
  blurDataURL: string
  objectFit?: string
}): string {
  const std = 20
  const svgWidth = blurWidth ? blurWidth * 40 : widthInt
  const svgHeight = blurHeight ? blurHeight * 40 : heightInt
 
  const viewBox =
    svgWidth && svgHeight ? `viewBox='0 0 ${svgWidth} ${svgHeight}'` : ''
  const preserveAspectRatio = viewBox
    ? 'none'
    : objectFit === 'contain'
      ? 'xMidYMid'
      : objectFit === 'cover'
        ? 'xMidYMid slice'
        : 'none'
 
  return `%3Csvg xmlns='http://www.w3.org/2000/svg' ${viewBox}%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='${std}'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='${std}'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='${preserveAspectRatio}' style='filter: url(%23b);' href='${blurDataURL}'/%3E%3C/svg%3E`

Copyexport type RemotePattern = {
  /**
   * Must be `http` or `https`.
   */
  protocol?: 'http' | 'https'
 
  /**
   * Can be literal or wildcard.
   * Single `*` matches a single subdomain.
   * Double `**` matches any number of subdomains.
   */
  hostname: string
 
  /**
   * Can be literal port such as `8080` or empty string
   * meaning no port.
   */
  port?: string
 
  /**
   * Can be literal or wildcard.
   * Single `*` matches a single path segment.
   * Double `**` matches any number of path segments.
   */
  pathname?: string
 
  /**
   * Can be literal query string such as `?v=1` or
   * empty string meaning no query string.
   */
  search?: string
}

Copyexport function prepareImageConfig(
  envConfig?: ImageConfigForRendering,
  contextConfig?: ImageConfigComplete
): PreparedImageConfig {
  const envKey = envConfig ?? missingImageConfig
  const contextKey = contextConfig ?? missingImageConfig
  let preparedByContext = preparedImageConfigs.get(envKey)
  if (preparedByContext) {
    const cached = preparedByContext.get(contextKey)
    if (cached) {
      return cached
    }
  }
 
  const source: ImageConfigForRendering =
    envConfig || contextConfig || imageConfigDefault
  const deviceSizes = [...source.deviceSizes].sort((a, b) => a - b)
  const imageSizes = [...source.imageSizes]
  const prepared: PreparedImageConfig = {
    deviceSizes,
    imageSizes,
    allSizes: [...deviceSizes, ...imageSizes].sort((a, b) => a - b),
    qualities:
      source.qualities === undefined
        ? undefined
        : [...source.qualities].sort((a, b) => a - b),
    path: source.path,
    loader: source.loader,
    dangerouslyAllowSVG: source.dangerouslyAllowSVG,
    unoptimized: source.unoptimized,
    domains: source.domains,
    remotePatterns: source.remotePatterns,
    // The inlined browser options supply their own patterns. During SSR the
    // context supplies security-sensitive patterns omitted from the inline data.
    localPatterns:
      typeof window === 'undefined' && contextConfig !== undefined
        ? contextConfig.localPatterns
        : source.localPatterns,
    output: source.output,
  }
 
  if (!preparedByContext) {
    preparedByContext = new WeakMap()
    preparedImageConfigs.set(envKey, preparedByContext)
  }
  preparedByContext.set(contextKey, prepared)
  return prepared
}

Copy  transformer.avif({
    // Scale the quality to try and match webp. This ratio was derived
    // from sharp's default 80 (webp) and 50 (avif), and then verified
    // using dssim and ssimulacra2 visual quality tests.
    quality: Math.max(Math.round(quality * (50 / 80)), 1),
    effort: 3,
  })
} else if (contentType === WEBP) {
  transformer.webp({ quality })
} else if (contentType === PNG) {
  transformer.png({ quality })
} else if (contentType === JPEG) {
  transformer.jpeg({ quality, mozjpeg })
}

Copymodule.exports = require('./dist/server/image-optimizer/transform')

Copyasync function initCacheEntries(
  cacheDir: string
): Promise<Array<{ key: string; size: number; expireAt: number }>> {
  const cacheKeys = await promises.readdir(cacheDir).catch(() => [])
  const entries: Array<{ key: string; size: number; expireAt: number }> = []
 
  for (const cacheKey of cacheKeys) {
    try {
      const { expireAt, buffer } = await readFromCacheDir(cacheDir, cacheKey)
      entries.push({
        key: cacheKey,
        size: buffer.byteLength,
        expireAt,
      })
    } catch {
      // Skip entries that can't be read from disk
    }
  }
 
  // Sort oldest-first so we can replay them chronologically into LRU
  return entries.sort((a, b) => a.expireAt - b.expireAt)
}

Copyasync function writeToCacheDir(
  cacheDir: string,
  cacheKey: string,
  extension: string,
  maxAge: number,
  expireAt: number,
  buffer: Buffer,
  etag: string,
  upstreamEtag: string
) {
  if (buffer.byteLength === 0) {
    throw new Error(
      'Invariant: cannot write an empty buffer to the image cache'
    )
  }
 
  const dir = join(/* turbopackIgnore: true */ cacheDir, cacheKey)
  const filename = join(
    /* turbopackIgnore: true */
    dir,
    `${maxAge}.${expireAt}.${etag}.${upstreamEtag}.${extension}`
  )
 
  await promises.rm(dir, { recursive: true, force: true }).catch(() => {})
 
  await promises.mkdir(dir, { recursive: true })
  await promises.writeFile(filename, buffer)
}
 
async function readFromCacheDir(cacheDir: string, cacheKey: string) {
  const dir = join(/* turbopackIgnore: true */ cacheDir, cacheKey)
  const files = await promises.readdir(dir)
  const file = files[0]
  if (!file) {
    throw new Error(
      `Invariant: cache entry "${cacheKey}" not found in dir "${cacheDir}"`
    )
  }
  const [maxAgeSt, expireAtSt, etag, upstreamEtag, extension] = file.split(
    '.',
    5
  )
  const filePath = join(/* turbopackIgnore: true */ dir, file)
  const buffer = await promises.readFile(/* turbopackIgnore: true */ filePath)
  if (buffer.byteLength === 0) {
    throw new Error(`Invariant: image cache entry "${cacheKey}" is empty`)
  }
  const expireAt = Number(expireAtSt)
  const maxAge = Number(maxAgeSt)
  return { maxAge, expireAt, etag, upstreamEtag, buffer, extension }
}

Copyimport { createHash } from 'crypto'
 
export function getHash(items: (string | number | Buffer)[]) {
  const hash = createHash('sha256')
  for (let item of items) {
    if (typeof item === 'number') hash.update(String(item))
    else {
      hash.update(item)
    }
  }
  // See https://en.wikipedia.org/wiki/Base64#URL_applications
  return hash.digest('base64url')
}
 
export function extractEtag(
  etag: string | null | undefined,
  imageBuffer: Buffer
) {
  if (etag) {
    // upstream etag needs to be base64url encoded due to weak etag signature
    // as we store this in the cache-entry file name.
    return Buffer.from(etag).toString('base64url')
  }
  return getImageEtag(imageBuffer)
}
 
export function getImageEtag(image: Buffer) {
  return getHash([image])