diff --git a/playground/pages/bg.vue b/playground/pages/bg.vue
new file mode 100644
index 000000000..0b18c52c9
--- /dev/null
+++ b/playground/pages/bg.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="preview" />
+</template>
+
+<script lang="ts" setup>
+const $img = useImage()
+
+const bg = computed(() => {
+  const imgUrl = $img('/images/colors.jpg', {
+    width: 300,
+    height: 300,
+    quality: 80
+  })
+
+  return `url('${imgUrl}')`
+})
+</script>
+
+<style>
+.preview {
+  width: 300px;
+  height: 300px;
+  background-image: v-bind(bg);
+}
+</style>
diff --git a/src/module.ts b/src/module.ts
index bef4d1063..7b4c05da9 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -1,5 +1,5 @@
 import { withLeadingSlash } from 'ufo'
-import { defineNuxtModule, addTemplate, createResolver, addComponent, addPlugin } from '@nuxt/kit'
+import { defineNuxtModule, addTemplate, addAutoImport, createResolver, addComponent, addPlugin } from '@nuxt/kit'
 import { resolveProviders, detectProvider } from './provider'
 import type { ImageProviders, ImageOptions, InputProvider, CreateImageOptions } from './types'
 
@@ -85,14 +85,19 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.options.alias['#image'] = runtimeDir
     nuxt.options.build.transpile.push(runtimeDir)
 
+    addAutoImport({
+      name: 'useImage',
+      from: resolver.resolve('runtime/composables')
+    })
+
     // Add components
     addComponent({
       name: 'NuxtImg',
-      filePath: resolver.resolve('./runtime/components/nuxt-img.vue')
+      filePath: resolver.resolve('./runtime/components/nuxt-img')
     })
     addComponent({
       name: 'NuxtPicture',
-      filePath: resolver.resolve('./runtime/components/nuxt-picture.vue')
+      filePath: resolver.resolve('./runtime/components/nuxt-picture')
     })
 
     // Add runtime options
