Tarayıcıda Çalışan Ücretsiz Resim Araç Seti: freeimgkit Nasıl Geliştirildi?

Son zamanlarda hayata geçirdiğim FreeImgKit, resimlerinizi tarayıcınızda doğrudan işleyebilen, herhangi bir sunucuya yükleme gerektirmeyen ve kullanıcı hesabı gerektirmeyen ücretsiz bir resim araç seti olarak yayınladım. Bu projede izlediğim teknik yaklaşım ve araçların arkasındaki fikirleri detaylı olarak paylaşmak istiyorum.

FreeImgKit neler sunuyor?

FreeImgKit, kullanıcıların resimleri üzerinde çeşitli işlemler yapmalarını sağlayan altı farklı araçtan oluşuyor. Tüm işlemler tarayıcı içinde gerçekleşiyor ve verileriniz asla üçüncü bir sunucuya gönderilmiyor. Araçlar şu şekilde:

• Resim sıkıştırma (JPG, PNG, WebP formatları destekleniyor)
• Resim yeniden boyutlandırma (en-boy oranını koruyan hassas ayarlar)
• Resim kırpma (önceden tanımlanmış en-boy oranlarıyla)
• Format dönüştürme (PNG, JPG ve WebP arasında geçiş)
• Sosyal medya boyutlandırma (tüm platformlara özel ön ayarlar)
• AI destekli arka plan kaldırma

Teknik karar: Tamamen istemci tarafında çalışma

Çoğu online resim aracı, kullanıcıların resimlerini sunucuya yükleyip işledikten sonra geri döndürüyor. Bu yaklaşımın iki temel sorunu bulunuyor:

• Gizlilik endişesi: Kullanıcı resimleri üçüncü parti sunucularda depolanıyor.
• Yavaşlık: Resmin yüklenmesi ve indirilmesi işlem süresini uzatıyor.

FreeImgKit’te tüm işlemlerin tarayıcı içinde yapılması kararı aldım. Bu sayede resimleriniz cihazınızda kalırken, aynı zamanda işlemler anında tamamlanıyor. Ayrıca, sunucu maliyetlerinden de kurtulmuş olduk.

Her aracın arkasındaki teknoloji

Sıkıştırma, yeniden boyutlandırma, kırpma ve format dönüştürme

Bu işlemler için Canvas API kullanılıyor. Tarayıcının yerleşik bu API’si, resimleri işlemek için ideal bir çözüm sunuyor. Temel adımlar şu şekilde:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = hedefGenislik;
canvas.height = hedefYukseklik;

ctx.drawImage(resim, 0, 0, hedefGenislik, hedefYukseklik);

canvas.toBlob((blob) => {
  // İşlenmiş resim blob olarak elde ediliyor
}, 'image/webp', kalite);

Sıkıştırma için browser-image-compression adlı npm paketi kullanılıyor. Bu paket, resim kalitesi ve boyutu arasındaki dengeyi otomatik olarak ayarlıyor ve kullanıcıya en iyi sonucu sunmayı hedefliyor.

AI destekli arka plan kaldırma: WebAssembly’in gücü

Arka plan kaldırma gibi karmaşık işlemler için genellikle makine öğrenimi modellerine ihtiyaç duyuluyor. Ancak, resimlerin sunucuya gönderilmesi tercih edilmediğinden, WebAssembly (WASM) teknolojisi devreye giriyor.

Projede, @imgly/background-removal paketi kullanıldı. Bu paket, segmentasyon modelini doğrudan tarayıcı içinde WASM aracılığıyla çalıştırıyor:

import { removeBackground } from '@imgly/background-removal';

const blob = await removeBackground(resimDosyasi);
// blob, şeffaf bir PNG olarak elde ediliyor — sunucuya gerek yok

İlk kullanımda, model yaklaşık 50 MB boyutunda indiriliyor ve tarayıcı önbelleğine kaydediliyor. Sonrasında işlemler anında gerçekleşiyor. Kalite açısından bakıldığında, bu çözümün remove.bg gibi ücretli araçlarla karşılaştırılabilir olduğunu söyleyebilirim.

Kullanılan teknoloji yığını

Projeyi geliştirirken aşağıdaki teknolojilerden faydalandım:

• Next.js 14 (App Router + TypeScript)
• Tailwind CSS (stil ve tasarım için)
• Canvas API (resim işleme için)
• @imgly/background-removal (AI destekli arka plan kaldırma)
• browser-image-compression (resim sıkıştırma)
• Vercel (dağıtım platformu)
• Cloudflare (içerik dağıtım ağı)

SEO stratejisi: Programatik yaklaşım

Her araç, kendi URL’sine sahip ayrı bir sayfada yayınlanıyor. Bu sayfalar için özel meta verileri, FAQ şeması işaretlemeleri ve detaylı içerikler hazırlandı. Bu programatik SEO yaklaşımı sayesinde, her dönüştürme aracı kendi arama sorgusuna hitap ediyor. Örneğin:

• "png to jpg" sorgusu için özel bir sayfa
• "crop photo online" sorgusu için ayrı bir sayfa

Bu strateji, organik trafik elde etmeyi kolaylaştırıyor.

İlk sonuçlar ve performans

Projeyi yayınladıktan yaklaşık beş hafta sonra elde edilen veriler şöyle:

• Google tarafından 13 sayfa indekslendi
• İlk ayda 845 görüntüleme (impression) elde edildi
• "png to jpg" ve "crop photo online" gibi anahtar kelimelerde sıralamalar elde edildi
• İlk 28 günde 69 benzersiz ziyaretçi kaydedildi

Henüz erken aşamalarda olsa da, organik büyüme eğrisi olumlu yönde ilerliyor.

Gelecekte yapılabilecek iyileştirmeler

Projeyi geliştirirken yaptığım bazı hatalardan ders çıkardım ve gelecekteki projeler için şunları öneriyorum:

• Dönüştürme sayfalarını ilk sırada geliştirmek: Bu sayfalar daha fazla arama trafiği çekiyor.
• FAQ şeması işaretlemesini ilk günden eklemek: Google bu işaretlemeleri hemen algıladı ve tıklama oranlarını artırdı.
• Site haritasını daha erken göndermek: İlk üç hafta site haritasını göndermemek, indeksleme sürecini geciktirdi.

FreeImgKit’i deneyin

Tüm araçlar ücretsiz olarak kullanıma sunulmuş durumda. Hiçbir kullanıcı hesabı gerekmiyor ve resimleriniz asla cihazınızdan ayrılmıyor. Projeye dair geri bildirimlerinizi özellikle farklı cihazlarda WASM performansı hakkında bekliyorum.

FreeImgKit’in gelecekte daha da genişleyeceğini ve kullanıcı dostu yeni özellikler ekleyeceğini umuyorum. Siz de projeye katkıda bulunmak isterseniz, GitHub deposunu inceleyebilirsiniz.