eds-img

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out this practical implementation of component.

In Plain HTML

In React

Overview

EdsImg is a flexible image component with support for lazy loading, responsive image formats, and background effects during loading.

Key Features:

Allows responsive images using the srcset and sizes attributes, with additional support for various formats.
Supports lazy loading and optimized loading behavior through loading="lazy" and decoding="async".
Displays a background effect (effect-bg-pattern) while the image is loading, which fades once loading is complete.

Props:

src (string): Required URL for the image source.
alt (string): Alternative text for accessibility.
width, height (number): Dimensions for the image in pixels.
srcset (string), sizes (string): Support for responsive image handling.
formats (Array): Array of objects for multiple image formats (e.g., webp or jpeg).
lazyload (boolean): Enables lazy loading; defaults to true.
withBg (boolean): Adds a background effect while the image is loading.

This component is suitable for scenarios requiring optimized image loading and responsive images with smooth visual effects during loading.

Properties

Property	Attribute	Description	Type	Default
`alt`	`alt`	The alternative text for the image. Defaults to an empty string so that decorative images are ignored by assistive technologies.	`string`	`''`
`formats`	–	Array of image formats for different sources (e.g., webp, jpeg). Expects objects with `type`, `srcset`, and optional `media` attributes.	`{ type: string; srcset: string; media?: string; }[]`	`[]`
`height`	`height`	The height of the image in pixels.	`number`	`undefined`
`lazyload`	`lazyload`	Enables lazy loading for the image. Defaults to true.	`boolean`	`true`
`sizes`	`sizes`	The sizes attribute for responsive images.	`string`	`undefined`
`src` (required)	`src`	The source URL of the image.	`string`	`undefined`
`srcset`	`srcset`	The srcset attribute for responsive images.	`string`	`undefined`
`width`	`width`	The width of the image in pixels.	`number`	`undefined`
`withBg`	`with-bg`	Adds a background effect while the image is loading.	`boolean`	`true`

Dependencies

Used by

eds-avatar
eds-card-generic
eds-card-project
eds-card-tool
eds-footer
eds-steps-v2

Graph

Built with StencilJS

Last updated on April 18, 2025