How to automate responsive image resizing with NextJs and TwicPics

In this tutorial we will learn how to resize images by using the layout-driven pattern of TwicPics Components in a Next.js project.

A quick reminder before we start. TwicPics Components allow to display images and shorts videos perfectly optimized and in a way to integrate the latest best practices effortlessly.

Based on the power of TwicPics Native, these components are context aware. This means that they deliver your assets according to the display context.

As a consequence, they do not expose any height or width properties to determine the display size: it is the display area that will determine the width (and possibly the height) of your image or short video.

Let's take a look at what this means in concrete terms.

The image used in this section is https://assets.twicpics.com/demo/@twicpics-components/sea.jpg (jpg - 1920x2560px - 836kB).

Display an image without size constraints

Let's start by adding our TwicPics component in a natural div that will serve as our image container.

// pages/index.js
import { TwicImg } from '@twicpics/components/react';
export default function Home() {
  return (
    <main>
        <div>
          <TwicImg src="components/sea.jpg" />
        </div>
    </main>
  );
}

Since no dimensional constraints are imposed, our container occupies the entire available width. The same goes for our image:

The purpose of this example is to demonstrate that it is container size that controls the size of the image. Not only the dimensions of the displayed image but, more importantly, those of the actually loaded image.

Application to image resizing

Let's change the previous example to this:

// pages/index.js
import { TwicImg } from '@twicpics/components/react';
export default function Home() {
  return (
    <main>
        <div style={{ width: '400px' }}>
          <TwicImg src="components/sea.jpg" />
        </div>
        <div style={{ width: '300px' }}>
          <TwicImg src="components/sea.jpg" />
        </div>
        <div style={{ width: '200px' }}>
          <TwicImg src="components/sea.jpg" />
        </div>
    </main>
  );
}

Here we set a width for the containers of 3 TwicImg components that display the same master image. Here is the result:

We get 3 variants. Each one has its own dimensions: the image has been resized according to the width of its container.

Using CSS

In the previous example, we use the style attribute to resize our images.

Of course we can also use CSS rules.

Let's change the previous example to this:

// pages/index.js
import { TwicImg } from '@twicpics/components/react';
export default function Home() {
  return (
    <main>
        <div className="sm">
          <TwicImg src="components/sea.jpg" />
        </div>
        <div className="md">
          <TwicImg src="components/sea.jpg" />
        </div>
        <div className="lg">
          <TwicImg src="components/sea.jpg" />
        </div>
    </main>
  );
}

/* styles/global.css */
.lg {
  width: 400px;
}
.md {
  width: 300px;
}
.sm {
  width: 200px;
}

Here is the new rendering:

No surprise, we get our three resized variants.

Now we know how to control the width of our images. But what about the height?

So far we have obtained square images: this is indeed the default behavior of TwicPics Components.

We could change this aspect-ratio directly from the template of our page by using the ratio property, for example like this:

// pages/index.js
import { TwicImg } from '@twicpics/components/react';
export default function Home() {
  return (
    <main>
        <div className="sm">
          <TwicImg src="components/sea.jpg" ratio="4:3"/>
        </div>
        <div className="md">
          <TwicImg src="components/sea.jpg" ratio="3:4" />
        </div>
        <div className="lg">
          <TwicImg src="components/sea.jpg" ratio="2.35"/>
        </div>
    </main>
  );
}

Here we prefer to use CSS Variables to specify the aspect-ratio value.

Let's go back to our example and modify it like this:

// pages/index.js
import { TwicImg } from '@twicpics/components/react';
export default function Home() {
  return (
    <main>
        <div className="sm landscape">
          <TwicImg src="components/sea.jpg"/>
        </div>
        <div className="md portrait">
          <TwicImg src="components/sea.jpg" />
        </div>
        <div className="lg cinemascope">
          <TwicImg src="components/sea.jpg" />
        </div>
    </main>
  );
}

/* styles/global.css */
.lg {
  width: 400px;
}
.md {
  width: 300px;
}
.sm {
  width: 200px;
}


.cinemascope {
  --twic-ratio: 2.35;
}

.landscape {
  --twic-ratio: calc(4 / 3);
}

.portrait {
  --twic-ratio: calc(3 / 4);
}

In this example, in addition to specifying the size of the loaded images, we have also specified its aspect-ratio .

Couple this feature with the use of breakpoints in your stylesheets and the Art Directions comes into play.

Go further with the preTransform property

So far, we have shown that specifying the size of the container of an image is enough to specify its dimensions.

But how to zoom in on a specific part of this image?

The answer is simple: using the preTransform property.

preTransform props allows you to specify one or more transformation of the TwicPics API to apply to your asset.

// pages/index.js
import { TwicImg } from '@twicpics/components/react';
export default function Home() {
  return (
    <main>
        <div className="lg">
          <TwicImg src="components/sea.jpg" />
        </div>
        <div className="lg">
          <TwicImg 
            src="components/sea.jpg"
            preTransform="focus=922x1255/crop=400x400"
          />
        </div>
    </main>
  );
}

Here we extract an area of 400 pixels width by 400 pixels height centered on the coordinate point (922px, 1255px).

The extracted part, which is here the zoomed area, is displayed in our lg class container.

Conclusion

We have seen how to resize and zoom our images in a Next.js project using the TwicPics Components.

Unlike the next/image component, TwicPics Components do not expose any height or width properties to determine the display size. They are context aware so that dimensions of assets are deduced from the very design of your template.

In other words, with TwicPics Components, if your site is designed responsively so are your assets.

Feel free to visit our Next.js demo site to discover more features of our TwicPics Components. They are free, open source and available in various frameworks.