Service for building optimized image URLs using Cloudflare Image Transformations.

Accessible via lynkow.media. This is a pure utility service (no API calls, no caching) that constructs Cloudflare /cdn-cgi/image/ URLs from Lynkow media URLs. Works on both server and browser. Handles both original URLs (/sites/...) and already-transformed URLs (/cdn-cgi/image/...), re-extracting the original path when needed.

Access via: lynkow.mediaHelper

Methods

2 methods

srcset

TypeScript
srcset(imageUrl: string | null | undefined, options: SrcsetOptions): string

Generates an HTML srcset attribute value from a Lynkow image URL, suitable for use in an <img srcset="..."> or <source srcset="..."> tag. Produces one Cloudflare Image Transformation URL per width breakpoint.

Parameter

Type

Description

imageUrl

string | null | undefined

Original image URL from the Lynkow API (e.g. content.featuredImage).<br> Accepts null or undefined safely (returns empty string).

options

SrcsetOptions

Configuration for the srcset:<br> - widths — array of pixel widths to generate (default: [400, 800, 1200, 1920])<br> - fit — resize mode: 'cover', 'contain', 'scale-down', or 'crop' (default: 'scale-down')<br> - quality — image quality 1-100 (default: 80)<br> - gravity — focal point for crop mode (e.g. '0.5x0.3')

Returns: string

TypeScript
// Build a responsive <img> tag with multiple widths
const srcsetValue = lynkow.media.srcset(article.featuredImage, {
  widths: [480, 768, 1024, 1440],
  fit: 'cover',
  quality: 85,
})
const imgTag = `<img srcset="${srcsetValue}" sizes="(max-width: 768px) 100vw, 50vw" alt="${article.title}" />`

transform

TypeScript
transform(imageUrl: string | null | undefined, options: TransformOptions): string

Generates a single Cloudflare Image Transformation URL from a Lynkow image URL. Useful for thumbnails, hero images, or any context where you need a specific size/format.

Parameter

Type

Description

imageUrl

string | null | undefined

Original image URL from the Lynkow API (e.g. content.featuredImage).<br> Accepts null or undefined safely (returns empty string).

options

TransformOptions

Transformation options:<br> - w / h — target width/height in pixels<br> - fit — resize mode: 'cover', 'contain', 'scale-down', or 'crop' (default: 'scale-down')<br> - quality — image quality 1-100 (default: 80)<br> - format — output format: 'auto', 'webp', 'avif', or 'jpeg' (default: 'auto')<br> - gravity — focal point for crop mode (e.g. '0.5x0.3')<br> - dpr — device pixel ratio 1-4 for retina displays

Returns: string

TypeScript
// Build an optimized thumbnail URL for a product card
const thumbUrl = lynkow.media.transform(product.image, {
  w: 400,
  h: 300,
  fit: 'cover',
  format: 'webp',
  quality: 75,
})
document.querySelector('.product-thumb').src = thumbUrl