A successful e-commerce store should offer great products, and creating stunning visuals and a seamless user experience are vital to that success. AI-generated images, like those from Midjourney, offer a scalable, cost-effective way to produce high-quality product images without the need for professional photoshoots.
However, beautiful images alone aren’t enough. They have to be optimized for web and mobile to ensure fast loading times and enhance overall performance. With Cloudinary, you can dynamically resize, crop, and enhance your images, so they load quickly at high quality no matter what device your customer uses.
This blog post will show you how to generate product images with Midjourney and customize, optimize, and deliver them with Cloudinary. The completed source code for this project is on GitHub.
Before we get started, you’ll need:
- A free Cloudinary account.
- A Midjourney Premium account to generate AI images.
- A basic understanding of Next.js and Typescript.
Once you set up your Cloudinary and Midjourney Premium accounts, use the command below to start a Next.js app.
<code>npx create-next-app@latest</code>Code language: HTML, XML (xml)As you receive prompts to set up the app, select Typescript and App Router, which are essential for building this project. Then, run npm run dev to render a development server at https://localhost:3000/ in your browser.
For this project, you’ll use Midjourney to create a background that enhances product images without replacing them entirely. Access Midjourney’s Discord, use the /imagine command to generate visuals related to your product category and save these images as background elements.
Once you’ve generated suitable images, upscale them in Midjourney to enhance quality, then download and upload them to Cloudinary. Check out this blog post on how to upload images to Cloudinary.
In a production environment, image uploads can be done on a backend server and rendered in the application.
After uploading the images, copy and store the public ID of each image somewhere safe. To copy the public ID, head to your Cloudinary Media Library, click the Assets tab, then copy the desired image public ID as shown below.
Next, you’ll create a dataset with product information such as name, price, and image URLs. Each image URL will be generated by combining the public IDs of the product and background images. This dataset will serve as a list of product items for the e-commerce store.
Ideally, this product image data would come from your e-commerce system, a product information management (PIM) system, or any other tool you use to retrieve product images stored on Cloudinary.
Navigate to the src/app folder and create a new file called data.ts. In the data.ts file, copy and paste the code snippet below.
// src/app/data.ts
export interface ProductDataProp {
name: string;
url: string;
price: number;
}
const orangeImagesId = ["Orange_Juice", "orangebg.jpg" ]
const mangoImagesId = ["Mango_Juice", "mangobg"]
const cherryImagesId = ["Cherry_Juice", "cherrybg.jpg"]
const appleImagesId = ["Apple_Juice", "applebg" ]
export const ProductData: ProductDataProp[] = [
{
name: "Cherry Jubilee Juice",
url: `https://res.cloudinary.com/<YOUR_CLOUD_NAME>/image/upload/l_${cherryImagesId[0]},w_250,h_1000,g_center/v1730338860/${cherryImagesId[1]}`,
price: 1.2,
},
{
name: "Orange Jubilee Juice",
url: `https://res.cloudinary.com/<YOUR_CLOUD_NAME>/image/upload/l_${orangeImagesId[0]},w_170,h_1000,g_center/v1730336212/${orangeImagesId[1]}`,
price: 2.1,
},
{
name: "Apple Jubilee Juice",
url: `https://res.cloudinary.com/<YOUR_CLOUD_NAME>/image/upload/l_${appleImagesId[0]},w_220,h_800,g_center/v1730336212/${appleImagesId[1]}`,
price: 2.5,
},
{
name: "Mango Jubilee Juice",
url: `https://res.cloudinary.com/<YOUR_CLOUD_NAME>/image/upload/l_${mangoImagesId[0]},w_205,h_1050,g_center/v1730336212/${mangoImagesId[1]}`,
price: 3,
},
]Code language: JavaScript (javascript)In the code block above, the ProductDataProp interface defines each object’s properties (name, url, price) in the ProductData constant. The props in the ProductData constant represent:
name. A random product image name.url. An image URL generated by combining the public IDs of the product image and background image.price. A random product image price.
The images are dynamically created using Cloudinary transformations to layer each product’s primary image over a background image. Here’s a breakdown:
- Image ID Arrays. Each product (orange, mango, cherry, and apple) has an array with two strings: the public ID of the product image and the background image’s public ID. For instance:
const orangeImagesId = ["Orange_Juice", "orangebg.jpg"]
- The first item (
Orange_Juice) is the public ID for the product image. - The second item (
orangebg.jpg) is the background image’s public ID.
Product Data Array (ProductData) contains objects with properties for each product, including name, url, and price.
name. The product’s display name, e.g., “Cherry Jubilee Juice”.url. The dynamically generated Cloudinary URL for each product image. It uses transformations to layer the product image over the background.l_${cherryImagesId[0]}. Layers the product image (using the public ID from the array, like “Cherry_Juice”).w_250,h_1000,g_center. Specifies the layered image’s width, height, and center alignment.v1730338860/${cherryImagesId[1]}. Specifies the version number and background image.
price. The product price.
When the transformation string above is applied to the image URL, Cloudinary will process the image according to these specified transformations and return the modified image URL. This allows you to chain multiple transformations based on your requirements without manually editing the image. Also, since Cloudinary’s transformations are URL-based, they only consume additional storage space if you explicitly upload new transformed images.
Below is an example of one of the images from the list, “Cherry Jubilee Juice”, which clearly illustrates the visual changes made by Cloudinary transformations.
In this application, the url property uses URL-based transformations. However, this is just one way to handle image transformations in Cloudinary. You can also apply transformations in multiple ways, such as during upload or programmatically via SDKs,or combine both depending on your use case.
To learn more about applying transformations like these, explore the Cloudinary image transformations documentation.
With the product dataset ready, you can now build the e-commerce store. For this, you’ll create an app component to render the list of product items. Head to the pages file in the src/app directory and update the file with the code snippet below.
// src/app/pages
import styles from "./page.module.css";
import { ProductData, ProductDataProp } from './data';
export default function Home() {
const data: ProductDataProp[] = ProductData
return (
<div className={styles.page}>
<main className={styles.main}>
<h1>digital art store</h1>
<ul className={styles.section}>
{data.map((image) => {
return (
<li className={styles.list} key={image.name}>
<img
className={styles.img}
src={image.url}
alt={image.name}
/>
<h3>{image.name}</h3>
<span>
<p>${image.price}</p>
<button>buy</button>
</span>
</li>
)
})}
</ul>
</main>
</div>
);
}Code language: JavaScript (javascript)The app component imports and renders the list of product items from the ProductData array. The product items contain certain information, such as name, image, and price. Let’s break it down step by step:
First, the component imports the ProductData array containing the product items and the ProductDataProp interface, defining the props of each object in the array.
Next, the imported ProductData array is destructured and assigned to a variable named data.
Then, the data variable type is declared as an array of ProductDataProp objects. This helps ensure type safety and provides better code clarity. This variable is then iterated to render the product items.
Now that your app is set up, you can add CSS styles to make it look appealing. Navigate to the page.module.css file in the src/app folder and replace the boilerplate code with the snippet below.
////EDIT CSS FILE
// src/app/page.module.css
.page {
align-items: center;
justify-items: center;
min-height: 100svh;
padding: 5rem;
gap: 64px;
font-family: var(--font-geist-sans);
}
.main {
display: flex;
flex-direction: column;
gap: 32px;
grid-row-start: 2;
}
.main h1 {
text-transform: capitalize;
text-align: center;
}
.section {
margin: 2rem 0;
display: grid;
grid-template-columns: 2fr 2fr;
gap: 6rem;
}
.section li {
display: grid;
align-items: center;
justify-content: center;
}
.section span{
display: flex;
justify-content: space-between;
align-items: center;
}
.list {
gap: 8px;
}
.list img {
width: 420px;
height: 420px;
}
.list h3, .list p{
color: var(--foreground);
}
.list button{
padding: 0.8rem 1.4rem;
font-size: 1rem;
background-color: var(--foreground);
color: var(--background);
text-transform: capitalize;
border: none;
border-radius: 25px;
}Code language: PHP (php)The app will display a digital art store featuring background images for your products generated by Midjourney and uploaded to Cloudinary, each with a name and price. The images will be dynamically transformed and optimized by Cloudinary with resizing, cropping, borders, watermarks, and quality adjustments. Here’s how the app will look.
This blog post explains how Cloudinary makes it easy to customize and deliver AI-generated images in web apps. Contact us today to learn more about how Cloudinary ensures your image dimensions, formats, and quality are consistently enhanced, as well as accelerates page load times, leading to improved performance and user experience.
If you found this blog post helpful and want to learn more, join the Cloudinary Community forum and its associated Discord.
