Handle retina display

[Atinux]

In order to display a non-pixelated image when using a retina screen, we need to generate a 2x image + adding it to srcset.

I believe we should generate it by default (1x and 2x), the trickiest part is that we should not generate an image bigger than the actual image resolution, forcing us to know the image resolution before rendering.

Let's have a look at other framework to understand how they tackle the problem:

• Gatsby is using outputPixelDensities, see RFC
• Next does not support it, see discussion
• Gridsome does not support it, see issue

I made it work for <nuxt-img> by using $img:

<nuxt-img :src="photo.src.original" :srcset="srcSet(photo.src.original, { width: 490, height: 400 })" width="490" height="400" loading="lazy" />

And having an srcSet method:

srcSet (src, { width, height }) {
  const x1 = this.$img(src, { modifiers: { width, height } }).url
  const x2 = this.$img(src, { modifiers: { width: width * 2, height: height * 2 } }).url

   return `${x1} x1, ${x2} 2x`
}

[Suven]

Maybe I am understanding you wrong, but in case it's useful, I'd like to provide a heads up before you are doing more work for this:

srcset in general does not allow to mix x and w-urls by purpose. The general advise is to always go for w as that will also support retina-devices. If you have a device with 300 logical pixels width, but a pixeldensity of 2x AND you define an image for 300w and one for 600w, the device will use the 600w-variant.

Edit:\ Quoted from MDN:

A width descriptor (a positive integer directly followed by w). The width descriptor is divided by the source size given in the sizes attribute to calculate the effective pixel density.

So if you combine srcset with sizes, it actually does the same thing as 1x, 2x

[adinvadim]

Hi! Is this issue closed? Dont see "2x" functionality in source code. Or nuxt-img doesnt work with retina by default and I should write custom srcSet?