jekcms yüklemeleri otomatik olarak AVIF ve WebP'ye dönüştürür ve görsel başına yedi boyut varyantı üretir. İşlem hattının gerçekte ne yaptığını — ve yüz-algılıklı kırpma ya da canlı bir yeniden boyutlandırma proxy'si gibi var olmayan şeyleri neden yapmadığını anlatıyoruz.
Bir dosya yükleme ucuna ulaştığında, JekCMS önce boyutlarını kontrol eder ve herhangi bir format dönüşümü gerçekleşmeden önce aşırı büyük görselleri küçültür; bu, kodlayıcının girdisini makul bir boyutta tutar ve beklenmedik şekilde büyük çıktı dosyalarını önler.
EXIF Temizleme ve Güvenli Depolama
EXIF temizleme, sunucuda hangisi mevcutsa GD veya Imagick uzantısını kullanır. Dönüştürülmüş dosya diske yazılmadan önce tüm meta veriler kaldırılır — GPS koordinatları, kamera modeli, oluşturulma zaman damgaları ve gömülü küçük resimler. Orijinal dosya, uploads dizini altında üretilen bir dosya adıyla saklanır; web sunucusu yapılandırması varsayılan olarak dahili yollara doğrudan erişimi engeller.
Yedi Thumbnail Boyutu ve Sabit Kalite Ayarları
jekcms yükleme sırasında yedi adlandırılmış boyut varyantı üretir: thumbnail (150×150, merkez kırpma), small (300×200, kırpma), medium (600×400, kırpma), large (1200×800, kırpma yok), full (1920×1280, kırpma yok), pinterest (1000×1500, kırpma) ve og (1200×630, sosyal paylaşım önizlemeleri için kırpma). Kırpılan varyantlar düz bir merkez kırpma kullanır — yüz algılama adımı yoktur, yani merkezde olmayan bir konumdaki yüz veya öznenin kompozisyonu kırpılmış boyutta otomatik olarak korunmaz. AVIF kalite ayarı 60, WebP ise 82'dir; güçlü bir boyut/kalite dengesi için seçilmiştir; ikisi de bir ayarlar sayfası seçeneği olarak sunulmak yerine kodda sabittir.
Özel Temalarda Görsel Sunma
Yerleşik temalarda görseller, birincil kaynak olarak AVIF ve yedek olarak WebP ile <picture> elemanı üzerinden sunulur. Özel bir tema inşa ediyorsanız, get_featured_image($post, 'medium') yardımcısını kullanın — doğru kaynak URL'sini döndürür ve belirli bir boyutlu varyantın bir görsel için üretilmediği durumu, AVIF'e, sonra WebP'ye, sonra orijinal dosyaya düşerek ele alır.
İşlem Hattı: Adım Adım
Tüm görsel işleme hattı yükleme isteği sırasında çalışır. İşte bir dosyanın sunucuya ulaştığı andan sunulmaya hazır olduğu ana kadar olan işlem sırası:
1. Yukleme alindi -> MIME turunu dogrula
2. Dosya boyutunu kontrol et -> cok buyukse reddet (yapilandirilabilir limit)
3. Boyutlari oku -> asiri buyuk orijinalleri kucult
4. EXIF meta verisini temizle -> GPS, kamera bilgisi, zaman damgalarini kaldir
5. AVIF uret (kalite 60) -> birincil sunum formati
6. WebP uret (kalite 82) -> yedek format
7. 7 boyutlu varyant uret (uygun olanlarda hem AVIF hem WebP):
thumbnail, small, medium, large, full, pinterest, og
8. Orijinal dosyayi sakla
9. Donusturulmus dosyalari uploads dizini altinda sakla
10. Veritabani kaydini yaz -> tum yollarla media tablosuKabaca Ne Kadar Küçülüyor
Tam kazanımlar kaynak görsele büyük ölçüde bağlıdır — hareketli bir fotoğraf düz renkli bir grafikten farklı sıkıştırılır — ama AVIF ve WebP, jekcms'in kullandığı kalite ayarlarında eşdeğer kaliteli bir JPEG veya PNG'ye göre anlamlı ölçüde daha küçük dosyalar üretir, ki dönüştürmenin tüm amacı zaten budur. Kendi medya kütüphanenize özgü rakamlar istiyorsanız, sizin içeriğinizi yansıtmayabilecek tek bir yayınlanmış yüzdeye güvenmek yerine kendi görsellerinizden birkaçını öncesi-sonrası karşılaştırın.
Bir Boyut Varyantı Eksikken Yedeğe Düşme
Belirli bir boyutlu varyant belirli bir görsel için diskte yoksa — örneğin, bir boyut kurulumunuzun yapılandırmasına eklenmeden önce yüklenmiş bir görsel — get_featured_image() anında bir tane üretmez. Bunun yerine format kademesine düşer (AVIF → WebP → orijinal), yeniden boyutlandırma yapmak yerine gerçekten var olan dosyayı sunar.
Mevcut Görselleri Toplu Dönüştürme
jekcms'in Media sınıfı, henüz AVIF/WebP sürümü olmayan görseller için bunları üreterek mevcut görselleri 50'lik gruplar halinde işleyen bir batchConvert() metodu içerir. Gerçek, çalışan bir kod yoludur — kurulumunuzda AVIF desteğinden önceki bir kütüphane için tek seferlik bir geri dönük dönüşümü script'liyorsanız, başvuracağınız şey budur. Şu anda buna bağlı, canlı ilerleme çubuklu özel bir yönetim paneli ekranı yoktur; onu çalıştırmak kendi kendine hizmet eden bir ayarlar sayfası butonu değil, geliştirici seviyesinde bir iştir.
Tarayıcı Desteği ve İçerik Müzakeresi
AVIF tüm güncel büyük tarayıcılar tarafından destekleniyor; AVIF desteği olmayan daha eski herhangi bir tarayıcı için, <picture> elemanı WebP'ye ve sonra orijinal formata otomatik yedek sağlar. JekCMS sunucu tarafı içerik müzakeresi (Accept başlığı incelemesi) kullanmaz — karar tamamen tarayıcıda, <source> elemanının type özelliği üzerinden gerçekleşir. Bu, uygulamayı basit tutar ve Accept başlığını iletmeyen CDN'lerle tamamen uyumlu kılar.
<picture>
<source srcset="/uploads/images/photo.avif" type="image/avif">
<source srcset="/uploads/images/photo.webp" type="image/webp">
<img src="/uploads/images/photo.jpg" alt="Aciklama"
width="800" height="500" loading="lazy">
</picture>Animasyonlu ve Şeffaf Görselleri Ele Alma
İşlem hattı animasyonlu GIF'leri ve şeffaf PNG'leri özel durumlar olarak ele alır. Animasyonlu GIF'ler yalnızca WebP'ye dönüştürülür, çünkü AVIF animasyon desteği tarayıcılar arasında hâlâ tutarsızdır.
Orijinal GIF, e-posta istemcilerinin ve eski platformların animasyonu hâlâ gösterebilmesi için WebP sürümünün yanında korunur. Şeffaf PNG'ler, alfa kanalı korumasıyla hem AVIF'e hem WebP'ye dönüştürülür; bu, logoların, ikonların ve kaplama grafiklerinin dönüşümden sonra şeffaflıklarını korumasını sağlar.
