@graphcommerce/image 2.104.1

package/CHANGELOG.md

@@ -0,0 +1,97 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [2.104.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.104.0...@graphcommerce/image@2.104.1) (2021-09-27)
+
+**Note:** Version bump only for package @graphcommerce/image
+
+
+
+
+
+# 2.104.0 (2021-09-27)
+
+
+### Bug Fixes
+
+* cart item image sizes ([e7c860c](https://github.com/ho-nl/m2-pwa/commit/e7c860c785e172b9275e1a00c8b51509d6b297a8))
+* ignore md files from triggering version updates ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
+* **image:** add loading attribute to unoptimized image ([13f7709](https://github.com/ho-nl/m2-pwa/commit/13f77096a5b1ed3f60cfa7b61ac7373d1a2b44d4))
+* **image:** change sizing of images on grid/productpage ([0e573b6](https://github.com/ho-nl/m2-pwa/commit/0e573b69a2d405126433e7c4747c01b533858b78))
+* **image:** component would rerender unnessarily ([bfc041d](https://github.com/ho-nl/m2-pwa/commit/bfc041d39e34faf60581dbdba7a15a32928368b3))
+* **image:** do not report when image isn't rendered yet ([5aa08ef](https://github.com/ho-nl/m2-pwa/commit/5aa08efc1eade69f53e1645c37fcb0632d83bc5e))
+* **image:** fix build ([b730cb6](https://github.com/ho-nl/m2-pwa/commit/b730cb6ae4e50dcf2f60e2046d6acf3047caacb3))
+* **image:** image decoding async added ([8c5f59f](https://github.com/ho-nl/m2-pwa/commit/8c5f59f54b9e28b60e197b7ddefdd78b71f6665e))
+* **image:** image src is visible while loading the image ([735d79e](https://github.com/ho-nl/m2-pwa/commit/735d79e8ccab296dcc5750458fc1760f17fe47c7))
+* **image:** make sure unoptimized images are preloaded correctly and remove preloads from lots of images ([fb2b4fc](https://github.com/ho-nl/m2-pwa/commit/fb2b4fcb5336ff880a9b32775847d7b6738ba1ea))
+* introduced SvgImageSimple and solve issue with review chips ([931d7fd](https://github.com/ho-nl/m2-pwa/commit/931d7fdcf0faa9d2264899b72e564138215b6bd8))
+* make packages private so they dont get published accidently ([f7b693f](https://github.com/ho-nl/m2-pwa/commit/f7b693ff6a4d232d0871f6a68922d14678853a96))
+
+
+### Features
+
+* **image:** allow passing props to the picture component ([3425664](https://github.com/ho-nl/m2-pwa/commit/3425664f197974d2e9db048fc94d447b2d34c280))
+* **image:** introduced completely rewritten Image component ([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
+* **playwright:** added new playwright package to enable browser testing ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
+* renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of [@reachdigital](https://github.com/reachdigital) ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
+* upgraded to nextjs 11 ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
+
+
+
+
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [2.103.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.102.1...@graphcommerce/image@2.103.0) (2021-09-01)
+
+### Features
+
+- **image:** allow passing props to the picture component
+  ([3425664](https://github.com/ho-nl/m2-pwa/commit/3425664f197974d2e9db048fc94d447b2d34c280))
+
+# [2.102.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.101.5...@graphcommerce/image@2.102.0) (2021-08-12)
+
+### Features
+
+- upgraded to nextjs 11
+  ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
+
+## [2.101.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.101.3...@graphcommerce/image@2.101.4) (2021-08-09)
+
+### Bug Fixes
+
+- **image:** do not report when image isn't rendered yet
+  ([5aa08ef](https://github.com/ho-nl/m2-pwa/commit/5aa08efc1eade69f53e1645c37fcb0632d83bc5e))
+
+## [2.101.3](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.101.2...@graphcommerce/image@2.101.3) (2021-08-06)
+
+### Bug Fixes
+
+- introduced SvgImageSimple and solve issue with review chips
+  ([931d7fd](https://github.com/ho-nl/m2-pwa/commit/931d7fdcf0faa9d2264899b72e564138215b6bd8))
+
+## [2.101.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.101.1...@graphcommerce/image@2.101.2) (2021-08-04)
+
+### Bug Fixes
+
+- cart item image sizes
+  ([e7c860c](https://github.com/ho-nl/m2-pwa/commit/e7c860c785e172b9275e1a00c8b51509d6b297a8))
+
+# [2.101.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.100.12...@graphcommerce/image@2.101.0) (2021-07-26)
+
+### Features
+
+- **playwright:** added new playwright package to enable browser testing
+  ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
+
+## [2.100.11](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.100.10...@graphcommerce/image@2.100.11) (2021-07-20)
+
+### Bug Fixes
+
+- ignore md files from triggering version updates
+  ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))

package/README.md

@@ -0,0 +1,60 @@
+# @graphcommerce/image
+
+Since we're using a ton of images on the website we wanted to optimize the
+images further than what `next/image` has to offer.
+
+## Goals
+
+- Only provide an image, no wrapping divs which changes how images work.
+
+- Support the next/image layout properties.
+
+- Optimize images further than what next/image does.
+
+## Optimizing the images on high dpi sreens (1.5x-2.5x)
+
+It seems that it doesn't really matter if we lower the quality of images for 2x
+screens. So we lowered the quality to 44 as recommended.
+
+To view the difference between quality=100 and quality=44, open this on a high
+dpi screen: https://u5uol.sse.codesandbox.io/ and see the difference between the
+'High resolution' variants.
+
+## Serving the right images for low dpi screens (1x)
+
+Jake Archibald's blog
+https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/
+recommends serving high quality, but low resolution images on low dpi screens:
+[high resolution screens and low resolution screens](https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/#compressing-images-for-high-density-screens)
+
+- high dpi screens need `high res` images but it is very acceptable to have
+  `quality=44` images
+- `quality=80`: low dpi screens need `low res` images but also need to have high
+  quality images.
+
+In our [testing](https://u5uol.sse.codesandbox.io/)
+([code](https://codesandbox.io/s/strange-fermi-u5uol?file=/pages/index.tsx)),
+for low dpi screens it doesn't really seem to matter if we serve
+`high res, quality=44`.
+
+Advantage: We need significantly less resizes, which is good for the backend.
+Disadvantage: The image size for the `low res, quality=44` images is about 30%
+larger than `high res, quality=80`
+
+We deemed this to be acceptable for desktop as internet connections are fairly
+acceptable and we're winning a great deal by lowering the quality already.
+
+## Capping image fidelity on ultra-high resolution devices (2.5x-+)
+
+https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/capping-image-fidelity-on-ultra-high-resolution-devices.html
+
+## Defaulting to 50vw the sizes attribute `<img sizes=".."/>`
+
+The `sizes` attribute allows browsers to download images even before the CSS has
+finished loading. This means that the browser is able to download images as
+early as an img with only an src attribute.
+
+> When the browser starts to load a page, it starts to download (preload) any
+> images before the main parser has started to load and interpret the page's CSS
+> and JavaScript.
+> [Why can't we just do this using CSS or JavaScript?](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#why_cant_we_just_do_this_using_css_or_javascript)

package/components/Image.tsx

@@ -0,0 +1,517 @@
+/* eslint-disable prefer-const */
+/* eslint-disable no-param-reassign */
+/* eslint-disable @next/next/no-img-element */
+/* eslint-disable jsx-a11y/alt-text */
+import { useForkRef } from '@material-ui/core'
+import { LoaderValue, VALID_LOADERS } from 'next/dist/server/image-config'
+import Head from 'next/head'
+import type { ImageLoaderProps, ImageLoader } from 'next/image'
+import React, { useEffect, useRef } from 'react'
+import {
+  akamaiLoader,
+  cloudinaryLoader,
+  configDeviceSizes,
+  configImageSizes,
+  configLoader,
+  configPath,
+  DefaultImageLoaderProps,
+  defaultLoader,
+  imgixLoader,
+} from '../config/config'
+
+if (typeof window === 'undefined') {
+  // eslint-disable-next-line no-underscore-dangle
+  ;(global as any).__NEXT_IMAGE_IMPORTED = true
+}
+
+export type { ImageLoaderProps, ImageLoader }
+
+const DEFAULT_SIZES: SizesRecord = { 0: '100vw', 1200: '50vw' }
+
+const VALID_LOADING_VALUES = ['lazy', 'eager', undefined] as const
+type LoadingValue = typeof VALID_LOADING_VALUES[number]
+
+const loaders = new Map<LoaderValue, (props: DefaultImageLoaderProps) => string>([
+  ['imgix', imgixLoader],
+  ['cloudinary', cloudinaryLoader],
+  ['akamai', akamaiLoader],
+  ['default', defaultLoader],
+])
+
+const VALID_LAYOUT_VALUES = ['fill', 'responsive', 'intrinsic', 'fixed'] as const
+type LayoutValue = 'fill' | 'fixed' | 'intrinsic' | 'responsive' | undefined
+
+type PlaceholderValue = 'blur' | 'empty'
+
+type ImgElementStyle = NonNullable<JSX.IntrinsicElements['img']['style']>
+
+interface StaticImageData {
+  src: string
+  height: number
+  width: number
+  blurDataURL?: string
+}
+
+interface StaticRequire {
+  default: StaticImageData
+}
+
+type StaticImport = StaticRequire | StaticImageData
+
+export function isStaticRequire(src: StaticRequire | StaticImageData): src is StaticRequire {
+  return (src as StaticRequire).default !== undefined
+}
+
+export function isStaticImageData(src: StaticRequire | StaticImageData): src is StaticImageData {
+  return (src as StaticImageData).src !== undefined
+}
+
+export function isStaticImport(src: string | StaticImport): src is StaticImport {
+  return typeof src === 'object' && (isStaticRequire(src) || isStaticImageData(src))
+}
+
+// sort smallest to largest
+const allSizes = [...configDeviceSizes, ...configImageSizes]
+configDeviceSizes.sort((a, b) => a - b)
+allSizes.sort((a, b) => a - b)
+
+function getWidths(
+  width: number | undefined,
+  layout: LayoutValue,
+  sizes = '',
+): { widths: number[]; kind: 'w' | 'x' } {
+  if ((sizes && layout === 'fill') || layout === 'responsive') {
+    // Find all the "vw" percent sizes used in the sizes prop
+    const viewportWidthRe = /(^|\s)(1?\d?\d)vw/g
+    const percentSizes: number[] = []
+    // eslint-disable-next-line no-cond-assign
+    for (let match: string[] | null; (match = viewportWidthRe.exec(sizes)); match) {
+      percentSizes.push(parseInt(match?.[2], 10))
+    }
+    if (percentSizes.length) {
+      const smallestRatio = Math.min(...percentSizes) * 0.01
+
+      return {
+        widths: allSizes.filter((s) => s >= configDeviceSizes[0] * smallestRatio),
+        kind: 'w',
+      }
+    }
+
+    return { widths: allSizes, kind: 'w' }
+  }
+  if (typeof width !== 'number' || layout === 'fill') {
+    return { widths: configDeviceSizes, kind: 'w' }
+  }
+
+  const widths = [
+    ...new Set(
+      // > This means that most OLED screens that say they are 3x resolution,
+      // > are actually 3x in the green color, but only 1.5x in the red and
+      // > blue colors. Showing a 3x resolution image in the app vs a 2x
+      // > resolution image will be visually the same, though the 3x image
+      // > takes significantly more data. Even true 3x resolution screens are
+      // > wasteful as the human eye cannot see that level of detail without
+      // > something like a magnifying glass.
+      // https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/capping-image-fidelity-on-ultra-high-resolution-devices.html
+      [width, width * 2 /* , width * 3*/].map(
+        (w) => allSizes.find((p) => p >= w) || allSizes[allSizes.length - 1],
+      ),
+    ),
+  ]
+  return { widths, kind: 'x' }
+}
+
+type GenImgAttrsData = {
+  src: string
+  layout: LayoutValue
+  loader: ImageLoader
+  width?: number
+  quality?: number
+  sizes: string
+  scale: number
+}
+
+function generateSrcSet({
+  src,
+  layout,
+  width,
+  quality = 52,
+  sizes,
+  loader,
+  scale,
+}: GenImgAttrsData): string {
+  const { widths, kind } = getWidths(width, layout, sizes)
+
+  return widths
+    .map(
+      (w, i) =>
+        `${loader({ src, quality, width: w })} ${
+          kind === 'w' ? Math.round(w * scale) : i + 1
+        }${kind}`,
+    )
+    .join(', ')
+}
+
+function defaultImageLoader(loaderProps: ImageLoaderProps) {
+  const load = loaders.get(configLoader)
+  if (load) {
+    return load({ root: configPath, ...loaderProps })
+  }
+  throw new Error(
+    `[@graphcommerce/image]: Unknown "loader" found in "next.config.js". Expected: ${VALID_LOADERS.join(
+      ', ',
+    )}. Received: ${configLoader}`,
+  )
+}
+
+type SizesString =
+  | `${number}vw`
+  | `${number}px`
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#math_functions
+  | `calc(${string})`
+  | `min(${string})`
+  | `max(${string})`
+  | `clamp(${string})`
+type SizesRecord = Record<number, SizesString>
+type Sizes = SizesString | SizesRecord | undefined
+
+function isSizesRecord(sizes?: Sizes): sizes is SizesRecord {
+  return typeof sizes === 'object'
+}
+
+function sizesEntries(sizes: Sizes): (readonly [number, SizesString | undefined])[] {
+  if (isSizesRecord(sizes)) {
+    return Object.entries(sizes)
+      .map(([breakpoint, size]) => [Number(breakpoint), size] as const)
+      .sort(([sizeA], [sizeB]) => sizeB - sizeA)
+  }
+  return [[0, sizes] as const]
+}
+
+function generateSizesString(sizes?: Sizes) {
+  return sizesEntries(sizes)
+    .map(([breakpoint, size]) => {
+      if (breakpoint === 0) return size
+      return `(min-width: ${breakpoint}px) ${size}`
+    })
+    .join(', ')
+}
+
+/** Since we're handling stuff ourselves we omit some stuff */
+type IntrisincImage = Omit<
+  JSX.IntrinsicElements['img'],
+  'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading' | 'sizes' | 'width' | 'height'
+> & { loading?: LoadingValue }
+
+export type ImageProps = IntrisincImage & {
+  src: StaticImport | string
+  blurDataURL?: string
+  loader?: ImageLoader
+  quality?: number
+  unoptimized?: boolean
+  dontReportWronglySizedImages?: boolean
+  width?: number
+  height?: number
+  pictureProps?: JSX.IntrinsicElements['picture']
+  /**
+   * Possible values:
+   *
+   * - `fixed`: the image dimensions will not change as the viewport changes (no responsiveness)
+   *   similar to the native img element.
+   * - `intrinsic`: the image will scale the dimensions down for smaller viewports but maintain the
+   *   original dimensions (the width and height given) for larger viewports.
+   * - `responsive`: the image will scale the dimensions down for smaller viewports and scale up for
+   *   larger viewports.
+   */
+  layout?: LayoutValue
+
+  placeholder?: PlaceholderValue
+  /** Size the image is rendered on mobile */
+  sizes?: SizesString | SizesRecord
+}
+
+const Image = React.forwardRef<HTMLImageElement, ImageProps>(
+  (
+    {
+      src,
+      sizes: sizesIncomming,
+      unoptimized = false,
+      loading,
+      layout = 'responsive',
+      quality,
+      width,
+      height,
+      style,
+      loader = defaultImageLoader,
+      placeholder = 'empty',
+      blurDataURL,
+      dontReportWronglySizedImages,
+      pictureProps,
+      ...imgProps
+    },
+    forwardedRef,
+  ) => {
+    const ref = useRef<HTMLImageElement>(null)
+    const combinedRef = useForkRef(ref, forwardedRef)
+
+    const sizesOrig =
+      layout === 'fixed' && width && !sizesIncomming
+        ? (`${width}px` as SizesString)
+        : sizesIncomming
+
+    const sizes = generateSizesString(sizesOrig) || generateSizesString(DEFAULT_SIZES)
+
+    useEffect(() => {
+      if (process.env.NODE_ENV === 'production') return () => {}
+      if (!ref.current || unoptimized || dontReportWronglySizedImages) return () => {}
+
+      function getContainedSize(img: HTMLImageElement) {
+        let ratio = img.naturalWidth / img.naturalHeight
+        let w = img.height * ratio
+        let h = img.height
+        if (w > img.width) {
+          w = img.width
+          h = img.width / ratio
+        }
+        return [w, h]
+      }
+
+      function reportSizes(img: HTMLImageElement) {
+        let ratio: number
+
+        const reportedSize = img.clientWidth
+
+        if (reportedSize === 0) return
+
+        let msg = ''
+        const sizesEntr = sizesOrig ? sizesEntries(sizesOrig) : sizesEntries(DEFAULT_SIZES)
+        const matched = sizesEntr.find(([s]) =>
+          s === 0 ? true : window.matchMedia(`(min-width: ${s}px)`).matches,
+        )
+
+        const breakpoint = matched?.[0] ?? 0
+        const size = matched?.[1]
+
+        const el = document.createElement('div')
+        el.setAttribute('style', `width: ${size}`)
+        document.body.appendChild(el)
+        const measuredWidth = el.getBoundingClientRect().width
+        el.remove()
+        ratio = measuredWidth ** 2 / reportedSize ** 2
+        msg += `Image's "sizes" value '${
+          breakpoint > 0 ? `min-width(${breakpoint}px) ` : ''
+        }${size}' is incorrect.`
+
+        const isSmall = measuredWidth < 50 && reportedSize < 50
+
+        const round = (nr: number) => Math.round(nr * 100) / 100
+        if (!isSmall && ratio > 2) {
+          console.warn(
+            `[@graphcommerce/image]: ${msg} Currently downloading an image that has ${round(
+              ratio,
+            )}x too many pixels`,
+            img,
+          )
+        } else if (!isSmall && 1 / ratio > 2) {
+          console.warn(
+            `[@graphcommerce/image]: ${msg} Currently downloading an image that has ${round(
+              1 / ratio,
+            )}x too few pixels`,
+            img,
+          )
+        }
+      }
+
+      // Warn the user when he isn't providing sizes and how to proceed
+      const ro = new ResizeObserver(([entry]) => {
+        const img = entry.target as HTMLImageElement
+        if (img.naturalWidth) reportSizes(img)
+        img.onload = () => reportSizes(img)
+      })
+      ro.observe(ref.current)
+
+      return () => ro.disconnect()
+    }, [layout, ref, unoptimized, sizesOrig, src, width, dontReportWronglySizedImages])
+
+    let staticSrc = ''
+    if (isStaticImport(src)) {
+      const staticImageData = isStaticRequire(src) ? src.default : src
+      if (!staticImageData.src) {
+        throw new Error(
+          `[@graphcommerce/image]: An object should only be passed to the image component src parameter if it comes from a static image import. It must include src. Received ${JSON.stringify(
+            staticImageData,
+          )}`,
+        )
+      }
+      blurDataURL = blurDataURL || staticImageData.blurDataURL
+      staticSrc = staticImageData.src
+      if (!layout || layout !== 'fill') {
+        height = height || staticImageData.height
+        width = width || staticImageData.width
+        if (!staticImageData.height || !staticImageData.width) {
+          throw new Error(
+            `[@graphcommerce/image]: An object should only be passed to the image component src parameter if it comes from a static image import. It must include height and width. Received ${JSON.stringify(
+              staticImageData,
+            )}`,
+          )
+        }
+      }
+    }
+    src = typeof src === 'string' ? src : staticSrc
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (!src) {
+        throw new Error(
+          `[@graphcommerce/image]: Image is missing required "src" property. Make sure you pass "src" in props to the \`@graphcommerce/image\` component. Received: ${JSON.stringify(
+            { width, height, quality },
+          )}`,
+        )
+      }
+      if (!VALID_LAYOUT_VALUES.includes(layout)) {
+        throw new Error(
+          `[@graphcommerce/image]: Image with src "${src}" has invalid "layout" property. Provided "${layout}" should be one of ${VALID_LAYOUT_VALUES.map(
+            String,
+          ).join(',')}.`,
+        )
+      }
+      if (
+        (typeof width !== 'undefined' && Number.isNaN(width)) ||
+        (typeof height !== 'undefined' && Number.isNaN(height))
+      ) {
+        throw new Error(
+          `[@graphcommerce/image]: Image with src "${src}" has invalid "width" or "height" property. These should be numeric values.`,
+        )
+      }
+      if (!VALID_LOADING_VALUES.includes(loading)) {
+        throw new Error(
+          `[@graphcommerce/image]: Image with src "${src}" has invalid "loading" property. Provided "${loading}" should be one of ${VALID_LOADING_VALUES.map(
+            String,
+          ).join(',')}.`,
+        )
+      }
+      if (placeholder === 'blur') {
+        if (layout !== 'fill' && (width || 0) * (height || 0) < 1600) {
+          console.warn(
+            `[@graphcommerce/image]: Image with src "${src}" is smaller than 40x40. Consider removing the "placeholder='blur'" property to improve performance.`,
+          )
+        }
+        if (!blurDataURL) {
+          const VALID_BLUR_EXT = ['jpeg', 'png', 'webp'] // should match next-image-loader
+
+          throw new Error(
+            `[@graphcommerce/image]: Image with src "${src}" has "placeholder='blur'" property but is missing the "blurDataURL" property.
+          Possible solutions:
+            - Add a "blurDataURL" property, the contents should be a small Data URL to represent the image
+            - Change the "src" property to a static import with one of the supported file types: ${VALID_BLUR_EXT.join(
+              ',',
+            )}
+            - Remove the "placeholder" property, effectively no blur effect
+          Read more: https://nextjs.org/docs/messages/placeholder-blur-data-url`,
+          )
+        }
+      }
+    }
+
+    if (typeof width === 'undefined' && typeof height === 'undefined') {
+      if (layout === 'fill') {
+        // handle fill
+      } else if (process.env.NODE_ENV !== 'production') {
+        // <Image src="i.png" />
+        throw new Error(
+          `[@graphcommerce/image]: Image with src "${src}" must use "width" and "height" properties or "layout='fill'" property.`,
+        )
+      }
+    }
+
+    // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
+    if (src?.startsWith('data:') || src?.startsWith('blob:')) unoptimized = true
+
+    const srcSet3x = generateSrcSet({ src, layout, loader, quality, sizes, width, scale: 1.5 })
+    const srcSet2x = generateSrcSet({ src, layout, loader, quality, sizes, width, scale: 1 })
+    const srcSet1x = generateSrcSet({ src, layout, loader, quality, sizes, width, scale: 0.5 })
+
+    if (layout !== 'fixed' && !style) style = {}
+    if (layout === 'responsive') style = { ...style, width: '100%', height: 'auto' }
+    if (layout === 'intrinsic') style = { ...style, width: '100%', height: 'auto', maxWidth: width }
+    if (layout === 'fill') style = { ...style, width: '100%', height: '100%' }
+
+    return (
+      <>
+        {unoptimized ? (
+          <img
+            ref={combinedRef}
+            {...imgProps}
+            loading={loading ?? 'lazy'}
+            src={src}
+            width={width}
+            height={height}
+            data-nimg
+            style={style}
+          />
+        ) : (
+          <picture {...pictureProps}>
+            <source media='(-webkit-min-device-pixel-ratio: 2.5)' srcSet={srcSet3x} sizes={sizes} />
+            <source media='(-webkit-min-device-pixel-ratio: 1.5)' srcSet={srcSet2x} sizes={sizes} />
+            <source
+              media='(-webkit-max-device-pixel-ratio: 1.49)'
+              srcSet={srcSet1x}
+              sizes={sizes}
+            />
+            <img
+              ref={combinedRef}
+              {...imgProps}
+              src={src}
+              loading={loading ?? 'lazy'}
+              width={width}
+              height={height}
+              style={style}
+              sizes={sizes}
+              data-nimg
+              decoding='async'
+            />
+          </picture>
+        )}
+        {loading === 'eager' && (
+          <Head>
+            {unoptimized ? (
+              <link key={`__nimg-unoptimized-${src}`} rel='preload' as='image' href={src} />
+            ) : (
+              <>
+                <link
+                  key={`img-${srcSet3x}${sizes}`}
+                  rel='preload'
+                  as='image'
+                  media='(-webkit-min-device-pixel-ratio: 2.5)'
+                  // @ts-expect-error imagesrcset/imagesizes is not yet in the link element type.
+                  imagesrcset={srcSet3x}
+                  imagesizes={sizes}
+                />
+                <link
+                  key={`img-${srcSet2x}${sizes}`}
+                  rel='preload'
+                  as='image'
+                  media='(-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49)'
+                  // @ts-expect-error imagesrcset/imagesizes is not yet in the link element type.
+                  imagesrcset={srcSet2x}
+                  imagesizes={sizes}
+                />
+                <link
+                  key={`img-${srcSet1x}${sizes}`}
+                  rel='preload'
+                  as='image'
+                  media='(-webkit-max-device-pixel-ratio: 1.49)'
+                  // @ts-expect-error imagesrcset/imagesizes is not yet in the link element type.
+                  imagesrcset={srcSet1x}
+                  imagesizes={sizes}
+                />
+              </>
+            )}
+          </Head>
+        )}
+      </>
+    )
+  },
+)
+Image.displayName = 'Image'
+
+export { Image }