Yapay Zeka Tarafından Oluşturulan İçerikler İçin Görüntü Optimizasyonu
Yapay zeka görselleri benzersiz bir performans sorunu yaratır. Oluşturma işlemi tamamlanana kadar görselin boyutunu, formatını veya içeriğini bilemezsiniz. Yine de yavaş yüklemeyi ve düzen kaymalarını (layout shifts) önlemeniz gerekir.
Ücretsiz bir yapay zeka görsel oluşturucu inşa ederken bu adımları kullandım.
Standart optimizasyon, görseli önceden bildiğinizi varsayar. Boyutları hesaplayabilir ve derleme (build) aşamasında optimize edebilirsiniz. Oluşturulan görseller bu kuralı bozar. Görsel, kullanıcı talep edene kadar mevcut değildir.
Teslimat nasıl yönetilir:
- Ham yapay zeka çıktısı genellikle PNG'dir. PNG dosyaları çok büyüktür, genellikle 800KB ile 1.2MB arasındadır.
- Görselleri WebP formatına dönüştürün. WebP dosyaları, aynı kalitede PNG'den %25 ile %35 daha küçüktür.
- WebP için 85 kalite değerini kullanın. Yapay zeka görselleri doğal doku gürültüsüne (texture noise) sahiptir. Daha yüksek ayarlar, görsel kaliteyi artırmadan dosya boyutunu artırır.
Düzen kaymaları (layout shifts) nasıl önlenir:
Kullanıcılar "oluştur" butonuna tıklamadan önce bir en boy oranı seçerler. Bunu avantajınıza kullanın.
- Konteynırı seçilen orana göre (1:1, 16:9 vb.) önceden boyutlandırın.
- Bu, görsel gelmeden önce konteynırın doğru boyutta kalmasını sağlar.
- Kümülatif düzen kaymasını (CLS) ortadan kaldırır.
Yükleme hızı nasıl artırılır:
Oluşturulan görsel genellikle En Büyük İçerikli Boyama (Largest Contentful Paint - LCP) öğesidir.
- Görseli kodunuzda öncelikli olarak işaretleyin.
- CDN'iniz için bir preconnect bağlantısı kullanın. Bu, DNS ve TLS el sıkışmalarını erkenden halleder.
- Nihai görselin kaplayacağı alanın aynısını kaplayan bir skeleton loader kullanın.
Önbelleğe alma (Caching) stratejisi:
- Çıkarım (inference) katmanında önbelleğe alma yapmayın. Her istek taze hissedilmelidir.
- Teslimat hızı için CDN katmanında önbelleğe alın.
- Her görselin benzersiz bir URL'si vardır, bu nedenle agresif önbelleğe alma güvenlidir.
Bu değişikliklerin sonuçları:
- Ortalama boyut: 900KB'dan 200KB'a.
- LCP: 4.1s'den 1.9s'ye.
- CLS: Ortadan kaldırıldı.
Eylem özeti:
- 85 kalitede WebP'ye dönüştürün.
- Seçilen en boy oranını kullanarak konteynırları önceden boyutlandırın.
- Birincil görseli öncelikli yükleme olarak ayarlayın.
- CDN seviyesinde yoğun şekilde önbelleğe alın.
- Lazy loading'i yalnızca sayfanın alt kısmındaki (below the fold) ikincil içerikler için kullanın.
İsteğe bağlı öğrenme topluluğu: https://t.me/GyaanSetuAi