A Simple and Effective Way to Reframe your Images

In a previous article, we deep dived into TwicPics' Refit Transformation: an effective AI-based method for cropping images while emphasizing their main subjects.

Through various examples and use cases, we've seen how to implement this transformation using the TwicPics' Script via the data-twic-transform attribute.

In this tutorial we'll find out how TwicPics Components (more exactly the TwicImg component) makes it even easier to benefit from this incredible transformation.

In preamble to our adventure

Environnement

In this article, we will be using the React version of TwicImg.

To save you time, we have created a minimalist React project with TwicPics Components configured and ready to use.

This project is available here. Feel free to fork and use it as you wish.

The image used in this post is https://assets.twicpics.com/demo/refit/skiing-the-powder.jpg (jpeg - 5826 x 3884 pixels px - 2.8 MB).

Display an image with TwicImg Component

Let's ensure that everything is working correctly by displaying our image.

As a reminder, achieving a pixel-perfect ideally compressed image with an optimized CLS using TwicImg is as simple as :

// src/App.jsx

import './App.css';

// import TwicImg component
import { TwicImg } from '@twicpics/components/react';

const App = () => (
  <>
    <TwicImg
      src="refit/skiing-the-powder.jpg" /* sets path to the image in the given domain */
    />
  </>
);

export default App;

This is what we should get:

The displayed image is a squared variant whose dimensions precisely match the reserved space for its display.

Its size is 26.8kB (compare this to the 2.8MB of the master image).

As demonstrated here, the Cumulative Layout Shift (CLS) is optimized and a Low-Quality Image Placeholder (LQIP) enhances the user experience.

At this stage, everything is working properly. Now, let's explore how to reframe our image to its main subject.

Refit an image with TwicImg Component

To activate the Refit Transformation, simply add the refit property in our component call.

Like in:

import './App.css';

// import TwicImg component
import { TwicImg } from '@twicpics/components/react';

const App = () => (
  <>
    <TwicImg
      src="refit/skiing-the-powder.jpg" /* sets path to the image in the given domain */
      refit /* activates refit transformation */
    />
  </>
);

export default App;

And that's it:

We get a reframed variant of our master image, where the main subject occupies the maximum possible space while adhering to the defined aspect ratio (in this case 1).

Please take note of the value of the data-twic-transform generated attribute: data-twic-transform="refit=WxH". We'll come back to this later.

Impact of Aspect Ratio on Reframing Outcome

In the previous example, the main subject occupied most of the resulting image. This occurs because aspect ratios of the resulting image and the bounding box containing the main subject are close.

But what happens if these aspect ratios are significantly different?

Let's clarify this by creating an example with 3 variants of the same master image. This time, in addition to the refit property, we will use the ratio prop to specify the desired aspect ratio. You can find this example here:

import './App.scss';

// import TwicImg component
import { TwicImg } from '@twicpics/components/react';

const App = () => (
  <>
    <div className="item">
      <TwicImg
        src="refit/skiing-the-powder.jpg" /* path to the image in the given domain */
        refit /* activates refit transformation */
      />
      <span>ratio=1 (default value)</span>
    </div>
    <div className="item">
      <TwicImg
        src="refit/skiing-the-powder.jpg" /* path to the image in the given domain */
        ratio="16/9" /* sets aspect ratio to 16/9 */
        refit /* activates refit transformation */
      />
      <span>ratio=16/9</span>
    </div>
    <div className="item">
      <TwicImg
        src="refit/skiing-the-powder.jpg" /* path to the image in the given domain */
        ratio="9/16" /* sets aspect ratio to 16/9 */
        refit /* activates refit transformation */
      />
      <span>ratio=9/16</span>
    </div>
  </>
);

export default App;

Here's what you should see now:

In all three situations :

• the image is precisely cropped to highlight the main subject.
• the specified aspect ratio is respected.
• the main subject is rendered without distortion.

This was achieved by adding pixels from the original image around the main subject, either horizontally or vertically, depending on the specified aspect ratio difference.

In summary, aspect ratio can affect the refit outcome, potentially moving the cropping away from the main subject. If your use case requires cropping that does not depend on the final aspect ratio, the following paragraph may be of interest.

Reframe as close as possible to the main object?

It's time to come back to the value of data-twic-transform attribute that we highlighted earlier: data-twic-transform="refit=WxH".

This specifies a transformation where the image is refitted to a specific aspect ratio defined by WxH, where W and H represent the dimensions of the display context.

