Optimise images for high-density displays

[jakearchibald]

Describe the feature you'd like to request

Images on high-density displays can be compressed to a much greater extent without visual loss. Almost every mobile has a high density screen, as does a significant portion of desktop/laptop screens.

Unfortunately, next.js's image element doesn't take advantage of this, as it uses a single srcset. This means that the 828w image may be used on high-density mobile screens, but it may also be used on a 1x desktop screen.

To look good on a 1x desktop screen, the image needs to be a much higher quality. As a result, mobile users are downloading bigger images (in terms of file size) than necessary, which load slower and use more bandwidth.

Describe the solution you'd like

Allow <Image /> to serve images using a pattern like this:

<picture>
  <source media="(-webkit-min-device-pixel-ratio: 1.5)" srcset="…" sizes="…" />
  <img srcset="…" sizes="…" width="1598" height="1026" alt="A red panda" />
</picture>

Where a different set of sources is provided for 1.5x (or whatever cut off you choose) and above vs 1x.

The higher density images would be compressed to a lower 'quality' setting, making them smaller and quicker to download. Since they're displayed on a high density screen, the compression artefacts are not as noticable.

I wrote a blog post about this, with examples https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/.

This may need to be opt-in, since changing from an <img> to a <picture> may not be backwards-compatible with existing site CSS.

Describe alternatives you've considered

I guess the alternative is to keep serving unnecessarily large resources to users with high density screens.

[leerob]

Related discussion: #25393

[leerob]

Update: We have extracted the core logic from next/image into a new unstable_getImgProps() function.

This allows usage outside of <Image>, such as:

1. Working with background-image or image-set
2. Working with canvas context.drawImage() or simply new Image()
3. Working with <picture> media queries to implement Art Direction or Light/Dark Mode images

Example

import { unstable_getImgProps as getImgProps } from 'next/image'

export default function Page() {
  const common = { alt: 'Hero', width: 800, height: 400 }
  const { props: { srcSet: dark } } = getImgProps({ ...common, src: '/dark.png' })
  const { props: { srcSet: light, ...rest } } = getImgProps({ ...common, src: '/light.png' })

  return (<picture>
  <source media="(prefers-color-scheme: dark)" srcSet={dark} />
  <source media="(prefers-color-scheme: light)" srcSet={light} />
  <img {...rest} />
</picture>)
}

PR: #51205

[leerob]

Appreciate you raising this! It should work now. This PR will land on canary and be available in an upcoming stable release.

[jakearchibald]

Just to close it out, could you provide an example of using different compression levels for different densities?

[vicasas]

@leerob

I have been waiting for this functionality for a long time! Thank you!!.

However, I'm afraid it doesn't work as I expected or I still don't understand the configuration.

We need to support images of different sizes for mobile and desktop in an ecommerce. So we use this:

import { unstable_getImgProps as getImgProps } from 'next/image'

export default function Picture() {
  const common = { alt: 'Hero' }
  const {
    props: { ...rest },
  } = getImgProps({
    ...common,
    width: 600,
    height: 587,
    src: 'https://assets-prd.com/header-1-mb.jpg',
  })
  const {
    props: { srcSet: desk },
  } = getImgProps({
    ...common,
    width: 1920,
    height: 650,
    src: 'https://assets-prd.com/header-1-desk.jpg',
  })

  return (
    <picture>
      <source media="(min-width: 600px)" srcSet={desk} />
      <img {...rest} />
    </picture>
  )
}

But we did not get the expected results. The idea is that on screens over 600px wide an image that has a size of 1920x650 pixels can be displayed, while on smaller screens an image of 600x587 pixels is displayed.

I would understand that with this <source media="(min-width: 600px)" srcSet={desk} /> the image for desktop would be shown when the screen is 600 pixels or more, while with this <img {...rest} /> a default image for mobiles would be shown when the screen is less than 600 pixels. But the getImgProps function for desktop does not respect the size indicated in the configuration options.

Could you guide me please?

[navin-moorthy]

This is great step forward to be able to customize the art direction. Like @vicasas said we want the ability to customize the srcSet(width) for every image individually instead of fixing them at deviceSizes and imageSizes because different image needs different srcSet sizes.