Tarayıcı tabanlı görüntü dönüştürme nasıl çalışır
Her dönüşüm tamamen JavaScript’te çalışan dört adımlı bir süreçtir. Hiçbir codec kütüphanesi indirilmez — tarayıcının kendi Canvas API’si kodlamayı çözme ve yeniden kodlamayı üstlenir.
- Yüklenen her dosyayı Blob olarak okur ve bir nesne URL’si oluşturur; böylece tarayıcı baytları sunucuya kopyalamadan çözebilir.
- Çözülen görüntüyü ekran dışı bir Canvas öğesine çizerek orijinal en-boy oranını korurken herhangi bir boyut kısıtlaması uygular.
- Pikselleri yeniden kodlamak için
canvas.toBlob(callback, targetMimeType, quality)çağırır. PNG çıktısı her zaman kayıpsızdır; JPEG ve WebP kalite kaydırıcısına uyar. - Çıktı boyutları ve dosya boyutuyla birlikte öncesi/sonrası küçük resim gösterir, ardından görüntü başına indirme düğmesi veya tüm parti için tek bir ZIP sunar.
Neden görüntü formatlarını dönüştürmelisiniz?
- PNG’den WebP’ye geçmek, 0,8 kalitede görünür kalite kaybı olmaksızın tipik dosya boyutlarını %25–35 oranında azaltır; bu da sayfa ağırlığını doğrudan düşürür ve Core Web Vitals LCP puanlarını iyileştirir.
- PNG, JPEG’in atmadığı şeffaflığı korur; bu nedenle PNG→JPEG dönüşümünde şeffaf pikseller beyaz zemine çizilir — hedef (e-posta, eski CMS) PNG kabul etmediğinde kullanışlıdır.
- Sosyal platformların ve reklam ağlarının katı format gereksinimleri vardır: Facebook ve LinkedIn fotoğraflar için JPEG tercih eder; Twitter’ın OG önizleme süreci WebP’yi işler; bazı reklam sunucuları JPEG olmayan kreatifleri reddeder.
- Karışık formatlı görüntü partisini (PNG ekran görüntüleri, JPEG fotoğraflar, WebP dışa aktarımları) CMS’e veya DAM’a yüklemeden önce tek bir formata standartlaştırmak, alma sürecindeki format işleme karmaşıklığını ortadan kaldırır.
Yaygın uygulamalar
Kaynak format ve hedefin beklentileri uyuşmadığında format dönüştürme gerekir.
- Shopify veya WooCommerce mağazası için ürün fotoğraflarını hazırlama — JPEG orijinaller mağaza cephesi için 0,85 kalitede WebP’ye dönüştürülür, PNG baskıya hazır dışa aktarmalar için saklanır.
- Tasarımcı tarafından sağlanan PNG dışa aktarımlarını React veya Next.js derlemesine gömmeden önce JPEG veya WebP’ye dönüştürme; böylece framework’ün görüntü optimize edici daha küçük bir kaynakla başlar.
- QA testinden alınan ekran görüntüleri klasörünü toplu işleme — hata izleyici biletine eklemeden önce arşiv boyutunu küçültmek için PNG’yi 0,9 kalitede JPEG’e dönüştürme.
Gerçek örnek: 2 MB PNG → 300 KB WebP
2400×1600 piksel boyutunda 2 MB’lık bir PNG kahraman görüntüsü, pazarlama açılış sayfalarında yaygın bir yüktür.
PNG’yi buraya bırakın, hedef format olarak WebP’yi seçin, kaliteyi 0,8 olarak ayarlayın ve isteğe bağlı olarak piksel boyutlarını yarıya indirmek için maksimum genişliği 1200 olarak belirleyin. Canvas süreci görüntüyü 1200×800’de (oran korunur) çizer, WebP olarak yeniden kodlar ve çıktı kartı sonucu gösterir — genellikle 280–320 KB, %85 azalma. Kartdaki İndir’e tıklayın ya da birkaç görüntü dönüştürdüyseniz toplu ZIP indirme yapın.
Hangi formatlar destekleniyor?
Kaynak görüntüler: tarayıcının çözebileceği herhangi bir format — PNG, JPEG, WebP, GIF ve BMP hepsi kabul edilir. Çıktı formatları: PNG (kayıpsız), JPEG ve WebP. AVIF çıktısı henüz desteklenmiyor çünkü Canvas API kodlayıcısı yalnızca Chrome 105+’ta mevcut ve Safari ile Firefox’ta yok; WASM tabanlı bir AVIF yolu gelecekteki bir sürüm için planlanıyor.
Bu cihazımda mı gerçekleşiyor?
Evet. Sayfa, tarayıcının yerel Canvas API’sini ve Web File API’sini kullanır. Hiçbir görüntü verisi sunucuya gönderilmez; dönüştürme süreci tamamen tarayıcı sekmenizde çalışır. Bunu, DevTools’u açıp Ağ panelini kontrol ederek doğrulayabilirsiniz — sayfa yüklendikten sonra giden istek yoktur.
PNG ile JPEG arasındaki kalite dengesi nedir?
PNG kayıpsız bir formattır — her piksel kodlama döngüsünden aynen çıkar. JPEG, DCT sıkıştırması kullanır ve gözün nadiren fark ettiği ince ayrıntıları atar; 0,8 kalite, çoğu izleyicinin orijinalden görsel farkın algılanamaz olduğu ancak dosyanın PNG’den 4–6 kat küçük olduğu yaygın bir tatlı noktadır. WebP hem kayıpsız hem de kayıplı modda çalışabilir; buradaki kalite kaydırıcısı kayıplı kodlayıcıyı çalıştırır ve 0,85 kalite, doğal fotoğraflarda genellikle JPEG 0,85’ten %25–30 daha iyi performans gösterir.
AVIF desteği ne zaman gelecek?
canvas.toBlob(…, 'image/avif') aracılığıyla AVIF kodlama bugün yalnızca Chrome 105+’ta çalışır; Safari ve Firefox desteklemiyor. Gelecekteki bir sürüm, özelliğin tüm tarayıcılarda çalışması için hafif bir WebAssembly kodlayıcı kullanan isteğe bağlı bir AVIF yolu ekleyecek. O zamana kadar, AVIF seçeneği "yakında" olarak gösterilir ve WebP kodlayıcısı (modern tarayıcılarda evrensel olarak desteklenir) önerilen yeni nesil alternatiftir.
Görüntülerinizi bırakın, format seçin, dönüştürün. Her şey sekmenizde çalışır — yükleme yok, hesap yok, sunucu bekleme yok.