Listen up. If you're building modern applications, understanding Image Generation in AI & Artificial Intelligence is non-negotiable. This is where simple logic turns into intelligent behavior.
1Text-to-Image Beyond Chat
Generative AI isn't limited to producing words ā models like DALL-E 3 take a text prompt and return a rendered image, which lets you add features like AI-generated product mockups, illustrations, or avatars directly from your application's backend.
Unlike text completions, an image request returns a URL (or raw data) pointing at a generated asset, so your integration code looks more like a media pipeline than a chat interface.
// Example
console.log("Running AI concept...");AI logic processed successfully.
2The Image Request Payload
A DALL-E 3 request body needs, at minimum, a model name, the prompt describing the desired image, and a size like '1024x1024' ā there's no equivalent of a 'messages' array here, since there's no conversation, just one prompt in and one image out.
Size is not just cosmetic: it directly affects generation cost and must be one of the model's supported dimensions, or the API rejects the request outright.
{
"model": "dall-e-3",
"prompt": "A cyberpunk city skyline at night, neon lights",
"n": 1,
"size": "1024x1024"
}AI logic processed successfully.
3The n=1 Constraint
Unlike DALL-E 2, which could return several variations of a prompt in one call, DALL-E 3 currently caps the n parameter at exactly 1 image per request ā if you need four variations, that means four separate API calls, not one call with n: 4.
This constraint should shape your UI: a 'generate 4 options' feature has to fire off four parallel requests and stitch the results together client-side, rather than expecting the API to batch them.
"n": 1,
"size": "1024x1024"AI logic processed successfully.
4Authenticating with Your API Key
Every request needs your secret API key sent as a Bearer token in the Authorization header, and that key must come from an environment variable rather than being hardcoded, so it's never committed to source control or bundled into a client build.
Because image generation billing is per-image and not cheap, a leaked key here is a direct financial risk, not just a security formality.
const response = await fetch(OPENAI_API_URL, {
headers: {
'Authorization': `Bearer ${process.env.API_KEY}`
}
});AI logic processed successfully.
5Displaying the Generated Image
The API response contains a URL pointing to the generated image, which you can drop straight into an <img> src to render it in the browser ā no separate download or file-handling step is required for a basic implementation.
That URL is typically temporary, though, so production apps usually re-upload the image to their own storage soon after generation rather than relying on the API's URL to stay valid indefinitely.
AI logic processed successfully.
6Choosing url vs. b64_json
response_format defaults to 'url', returning a link to a temporarily hosted image, but setting it to 'b64_json' returns the raw image bytes encoded as a base64 string directly in the API response.
b64_json is useful when you want to immediately save the file to your own storage without a second network round-trip to fetch the URL, at the cost of a noticeably larger JSON payload.
{
"response_format": "b64_json"
}AI logic processed successfully.
7Quality and Style Parameters
DALL-E 3 silently rewrites your prompt behind the scenes to add detail before generating, and the quality ('standard' vs 'hd') and style ('vivid' vs 'natural') parameters let you steer the result ā 'hd' trades extra generation time for finer detail, while 'natural' produces less hyper-saturated, more photorealistic images than the default 'vivid'.
Because of the automatic prompt rewriting, the exact image returned for a given prompt is not perfectly reproducible between calls, which matters if your application needs deterministic outputs.
{
"quality": "hd",
"style": "vivid"
}AI logic processed successfully.
8Putting the Pieces Together
A production image-generation feature combines everything covered so far: a server-side route that holds the API key, a request body with model/prompt/size/quality/style, and a response handler that either streams the URL to the client or persists the base64 data to your own object storage.
From here, the same pattern extends to variations, edits, and inpainting workflows exposed by the wider image API.
Images: Generated
AI logic processed successfully.
9Next: Voice Transcription with Whisper
Image generation covers one AI modality; the next lesson moves to audio, covering how the Whisper API turns recorded speech into text so you can add voice input to your application.
Whisper Next
AI logic processed successfully.
10Step-by-Step Breakdown
Generative AI isn't just for text. Let's learn how to integrate DALL-E 3 to generate custom images directly from your application.
To request an image, we send a JSON payload. DALL-E 3 requires a model, a prompt, and a specific size.
For DALL-E 3, the number of images ('n') is currently restricted to 1 per request. High resolution is the standard.
Checkpoint: For DALL-E 3, what is the maximum number of images ('n') you can request in a single API call?
- ān: 1
- ān: 10
In your code, you must include your API Key in the Authorization header. Use environment variables to keep it secret!
The response contains a URL. In a browser, you can set this directly to an <img> src to show the result to your users.
Checkpoint: Why should you avoid calling the DALL-E API directly from a React component running in the user's browser?
- āIt slows down the UI thread
- āIt exposes your secret API key to the public
You can choose the response format. 'url' is the default, but 'b64_json' lets you download the raw data directly.
DALL-E 3 automatically enhances your prompt for better results. This ensures high-quality art even with simple inputs.
Checkpoint: Which response format allows you to receive the image as a string of raw data instead of a link?
- āurl
- āb64_json
Image generation mastered! Your applications can now create visual content on the fly.
Next, we'll learn how to transcribe voice to text using the Whisper API.
Build a Real Prompt with Negatives. Finish combining a subject prompt with a negative prompt telling the model what to avoid.
Level Up š
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1AI-Generated Images Still Need Meaningful Alt Text
An <img> pointing at a DALL-E output needs an alt attribute describing what the image actually shows, not the raw prompt text used to generate it ā 'A golden retriever puppy sitting in autumn leaves' communicates more to a screen reader user than the literal generation prompt would.
<img src={imageUrl} alt="A golden retriever puppy sitting in autumn leaves" />SEO Implications
- 1
Rehost Generated Images for Stable, Crawlable URLs
The URL returned by the image API is temporary and hosted on OpenAI's domain, so if that image needs to be discoverable by search engines (e.g. as a blog post's featured image), download it and re-serve it from your own domain with a permanent URL ā a link that expires in an hour is never worth indexing.
Best Practices
Always Proxy Image Requests Through Your Backend
Never call the image generation endpoint directly from client-side JavaScript ā route it through a server endpoint that holds the API key, so the key is never exposed in browser network requests or bundled JS.
Cache Generated Images by Prompt Hash
If users are likely to request the same or very similar prompts, hash the normalized prompt and cache the resulting image URL/file, avoiding a second paid generation call for a prompt you've already rendered.
Frequent Bugs
Calling the DALL-E endpoint directly from a client-side React component.
Doing this ships your secret API key inside the browser bundle or exposes it in the network tab, where anyone can extract and abuse it. Always proxy the request through a server route that adds the Authorization header itself.
Real-World Examples
AI-Generated Blog Post Thumbnails
A CMS backend generates a DALL-E 3 thumbnail for each new blog post at publish time, downloads the returned image, uploads it to the site's own CDN bucket, and stores that permanent CDN URL in the post record instead of the temporary API-hosted URL.
const { data } = await openai.images.generate({ model: 'dall-e-3', prompt, size: '1024x1024' });
const buffer = await fetch(data[0].url).then(r => r.arrayBuffer());
await uploadToCDN(buffer, `posts/${postId}/thumb.png`);