WordPress için AI Görsel Üretimi ve Optimizasyonu

🇬🇧 English: Read this in English →

Görseller, bir WordPress sitesindeki en emek yoğun içerik varlığıdır. Ürün fotoğrafçılığı, blog yazısı grafikleri, sosyal medya önizlemeleri, kategori bannerları — her biri yapay zekânın ciddi ölçüde kısaltabileceği tasarım zamanı yer. Açık konuşayım: bu araçların çoğu abartılıyor, ama bir kısmı gerçekten günün sonunda saat kazandırıyor. Aşağıda bugün pratikte işe yarayanları ve bunları nasıl kurduğunu anlatıyorum — hangisini bugün açardım, hangisine dokunmazdım, ayrımıyla birlikte.

WordPress için AI Görsel Üretimi Kullanım Senaryoları

1. Blog Yazısı Öne Çıkan Görselleri

Jenerik görseller için stok fotoğraf sitelerinde arama yapmak yerine, içeriğine uygun özel illüstrasyonlar üret:

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. Ürün Görsel Arka Planları

Arka planları kaldır ve ürünleri tutarlı, profesyonel arka planlara yerleştir:

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. Kategori ve Koleksiyon Banner’ları

WooCommerce kategorileri için temalı banner’lar üret:

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;
}

Otomatik Görsel Optimizasyon Pipeline’ı

Yapay zekâ ayrıca mevcut görselleri de optimize edebilir. Bence asıl kazanç da burada, üretimde değil: her sitenin binlerce görseli var ve çoğu şişkin, alt metni eksik, yanlış formatta. WordPress’e yüklenen her görseli işleyen bir pipeline kur:

// 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 Destekli Alt Metin Üretimi

Açıklayıcı, SEO dostu alt metinler üretmek için Claude’un görme yeteneklerini kullan:

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;
}

Mevcut Medya İçin Toplu Görsel İşleme

Alt metin veya optimizasyon eksik binlerce mevcut görseli olan siteler için:

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++;
}
}

Maliyet Analizi

Stok fotoğraflarla ($5-15/görsel) veya özel fotoğrafçılıkla ($50-200/görsel) karşılaştır.

Görseli sıkıştırma zanaatı yeni değil — sadece kolaylaştı

Bir dakikalığına izin ver de sektörün dinozoru araya girsin. Şu “görseli kaliteyi koruyarak sıkıştır, doğru formata çevir” satırını okuyunca gülümsedim, çünkü ben bu işi bir makinenin bütün dünyası 256 renkken öğrendim. İlk makinelerimden Mac Classic’te bir görseli ekrana sığdırmak bir zanaattı: paleti elle sekiz bite indirir, dithering ile gözü kandırır, her kilobaytı hesaplardın. Bir tonlama geçişini yanlış dither edersen, o degrade bantlanır ve müşteri sunumunda utanırdın. Sıkıştırma o zaman sanattı çünkü bütçe acımasızdı.

Bugün compress_image($file_path, 85) yazıyorsun ve Sharp aynı işi göz kırpmadan yapıyor. Değişen şey fikir değil — hâlâ “en az baytla en çok kaliteyi taşı” oyununu oynuyoruz. Değişen tek şey, otuz yıl önce bir görüntüde saatlerce dirsek çürüttüğüm işin artık bir upload kancasına sığması. Ben olsam bu yüzden optimizasyon boru hattını her sitede varsayılan açardım: bedavaya gelen bir disipline “bunu düşünmeye değmez” demek, o eski bütçeleri hatırlayan biri için nankörlük olurdu.

Kalite Değerlendirmeleri

AI üretili görseller şunlar için en iyi sonuçları verir:

• İllüstrasyonlar ve grafikler (blog başlıkları, infografikler)
• Yaşam tarzı/ruh hali arka planları
• Kategori banner’ları
• Sosyal medya grafikleri

AI üretili görseller şunlar için UYGUN DEĞİLDİR:

• Gerçek ürün fotoğrafçılığı (müşteriler gerçek fotoğraflar ister)
• Kesin marka öğeleri gerektiren görseller (logolar, belirli renkler)
• Hassas ölçümlere sahip teknik diyagramlar
• Gerçek insanların görselleri (uncanny valley, etik kaygılar)

Sonuç

WordPress için yapay zekâ görsel araçları iki kategoriye ayrılır: üretim (yeni görseller oluşturma) ve optimizasyon (mevcut görselleri iyileştirme). Görsel optimizasyonu — sıkıştırma, format dönüştürme, alt metin üretimi — evrensel olarak faydalıdır ve her WordPress sitesi için otomatikleştirilmeli. Görsel üretimi ise duruma bağlı: blog grafikleri ve arka planlar için mükemmel, gerçek ürün fotoğrafçılığı için uygun değil. Ben olsam optimizasyon pipeline’ı ile başlardım (anında SEO ve performans kazancı, düşük risk), ardından yalnızca pahalı stok fotoğrafının ya da tasarım işinin yerini gerçekten aldığı yerlerde seçici olarak üretimi eklerdim. Sırayı tersine çevirme; parlak olan üretim, ama kalıcı değeri olan optimizasyon.