Neden önce boyutlandırma?
Ziyaretçi tarayıcısı görseli indirip decode eder; piksel sayısı arttıkça bellek ve işlem süresi artar. Aynı görseli hero, liste ve thumbnail’de farklı boyutlarda servis etmek yaygın bir desendir — tek dev PNG’yi her yere aynı çözünürlükte vermek çoğu zaman israftır. Boyutlandırma kararı, tasarım grid’iniz ve paylaşım kartı kırpımınızla birlikte düşünülmelidir.
Shortmox Image Converter’da anlatılan ücretsiz akışta işlem tarayıcıda kalır; çok büyük dosyalarda tarayıcı bellek sınırına takılabilirsiniz. Üretim pipeline’ınızda toplu sunucu işleme ihtiyacı varsa bu araç tam yerine geçmez — ama tek dosya veya küçük set için pratik bir adımdır.
480p, 720p ve 1080p seçimi
Bu ön ayarlar genelde videodan alışık olsa da görselde “kısa kenar tavanı” gibi düşünülebilir. Mobil öncelikli bir vitrinde 720p tavanı çoğu ürün kartı için yeterli olur; tam genişlik hero’da 1080p daha sık tercih edilir. Retina ekranlarda CSS ile 2x mantığı kullanıyorsanız kaynak dosyanın gerçek piksel ihtiyacını hesaplayın — gereksiz 4K kaynak 2x bile olsa ağırdır.
Özel piksel hedefi (ör. genişlik 1600) sabit bir layout’a kilitlendiğinde işe yarar; oranı bozmadan uzun kenarı ölçekleyen araçlar tercih edilmelidir. Kırpım gerekiyorsa tasarım aracında kırpıp sonra sıkıştırma genelde daha öngörülebilir sonuç verir.
PNG, JPG ve WebP
PNG şeffaflık ve keskin kenarlar için iyidir; fotoğrafta dosya şişer. JPG fotoğraf için yaygındır; şeffaflık taşımaz — dışa aktarımda şeffaf alanlar zemine birleştirilir. WebP genelde daha küçük dosya verir; hedef tarayıcı setiniz WebP’yi desteklemiyorsa yedek stratejisi (picture/source veya farklı varyant) düşünün.
E-ticaret görsellerinde platformun önerdiği maksimum genişlik ve format şartlarına uyun; aksi halde CDN veya tema otomatik küçültse bile ilk bayt hâlâ büyük kalabilir.
Kalite kaydırıcısı ve artefakt
Düşük kalite bloklama ve renk banding riskini artırır; yüksek kalite dosyayı büyütür. A/B yerine küçük bir görsel örnekle gözle kontrol en hızlı yöntemdir. Metin içeren JPG’lerde özellikle kenar çizgilerinde halo oluşabilir; metin ağırlıklı görselde PNG veya vektör kaynak daha güvenli olabilir.
Otomatik “en iyi kalite” tek bir sayı değildir; ürün tipi ve zoom davranışına göre değişir. Dönüşüm sonrası gerçek cihazlarda kontrol etmek hâlâ sizin sürecinizdir — araç görsel farkı azaltmaya yardımcı olur, tasarım onayınızın yerini almaz.
Sosyal vitrin ve kırpım
LinkedIn veya X gibi platformlar farklı en-boy oranları bekler; tek görseli her yere aynı dosya ile vermek kırpım veya letterbox üretir. Önce hedef kırpımı tasarım aracında yapıp sonra boyutlandırmak, beklenmeyen kafa veya metin kesilmesini azaltır. Open Graph görseli için güvenli alan bırakmak, dinamik başlık uzunlukları için de geçerlidir.
Renk profili ve baskı akışı bu rehberin dışındadır; web vitrinine odaklanın. Renk kayması yaşanıyorsa kaynak dosyanın profilini ve tarayıcı dönüşümünü gözlemleyin — tarayıcı içi dönüştürücü baskı CMYK ayrımı yapmaz.
Pratik akış
- Hedef maksimum genişlik veya 720p/1080p ön ayarını seçin.
- Formatı (WebP/JPG/PNG) içerik tipine göre belirleyin.
- Kaliteyi düşürerek dosya boyutunu gözlemleyin; kabul edilebilir eşiği bulun.
- Image Converter ile dönüşümü çalıştırın; çıktıyı şablonda gerçek genişlikte test edin.