Related services: MediaHelperService — lynkow.mediaHelper.srcset(), lynkow.mediaHelper.transform()

ImageVariants

Interface

CDN image variant URLs generated by Cloudflare Image Transformations.

Each property is a pre-generated URL for a specific size/crop preset. All URLs point to Cloudflare's CDN and support WebP/AVIF auto-negotiation via the Accept header. Properties are undefined when the original image is smaller than the preset dimensions (no upscaling is performed).

Use the smallest variant that fits your layout to minimize bandwidth.

Property

Type

Optional

Description

avatar

string

Yes

128x128px, cover crop with face detection gravity.<br>Use case: user avatars, author photos, profile pictures.<br>Face detection ensures faces are centered in the crop.<br>undefined when the original image is smaller than 128x128.

card

string

Yes

600x400px, cover crop.<br>Use case: card layouts, blog post previews, medium-sized list items.<br>undefined when the original image is smaller than 600x400.

content

string

Yes

1200px wide, scaled down proportionally (no crop).<br>Use case: inline images within article body content.<br>undefined when the original image is narrower than 1200px.

full

string

Yes

2560px wide, scaled down proportionally (no crop).<br>Use case: full-resolution display, lightbox/zoom views, retina hero images.<br>This is the largest available variant. undefined when the original<br>image is narrower than 2560px.

hero

string

Yes

1920px wide, scaled down proportionally (no crop).<br>Use case: full-width hero banners, page headers, background images.<br>undefined when the original image is narrower than 1920px.

medium

string

Yes

960px wide, scaled down proportionally (no crop).<br>Use case: medium-width displays, sidebar featured images, tablet layouts.<br>undefined when the original image is narrower than 960px.

og

string

Yes

1200x630px, cover crop.<br>Use case: Open Graph images, social media sharing (Facebook, LinkedIn, Twitter).<br>Dimensions follow the recommended OG image ratio (1.91:1).<br>undefined when the original image is smaller than 1200x630.

thumbnail

string

Yes

400x300px, cover crop with sharpening.<br>Use case: list views, grid thumbnails, small cards.<br>undefined when the original image is smaller than 400x300.

SrcsetOptions

Interface

Options for building srcset URLs

Property

Type

Optional

Description

fit

"cover" | "contain" | "scale-down" | "crop"

Yes

Resize fit mode (default: 'scale-down')

gravity

string

Yes

Focal point for crop (e.g., '0.5x0.3')

quality

number

Yes

Image quality 1-100 (default: 80)

widths

number[]

Yes

Image widths to include in srcset (default: [400, 800, 1200, 1920])

TransformOptions

Interface

Options for building a single transformed URL

Property

Type

Optional

Description

dpr

number

Yes

Device Pixel Ratio 1-4

fit

"cover" | "contain" | "scale-down" | "crop"

Yes

Resize fit mode

format

"auto" | "webp" | "avif" | "jpeg"

Yes

Output format (default: 'auto')

gravity

string

Yes

Focal point for crop

h

number

Yes

Target height in pixels

quality

number

Yes

Image quality 1-100 (default: 80)

w

number

Yes

Target width in pixels