Görüntü formatlarını dönüştür _

Tarayıcı tabanlı görüntü dönüştürme nasıl çalışır

Her dönüşüm tarayıcınızda çalışan dört aşamalı bir süreçtir. JPEG ve PNG için tarayıcının kendi Canvas API'si doğrudan kodlamayı gerçekleştirir. Safari'de WebP ve her tarayıcıda AVIF için sayfa talep üzerine hafif bir WebAssembly codec yükler — yine de hepsi yerel, görüntüleriniz asla cihazı terk etmez.

1. Yüklenen her dosyayı Blob olarak okur ve bir nesne URL’si oluşturur; böylece tarayıcı baytları sunucuya kopyalamadan çözebilir.
2. Çö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.
3. PNG, JPEG ve Chrome/Firefox WebP için pikselleri yeniden kodlamak için canvas.toBlob(callback, targetMimeType, quality) çağrısını yapın. Safari WebP ve AVIF kodlaması için, ilk kullanımda bir WebAssembly codec işçisi yüklenir ve kodlamayı bir arka plan iş parçacığında gerçekleştirir. PNG çıktısı her zaman kayıpsızdır; JPEG, WebP ve AVIF, doğrudan kodlayıcının niceleme ayarına eşlenen kalite kaydırıcısına uyar.
4. Çı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?

Giriş tarafında, tarayıcının çözebileceği herhangi bir format kabul edilir: PNG, JPEG, WebP, GIF ve BMP, bir tasarımcı veya ekran görüntüsü aracının ürettiği neredeyse her dosyayı kapsar. Çıktı formatları PNG (her zaman kayıpsız), JPEG, WebP ve AVIF'dir. AVIF çıktısı, her tarayıcıda talep üzerine yüklenen bir WebAssembly kodlayıcı aracılığıyla desteklenir — yerel bir Canvas kodlayıcıya gerek yoktur.

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 çıktısı nasıl çalışır?

AVIF kodlaması, AVIF formatını ilk seçtiğinizde talep üzerine yüklenen bir WebAssembly codec kullanır — eklenti yok, tarayıcı bayrağı yok, gelecekteki bir Chrome sürümünü bekleme yok. WASM ikili dosyası kendi kaynağımızdan sunulur, görüntünüzü tamamen bir arka plan iş parçacığında kodlar ve indirilmeye hazır standart bir image/avif blob döndürür. Tek ağ isteği, codec'in kendisinin bir kerelik getirilmesidir; hiçbir görüntü verisi cihazınızdan asla ayrılmaz. Yüklendikten sonra, kodlayıcı oturum boyunca önbellekte kalır, böylece sonraki dönüşümler daha hızlı olur. AVIF dosyaları tipik olarak eşdeğer kalitede WebP'den %20-30 daha küçük ve JPEG'den %50 daha küçüktür, bu da onları performansa duyarlı siteler için en iyi seçim haline getirir.

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.