Nuxt background-image vs Nuxt-Img

Question

In my solution I'm using Nuxt-Img that returns resized images according to the current resolution.

But with the img-Tag it's quite hard/dirty to work with e.g. adding linear-gradient or focussing the image having overlays etc.

With a background-image it would be quite easier but it seems that nuxt-img doesn't support resizing for background-images.

Update

Trying the following nuxt-image approach, the image size doesn't changes and is reloading the page always 418kb:

<script>
export default {
  name: "SectionServices",
  props: {
    services: {
      type: Array,
      required: true,
    },
  },
  computed: {
    servicesVal() {
      return this.services.map((service) => {
        return {
          src: this.$img(service.src, {
            sizes: "xs:400px sm:640px md:768px lg:70vw xl:70vw xxl:70vw",
          }),
          alt: service.alt,
          name: service.name,
          link: service.link,
        };
      });
    },
  },
};
</script>

So is there any great advise how to handle that? What is your recommendation? Using nuxt-img or is it better to work with background-image? Using Background-image, how can I handle the image-size that I don't need to load large images for e.g. mobile phones?