jekcms yüklenen her görseli AVIF (kalite 60) ve WebP (kalite 82) formatına çeviriyor, dört boyut üretiyor ve sayfada doğru formatı seçen bir picture etiketi basıyor. Yükleme anında neler olduğunu adım adım anlatıyoruz.
Neden Ayrı Bir Medya Hattı Var
Yazarlar fotoğrafları çoğu zaman telefondan doğrudan yüklüyor. 4000x3000 piksellik bir JPEG birkaç megabayt tutuyor ve aynı dosya kenar çubuğunda küçük bir görsel, ana sayfada kart görseli, yazı sayfasında da büyük kapak olarak kullanılıyor. Görsel her yerde tam boyutuyla gönderilirse sayfalar gereksiz yere ağırlaşıyor.
jekcms bu yüzden görseli yükleme anında işliyor. Dosya diske yazılmadan önce kontrol ediliyor, modern formatlara çevriliyor ve farklı boyutlarda kopyaları üretiliyor.
Yükleme Anında Neler Oluyor
1. Kontrol
Yüklenen dosyanın gerçekten bir görsel olup olmadığı dosyanın içeriği okunarak kontrol ediliyor; uzantısı .jpg olan ama görsel olmayan bir dosya reddediliyor. Varsayılan dosya boyutu sınırı 50 MB ve sunucu yapılandırmasıyla değiştirilebiliyor.
2. Format Dönüşümü
Görsel birincil format olarak AVIF'e, yedek olarak WebP'ye çevriliyor. Varsayılan kalite AVIF için 60, WebP için 82. İkisi de ayarlardan değiştirilebiliyor: AVIF 40 ile 80, WebP 55 ile 95 arasında. Dönüşüm başarılı olunca orijinal dosya siliniyor; sunucuda GD kütüphanesi yoksa görsel orijinal formatında kalıyor.
Görsel yeniden kaydedildiği için telefon fotoğraflarındaki EXIF bilgileri de (konum, cihaz modeli, çekim zamanı) yeni dosyaya taşınmıyor. Ofisinizin fotoğrafını paylaştığınızda konum bilgisini de paylaşmış olmuyorsunuz.
3. Boyut Kopyaları
Her görsel için dört kopya üretiliyor:
- thumbnail: 400x400, ortadan kırpılmış. Küçük kartlar ve panel listeleri için.
- medium: en fazla 800 piksel, oranı korunarak. Yazı kartları ve arşiv sayfaları için.
- large: en fazla 1600 piksel, oranı korunarak. Yazı sayfasındaki içerik alanı için.
- pinterest: 1000x1500, 2:3 oranında ortadan kırpılmış. Pinterest'te dikey görseller daha iyi göründüğü için ayrı tutuluyor.
Bu tablo çekirdekte şöyle tanımlı:
'thumbnail' => ['width' => 400, 'height' => 400, 'crop' => true],
'medium' => ['width' => 800, 'height' => 800, 'crop' => false],
'large' => ['width' => 1600, 'height' => 1600, 'crop' => false],
'pinterest' => ['width' => 1000, 'height' => 1500, 'crop' => true]4. Kayıt
Dosyalar yıl ve ay klasörlerine yazılıyor, veritabanına ise uzantısız temel yol kaydediliyor: images/2026/03/resim. Sayfa oluşturulurken boyut eki ve format bu yola ekleniyor.
Sayfada Doğru Format
Temalar öne çıkan görseli get_featured_picture() fonksiyonuyla basıyor. Fonksiyon bir <picture> etiketi üretiyor: önce AVIF, sonra WebP kaynağı geliyor ve tarayıcı desteklediği ilk formatı seçiyor. Her kaynağın içinde farklı genişlikler için bir srcset var, yani telefondaki küçük bir kart için büyük dosya indirilmiyor.
Görsel etiketine genişlik ve yükseklik de yazılıyor. Tarayıcı görsel gelmeden önce yerini ayırabildiği için sayfa yüklenirken içerik kaymıyor; Core Web Vitals'taki CLS değeri bunu ölçüyor.
Sık Karşılaşılan Yol Hatası
Elle içe aktarma yapılan sitelerde en sık görülen hata çift uploads/ yolu. Veritabanına uploads/images/2026/03/foto yazılırsa ve adres oluşturulurken başa bir kez daha /uploads eklenirse sonuç https://site.com/uploads/uploads/... olur ve görsel 404 verir. Veritabanındaki yollar her zaman uploads klasörüne göre yazılmalı, başında uploads/ olmamalı.
// Doğru: veritabanında "images/2026/03/foto"
// Adres: https://site.com/uploads/images/2026/03/foto.avif
// Yanlış: veritabanında "uploads/images/2026/03/foto"
// Adres: https://site.com/uploads/uploads/images/2026/03/foto.avif (404)Ne Kazanılıyor
Dönüşüm ve boyut üretimi yükleme anında sunucuya iş yaptırıyor, ama bu maliyet her görsel için bir kez ödeniyor. Kazanç ise görsel sitede kaldığı sürece her sayfa açılışında devam ediyor: kartlarda küçük kopyalar, yazıda büyük kopya ve her yerde JPEG'den çok daha hafif AVIF ya da WebP dosyaları gidiyor. Ne kadar küçüldüğü kaynak fotoğrafa göre değişiyor.
