Ornekler

Image Cropper araci icin pratik ornekler ve yaygin kullanim senaryolari.

Temel Ornekler

Profil Fotografi Olusturma

Herhangi bir gorselden kare profil fotografi olusturma adimlari:

1. Fotografinizi yukleyin
   • Bir portre ya da grup fotografi secin
   • JPEG ve PNG gibi yaygin formatlar desteklenir
2. En-boy oranini 1:1 olarak ayarlayin
   • Oran ayarlarinda 1:1 secenegine tiklayin
   • Kirpma alani tam kare hale gelir
3. Kirpma alanini konumlandirin
   • Kirpma alanini kisinin yuzune ortalayin
   • Onemli ogelerin gorunur kalmasi icin boyutu ayarlayin
4. Disa aktarma ayarlarini belirleyin
   • Format: PNG (saydamlik gerekiyorsa idealdir)
   • Boyut: Cogu platform icin 400x400 uygundur
   • Kalite: JPEG kullaniyorsaniz 90% onerilir

Sonuc: Sosyal medya profilleri icin uygun, profesyonel gorunumlu kare avatar.

Sosyal Medya Optimizasyonu

Instagram Gonderisi (1:1)

• En-boy orani: 1:1
• Onerilen boyut: 1080x1080
• Format: JPEG
• Kalite: 85%

Instagram Hikayesi (9:16)

• En-boy orani: 9:16
• Onerilen boyut: 1080x1920
• Format: JPEG
• Kalite: 80%

Twitter Baslik Gorseli (16:9)

• En-boy orani: 16:9
• Onerilen boyut: 1500x500
• Format: JPEG
• Kalite: 90%

E-ticaret Urun Gorselleri

Tutarlı urun fotoğrafları olusturma:

1. Standart boyutlari belirleyin
   • Ana urun gorselleri icin 1000x1000
   • Detay gorselleri icin 800x600
   • Beyaz arka plan genellikle en iyi secenektir
2. Toplu isleme akisi
   • Cikti formatini JPEG yapin
   • Kaliteyi 85% olarak ayarlayin
   • Tutarlilik icin 1:1 oranini kullanin
   • Tum urun gorsellerini ayni ayarlarla isleyin

Gelismis Ornekler

Web Tasarim Varliklari

Hero Bolumu Gorselleri

En-boy orani: 16:9 veya 21:9
Boyut: 1920x1080 veya 2560x1080
Format: WebP (yedek: JPEG)
Kalite: 75% (gorsel kalite ve yuklenme hizi dengesi)

Blog Yazisi Kucuk Gorselleri

En-boy orani: 4:3
Boyut: 800x600
Format: WebP
Kalite: 80%
Optimizasyon: ana konuya odaklanin

Kart Gorselleri

En-boy orani: 3:2
Boyut: 600x400
Format: WebP
Kalite: 85%

Fotografcilik Is Akisi

Buyuk Fotograflardan Detay Alma

1. Yuksek cozunurluklu gorseli yukleyin
   • Orijinal: 6000x4000
   • Hedef: belirli bir detayi ayiklamak
2. Hassas kirpma yapin
   • Serbest oran kullanin
   • Daha hassas secim icin yakinlastirin
   • Ilgilendiginiz bolgeye odaklanin
3. Ciktinin optimizasyonu
   • Yuksek kaliteyi (95%) koruyun
   • Kaynak PNG ise orijinal formati koruyun
   • Web kullanimi icin uygun boyuta getirin

Fotograf Serisi Olusturma

1. Tutarlı oran kullanin
   • Klasik gorunum icin 4:3
   • Daha modern gorunum icin 16:9
2. Tutarlı boyut kullanin
   • 4:3 serileri icin 1200x900
   • 16:9 serileri icin 1200x675
3. Kalite standardi koruyun
   • Fotograflari JPEG olarak disa aktarın
   • Sergi veya baski icin 90%
   • Web galerileri icin 80%

Is Akisi Ornekleri

Birden Fazla Gorseli Toplu Isleme

1. Hazirlik
   - Kaynak gorselleri bir klasorde duzenleyin
   - Hedef teknik gereksinimleri belirleyin
   - Tutarlı bir adlandirma kurali olusturun
   

