Toplu Görsel Sıkıştırma: Web Geliştiricileri İçin Rehber | Bulk Image Compressor

Published December 18, 2025

Görseller çoğu web sitesindeki en ağır varlıklardır. Ortalama bir sayfada toplam ağırlığın %40 ila %60’ını oluştururlar. Bir web geliştiricisiyseniz ve görselleri sıkıştırmıyorsanız, kodunuz ne kadar temiz olursa olsun şişkin sayfalar yayınlıyorsunuz demektir.

Soru sıkıştırma yapıp yapmamak değil. Sıkıştırmanın iş akışınızın neresinde olması gerektiği ve hangi aracın her duruma uygun olduğudur.

Görsel sıkıştırmanın geliştirme iş akışındaki yeri

Geliştirme sırasında görselleri sıkıştırabileceğiniz üç ana nokta vardır:

Commit öncesi. Görselleri, sürüm kontrolüne girmeden önce yerel olarak optimize edersiniz. Bu, deponuzu hafif tutar ve her ortamın (hazırlık, üretim, diğer geliştiricilerin makineleri) optimize edilmiş sürümleri otomatik olarak almasını sağlar.

Derleme sırasında. Vite veya webpack gibi derleme araçları, sıkıştırmayı varlık hattının bir parçası olarak halleder. Kaynak görseller depoda tam kalitede kalır ve derleme süreci dağıtım için optimize edilmiş sürümler oluşturur.

CDN katmanında. Cloudflare, Imgix veya Cloudinary gibi hizmetler, görselleri isteyen cihaz ve tarayıcıya göre anında dönüştürür ve sıkıştırır.

Her yaklaşımın ödünleşimleri vardır ve bunları birleştirebilirsiniz.

Çevrimiçi araçlar vs derleme eklentileri

Hızlı, tek seferlik bir iş için (bir blog yazısı için bir grup ekran görüntüsünü sıkıştırmak veya bir dizi simgeyi optimize etmek gibi) çevrimiçi bir araç en hızlı seçenektir. Toplu Görsel Sıkıştırıcı’yı açın, dosyalarınızı bırakın, kaliteyi ayarlayın ve indirin. Bir dakikadan kısa sürede biter.

Derleme eklentileri, sürekli optimizasyonu otomatik olarak halleder. Pratikte şöyle görünür:

Vite

Vite kullanıcıları vite-plugin-imagemin veya benzer eklentileri kullanabilir:

// vite.config.js
import imagemin from 'vite-plugin-imagemin';

export default {
  plugins: [
    imagemin({
      mozjpeg: { quality: 80 },
      webp: { quality: 80 },
      pngquant: { quality: [0.7, 0.8] },
    }),
  ],
};

Bu, vite build sırasında görselleri sıkıştırır. Kaynak dosyalar olduğu gibi kalır. Çıktı dizini optimize edilmiş sürümleri alır.

webpack

Webpack ile image-minimizer-webpack-plugin aynı işi yapar:

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.sharpMinify,
          options: {
            encodeOptions: {
              jpeg: { quality: 80 },
              webp: { quality: 80 },
            },
          },
        },
      }),
    ],
  },
};

Hangisini ne zaman kullanmalı

Çevrimiçi bir araç kullanın:

Bir projeye birkaç görsel ekliyorsanız ve hemen optimize edilmesini istiyorsanız
Optimize edilmemiş dosyalar gönderen bir müşteri veya tasarımcıdan içerik alıyorsanız
Projenizin bir derleme adımı yoksa (statik HTML, basit siteler)
Commit etmeden önce sıkıştırma sonuçlarını görsel olarak kontrol etmek istiyorsanız

Derleme eklentilerini kullanın:

Projenizde zaten bir derleme hattı varsa
Birden fazla geliştirici görsel ekliyorsa ve tutarlı optimizasyon istiyorsanız
Biçim dönüştürmeye ihtiyacınız varsa (örneğin, otomatik WebP sürümleri oluşturma)
Gelecekteki olası yeniden işleme için kaynak görsellerin depoda tam kalitede olmasını istiyorsanız

CI/CD görsel optimizasyonu

Derleme eklentileri yerel derlemeler sırasında çalışır, ancak CI/CD hattınıza da görsel optimizasyonu ekleyebilirsiniz. Bu, kimin gönderdiğine bakılmaksızın aradan kaçan optimize edilmemiş görselleri yakalar.

Basit bir yaklaşım, CI hattınızda görsel dosya boyutlarını kontrol eden bir betik çalıştırmaktır:

# Herhangi bir görsel 500KB'dan büyükse derlemeyi başarısız yap
find public/images -type f \( -name "*.jpg" -o -name "*.png" -o -name "*.webp" \) -size +500k | tee oversized.txt
if [ -s oversized.txt ]; then
  echo "Büyük boyutlu görseller bulundu. Dağıtmadan önce sıkıştırın."
  exit 1
fi

CI’da otomatik sıkıştırma için sharp-cli veya imagemin-cli gibi araçlar, görselleri bir derleme adımı olarak işleyebilir. Bu, hiçbir şeyin sıkıştırılmamış olarak üretime gitmemesini garanti eder.

Tembel yükleme ve duyarlı görseller

Sıkıştırma tek başına yeterli değildir. Görselleri nasıl yüklediğiniz de en az onun kadar önemlidir.

