Discover the "refit" transformation

Introduction

The refit transformation resizes an image while allowing its main subject to occupy as much space as possible within the defined dimensions or aspect ratio.

Thus, you can use the refit transformation to:

• Avoid displaying the subjects of your images too small, so your users have a better understanding of your products:
• And/or align the subjects of different images on the same line to standardize the layout of your product listing pages:

Let's see how the refit transformation works.

How it works

The refit transformation is based on the same AI algorithm as the background transformation. This AI detects the main object of an image in order to determine its subject. In the case of the refit transformation, this subject will occupy as much space as possible within the defined dimensions or aspect ratio. This means TwicPics will never create pixels that were not present in the original image.

Example 1: one subject only. See original image.

Example 2: as they're juxtaposed, the AI treats the two subjects – an arm holding shoes – as one. See original image.

Example 3: here, the AI processes both subjects separately, since the shoe and the hand do not touch each other. We can see from the resulting image that the algorithm identified the hand as the main subject of the image. However, in the original image, there is not enough space around this hand for it to occupy all the space of the resulting image. See original image.

Choose appropriate images

As you can see from the above examples, images that are best suited for the use of the refit transformation are images:

• With a single subject, as this will cause less random behavior from the algorithm.
• With enough space around the subject of the original image.

Now, let's see how to use the refit transformation.

Usage

The syntax for the refit transformation is:

refit=<size|ratio>[@<anchor>][(<padding>)]

size and ratio mean it's possible to specify the dimensions of the image either with pixel dimensions, e.g. refit=500x500, or by defining an aspect ratio, e.g. refit=4:3.

Example 1: with pixel dimensions, refit=900x1200

Example 2: with a ratio, refit=1:1

But we can see from the two examples presented above that, by default, the identified subject:

1. Is placed in the center of the image.
2. Touches the edges of the resulting image.

This is where the anchor and padding options come into play.

Anchor option

The anchor option allows aligning the subject of the image on a given line by setting an anchor among the following values:

• top
• top-right
• right
• bottom-right
• bottom
• bottom-left
• left
• top-left
• center (default)

Example: refit=3:4@left

Padding option

As for the padding option, it adds space around the subject of the image. The value is a list of lengths separated by a comma and following the CSS convention:

• <top><right><bottom><left>, e.g. refit=500x500@left(100,50,80,30)
• <top><horizontal><bottom>, e.g. refit=500x500@right(100,50,80)
• <vertical><horizontal>, e.g. refit=500x500(100,50)
• <both vertical and horizontal>, e.g. refit=500x500(100)

Example: refit=1:1(500,0,0)

However, for optimal image optimization based on different DPRs, we recommend defining the padding values in percentage, e.g. refit=500x500(4p).

Example: refit=1:1(10p)

Integration

Since the feature was released a short time ago, we are still working on its implementation in TwicPics Components. But you can already use it in your HTML integrations with TwicPics Native and its data-twic-transform attribute.

<figure>
  <img
    data-twic-src="media:refit/sneakers-06.jpg"
    data-twic-transform="refit=WxH"
    alt="White, green, and yellow Nike sneakers"
  />
</figure>

figure {
  position: relative;
  width: 400px;
  height: 400px;
  border-radius: 6px;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s;
  will-change: opacity;
}

img.twic-done {
  opacity: 1;
}

Conclusion

Thanks to the "refit" feature, TwicPics allows you to easily standardize the layout of your product pages while giving your users a better understanding of your products.

Please stay tuned for future updates on the "refit" feature!