Resimleri Çevrimiçi Sıkıştırın — JPEG, PNG ve WebP

Resim Sıkıştırma Nedir?

// Compress a JPEG image in the browser using the Canvas API
async function compressImage(file, quality = 0.75) {
  const img = await createImageBitmap(file); // decode the image
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  canvas.getContext('2d').drawImage(img, 0, 0);
  // quality: 0.0 (smallest file) → 1.0 (original quality)
  return new Promise((resolve) =>
    canvas.toBlob(resolve, 'image/jpeg', quality)
  );
}

// file comes from an <input type="file"> or drag-and-drop
const blob = await compressImage(file, 0.75);
console.log(`Original:   ${file.size} bytes`);
console.log(`Compressed: ${blob.size} bytes`);
// → Original:   2100000 bytes
// → Compressed:  672000 bytes  (~68% reduction)

Temel Özellikler

JPEG vs PNG vs WebP

Sıkıştırma Örnekleri

photo-landscape.jpg (2,1 MB, 4000×3000)

photo-landscape.jpg (kalite 75'te 680 KB)

logo-transparent.png (43 KB, 1200×800)

logo-transparent.png (kalite 80'de 19 KB)

hero-banner.webp (800 KB, 1920×1080)

hero-banner.webp (kalite 75'te 250 KB)

Resimler Çevrimiçi Nasıl Sıkıştırılır

1. 1

   Resimlerinizi Yükleyin

   Resimleri yükleme alanına sürükleyip bırakın veya dosyalarınıza göz atmak için tıklayın. Her biri 10 MB'a kadar olmak üzere aynı anda 20 JPEG, PNG veya WebP resim seçebilirsiniz.

2. 2

   Kaliteyi Ayarlayın

   İstediğiniz sıkıştırma seviyesini (0–100) belirlemek için kalite kaydırıcısını kullanın. Varsayılan olan 75, iyi bir denge sunar. Dosya boyutlarının ve sıkıştırma oranlarının gerçek zamanlı olarak güncellendiğini izleyin.

3. 3

   Sonuçları İndirin

   Tek bir dosyayı indirmek için İndir'e tıklayın veya tüm sıkıştırılmış resimleri kaydetmek için Tümünü İndir'i kullanın. İndirmeden önce kaliteyi görsel olarak incelemek için Karşılaştır düğmesini kullanın.

Kullanım Senaryoları

Web Sitesi Performans Optimizasyonu

Web sitenize yüklemeden önce resim dosya boyutlarını küçültün. Daha küçük resimler daha hızlı yüklenir; bu da Core Web Vitals puanlarını (özellikle Largest Contentful Paint) artırır, bant genişliği maliyetlerini düşürür ve SEO sıralamalarını iyileştirir.

E-posta Eki Boyutu Azaltma

Eklenti boyut sınırları (genellikle 10–25 MB) içinde kalmak için resimleri e-postaya eklemeden önce sıkıştırın. 20 fotoğraflık bir grup çoğu zaman 50 MB'tan 10 MB'ın altına sıkıştırılabilir.

Sosyal Medya Yüklemesi Hazırlığı

Sosyal medya platformlarına yüklemeden önce resimleri ön sıkıştırmaya tabi tutun. Platformlar resimleri otomatik olarak yeniden sıkıştırsa da en iyi şekilde sıkıştırılmış bir dosyayla başlamak, nihai kalite üzerinde daha fazla denetim sağlar.

Uygulama ve Oyun Varlık Optimizasyonu

Mobil uygulamalar, oyunlar ve aşamalı web uygulamaları için arayüz varlıklarını, dokuları ve sprite'ları sıkıştırın. Daha küçük varlıklar daha hızlı indirme, daha az depolama kullanımı ve daha akıcı kullanıcı deneyimleri demektir.

Doküman ve Sunum Optimizasyonu

PDF'ler, Word belgeleri ve sunumlara gömülü resimlerin boyutunu küçültün. Yüksek çözünürlüklü fotoğraflar içeren 50 MB'lık bir slayt destesi, fark edilir bir kalite kaybı olmadan çoğu zaman 10 MB'a indirilebilir.

Teknik Ayrıntılar

Canvas API Sıkıştırma

Bu araç, sıkıştırma için HTML5 Canvas API'sinin toBlob() yöntemini kullanır. Resim, görünmez bir canvas öğesine çizilir ve ardından belirtilen kalite parametresiyle yeniden kodlanır. JPEG ve WebP için kalite parametresi (0,0–1,0) kayıplı sıkıştırma seviyesini denetler. PNG için Canvas API kalite parametresini tamamen yok sayar — Canvas üzerinden PNG kodlama her zaman kayıpsızdır.

PNG Palet Nicemlemesi

Canvas toBlob() PNG için kalite parametresini yok saydığından PNG çıktısı Canvas'tan hiç geçmez. Bunun yerine resim bir renk paletine nicemlenir: kalite kaydırıcısı palet boyutunu belirler — kalite 75, 192 renk verir — ve sonuç alfa kanalı bozulmadan gerçek bir PNG olarak geri yazılır. Kalite 100, hiçbir pikseli değiştirmeyen kayıpsız bir yeniden kodlamaya karşılık gelir. Nicemlenmiş dosya orijinalden küçük değilse araç onu atar ve sizin özgün baytlarınızı korur.

Kalite Parametresi Davranışı

Kalite kaydırıcısı, Canvas toBlob() kalite parametresine eşlenir: 100 = 1,0 (en yüksek kalite, en büyük dosya), 0 = 0,0 (en düşük kalite, en küçük dosya). JPEG için kalite 75 (0,75) genellikle en iyi noktadır — 50'nin altında kusurlar fark edilir hale gelir. WebP için aynı kalite değeri JPEG'e kıyasla benzer görsel kalitede biraz daha küçük dosyalar üretir.

Tarayıcı Belleği ve Sınırları

Her resim, hem orijinal File nesnesi hem de sıkıştırılmış Blob olarak ve önizleme görüntüsü için iki nesne URL'siyle birlikte bellekte bulunur. Her biri 10 MB olan 20 resimde tepe bellek kullanımı yaklaşık 400 MB'a ulaşabilir. Bellek sızıntılarını önlemek için resimler temizlendiğinde veya sayfa kaldırıldığında nesne URL'leri iptal edilir.

En İyi Uygulamalar

JPEG/WebP için Kalite 75 ile Başlayın

Çoğu kullanım senaryosu için önerilen başlangıç noktası kalite 75'tir. Genellikle dosya boyutunu görünür kalite kaybı en aza indirilerek %60–80 oranında azaltır. Yalnızca ince detayların korunmasının kritik olduğu resimlerde (örneğin tıbbi görüntüleme, baskı kalitesinde fotoğrafçılık) kaliteyi 85'in üzerine çıkarın.

Mümkün Olduğunda WebP Kullanın

WebP, aynı görsel kalitede JPEG'ten %25–35 daha küçük dosyalar üretir ve PNG gibi saydamlığı destekler. 2024 itibarıyla tüm modern tarayıcılar WebP'yi destekler. Web'de en iyi sıkıştırma-kalite oranı için JPEG ve PNG resimleri WebP'ye dönüştürün.

Orijinal Dosyaları Saklayın

Orijinal, sıkıştırılmamış resimlerinizi her zaman kaynak dosya olarak saklayın. Kayıplı sıkıştırma geri döndürülemez — zaten sıkıştırılmış bir resmi yeniden sıkıştırmak, anlamlı bir boyut azaltma olmadan kaliteyi daha da düşürür (kuşak kaybı olarak bilinir).

İndirmeden Önce Kaliteyi Kontrol Edin

İndirmeden önce sıkıştırma kusurlarını görsel olarak incelemek için Karşılaştır düğmesini kullanın. Metin, keskin kenarlar ve ince degradeler içeren alanlara özellikle dikkat edin — JPEG kusurlarının en görünür olduğu yerler buralardır.

Benzer Resimleri Birlikte Toplu İşleyin

Benzer özelliklere sahip (aynı konu türü, çözünürlük, renk derinliği) resimler aynı kalite ayarıyla en iyi şekilde sıkıştırılır. En iyi sonuçlar için fotoğraflarınızı grafikler/logolardan ayrı olarak toplu işleyin.

Sık Sorulan Sorular