Resize Ne Zaman Gerekir?
Görselleri yalnızca sıkıştırmak yeterli olmayabilir. Piksel boyutu (genişlik x yükseklik) da dosya boyutunu doğrudan etkiler. 4000x3000 piksel bir görsel, sayfada 800x600 olarak gösterilse bile tarayıcı tam boyutlu dosyayı indirir. Bu, gereksiz bant genişliği tüketimi ve yavaş sayfa yüklemesi demektir.
Bu rehberde görselleri ne zaman yeniden boyutlandırmalı, yaygın hatalar ve responsive görsel kavramını ele alıyoruz.
Ne Zaman Resize Yapılmalı?
Görselin CSS veya HTML ile görüntüleneceği maksimum genişlikten daha büyükse resize yapılmalıdır. Örneğin içerik genişliğiniz 800px ise, kapak görseli 800px veya 1600px (2x Retina için) yeterlidir. 4000px genişlikteki bir görseli yüklemek anlamsızdır; tarayıcı zaten küçültür ama dosya boyutu aynen kalır.
Yaygın Hata: 4000px Görseli 800px Göstermek
En sık yapılan hata, kamera veya stok sitelerinden indirilen yüksek çözünürlüklü görselleri doğrudan yüklemektir. 6000x4000 piksel, 8 MB'lık bir JPEG'i blog yazısında 800px genişlikte göstermek hem LCP skorunu düşürür hem de kullanıcının verisini boşa harcar. Görseli kullanım amacına uygun boyuta indirgenmeli ve sıkıştırılmalıdır.
Responsive Görsel Kavramı
Responsive tasarımda ekran genişliği değişir; mobilde 360px, tablette 768px, masaüstünde 1200px olabilir. Tek bir görsel tüm cihazlara sunulabilir; ancak ideal yaklaşım srcset ve sizes ile birden fazla boyutta görsel sunmaktır. Tarayıcı ekran genişliğine ve piksel yoğunluğuna göre uygun dosyayı seçer; gereksiz büyük görsel indirilmez.
Maksimum Genişlik Önerileri
İçerik alanı görseli (blog, makale): Maksimum 1200–1600px. Çoğu ekran bu genişliği aşmaz.
Tam genişlik hero/banner: 1920–2400px. Ultra geniş monitörler için 2400px makul üst sınırdır.
Thumbnail / kart görseli: 400–600px.
E-ticaret ürün zoom: 1200–1600px, büyütme için yeterli detay sağlar.
En-Boy Oranını Koruma
Resize yaparken orijinal en-boy oranı (aspect ratio) korunmalıdır. Görsel bozulmasını önlemek için genelde tek bir eksen (genişlik veya yükseklik) referans alınır; diğeri orantılı hesaplanır. Crop (kırpma) farklı bir işlemdir; belirli bir oran için kullanılır.
srcset Kullanımı
srcset atribütü ile aynı görselin farklı çözünürlüklerde versiyonlarını sunabilirsiniz. Tarayıcı sizes bilgisi ile hangi dosyayı indireceğine karar verir. Örneğin: srcset="img-800.webp 800w, img-1200.webp 1200w" ve sizes="(max-width: 768px) 100vw, 800px" ile mobilde daha küçük, masaüstünde daha büyük görsel yüklenir. Bu, performans açısından ideal bir stratejidir.
Görsellerinizi boyutlandırın ve sıkıştırın. Araçımızda max genişlik ayarı ile resize yapabilir, WebP formatında indirebilirsiniz.
Sıkıştırma Aracına Git →