How to Test AI Marketing Images for Safe Mobile Crops

AI-generated marketing artwork is still an ordinary raster image at delivery time. A responsive layout using object-fit: cover can cut away the headline or the dashboard panel even when the original image looks fine. Test that geometry before shipping it.

Define the contract in source-image coordinates

The poster above places a major headline close to an edge. The second example below puts a dashboard inside a laptop screen. Neither image is production UI: the smaller lettering includes gibberish, and a chart drawn by an image model is not real product data. The test here checks cropping only; it does not certify text accuracy or accessibility.

For an optional source of test artwork, inspect the live image generator. The FLUX 2 Klein 9B Base route currently selects a model labeled Flux 2 Klein 9b. Do not infer a different checkpoint from the route title. On September 4, 2026, it showed Prompt, optional Images, aspect ratio, Advanced Settings, Generate, Public · watermarked and a two-credit estimate at 1:1. Upload requires sign-in; check the quote before generating.

Use a rectangle [x, y, width, height] in original image pixels to mark content that must remain visible. The following implementation models centered CSS cover behavior. It does not support a different object-position, transforms or container padding.

import assert from "node:assert/strict";

function visibleRect(sw, sh, cw, ch) {
  for (const n of [sw, sh, cw, ch]) {
    if (!Number.isFinite(n) || n <= 0) {
      throw new RangeError("Dimensions must be finite and positive");
    }
  }
  const scale = Math.max(cw / sw, ch / sh);
  const w = cw / scale;
  const h = ch / scale;
  return [(sw - w) / 2, (sh - h) / 2, w, h];
}

function contains(view, box) {
  if (box.length !== 4 || box.some(n => !Number.isFinite(n)) ||
      box[2] <= 0 || box[3] <= 0) throw new RangeError("Invalid box");
  const [x, y, w, h] = view;
  const [bx, by, bw, bh] = box;
  const eps = 1e-7;
  return bx >= x - eps && by >= y - eps &&
    bx + bw <= x + w + eps && by + bh <= y + h + eps;
}

const mobile = visibleRect(1360, 768, 360, 480);
assert.deepEqual(mobile, [392, 0, 576, 768]);
assert.equal(contains(mobile, [400, 200, 200, 120]), true);
assert.equal(contains(mobile, [280, 100, 760, 500]), false);
assert.deepEqual(visibleRect(1024, 1024, 320, 320), [0, 0, 1024, 1024]);
assert.throws(() => visibleRect(1360, 768, 0, 480), RangeError);
console.log("crop contract checks passed");

Save this as crop-check.mjs and run node crop-check.mjs. The rectangle values are deliberate test fixtures, not automatically detected UI bounds. The 1360-by-768 dimensions match the public dashboard example; the large fixture demonstrates how a wide protected region fails a portrait crop.

Turn the failing fixture into a delivery decision

Measure the actual region your editor wants to protect and replace the fixture. Run it against every real container size from your design. A failed test should lead to a specific choice: use contain with letterboxing, supply a separate portrait asset, move the crop using a separately modeled object-position, or redesign the composition.

Do not shrink the protected rectangle merely to make the test green. It represents editorial requirements. Also check the final browser at the same dimensions: borders, padding, a different intrinsic image size and CSS overrides can invalidate a correct arithmetic test.

MDN documents that cover preserves aspect ratio while filling the element's content box and can clip the image: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit . The implementation above follows that centered-cover case.

Keep raster checks separate from product quality

A passing crop test says nothing about invented dashboard values, readable small text, trademark permissions, alt text or actual interface responsiveness. Render real labels and data as HTML when they communicate product facts. Treat these generated examples as artwork, not screenshots of a working application.

Create another composition only after defining its protected region. Reuse the checker on any raster asset; no generator integration, API key or paid request is required to run the test.