2. Isleme
   - Ilk gorseli yukleyin
   - Oran ve format ayarlayin
   - Kalite ve cikti boyutunu belirleyin
   - Kirpin ve indirin
   - Ayni adimlari kalan gorseller icin tekrarlayin
   

3. Kalite kontrolu
   - Islenmis tum gorselleri inceleyin
   - Dosya boyutlarinin uygun oldugunu kontrol edin
   - Boyutlarin tutarlı oldugunu dogrulayin
   - Gorselleri hedef uygulamada test edin
   

Tek Bir Gorselden Birden Fazla Surum Olusturma

Tek bir kaynak gorselden birden fazla surum olusturabilirsiniz:

Surum 1: Tam Cozunurluk

• Kullanim: yuksek kaliteli baski
• Ayarlar: orijinal boyut, PNG, 100% kalite
• Kirpma: orijinal kompozisyonu korumak icin minimum kirpma

Surum 2: Web Gosterimi

• Kullanim: web sitesi galerileri
• Ayarlar: en buyuk boyut 1200px, JPEG, 85%
• Kirpma: web goruntulemeye uygun kompozisyon

Surum 3: Kucuk Gorsel

• Kullanim: onizleme izgara yapilari
• Ayarlar: 300x300, JPEG, 75%
• Kirpma: ana konuya odaklanin

Surum 4: Mobil Icin Optimize

• Kullanim: mobil uygulamalar
• Ayarlar: en buyuk boyut 800px, WebP, 80%
• Kirpma: kucuk ekranlarda onemli ogelerin gorunur kalmasi

Sorun Giderme Ornekleri

Buyuk Dosyalarla Calisma

Sorun: 50MB boyutunda RAW donusumlu bir gorselin islenmesi gerekiyor.
Cozum:

1. Yeterli belleğe sahip bir tarayici kullanin
2. Kaynak bosaltmak icin diger sekmeleri kapatin
3. Gerekirse dosyayi onceden kucultun
4. Mumkunse asamali yukleme kullanin

Kalite ile Dosya Boyutu Arasinda Denge Kurma

Senaryo: Dosya boyutu kucuk olmali ama kalite de iyi kalmali.

Test edilebilecek ayarlar:

• WebP, JPEG'den genellikle yaklasik 30% daha kucuktur
• 75% kalite cogunlukla iyi bir denge sunar
• Boyutlari gercek kullanim amacina gore ayarlayin
• Gereksiz pikselleri azaltmak icin uygun oran secin

Karsilastirma:

• Orijinal JPEG (90%): 2.1MB
• Optimize edilmis JPEG (75%): 1.2MB
• WebP (75%): 800KB
• WebP (60%): 450KB

Mobil Cihaz Uyumlulugu

Zorluk: Gorselleri telefon veya tablette islemek.

Dikkat edilmesi gerekenler:

• Daha az kullanilabilir bellek
• Dokunmatik arayuz ile kirpma ayarlari
• Daha yavas isleme hizi
• Daha sinirli indirme secenekleri

Iyi uygulamalar:

• Mobilde daha kucuk kaynak gorseller kullanin
• Cikti kalitesini biraz dusurun
• Dokunma hareketlerinin rahat kullanildigini test edin
• Net gorsel geri bildirim saglayin

Entegrasyon Ornekleri

WordPress Eklenti Entegrasyonu

// Example: Add crop functionality to WordPress media library
function add_image_cropper_to_media() {
    // Enqueue Image Cropper assets
    wp_enqueue_script('image-cropper', '/path/to/cropper.js');
    wp_enqueue_style('image-cropper', '/path/to/cropper.css');
}
add_action('admin_enqueue_scripts', 'add_image_cropper_to_media');

React Bileseni Entegrasyonu

import ImageCropper from "./ImageCropper";

function MyComponent() {
  const handleCropComplete = (result) => {
    // Handle cropped image
    console.log("Cropped image:", result);
  };

  return (
    <ImageCropper
      aspectRatio={1}
      outputFormat="jpeg"
      quality={85}
      onCropComplete={handleCropComplete}
    />
  );
}

E-ticaret Platformu Entegrasyonu

// Example: Shopify app integration
function setupProductImageCropper() {
  const cropper = new ImageCropper({
    container: "#product-image-editor",
    aspectRatio: 1,
    outputFormat: "jpeg",
    quality: 90,
    onCrop: (result) => {
      uploadProductImage(result.blob);
    },
  });
}