Image Resizing

Use Frontbacked image resizing when a theme needs smaller, cropped, or format-optimized versions of uploaded images. The browser still receives a normal image URL, but the URL points to a resized Frontbacked image.

Image resizing only works for Frontbacked-owned images, such as post upload file fields, site assets, logos, and theme assets. External image URLs are not transformed. When a source is external or invalid, the helper returns an empty string and logs a warning in development.

Basic Resize

Frontbacked.image.resize(source, options) accepts either a URL string or a file metadata object returned from Frontbacked uploads.

const thumbnail = Frontbacked.image.resize(post.image, {
  w: 320,
  h: 320,
  fit: "cover",
  q: 82,
  f: "auto"
});

Use it in an attribute binding through a small wrapper function:

<img
  f="true"
  f-attr-src="$.image.resizeProductThumb()"
  f-attr-alt="$.title || 'Product image'"
>

window.resizeProductThumb = function resizeProductThumb(image) {
  return Frontbacked.image.resize(image, {
    w: 320,
    h: 320,
    fit: "cover",
    f: "auto",
    q: 82
  });
};

FQL function calls pass the resolved value into the wrapper. In the example above, $.image.resizeProductThumb() passes the current list item's image value to window.resizeProductThumb.

Responsive Images

Use Frontbacked.image.srcset(source, entries) when the browser should choose the best width for the viewport.

<img
  f="true"
  f-attr-src="$.image.resizeArticleImage()"
  f-attr-srcset="$.image.resizeArticleSrcset()"
  sizes="(max-width: 720px) 100vw, 720px"
  f-attr-alt="$.title || 'Article image'"
>

window.resizeArticleImage = function resizeArticleImage(image) {
  return Frontbacked.image.resize(image, {
    w: 720,
    fit: "scale-down",
    f: "auto",
    q: 82
  });
};

window.resizeArticleSrcset = function resizeArticleSrcset(image) {
  return Frontbacked.image.srcset(image, [
    { w: 320, fit: "scale-down", f: "auto", q: 82 },
    { w: 640, fit: "scale-down", f: "auto", q: 82 },
    { w: 1024, fit: "scale-down", f: "auto", q: 82 }
  ]);
};

Each srcset entry uses the same options as resize. Entries with a w value are emitted as width descriptors, such as 640w.

Options

At least one of w/width or h/height is required.

Option	Values	Purpose
w or width	16 to 2400	Target width in CSS pixels.
h or height	16 to 2400	Target height in CSS pixels.
fit	scale-down, cover, crop, contain, pad, squeeze	Controls how the image fits the requested box. Defaults to scale-down.
f or format	auto, webp, avif, jpeg, png	Output format. Use auto for normal theme images.
q or quality	40 to 90	Output quality. Defaults to 82.
dpr	1 to 2	Device pixel ratio multiplier for sharper images on dense screens.
g or gravity	auto, center, top, bottom, left, right, top-left, top-right, bottom-left, bottom-right, face	Crop focus for cover and crop.
bg or background	#ffffff or a simple color name	Background color for fit: "pad".
enlarge	true or false	Allows upscaling. Defaults to false.

Dimension Limits and Normalization

Requested dimensions must be positive numbers. Values from 1 to 15 are treated as 16, and values above 2400 are rejected with an error. Frontbacked then normalizes valid dimensions to supported cache-friendly sizes:

16, 24, 32, 40, 48, 64, 80, 96, 128, 160, 192, 224, 256,
320, 384, 448, 512, 640, 768, 896, 1024, 1280, 1536,
1920, 2048, 2400

The normalized value is the first supported size greater than or equal to the requested size.

Requested	Normalized
15	16
100	128
320	320
321	384
641	768
1900	1920

Use common widths such as 320, 640, 1024, 1280, and 1920 for responsive images.

When enlarge is not set, Frontbacked avoids making small originals larger. In that mode, cover behaves like crop, and contain, pad, and squeeze fall back to scale-down.

Common Patterns

Square avatar:

window.resizeAvatar = (image) => Frontbacked.image.resize(image, {
  w: 160,
  h: 160,
  fit: "cover",
  g: "face",
  f: "auto"
});

Post card image:

window.resizeCardImage = (image) => Frontbacked.image.resize(image, {
  w: 640,
  h: 420,
  fit: "cover",
  g: "auto",
  f: "auto",
  q: 82
});

Logo that should never be cropped:

window.resizeLogo = (image) => Frontbacked.image.resize(image, {
  w: 240,
  h: 96,
  fit: "pad",
  bg: "#ffffff",
  f: "auto"
});

Uploads and File Fields

When a post contains a File or Blob, Frontbacked.uploadPost uploads it and stores file metadata on the post. Use the returned file object or the fetched post field directly as the resize source.

const response = await Frontbacked.uploadPost({
  type: "articles",
  post: {
    title: Frontbacked.getState("form.title"),
    image: Frontbacked.getState("form.image")
  }
});

Later, in a list or detail page:

<img f="true" f-attr-src="$.image.resizeArticleImage()" alt="">

For progress events, nested file fields, and resuming interrupted uploads, see Upload File.

Notes

Use the helper instead of hand-building /_fb/image URLs. Frontbacked normalizes the generated URL so repeated requests for the same source and resize options reuse the same browser and edge cache entry.

Keep original images in upload/file fields and generate resized URLs at render time. Do not save resized URLs back into posts unless your theme has a specific reason to store that derived URL.