Tembel yükleme (lazy loading), ekran dışındaki görselleri, kullanıcı onlara gelene kadar erteler. Görünür alanın altındaki her görsele loading="lazy" ekleyin. Kahraman görselinizi veya ilk sayfa yüklemesinde görünen herhangi bir içeriği tembel yüklemeyin, çünkü bu En Büyük İçerikli Boya (LCP) puanınıza zarar verir.

Duyarlı görseller, ekran genişliğine göre farklı boyutlar sunar. Bir telefonun, masaüstü monitör için tasarlanmış 2400px’lik bir görsele ihtiyacı yoktur. Tarayıcının doğru sürümü seçmesi için srcset ve sizes niteliklerini kullanın:

<img
  src="product-800.webp"
  srcset="product-400.webp 400w, product-800.webp 800w, product-1600.webp 1600w"
  sizes="(max-width: 640px) 400px, (max-width: 1024px) 800px, 1600px"
  alt="Ürün fotoğrafı"
  width="1600"
  height="1067"
  loading="lazy"
>

Bu boyut varyantlarını derleme sürecinizin bir parçası olarak veya yüklemeden önce bir toplu araçla oluşturun.

CDN dağıtımı

Bir CDN (İçerik Dağıtım Ağı), görselleri ziyaretçilerinize coğrafi olarak yakın sunuculardan sunar. Bu, gecikmeyi azaltır, ancak bazı CDN’ler anında görsel optimizasyonu ile daha da ileri gider.

Cloudflare Image Resizing, görselleri ziyaretçinin tarayıcısına göre otomatik olarak yeniden boyutlandırabilir ve WebP veya AVIF’e dönüştürebilir. Varyantları kendiniz oluşturmanız gerekmez.

Imgix ve Cloudinary, özel görsel CDN’leridir. Yüksek kaliteli bir kaynak yüklersiniz ve onlar URL parametreleri aracılığıyla istediğiniz boyut, biçim ve kaliteyi oluşturur. Bu güçlüdür ancak görsel başına maliyet ekler.

Çoğu proje için, görselleri yüklemeden önce sıkıştırmak ve bunları standart bir CDN (Cloudflare, Fastly, AWS CloudFront) aracılığıyla sunmak yeterlidir. Özel görsel CDN’leri, binlerce kullanıcı yüklemeli görseliniz olduğunda ve dinamik yeniden boyutlandırmaya ihtiyaç duyduğunuzda anlamlıdır. Sıkıştırmanın web için neden önemli olduğuna dair temel bilgiler için web sitesi görsellerinin neden sıkıştırmaya ihtiyacı olduğu rehberimize göz atın.

Geliştiricilerin yaptığı yaygın hatalar

Optimize edilmemiş görselleri commit etmek. Deponuzdaki 5MB’lık bir JPEG, daha sonra değiştirseniz bile git geçmişinde sonsuza kadar kalır. Commit etmeden önce sıkıştırın.

Fotoğraflar için PNG kullanmak. PNG’ler grafikler, ekran görüntüleri ve şeffaflığı olan görseller için tasarlanmıştır. PNG olarak kaydedilen bir fotoğraf, aynı görselin JPEG veya WebP olarak kaydedilmesinden tipik olarak 3 ila 5 kat daha büyüktür. İçerik türü için doğru biçimi kullanın. Ayrıntılar için biçim karşılaştırma rehberimize göz atın.

Genişlik ve yükseklik niteliklerini atlamak. Açık boyutlar olmadan tarayıcı, yüklenene kadar bir görsel için ne kadar alan ayrılacağını bilemez. Bu, düzen kaymalarına neden olur, CLS puanınızı düşürür ve kullanıcıları rahatsız eder.

Aşırı sıkıştırma. Küçük dosyalar elde etmek için kaliteyi %30 veya %40’a düşürmek görünür artefaktlar üretir. Web görselleri için %75 ila %82 kalite, boyut ve görünüm arasında doğru dengeyi sağlar.

Görsel boyutlarını göz ardı etmek. 4000px’lik bir fotoğrafı %80 kalitede sıkıştırmak iyidir, ancak sayfanızda 600px genişliğinde görüntüleniyorsa, yine de ihtiyaç duyulandan çok daha fazla piksel gönderiyorsunuzdur. Önce görüntüleme boyutlarınıza yeniden boyutlandırın, ardından sıkıştırın.

WebP kullanmamak. WebP için tarayıcı desteği artık evrenseldir. Hala yalnızca JPEG ve PNG sunuyorsanız, %25 ila %35 dosya boyutu tasarrufunu masada bırakıyorsunuz.

Pratik bir yaklaşım

Çoğu web projesi için şu iyi çalışır:

Commit etmeden önce, Toplu Görsel Sıkıştırıcı gibi bir çevrimiçi araç veya yerel bir betik kullanarak görselleri yeniden boyutlandırın ve sıkıştırın.
Aradan kaçanları yakalamak için bir güvenlik ağı olarak bir derleme eklentisi ekleyin.
HTML’inizde tembel yükleme ve duyarlı görseller kullanın.
Bir CDN aracılığıyla sunun.

Dört adımı da ilk günden yapmanız gerekmez. İlk adımla başlayın. Bu bile sayfa yükleme sürelerinizde gözle görülür bir fark yaratacaktır.

Ready to compress your images?

Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.

Try Bulk Image Compressor