Feat: Add srcset property to nuxt-img and nuxt-picture

[dannyalder88]

As suggested in #216 the current implementation has poor support for handling different device pixel densities. This adds the srcset prop as suggested by ArtCraft so you can control which image sizes are created. It supports a string of widths in pixels to overwrite the images generated by the sizes prop or pixel density descriptors to adjust which images the sizes prop generates.

[pi0]

Hi @dannyalder88 Thanks for PR (and fixing typos). If you have a chance to check my comment https://github.com/nuxt/image/issues/216#issuecomment-840740583, if goal is supporting densities, I think it might be much easier for both users and maintenance to keep it as simple with sizes property (to be supported in nuxt-img as well). (until then adding pending label to distinguish PR status)

[dannyalder88]

Finally got around to implementing the changes discussed in #216 (sorry it took a while been a busy month).

The latest changes change the srcset prop to a densities prop that only accepts single-digit density descriptions (1x 2x etc.). I've also added a global densities option that can be set in nuxt.config to make it easier to have all images produce the user's preferred densities.

I've noticed there's a lot more typescript being used throughout the project now. I'm not that familiar with it so if I've done anything wrong let me know and I can get it changed.

[madsh93]

Is it correctly understood that this will enable e.g. retina images?

which will output images with: width = 500 and height = 200 if devices pixel density is 1x and width = 1000 and height = 400 if pixel density is 2x

[dannyalder88]

Yes, it would generate retina sizes. It uses the size prop to create the files. So it will take what nuxt/image calculates as a size and then will use the density prop to generate the additional image sizes for retina. So if the sizes passed were "sm:100, md:400" this would generate images of 100, 200, 400 and 800 pixels wide. It adds these sizes to the generated code to let the browser know they are available and select the best image for the displayed width and pixel density.

[nikolashaag]

Hey @dannyalder88 , is there anything blocking this PR? I would really need this feature to start using nuxt/ image in our project.

[tetz2442]

Is there any progress on this? I'd love to get this on my blog to better handle retina screens

[adinvadim]

Hi! What is left to fix so that you can merge?

[dannyalder88]

Hey! Sorry, I've been absent on this. This is the first PR I've done for a package so I'm not 100% sure about the process of getting it merged/approved. I was just under the assumption it had been decided not to merge the feature for now as a package maintainer has to do it.

If there is still anything outstanding that I need to do my side let me know and I'll get it sorted.

EDIT: There is a newer PR here #459 which looks like it's doing the same thing automatically without the need for providing arguments. Might be a better fit now.

[itpropro]

@pi0 has this been superseded by #459 and can be closed?