What we need here is a transformation where the image is refitted as closely as possible to the main object—an automatic refit. Something akin to data-twic-transform="refit=auto".

Finally, to achieve a pixel-perfect variant, we must consider the display context and thus add /* to the data-twic-transform value.

Like so: data-twic-transform="refit=auto/*".

Complicated? Not with TwicImg.

To achieve this result, simply modify our previous example by adding the mode="contain" property:

import './App.scss';

// import TwicImg component
import { TwicImg } from '@twicpics/components/react';

const App = () => (
  <>
    <div className="item">
      <TwicImg
        src="refit/skiing-the-powder.jpg" /* path to the image in the given domain */
        mode="contain" /* makes the image sit inside the area */
        refit /* activates refit transformation */
      />
      <span>ratio=1</span>
    </div>
    <div className="item">
      <TwicImg
        src="refit/skiing-the-powder.jpg" /* path to the image in the given domain */
        mode="contain" /* makes the image sit inside the area */
        ratio="16/9" /* sets aspet ratio to 16/9 */
        refit /* activates refit transformation */
      />
      <span>ratio=16/9</span>
    </div>
    <div className="item">
      <TwicImg
        src="refit/skiing-the-powder.jpg" /* path to the image in the given domain */
        mode="contain" /* makes the image sit inside the area */
        ratio="9/16" /* sets aspet ratio to 16/9 */
        refit /* activates refit transformation */
      />
      <span>ratio=9/16</span>
    </div>
  </>
);

export default App;

You can try this on StackBlitz. The expected result is illustrated here:

As you can see, we achieve a pixel-perfect variant with cropping as close as possible to the main object regardless of the specified aspect ratio.

If we go into the details, we see that the TwicPics settings and API configuration have been done for you:

• object-fit has been set to contain
• data-twic-transform has been set to refit=auto/*

Flexibility in refitting?

So far, we've obtained images with the main object positioned at the center of the display area, touching the borders either horizontally or vertically (or both) : this is the default behavior.

As mentioned in the documentation, the TwicPics API allows us to tailor this default setup using various customization options.

For instance, to align our skier to the left while adding 10% padding at the top, 5% on the sides, and 15% at the bottom, we would write:

<img
  ...
  data-twic-transform="refit=WxH(10p,5p,15p)@left"
  data-twic-src="media:refit/skiing-the-powder.jpg"
  ...
>

Using TwicImg, it becomes:

...
<TwicImg
  src="refit/skiing-the-powder.jpg" /* path to the image in the given domain */
  anchor="left" /* aligns main subject to the left border */
  refit="10p,5p,15p" /* activates refits and defines padding on top, sides and bottom */
/>
...

In this example, anchor positions the main object to the left while refit activates and configures the padding around it. The padding is defined using a comma-separated list of lengths following the CSS convention:

• <top>,<right>,<bottom>,<left>
• <top>,<horizontal>,<bottom>
• <vertical>,<horizontal>
• <both>

Fell free to try it on StackBlitz where you should obtain something like this :

As you can see, our skier is positioned as specified.

If you examine the value of the data-twic-transform attribute, you'll notice it corresponds to what we would have manually entered if we hadn't used TwicImg.

To go further: a visual standardization use case

At this stage we have seen that TwicImg component simplifies the use of Refit Transformation.

Simplifies but without limiting its power.

To reinforce this, we rewrote the layout standardization use case from our previous article, now using TwicImg. Feel free to explore this revised example on StackBlitz.

Here we find the standardization effect as described in the previous article simply by writing:

...
<TwicImg 
  src="refit/a_black_bottle.jpg" /* path to the image */
  anchor="left" /* aligns the main object to the left edge */
  refit="2p" /* activates refit with a 2% padding around the main object */
/>
...

Of course, in addition to this standardization effect, you benefit from all the other out of the box advantages of TwicImg (CLS optimization, LQIP management, etc.).

Conclusion

Leveraging the complete potential of the Refit Transformation is now effortlessly achievable through the TwicImg component.

The various array of options provided by properties like anchor, mode, ratio and refit enables seamless handling of a wide range of use cases, ensuring effective image cropping and harmonization while keeping the main subjects in focus.

All examples in this article use the React version of TwicImg. You can of course do the same in the framework of your choice.

Finally, if you're new to TwicImg, don't hesitate to visit our live demos. They showcase additional features for displaying both images and videos.