ImageKit Pipe Usage Guide

Purpose

The ImageKitPipe is designed to optimize external image links by resizing and compressing them for faster loading within the application. This ensures efficient performance, especially for images rendered in different container sizes.

How It Works

The pipe appends a resizing suffix to the image URL for optimized loading.
It ensures that images from specific exempted domains (admintcns.wforwoman.com, media.wforwoman.com) are fetched directly from the source.
If an invalid image URL is passed, a default placeholder image is returned.
ImageKit URLs are processed only if they are large and need optimization.

Usage

To use the ImageKitPipe, pass the image URL along with an optional suffix and prefix. The suffix should be defined based on the image container size.

Example

If you are previewing an image in a 25x25 container, fetch the image with the same dimensions:

<img [src]="imageUrl | imageKit:'tr=w-25,h-25,cm-pad_resize'" />

For a larger preview (e.g., 300x300), use:

<img [src]="imageUrl | imageKit" />

Notes

The imageKit pipe is not required for ImageKit URLs unless the image is large and needs resizing for smaller containers.
Always define the suffix according to the image container dimensions to ensure the best performance.

Example

Image container:

.evidence-img {
    width: 25.6px;
    height: 32px;
}

Fetched image using imageKit pipe with wrong suffix: https://ik.imagekit.io/eshopbox/workspace/https://storage.googleapis.com/eshopbox_uploads_staging/capture_proof/image20250108052225_250110063516116-1069.png?tr=w-300,h-300,cm-pad_resize

Actuall image should be fetched as per container:

https://ik.imagekit.io/eshopbox/workspace/https://storage.googleapis.com/eshopbox_uploads_staging/capture_proof/image20250108052225_250110063516116-1069.png?tr=w-26,h-32,cm-pad_resize

By following these guidelines, We can efficiently manage and render external images within the application with optimal performance.