Image

Image has built-in performance and accessibility optimizations that allow users to easily display responsive images.

Overview

Image builds on Angular's NgOptimizedImage to provide responsive images with stable layouts out of the box. It helps to avoid common image-related performance and accessibility issues by:

• Preventing layout shift with required width and height attributes
• Ensuring accessibility by requiring descriptive alt text
• Maintaining proper aspect ratios for responsive designs

Usage

Import DAFF_IMAGE_COMPONENTS into your component:

import { Component } from '@angular/core';
import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_IMAGE_COMPONENTS,
  ],
})
export class CustomComponent {}

Deprecation notice:

DaffImageModule is deprecated. Use the standalone component imports instead.

Required attributes

All four of the following attributes are required and will throw an error if missing:

Attribute	Description
src	The image source URL
alt	Alternative text describing the image
width	The intrinsic width of the image in pixels
height	The intrinsic height of the image in pixels

Features

Skeleton screen

Use the skeleton property to display a placeholder skeleton screen that helps reduce load-time frustration.

Priority loading

Use the priority property to mark an image as a priority for loading. Priority images are loaded eagerly and not lazy-loaded.

Accessibility

Provide concise, meaningful descriptions that convey the content and purpose of the image by using the alt attribute. An error will be thrown if alt is missing.