AI Image Generation and Optimization for WordPress

🇹🇷 Türkçe: Bu yazının Türkçesini oku →

Images are the most labor-intensive content asset on a WordPress site. Product photography, blog post graphics, social media previews, category banners — each one used to be design time you paid for by the hour. AI collapses a chunk of that, but not all of it, and the line between the two is where most people get this wrong. Here is what I would actually put into production today, and what I would keep well away from.

Let me set the frame before the code: there are two jobs hiding under “AI images,” and they are not equally safe. Optimizing images you already have — compression, WebP, alt text — is a pure win, and I would automate it on every site without a second thought. Generating new images is situational. Get that distinction right and the rest of this post is implementation detail.

AI Image Generation Use Cases for WordPress

1. Blog Post Featured Images

Instead of searching stock photo sites for generic images, generate custom illustrations that match your content:

async function generateBlogImage(postTitle, postExcerpt) {
const prompt = await generateImagePrompt(postTitle, postExcerpt);

const response = await openai.images.generate({
model: 'dall-e-3',
prompt: prompt,
size: '1792x1024',  // 16:9 for blog headers
quality: 'standard',
n: 1
});

return response.data[0].url;
}

async function generateImagePrompt(title, excerpt) {
// Use Claude to create an effective image prompt
const response = await anthropic.messages.create({
model: 'claude-haiku-4-5-20251001',
max_tokens: 200,
messages: [{
role: 'user',
content: Create a DALL-E prompt for a blog featured image.

Title: ${title}
Summary: ${excerpt}

Rules:
Modern, clean illustration style
No text in the image
Professional tech/business aesthetic
Suitable for a 16:9 header image
Return ONLY the prompt.
}]
});

return response.content[0].text;
}

2. Product Image Backgrounds

Remove backgrounds and place products on consistent, professional backgrounds:

async function enhanceProductImage(imageUrl) {
// Step 1: Remove background (remove.bg API)
const noBgImage = await removeBg(imageUrl);

// Step 2: Generate a matching background
const background = await openai.images.generate({
model: 'dall-e-3',
prompt: 'Clean, minimal product photography background, soft gradient from white to light gray, subtle shadow, professional ecommerce aesthetic',
size: '1024x1024',
quality: 'hd'
});

// Step 3: Composite (using Sharp or Canvas)
const final = await compositeImages(noBgImage, background.data[0].url);

return final;
}

3. Category and Collection Banners

Generate themed banners for WooCommerce categories:

async function generateCategoryBanner(categoryName, productExamples) {
const prompt = Professional ecommerce category banner for "${categoryName}".

Showing a curated arrangement of ${productExamples.join(', ')}.
Clean, modern aesthetic with plenty of negative space for text overlay.
Warm lighting, shot from above at 45 degrees. No text.;

const response = await openai.images.generate({
model: 'dall-e-3',
prompt: prompt,
size: '1792x1024',
quality: 'hd'
});

return response.data[0].url;
}

Automated Image Optimization Pipeline

AI can also optimize existing images. Build a pipeline that processes every image uploaded to WordPress:

// Hook into WordPress image upload
add_filter('wp_handle_upload', 'ai_optimize_upload');

function ai_optimize_upload($upload) {
if (!in_array($upload['type'], ['image/jpeg', 'image/png', 'image/webp'])) {
return $upload;
}

$file_path = $upload['file'];

// 1. Compress with quality preservation
compress_image($file_path, 85);

// 2. Generate WebP version
generate_webp($file_path);

// 3. Auto-generate alt text using AI vision
$alt_text = generate_alt_text_ai($file_path);
if ($alt_text) {
// Store for later application when attachment is created
set_transient('pending_alt_' . md5($file_path), $alt_text, 60);
}

return $upload;
}

