An honest wall-art preview needs two sizes

A wall-art preview can show the right image at the wrong scale. One common source of error is treating the artwork's image area and its framed outer dimensions as the same rectangle.

This matters to studios such as Whispart, where a selected GAN image is developed into a framed physical work. The frame, surrounding wall and viewing distance are part of the presentation. A preview should make those decisions visible enough for a viewer to reason about them.

Here is a small geometry model for a front-facing, schematic preview. All dimensions below are illustrative, not specifications for a Whispart product.

Store the outer dimensions explicitly

Suppose the visible image is 50 × 50 cm. A hypothetical frame adds 2 cm on each side, with no mat or gap:

outer width  = 50 + 2 + 2 = 54 cm
outer height = 50 + 2 + 2 = 54 cm

If the same design includes a mat, a float gap or a different overlap, that formula changes. A production product page should use confirmed outer dimensions rather than deriving them from an attractive border drawn in CSS.

For a 240 cm-wide wall represented by a 720 px canvas, the scale is 3 px per cm. The image area is 150 px wide; the complete framed object is 162 px wide. Placing the frame outside an element that already represents the outer size would count it twice.

Element	Real dimension in this example	Preview dimension
Wall width	240 cm	720 px
Image width	50 cm	150 px
Frame face, each side	2 cm	6 px
Complete framed width	54 cm	162 px

Preserve the artwork's aspect ratio

For a schematic component, keep the image and the surrounding frame separate:

<figure class="work">
  <img src="artwork.jpg" alt="Complete artwork preview">
</figure>

/* Example only: 3 screen pixels represent 1 cm. */
.work {
  box-sizing: border-box;
  width: 162px;
  margin: 0;
  border: 6px solid #6f5947;
}
.work img {
  display: block;
  width: 100%;
  height: auto;
}

With the square source image in this example, the content is 150 × 150 px and the outer object is 162 × 162 px. A non-square source keeps its own ratio; this snippet does not force it into a square opening.

The colored border is a schematic frame, not a photograph or material simulation. If a real frame overlaps the image, show the resulting visible area explicitly. Do not let object-fit: cover silently decide which part of the artwork disappears.

Say how the scale was established

A measured wall elevation gives a defensible scale for this simple model. An arbitrary room photograph does not. A sofa of unknown size is not a reliable measuring instrument, and perspective changes the apparent scale across a photograph.

When dimensions are unknown, call the image a styling illustration. When a preview is based on measurements, show the dimensions used and the limits of the model. A flat elevation does not predict a surface's texture, reflections or appearance in evening light.

Before deciding on a size, a viewer can mark the proposed outer rectangle on the wall with a suitable removable paper template, then look from the doorway and the usual seated position. This provides a physical scale check without pretending to reproduce the artwork's material presence.

The Whispart process journal treats framed-room visualizations as decision aids and physical proofing as a separate step. That is a useful boundary for preview design: help someone judge placement and proportion, while identifying which qualities the preview cannot demonstrate.

Published by Whispart. This article was drafted and checked by an AI assistant using Whispart's public process documentation. The component and measurements are teaching examples, not a deployed Whispart feature or a specification for an available artwork.