ImageEngine Svelte

Seamlessly integrate optimized responsive images in your Svelte applications using ImageEngine Svelte components.

Quick Start

The package includes four components:

- ImageEngineProvider
- Image
- Picture
- Source

To start using these components, place ImageEngineProvider above them in the DOM tree with the deliveryAddress prop set:

``svelte





`

$3

`svelte



src="pick-ups/custom/unstoppable.jpg"
srcSet={...}
sizes={...}
directives={...}
{...otherProps}
/>



`

Component Props Reference

$3

- deliveryAddress: ImageEngine Delivery Address.
- Type: string
- stripFromSrc: Optionally strip a portion of the source string in all ImageEngine components.
- Type: string?

$3

- src: Relative path to the image.
- Type: string
- directives: ImageEngine directives for optimization.
- Type: object?
- Properties:
- width: Define desired width.
- autoWidthWithFallback: Set width to auto (with fallback).
- height: Define desired height.
- compression: Adjust compression.
- outputFormat: Define desired output format.
- fitMethod: Define desired fit method.
- noOptimization: Don't apply any optimizations to the origin image.
- sharpness: Adjust sharpness.
- rotate: Define rotation.
- scaleToScreenWidth: Use WURFL to calculate screen's width and then scale the image accordingly.
- crop: Crop the image [width, height, left, top].
- inline: Convert the image into a data url.
- keepMeta: Keep EXIF data.
- force_download: Force download of the image.
- max_device_pixel_ratio: Maximum device pixel ratio.
- srcSet: List of image variations for the image source set.
- Type: array?
- Properties:
- src: Relative path to the image.
- width: Width descriptor.
- directives: Custom optimization instructions.

$3

This component wraps image components to provide a responsive container.

$3

- srcSet: List of image variations for the image source set.
- Type: array
- Properties:
- src: Relative path to the image.
- width: Width descriptor.
- directives`: Custom optimization instructions.