// Apply alt text when attachment is created
add_action('add_attachment', function($attachment_id) {
$file = get_attached_file($attachment_id);
$alt = get_transient('pending_alt_' . md5($file));
if ($alt) {
update_post_meta($attachment_id, '_wp_attachment_image_alt', $alt);
delete_transient('pending_alt_' . md5($file));
}
});

AI-Powered Alt Text Generation

Use Claude’s vision capabilities to generate descriptive, SEO-friendly alt text:

async function generateAltText(imageUrl, pageContext = '') {
const response = await anthropic.messages.create({
model: 'claude-sonnet-4-20250514',
max_tokens: 100,
messages: [{
role: 'user',
content: [
{
type: 'image',
source: { type: 'url', url: imageUrl }
},
{
type: 'text',
text: Write alt text for this image. Context: ${pageContext || 'product/ecommerce website'}.

Rules:
10-20 words maximum
Describe what's visible, not what you infer
Include the product type if it's a product image
Don't start with "Image of" or "Photo of"
Be specific about colors, materials, and key features
                }
]
}]
});

return response.content[0].text;
}

Bulk Image Processing for Existing Media

For sites with thousands of existing images missing alt text or optimization:

async function bulkProcessMediaLibrary() {
let page = 1;
let hasMore = true;

while (hasMore) {
const media = await wpApi.get('media', {
per_page: 50,
page: page,
mime_type: 'image/jpeg,image/png,image/webp'
});

for (const item of media.data) {
const currentAlt = item.alt_text;

if (!currentAlt || currentAlt.trim() === '') {
const altText = await generateAltText(
item.source_url,
item.title?.rendered || ''
);

if (altText) {
await wpApi.post(media/${item.id}, {
alt_text: altText
});
console.log(Updated: ${item.id} → "${altText}");
}

// Rate limiting
await sleep(1000);
}
}

hasMore = media.data.length === 50;
page++;
}
}

What a CD-ROM budget taught me about generated art

I want to put the cost table below in perspective, because I remember when these numbers were unthinkable. In the ’90s I produced multi-language CD-ROM titles, and imagery was the line item that ate the schedule. Every screen background, every button state, every transition frame was drawn, retouched, or composited by hand — a person at a workstation, an afternoon per asset, and a rate card behind them. When a client asked for “the same screen but in a warmer palette for the Spanish edition,” that was not a slider; that was another billable day. We priced whole projects around how many original images they needed, because images were the expensive thing.

So when I see a blog header land for eight cents and alt text for a penny, I do not read it as a gimmick. I read it as the cost floor for a category of work that used to define budgets falling through the floor. That is real, and it is worth building on. But the same era taught me the other half: the assets that mattered most — the actual product, the real thing the customer was buying — we photographed, because a customer can tell the difference between a rendering and a thing that exists. That instinct has not aged. Generate the mood, the background, the header illustration. Photograph the product. The tools changed; the judgment did not.

Cost Analysis

Compare to stock photos ($5-15/image) or custom photography ($50-200/image).

Quality Considerations

AI-generated images work best for:

• Illustrations and graphics (blog headers, infographics)
• Lifestyle/mood backgrounds
• Category banners
• Social media graphics

AI-generated images DON’T work for:

• Actual product photography (customers want real photos)
• Images requiring exact brand elements (logos, specific colors)
• Technical diagrams with precise measurements
• Images of real people (uncanny valley, ethical concerns)

Conclusion

Here is the order I would run this in. AI image tools split cleanly into two jobs: generation and optimization. Optimization — compression, format conversion, alt text — is universally beneficial and should be automated on every WordPress site you touch; there is no downside and the SEO and performance gains are immediate. Start there this week. Then, and only then, layer generation in selectively, where it genuinely replaces expensive stock photos or design work: blog graphics, mood backgrounds, category banners. Keep it away from anything a customer is paying to see accurately — real product shots, exact brand elements, faces. If you do that, you get the eight-cent header without paying for it later in returns and mistrust. That trade has been the right one in every medium I have worked in, and it is the right one here.