Skip to content


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


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

  • generation of multiple sources with multiple image resolutions (srcset)
  • breakpoint-based differentiation of multiple image resolutions and ratios (srcset + media-rule)
  • 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 SpeedkitPicture is used to automatically generate and display different image sizes and/or image ratios 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 SpeedkitPicture do not disable @nuxt/image via disableNuxtImage.


    <speedkit-picture v-bind="{ sources, title, alt }" @load="onLoadPicture" />

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

  sources: {
    type: Object,
    default() {
      return [
          src: '/img/landscape.png',
          sizes: {
            sm: '100vw',
            md: '100vw',
            lg: '100vw',
            xl: '100vw',
            xxl: '100vw'
          media: '(orientation: landscape)'
          src: '/img/portrait.png',
          sizes: { default: '100vw', xxs: '100vw', xs: '100vw' },
          media: '(orientation: portrait)'
  title: String,
  alt: String

const onLoadPicture = () => console.log('Picture loaded!');


  sources: [ … ],
  formats: ['avif', 'webp', 'jpg|jpeg|png'],
  alt: 'Image Alt',
  title: 'Image Title',


  • Type: Boolean
    • Default: true

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


  • Type: Array

List of resources used.

The definitions in the sources are equivalent to the SpeedkitImage (source).

The only differences are:

  • The media property can be used. This allows even more dependencies for the display, e.g. (orientation: portrait).
  • The format property is not used. Instead formats is used for setting the output formats.


In the following example, two different image ratios are used.

  • landscape.jpg is applied at a viewport of 996px with an image size of 996px (100vw) by orientation landscape.
  • portrait.jpg is applied below 768px and has two viewport dependent image sizes, at (min-width: 768px) the width 768px and everything below that the width 320px by orientation portrait
  { src: '/img/landscape.png', sizes: { md: '100vw' }, media: '(orientation: landscape)' },
  { src: '/img/portrait.png', sizes: { default: '100vw', sm: '100vw' }, media: '(orientation: portrait)' }


  • Type: Array
    • Default: ['webp', 'avif', 'jpg|jpeg|png|gif']

Overrides the pictureFormats property defined in the module options.

Defines the formats that are to be generated and provided as source in the Picture.
Is used to offer the correct image type for the browser.


Formats can also be specified as OR condition (jpg|jpeg|png|gif). This is important when using JPGs and PNGs with the same format configuration.


  • 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: true

If set, the sources are sorted by the media properties.

This is made possible by sort-css-media-queries.


  • Type: Boolean
    • Default: $parent.isCritical

Set component as critical component.

Learn more about critical components


loadTriggered when the image resource has been completely loaded.