SpeedkitPicture (Experimental)
SpeedkitPicture
is based on the module @nuxt/image@0.2.0
. However, we have created a separate Vue component for it, because at the time of the implementation of the module the component NuxtPicture
and the API for generating the images were not yet completely finished, or this module did not yet completely cover our use-case. We hope that with the final completion of @nuxt/image
we will be able to remove our component SpeedkitPicture
and can use @nuxt/image
& NuxtPicture
with full functionality.
nuxt/image
is fully feature-complete released. This also means that we will accept bug reports for the SpeedkitPicture
component. However, we will not fix bugs that are present in the generator of @nuxt/image
.Features
With the current implementation of SpeedkitPicture
we can cover the following functionality:
- generation of multiple image resolutions (srcset)
- breakpoint-based differentiation of multiple image resolutions and ratios (srcset + media-rule)
- generation of breakpoint-based placeholders (different ratios e.g. for mobile portrait and landscape)
- 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
Usage
The SpeedkitPicture
(Experimental) 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.
Example
<template>
<div>
<speedkit-picture v-bind="image" />
</div>
</template>
<script>
import SpeedkitPicture from 'nuxt-speedkit/components/experimental/SpeedkitPicture';
export default {
components: { SpeedkitPicture },
data () {
return {
image: {
sources: [
{ src: 'landscape.jpg', sizes: '576:576,1024:1024,1280:1280,1680:1680,1920:1920' },
{ src: 'portrait.jpg', sizes: '414,768:768' }
],
title: 'Image Title',
alt: 'Image Alt'
}
};
}
};
</script>
Properties
{
sources: […],
alt: 'Image Alt',
title: 'Image Title',
crossorigin: 'anonymous'
}
sources
- Type:
Array
List of resources used.
sizes
property is taken as the condition for the source e.g. (min-width: 992px)
.
This allows viewport dependent aspect ratios.Information on property src
can be found at here.
Property sizes
describes the image sizes in which the resource is to be displayed. Image sizes are comma separated and describe the image width and its dependent viewport width e.g. ImageWidth:MinWidth
.
In the following example, two different image ratios are used.
landscape.jpg
is applied at a viewport of992px
with an image size of1024px
.portrait.jpg
is applied below992px
and has two viewport dependent image sizes, at(min-width: 768px)
the width768px
and everything below that the width414px
.
[
{ src: 'landscape.jpg', sizes: '992:1024' },
{ src: 'portrait.jpg', sizes: '414,768:768' }
]
critical
- Type:
Boolean
- Default:
$parent.isCritical
- Default:
Set component as critical component.
Learn more about critical components
alt
- Type:
String
Image alternative Text.
title
- Type:
String
Image Title.
crossorigin
- Type:
String
- default:
anonymus
- default:
Image CrossOrigin.
MDN - HTMLImageElement.crossOrigin
Events
<speedkit-picture
@load="console.log('Loaded!')"
@enter="console.log('Viewport!')"
/>
Name | Description |
---|---|
load | Triggered when the image resource has been completely loaded. |
enter | Triggered when component has reached the viewport. |