SCAYLE CDN Image Provider

Overview

Modern e-commerce experiences demand high-performance image delivery to ensure fast loading times and a smooth user experience. As part of Storefront the @scayle/nuxt-image-provider NPM package empowers developers working with the SCAYLE Storefront Boilerplate and Nuxt to seamlessly integrate optimized image delivery via the SCAYLE CDN.

This package introduces a dedicated SCAYLE CDN image provider for the @nuxt/image module, streamlining the process of serving optimized images. Furthermore, it provides the ScayleImg and ScaylePicture wrapper components, which extend the standard NuxtImg and NuxtPicture components with pre-configured optimal settings for the SCAYLE CDN. This simplifies implementation and ensures best practices for image handling within your SCAYLE Storefront projects, ultimately contributing to improved Core Web Vitals and a better user experience.

What is @nuxt/image?

@nuxt/image is a Nuxt module that simplifies and optimizes image handling within the application. It leverages powerful image optimization techniques like lazy loading, automatic format selection (WebP, AVIF), and responsive resizing, all while abstracting away the complex configuration. By integrating directly into the Nuxt build process, Nuxt Image streamlines the image workflow, automatically optimizing images at build time or on demand, and serving them from a CDN if configured. This results in significant performance improvements and a better user experience. It's seamlessly integrated into the Nuxt component ecosystem, allowing developers to use optimized images with minimal code changes.

What Does This Package Do Additionally to @nuxt/image?

Unlike @nuxt/image, @scayle/nuxt-image-provider is specifically designed to integrate with SCAYLE’s infrastructure, providing enhanced image delivery and optimization tailored for SCAYLE-powered applications. It supports SCAYLE-specific image transformations, allowing users to modify parameters such as brightness and trim, which are not natively available in @nuxt/image. Additionally, the package ensures that height is automatically calculated when both width and aspect ratio are provided, streamlining the image resizing process.

Configuration

After installation, configure the SCAYLE provider in your nuxt.config.ts:

typescript

Copy

export default defineNuxtConfig({
  modules: [
    '@scayle/nuxt-image-provider'
  ],
  image: {
    providers: {
      scayle: {
        name: 'scayle',
        provider: '@scayle/nuxt-image-provider',
      },
    },
  },
})

Components

Using ScayleImg

html

Copy

import { ScayleImg } from "#components"

<ScayleImg />

Props Definition

typescript

Copy

const { quality = 75, shouldTrim = false } = defineProps<{
  src: string
  quality?: number
  height?: number | string
  width?: number | string
  shouldTrim?: boolean
  brightness?: number
  aspectRatio?: [number, number]
}>()

Using ScaylePicture

html

Copy

import { ScaylePicture } from "#components"

<ScaylePicture />

Props Definition

typescript

Copy

const { quality = 75, shouldTrim=false } = defineProps<{
  src: string
  sizes?: string
  quality?: number
  height?: number | string
  width?: number | string
  shouldTrim?: boolean
  brightness?: number
  aspectRatio?: [x: number, y: number]
}>()

The SCAYLE components (ScayleImg and ScaylePicture) accept general HTML attributes such as aria properties and Vue specific event listeners. Since they act as wrappers around @nuxt/image components, they maintain full compatibility with accessibility attributes and event handling mechanisms, ensuring seamless integration into any Storefront application.

Migration

To migrate from NuxtImg and NuxtPicture please check out our Migration Guide.