juliomrqz / nuxt-optimized-images

🌅🚀 Automatically optimizes images used in Nuxt.js projects (JPEG, PNG, SVG, WebP and GIF).
https://marquez.co/docs/nuxt-optimized-images/
MIT License
842 stars 30 forks source link

Resize+size limited by responsive setting? #340

Closed brunobg closed 2 years ago

brunobg commented 2 years ago

Describe the bug The srcset value does not match the sizes parameters, instead only generating the images in the responsive: sizes nuxt.config.js parameter.

To Reproduce Steps to reproduce the behavior:

  1. Set your nuxt.config.js to something like this:
    optimizeImages: true,
    optimizeImagesInDev: true,
    responsive: {
      sizes: [ 360 ],
  2. Load an image overriding the sizes attribute like this: const image = require('~/static/images/something.jpg?resize&sizes[]=360&sizes[]=640&sizes[]=1000');
  3. Use it on the template like this: <img :src="image.src" :srcset="image.srcSet">
  4. Output: <img src="/lajevr/_nuxt/img/43191fb-360.jpg" srcset="/lajevr/_nuxt/img/43191fb-360.jpg 360w">
  5. Expected output: including the other sizes, 640 and 1000.

Expected behavior There are some images in my site that I want to build only a low resolution version (say 360px), others that should be responsive for multiple sizes (e.g. 360, 640, 1000). I thought I could list only 360 on the config file, and override for the few ones I need more resolutions. Apparently that is not the case.

I have a ton of these 360px only images, and generating other sizes of them would be considerably slow and waste space. Is there a way to override the default value like I tried to do? If so, I suggest adding it to the documentation.

brunobg commented 2 years ago

Sorry, there was a mistake in my setup. I'm closing this issue.