Image component sized by multiplier

[lifeiscontent]

Bug report

Images I use on my site I follow this practices to have crisp images at different DPIs.

<img
  alt="Design of checkout form"
  height="846"
  src="/images/checkout-form/1x.png"
  srcset="/images/checkout-form/2x.png 2x, /images/checkout-form/3x.png 3x"
  width="270"
  class="jsx-1397468523">

from the looks of it, theres no way to define a srcSet with 1x + 2x with the new image component.

is there a way to do this? Its not clear in the docs.

I'm not sure if you'd be interested in creating a different component with more flexibility but if you implemented the picture element you'd allow user to specify all the sources they would need.

e.g.

<picture>
    <source srcset="/media/cc0-images/surfer-240-200.jpg"
            media="(min-width: 800px)">
    <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
</picture>

I could see the same markup in Next.js as follows:

function MyComponent () {
  return (
    <Picture>
       <Source width="240" height="200" media="(min-width: 800px)" />
       <Img src="/media/cc0-images/painted-hand-298-332.jpg" />
     </Picture>
  );
}

where:

Img would be the component to specify the source image
Source would be the component to specify alternatives
Picture to be the wrapper to share logic between Source + Img

[M1ck0]

You have more info about the image component here and you can see all props here

<Image/> will create different sizes of a provided image and use the one that fits best based on screen size.

It will use this default configuration

module.exports = {
  images: {
    deviceSizes: [320, 420, 768, 1024, 1200],
    iconSizes: [],
    domains: [],
    path: '/_next/image',
    loader: 'default',
  },
}

You can specify a list of device width breakpoints using the deviceSizes property. Since images maintain their aspect ratio using the width and height attributes of the source image, there is no need to specify height in next.config.js – only the width. These values will be used by the browser to determine which size image should load.

You can also use sizes props to help it determine which image should load on which screen. More about that here

If this does not answer your question could you elaborate more so I or another member can help you with your issue :)

[leerob]

Thanks for this, this is correct!

[delanebob]

I was actually looking at the new <Image/> as well to possibly replace my current setup, but had a similar issues when trying to support retina devices.

I didn't go looking at changing the different sizes through the prop. If I try to set the width/height to double my intended size it loads it, but the container is then too big.

So would be nice to see what would be the recommended way to support something like this?

[saidurh]

Same here. Also looking to support retina screens and can't seem to find an easy way with the new <Image/>

[lifeiscontent]

@M1ck0 from what I can tell from the documentation you posted, the API is not designed in a way that allows for easy integration for images to be supported on retina devices.

Based on my example above, it would be nice to specify the different scales of images to be used. e.g. 1x, 2x, 3x which is something that is supported natively by browsers, but not in the Next.js Image component.

[M1ck0]

I still don't understand what the problem is with retina devices. Could you elaborate more or give some examples so that I can understand the problem better.

[M1ck0]

And also could you check this out?

https://nextjs.org/docs/api-reference/next/image#sizes

[lifeiscontent]

@M1ck0 the problem I've outline allows you to have images that render depending on the dpi of the screen. I don't care if the image is responsive or not, it should work regardless as it's just a scaling factor of DPI. Which currently doesn't seem possible. Please take a look at Apple Developer documentation for web apps in safari for more details. This is where most developers would have learned this technique.

[egemon]

If anyone else wondering, we can try this as for now:

        <Image
          src={macBookImg}
          width={macBookImg.width / 2}
          height={macBookImg.height / 2}

[i-am-the-slime]

And how do you do this only for retina displays?

[MarcinBizior]

what about?

    <Image
      src={image}
      width={image.width / window.devicePixelRatio}
      height={image.height / window.devicePixelRatio}

[i-am-the-slime]

Cool, but I have my doubts that this is SSR-friendly.

[Kyoss79]

This won't work in SSR. It will also lead to Layout shift, since the HTML will have no height until react has hydrated the image using window.devicePixelRatio.
Don't use this.