Görüntü biçimi metodolojisi

Görüntü kümesi, tarayıcının yerel Canvas API'sini kullanarak PNG, JPG ve WebP arasında dönüşüm yapar. Yükleme adımı yok, sunucu taraflı işleme yok ve yolda üçüncü taraf görüntü servisi yok — bu hem gizlilik hem de kalite açısından sonuçlar doğurur.

Dönüşüm iş hattı

1. Kullanıcı sürükle-bırak veya dosya seçici aracılığıyla bir dosya seçer.
2. Dosya createImageBitmap(file) aracılığıyla ImageBitmap olarak okunur.
3. Bit haritasının yerel boyutlarında çevrimdışı bir canvas oluşturulur.
4. Bit haritası canvas'a çizilir.
5. Canvas, canvas.toBlob(callback, mimeType, quality) aracılığıyla dışa aktarılır — kalite yalnızca kayıplı hedeflere uygulanır.
6. Elde edilen Blob indirme olarak sunulur.

Her adım tarayıcıda çalışır. Dosya hiçbir yere gönderilmez — fetch, FormData veya XHR yükleme yoktur. Aynı durum Görüntüden Base64 aracı için de geçerlidir; canvas yerine FileReader API kullanır ama aynı yalnızca-tarayıcı ilkesini izler.

Kalite yönetimi

Kayıpsız → kayıplı (PNG/WebP → JPG)

Kayıpsız bir biçimden JPG'ye geçerken, JPG kodlayıcısının nicemleştirme yoğunluğunu kontrol eden bir kalite sürgüsü (varsayılan 0,85) sunuyoruz. 0,85'te dosya genellikle fotoğraflar için algısal görsel fark olmaksızın kaynak PNG'den %80-95 daha küçüktür. 0,7'nin altında bozukluklar görünür hale gelir; yanlışlıkla görünür biçimde bozulmuş çıktı üretilmesini önlemek için alt sınırı 0,5 olarak sabitledik.

Kayıplı → kayıpsız (JPG → PNG)

JPG'den PNG'ye gitmek, JPG'nin zaten attığı kaliteyi geri getirmez. Çıktı, JPG'nin çözdüğünün bit-mükemmel halidir, ama JPG'nin yuvarlama kayıpları sabittir. Bu pratikte nadiren kullanışlıdır; daha iyi yol daha yüksek kaliteli bir kaynak bulmaktır.

Kayıplı → kayıplı (JPG → WebP, vb.)

Her kayıplı kaydetme, kaynağın mevcut hatalarının üzerine yeni nicemleştirme hataları ekler. Birkaç kez kaydedilmiş dosyalar için bu, görünür birikimli bozulmaya yol açabilir. Her zaman sahip olduğunuz en yüksek kaliteli kaynaktan yeniden kodlayın.

Desteklenmeyen özellikler

• HEIC / HEIF. iOS 11'den bu yana Apple'ın varsayılanı. Tarayıcı desteği Apple ekosistemi dışında esasen sıfırdır; 1 MB'tan fazla bir kod çözücü paketlememiz gerekirdi. Buna değmez.
• RAW biçimleri (DNG, CR2, NEF, ARW). Aynı sorun — düşük kitle için ağır kod çözücüler. Lightroom / darktable / RawTherapee kullanın.
• SVG ↔ raster. Canvas aracılığıyla mümkün, ama vektör → raster ölçeklenebilirliği kaybeder ve tersi sadakati kaybeder. Farklı bir konu.
• Toplu dönüşüm. Arayüzümüz oturum başına tek dosyayı işler. Toplu kullanım için REST uç noktasını veya bir masaüstü aracını kullanın.

Kod içindeki kodlayıcı iş hattı

Dönüşüm yeterince kısa yazılabilir. Bir dosya girişinden alınan bir File verildiğinde, tam iş hattı yaklaşık altı satır çalışır:

const bitmap = await createImageBitmap(file);
const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
const ctx = canvas.getContext("2d");
ctx.drawImage(bitmap, 0, 0);
const blob = await canvas.convertToBlob({ type: "image/webp", quality: 0.85 });
// blob dönüştürülmüş çıktıdır, indirilmeye hazır

Her adım tarayıcıya özgüdür: createImageBitmap, kaynak biçiminin kodunu çözer (HTML Yaşayan Standardı'nda tanımlanmıştır), OffscreenCanvas render edilmemiş bir çizim yüzeyi sağlar ve convertToBlob, spec tanımlı kalite parametresiyle (kayıplı biçimler için 0-1, PNG için yoksayılır) tarayıcının yerleşik WebP / JPEG / PNG kodlayıcısını çağırır. WASM, üçüncü taraf kütüphane ve ağ çağrısı yoktur — iş hattının tamamı 2023 sınıfı bir dizüstü bilgisayarda 4K giriş için yaklaşık 40-200 ms içinde çalışır.

Tarayıcı destek tabanı

canvas.toBlobaracılığıyla WebP kodlaması Chromium 23+, Firefox 65+, Safari 14+ ve Edge 79+ gerektirir. 2026 itibarıyla bu, küresel trafiğin >%97'sine karşılık gelir. AVIF kodlaması tarayıcı canvas API'sinde desteklenmez; bunu sunabilmek için WASM kodlayıcı gerekir; bu da yol haritası malzemesidir.