diff --git a/src/runtime/components/_base.ts b/src/runtime/components/_base.ts
new file mode 100644
index 000000000..e98b48f35
--- /dev/null
+++ b/src/runtime/components/_base.ts
@@ -0,0 +1,107 @@
+import { computed } from 'vue'
+import type { ExtractPropTypes } from 'vue'
+import { parseSize } from '../utils'
+
+export const baseImageProps = {
+  // input source
+  src: { type: String, required: true },
+
+  // modifiers
+  format: { type: String, default: undefined },
+  quality: { type: [Number, String], default: undefined },
+  background: { type: String, default: undefined },
+  fit: { type: String, default: undefined },
+  modifiers: { type: Object as () => Record<string, any>, default: undefined },
+
+  // options
+  preset: { type: String, default: undefined },
+  provider: { type: String, default: undefined },
+
+  sizes: { type: [Object, String] as unknown as () => string | Record<string, any>, default: undefined },
+  preload: { type: Boolean, default: undefined },
+
+  // <img> attributes
+  width: { type: [String, Number], default: undefined },
+  height: { type: [String, Number], default: undefined },
+  alt: { type: String, default: undefined },
+  referrerpolicy: { type: String, default: undefined },
+  usemap: { type: String, default: undefined },
+  longdesc: { type: String, default: undefined },
+  ismap: { type: Boolean, default: undefined },
+  loading: { type: String, default: undefined },
+  crossorigin: {
+    type: [Boolean, String] as unknown as () => 'anonymous' | 'use-credentials' | boolean,
+    default: undefined,
+    validator: val => ['anonymous', 'use-credentials', '', true, false].includes(val)
+  },
+  decoding: {
+    type: String as () => 'async' | 'auto' | 'sync',
+    default: undefined,
+    validator: val => ['async', 'auto', 'sync'].includes(val)
+  }
+}
+
+export interface BaseImageAttrs {
+  width?: number
+  height?: number
+  alt?: string
+  referrerpolicy?: string
+  usemap?: string
+  longdesc?: string
+  ismap?: boolean
+  crossorigin?: '' | 'anonymous' | 'use-credentials'
+  loading?: string
+  decoding?: 'async' | 'auto' | 'sync'
+}
+
+export interface BaseImageModifiers {
+  width?: number
+  height?: number
+  format?: string
+  quality?: string | number
+  background?: string
+  fit?: string
+  [key: string]: any
+}
+
+export const useBaseImage = (props: ExtractPropTypes<typeof baseImageProps>) => {
+  const options = computed(() => {
+    return {
+      provider: props.provider,
+      preset: props.preset
+    }
+  })
+
+  const attrs = computed<BaseImageAttrs>(() => {
+    return <BaseImageAttrs>{
+      width: parseSize(props.width),
+      height: parseSize(props.height),
+      alt: props.alt,
+      referrerpolicy: props.referrerpolicy,
+      usemap: props.usemap,
+      longdesc: props.longdesc,
+      ismap: props.ismap,
+      crossorigin: props.crossorigin === true ? 'anonymous' : props.crossorigin || undefined,
+      loading: props.loading,
+      decoding: props.decoding
+    }
+  })
+
+  const modifiers = computed<BaseImageModifiers>(() => {
+    return <BaseImageModifiers> {
+      ...props.modifiers,
+      width: parseSize(props.width),
+      height: parseSize(props.height),
+      format: props.format,
+      quality: props.quality,
+      background: props.background,
+      fit: props.fit
+    }
+  })
+
+  return {
+    options,
+    attrs,
+    modifiers
+  }
+}
diff --git a/src/runtime/components/image.mixin.ts b/src/runtime/components/image.mixin.ts
deleted file mode 100644
index d9243753f..000000000
--- a/src/runtime/components/image.mixin.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import type { ComponentOptions } from 'vue'
-import { parseSize } from '../utils'
-
-export const imageMixin: ComponentOptions = {
-  props: {
-    // input source
-    src: { type: String, required: true },
-
-    // modifiers
-    format: { type: String, default: undefined },
-    quality: { type: [Number, String], default: undefined },
-    background: { type: String, default: undefined },
-    fit: { type: String, default: undefined },
-    modifiers: { type: Object as () => Record<string, any>, default: undefined },
-
-    // options
-    preset: { type: String, default: undefined },
-    provider: { type: String, default: undefined },
-
-    sizes: { type: [Object, String] as unknown as () => string | Record<string, any>, default: undefined },
-    preload: { type: Boolean, default: undefined },
-
-    // <img> attributes
-    width: { type: [String, Number], default: undefined },
-    height: { type: [String, Number], default: undefined },
-    alt: { type: String, default: undefined },
-    referrerpolicy: { type: String, default: undefined },
-    usemap: { type: String, default: undefined },
-    longdesc: { type: String, default: undefined },
-    ismap: { type: Boolean, default: undefined },
-    crossorigin: { type: [Boolean, String] as unknown as () => boolean | '' | 'anonymous' | 'use-credentials', default: undefined, validator: val => ['anonymous', 'use-credentials', '', true, false].includes(val) },
-    loading: { type: String, default: undefined },
-    decoding: { type: String as () => 'async' | 'auto' | 'sync', default: undefined, validator: val => ['async', 'auto', 'sync'].includes(val) }
-  },
-  computed: {
-    nImgAttrs (): {
-      width?: number
-      height?: number
-      alt?: string
-      referrerpolicy?: string
-      usemap?: string
-      longdesc?: string
-      ismap?: boolean
-      crossorigin?: '' | 'anonymous' | 'use-credentials'
-      loading?: string
-      decoding?: 'async' | 'auto' | 'sync'
-      } {
-      return {
-        width: parseSize(this.width),
-        height: parseSize(this.height),
-        alt: this.alt,
-        referrerpolicy: this.referrerpolicy,
-        usemap: this.usemap,
-        longdesc: this.longdesc,
-        ismap: this.ismap,
-        crossorigin: this.crossorigin === true ? 'anonymous' : this.crossorigin || undefined,
-        loading: this.loading,
-        decoding: this.decoding
-      }
-    },
-    nModifiers (): { width?: number, height?: number, format?: string, quality?: string | number, background?: string, fit?: string } & Record<string, any> {
-      return {
-        ...this.modifiers,
-        width: parseSize(this.width),
-        height: parseSize(this.height),
-        format: this.format,
-        quality: this.quality,
-        background: this.background,
-        fit: this.fit
-      }
-    },
-    nOptions (): { provider?: string, preset?: string } {
-      return {
-        provider: this.provider,
-        preset: this.preset
-      }
-    }
-  }
-}
diff --git a/src/runtime/components/nuxt-img.ts b/src/runtime/components/nuxt-img.ts
new file mode 100644
index 000000000..ec6f46cbb
--- /dev/null
+++ b/src/runtime/components/nuxt-img.ts
@@ -0,0 +1,109 @@
+import { h, defineComponent } from 'vue'
+import { useImage } from '../composables'
+import { parseSize } from '../utils'
+import { baseImageProps, useBaseImage } from './_base'
+import { useHead } from '#imports'
+
+export const imgProps = {
+  ...baseImageProps,
+  placeholder: { type: [Boolean, String, Number, Array], default: undefined }
+}
+
+export default defineComponent({
+  name: 'NuxtImg',
+  props: imgProps,
+  setup: (props, ctx) => {
+    const $img = useImage()
+    const _base = useBaseImage(props)
+
+    const placeholderLoaded = ref(false)
+
+    type AttrsT = typeof _base.attrs.value & {
+      sizes?: string
+      srcset?: string
+    }
+
+    const sizes = computed(() => $img.getSizes(props.src, {
+      ..._base.options.value,
+      sizes: props.sizes,
+      modifiers: {
+        ..._base.modifiers.value,
+        width: parseSize(props.width),
+        height: parseSize(props.height)
+      }
+    }))
+
+    const attrs = computed(() => {
+      const attrs: AttrsT = _base.attrs.value
+      if (props.sizes) {
+        attrs.sizes = sizes.value.sizes
+        attrs.srcset = sizes.value.srcset
+      }
+      return attrs
+    })
+
+    const placeholder = computed(() => {
+      let placeholder = props.placeholder
+      if (placeholder === '') { placeholder = true }
+      if (!placeholder || placeholderLoaded.value) { return false }
+      if (typeof placeholder === 'string') { return placeholder }
+
+      const size = (Array.isArray(placeholder)
+        ? placeholder
+        : (typeof placeholder === 'number' ? [placeholder, placeholder] : [10, 10])) as [w: number, h: number, q: number]
+
+      return $img(props.src, {
+        ..._base.modifiers.value,
+        width: size[0],
+        height: size[1],
+        quality: size[2] || 50
+      }, _base.options.value)
+    })
+
+    const mainSrc = computed(() =>
+      props.sizes
+        ? sizes.value.src
+        : $img(props.src, _base.modifiers.value, _base.options.value)
+    )
+
+    const src = computed(() => placeholder.value ? placeholder.value : mainSrc.value)
+
+    if (props.preload) {
+      const isResponsive = Object.values(sizes.value).every(v => v)
+      useHead({
+        link: [{
+          rel: 'preload',
+          as: 'image',
+          ...(!isResponsive
+            ? { href: src.value }
+            : {
+                href: sizes.value.src,
+                imagesizes: sizes.value.sizes,
+                imagesrcset: sizes.value.srcset
+              })
+        }]
+      })
+    }
+
+    const imgEl = ref<HTMLImageElement>(null)
+
+    onMounted(() => {
+      if (placeholder.value) {
+        const img = new Image()
+        img.src = mainSrc.value
+        img.onload = () => {
+          imgEl.value.src = mainSrc.value
+          placeholderLoaded.value = true
+        }
+      }
+    })
+
+    return () => h('img', {
+      ref: imgEl,
+      key: src.value,
+      src: src.value,
+      ...attrs.value,
+      ...ctx.attrs
+    })
+  }
+})
diff --git a/src/runtime/components/nuxt-img.vue b/src/runtime/components/nuxt-img.vue
deleted file mode 100644
index 68a774778..000000000
--- a/src/runtime/components/nuxt-img.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-  <img :key="nSrc" v-bind="nAttrs" ref="img" :src="nSrc">
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import type { ImageSizes } from '../../types'
-import { imageMixin } from './image.mixin'
-
-import { parseSize } from '#image'
-
-type NAttrs = typeof imageMixin['nImgAttrs'] & {
-    sizes?: string
-    srcset?: string
-}
-
-export default defineComponent({
-  name: 'NuxtImg',
-  mixins: [imageMixin],
-  props: {
-    placeholder: { type: [Boolean, String, Number, Array], default: undefined }
-  },
-  data () {
-    return {
-      placeholderLoaded: false
-    }
-  },
-  head () {
-    if (this.preload === true) {
-      return {
-        link: [
-          {
-            rel: 'preload',
-            as: 'image',
-            href: this.nSrc
-          }
-        ]
-      }
-    }
-    return {}
-  },
-  computed: {
-    nAttrs (): NAttrs {
-      const attrs: NAttrs = this.nImgAttrs
-      if (this.sizes) {
-        const { sizes, srcset } = this.nSizes
-        attrs.sizes = sizes
-        attrs.srcset = srcset
-      }
-      return attrs
-    },
-    nMainSrc (): string {
-      return this.sizes ? this.nSizes.src : this.$img(this.src, this.nModifiers, this.nOptions)
-    },
-    /* eslint-disable no-undef */
-    nSizes (): ImageSizes {
-      return this.$img.getSizes(this.src, {
-        ...this.nOptions,
-        sizes: this.sizes,
-        modifiers: {
-          ...this.nModifiers,
-          width: parseSize(this.width),
-          height: parseSize(this.height)
-        }
-      })
-    },
-    nSrc (): string {
-      return this.nPlaceholder ? this.nPlaceholder : this.nMainSrc
-    },
-    nPlaceholder () {
-      let placeholder = this.placeholder
-      if (placeholder === '') { placeholder = true }
-      if (!placeholder || this.placeholderLoaded) { return false }
-      if (typeof placeholder === 'string') { return placeholder }
-      const size = (Array.isArray(placeholder)
-        ? placeholder
-        : (typeof placeholder === 'number' ? [placeholder, placeholder] : [10, 10])) as [w: number, h: number, q: number]
-      return this.$img(this.src, {
-        ...this.nModifiers,
-        width: size[0],
-        height: size[1],
-        quality: size[2] || 50
-      }, this.nOptions)
-    }
-  },
-  mounted () {
-    if (this.nPlaceholder) {
-      const img = new Image()
-      img.src = this.nMainSrc
-      img.onload = () => {
-        // @ts-ignore
-        this.$refs.img.src = this.nMainSrc
-        this.placeholderLoaded = true
-      }
-    }
-    if (process.server && process.static) {
-      if (this.sizes) {
-        // Force compute sources into ssrContext
-        // eslint-disable-next-line no-unused-expressions
-        this.nSizes
-      }
-    }
-  }
-})
-</script>
diff --git a/src/runtime/components/nuxt-picture.ts b/src/runtime/components/nuxt-picture.ts
new file mode 100644
index 000000000..7983f3c56
--- /dev/null
+++ b/src/runtime/components/nuxt-picture.ts
@@ -0,0 +1,80 @@
+import { h, defineComponent } from 'vue'
+import { useBaseImage, baseImageProps } from './_base'
+import { useHead } from '#imports'
+import { getFileExtension } from '#image'
+
+export const pictureProps = {
+  ...baseImageProps,
+  legacyFormat: { type: String, default: null },
+  imgAttrs: { type: Object, default: null }
+}
+
+export default defineComponent({
+  name: 'NuxtPicture',
+  props: pictureProps,
+  setup: (props, ctx) => {
+    const $img = useImage()
+    const _base = useBaseImage(props)
+
+    const isTransparent = computed(() => ['png', 'webp', 'gif'].includes(originalFormat.value))
+
+    const originalFormat = computed(() => getFileExtension(props.src))
+
+    const format = computed(() => props.format || originalFormat.value === 'svg' ? 'svg' : 'webp')
+
+    const legacyFormat = computed(() => {
+      if (props.legacyFormat) { return props.legacyFormat }
+      const formats: Record<string, string> = {
+        webp: isTransparent.value ? 'png' : 'jpeg',
+        svg: 'png'
+      }
+      return formats[format.value] || originalFormat.value
+    })
+
+    const nSources = computed<Array<{ srcset: string, src?: string, type?: string, sizes?: string }>>(() => {
+      if (format.value === 'svg') {
+        return [{ srcset: props.src }]
+      }
+
+      const formats = legacyFormat.value !== format.value
+        ? [legacyFormat.value, format.value]
+        : [format.value]
+
+      return formats.map((format) => {
+        const { srcset, sizes, src } = $img.getSizes(props.src, {
+          ..._base.options.value,
+          sizes: props.sizes || $img.options.screens,
+          modifiers: { ..._base.modifiers.value, format }
+        })
+
+        return { src, type: `image/${format}`, sizes, srcset }
+      })
+    })
+
+    if (props.preload) {
+      const srcKey = nSources.value?.[1] ? 1 : 0
+
+      const link: any = { rel: 'preload', as: 'image', imagesrcset: nSources.value[srcKey].srcset }
+
+      if (nSources.value?.[srcKey]?.sizes) { link.imagesizes = nSources.value[srcKey].sizes }
+
+      useHead({ link: [link] })
+    }
+
+    return () => h('picture', { key: nSources.value[0].src }, [
+      ...(nSources.value?.[1] && [h('source', {
+        type: nSources.value[1].type,
+        sizes: nSources.value[1].sizes,
+        srcset: nSources.value[1].srcset
+      })]),
+      h('img', {
+        ..._base.attrs.value,
+        ...props.imgAttrs,
+        ...ctx.attrs,
+        src: nSources.value[0].src,
+        sizes: nSources.value[0].sizes,
+        srcset: nSources.value[0].srcset
+      })
+    ])
+  }
+})
diff --git a/src/runtime/components/nuxt-picture.vue b/src/runtime/components/nuxt-picture.vue
deleted file mode 100644
index 5bdb7faf4..000000000
--- a/src/runtime/components/nuxt-picture.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
-  <picture :key="nSources[0].src">
-    <source
-      v-if="nSources[1]"
-      :type="nSources[1].type"
-      :srcset="nSources[1].srcset"
-      :sizes="nSources[1].sizes"
-    >
-    <img
-      v-bind="{...nImgAttrs, ...imgAttrs}"
-      :src="nSources[0].src"
-      :srcset="nSources[0].srcset"
-      :sizes="nSources[0].sizes"
-    >
-  </picture>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { imageMixin } from './image.mixin'
-
-import { getFileExtension } from '#image'
-
-export default defineComponent({
-  name: 'NuxtPicture',
-  mixins: [imageMixin],
-  props: {
-    legacyFormat: { type: String, default: null },
-    imgAttrs: { type: Object, default: null }
-  },
-  head () {
-    if (this.preload === true) {
-      const srcKey = typeof this.nSources[1] !== 'undefined' ? 1 : 0
-      const link = {
-        rel: 'preload',
-        as: 'image',
-        imagesrcset: this.nSources[srcKey].srcset
-      }
-      if (typeof this.nSources[srcKey].sizes !== 'undefined') {
-        link.imagesizes = this.nSources[srcKey].sizes
-      }
-      return {
-        link: [link]
-      }
-    }
-    return {}
-  },
-  computed: {
-    isTransparent (): boolean {
-      return ['png', 'webp', 'gif'].includes(this.originalFormat)
-    },
-    originalFormat (): string {
-      return getFileExtension(this.src)
-    },
-    nFormat (): string {
-      if (this.format) {
-        return this.format
-      }
-      if (this.originalFormat === 'svg') {
-        return 'svg'
-      }
-      return 'webp'
-    },
-    nLegacyFormat (): string {
-      if (this.legacyFormat) {
-        return this.legacyFormat
-      }
-      const formats: Record<string, string> = {
-        webp: this.isTransparent ? 'png' : 'jpeg',
-        svg: 'png'
-      }
-      return formats[this.nFormat] || this.originalFormat
-    },
-    nSources (): Array<{ srcset: string, src?: string, type?: string, sizes?: string }> {
-      if (this.nFormat === 'svg') {
-        return [{
-          srcset: this.src
-        }]
-      }
-
-      const formats = this.nLegacyFormat !== this.nFormat
-        ? [this.nLegacyFormat, this.nFormat]
-        : [this.nFormat]
-
-      const sources = formats.map((format) => {
-        const { srcset, sizes, src } = this.$img.getSizes(this.src, {
-          ...this.nOptions,
-          sizes: this.sizes || this.$img.options.screens,
-          modifiers: {
-            ...this.nModifiers,
-            format
-          }
-        })
-
-        return {
-          src,
-          type: `image/${format}`,
-          sizes,
-          srcset
-        }
-      })
-
-      return sources
-    }
-  },
-  created () {
-    if (process.server && process.static) {
-      // Force compute sources into ssrContext
-      // eslint-disable-next-line no-unused-expressions
-      this.nSources
-    }
-  }
-})
-</script>
diff --git a/src/runtime/composables.ts b/src/runtime/composables.ts
new file mode 100644
index 000000000..ee4852606
--- /dev/null
+++ b/src/runtime/composables.ts
@@ -0,0 +1,3 @@
+export const useImage = () => {
+  return useNuxtApp().$img
+}
diff --git a/src/runtime/plugin.ts b/src/runtime/plugin.ts
index 441ee4705..c2a3c7506 100644
--- a/src/runtime/plugin.ts
+++ b/src/runtime/plugin.ts
@@ -1,4 +1,5 @@
 import { createImage } from '#image'
+// @ts-ignore
 import { imageOptions } from '#build/image-options'
 import { defineNuxtPlugin } from '#imports'