The SpeedkitImage is a img implementation based on the module @nuxt/image.
It uses the provided API $img.


With the current implementation of SpeedkitImage we can cover the following functionality:

  • generation of multiple image resolutions (srcset)
  • breakpoint-based differentiation of multiple image resolutions (srcset)
  • optimized preloading of critical image resources
  • lazy load of non-critical image resources
  • base path support
  • lazy hydration support
  • load and optimize remote images from custom domains
  • full SEO support


The SpeedkitImage is used to automatically generate and display different image sizes for different viewports.

The specified resources can be given by absolute path (static folder) or complete URL. nuxt/image downloads the resources fully automatically and stores the generated and optimized renditions in the destination folder.

Important: For using SpeedkitImage do not disable @nuxt/image via disableNuxtImage.


    <speedkit-image v-bind="{ source, title, alt }" @load="onLoadImage"  />

<script setup>
import SpeedkitImage from '#speedkit/components/SpeedkitImage';

  source: {
    type: Object,
    default() {
      return {
        format: 'jpg',
        src: '/img/image.jpg',
        sizes: {
          default: '100vw',
          xxs: '100vw',
          xs: '100vw',
          sm: '100vw',
          md: '100vw',
          lg: '100vw',
          xl: '100vw',
          xxl: '100vw'
  title: String,
  alt: String

const onLoadImage = () => console.log('Image loaded!');


  source: { … },
  title: 'Image Title',
  alt: 'Image Alt'


  • Type: Boolean
    • Default: true

The initialization of the SpeedkitImage in the client can be controlled manually.
Here for the property hydrate must be set externally. If true the SpeedkitImage is initialized.


  • Type: Object
  format: '<output-format>', 
  src: '<file-path|url>', 
  sizes: { … }, 
  modifiers: { … }, 
  preset: { … }, 
  provider: '<provider>'


Sets the image output format.

Available formats:

  • avif
  • webp
  • png
  • jpg
Important: Note that if you specify src without a file extension, the format must be included.


Information on property src can be found at here.


Describes the image sizes in which the resource should be displayed. The image sizes are passed as an object and describe with the key-value pairs the image width and the width of the viewport depending on it, e.g. ImageWidth:MinWidth.

The image width, is definied by screens option from @nuxt/image


In the following example, one image with two different image sizes by breakpoints and output format is webp.

  { format: 'webp', src: '/img/image.jpg', sizes: { default: '100vw', sm: '100vw' } }


  • Type: Object

You can give separate modifiers to each source. This overwrites the global ones of the preset if available.

Learn more about modifiers:


  • Type: Object

If a preset is set on a source, the globally defined one is ignored.

This means that a separate preset can be specified for each source.

Learn more about preset:


  • Type: String

If a provider is set on a source, the globally defined one is ignored.

This means that a separate provider can be specified for each source.

Learn more about provider:


  • Type: String

Image alternative Text.

MDN - HTMLImageElement.alt


  • Type: String

Image Title.

MDN - HTMLElement.title


  • Type: String, Boolean

If not set, the global crossorigin is used this.$speedkit.crossorigin.

Learn more about crossorigin option

MDN - HTML.Attributes.crossorigin


  • Type: Boolean
    • Default: $parent.isCritical

Set component as critical component.

Learn more about critical components


  @load="console.log('Image Loaded!')" 
loadTriggered when the image resource has been completely loaded.