Responsive image sizing

We live in a time when websites should work on a huge range of devices with different sizes and densities, it is not enough to have only one version of image… at least 2 versions of each file (1x and 2x) is a must for modern web, but in many cases it may be reasonable to have 3-4 sizes of each file in webp format + fallback to jpg/png, so each picture usually may be resized/converted to 2-4-6 or more versions.

Problems:

• There is no way do define image sizes for high density image versions
• Presets do not allow to use sizes property available for nuxt-img
• (for @nuxt/content) Images inside .md files that included using .md syntax are not processed by @nuxt/image, it would be very nice if it is possible to set a default sizing using preset for those images

[pi0]

Hi @ArtCraft. Thanks for detailed proposal. Supporting densities, for sure makes sense. But I am thinking if main purpose is that, we can think about easier interface like this:

<nuxt-img sizes="sm:200px, md:500px" densities="1x 2x">

This way we can easily auto calculate all required additional densities and omit close variants. Also as you mentioned about preset, we can allow a global (nuxt.config) option to specify required densities and remove need of specify it on each use case.

What do you think about this?

[ArtCraft]

for example

<nuxt-img src="/picture1.jpg" sizes="sm:200px, md:500px"  alt="test"></nuxt-img>

this generates following code

<img
   srcset="/_ipx/pic1.jpg?w=200 200w, /_ipx/pic1.jpg?w=500 500w"
   sizes="(max-width: 640px) 200px, 500px"  
   src="/_ipx/pic1.jpg?w=500"    
   alt="test"
/>

on retina display (device pixel ratio 2.0) optimal image sizes would be 400px and 1000px, but srcset attribute do not provide those sizes

what should be generated to look good is:

<img
   srcset="/_ipx/pic1.jpg?w=200 200w, /_ipx/pic1.jpg?w=400 400w, /_ipx/pic1.jpg?w=500 500w, /_ipx/pic1.jpg?w=1000 1000w"
   sizes="(max-width: 640px) 200px, 500px"
   src="/_ipx/pic1.jpg?w=1000" 
   alt="test"
/>

so there should be some way to define those sizes as well something like

<nuxt-img 
    srcset="200w, 400w, 500w, 1000w" 
    sizes="sm:200px, md:500px" 
    src="/picture1.jpg" 
    alt="test"
></nuxt-img>

almost like img tag but with skipped filenames in srcset which going to be filled in automatically