Kısa cevap
Görselin sayfada kaç CSS piksel genişlikte göründüğünü bul, sonra o genişliğin iki katında dışa aktar. 760 piksellik bir blog sütunu yaklaşık 1520 piksellik görsel ister. 280 pikselde gösterilen bir ürün kartı yaklaşık 560 ister. Ekranın tamamını kaplayan bir arka plan, tipik dizüstüler için 1920, büyük masaüstü monitörler için 2560 piksele kadar ister.
Aşağıdaki boyutlandırıcı bunu tek adımda yapar: Piksel'i seç, genişliği yaz, Yükseklik'i boş bırak ve Oranı koru açık kalsın. Bir grup telefon fotoğrafını yaklaşık 4000 pikselden 1600'e indirmek, ayrıca sıkıştırmadan önce bile her dosyayı yüzde 80 ile 90 küçültür.
Burada dene: Görsel Boyutlandırıcı
Aracın tam sayfasını açGörsel türüne göre önerilen boyutlar
Bu ölçüler blog, e-ticaret ve kurumsal sitelerdeki yaygın durumları karşılar. En önemli değer genişlik; yükseklik seçtiğin en boy oranından gelir. Dosya boyutu hedefleri yaklaşık 75 ile 85 kalitede JPG ya da WebP içindir.
| Görsel türü | Genişlik (piksel) | Yaygın oran | Dosya boyutu hedefi |
|---|---|---|---|
| Tam genişlikte üst görsel, slider | 1920 ile 2560 | 16:9 ya da 21:9 | 200 ile 400 KB |
| Yazı içindeki görsel | 1200 ile 1600 | 3:2 ya da 16:9 | 100 ile 200 KB |
| Yakınlaştırmalı ürün fotoğrafı | 1000 ile 2000 | 1:1 | 100 ile 300 KB |
| Küçük resim, ürün kartı | 300 ile 600 | 1:1 ya da 4:3 | 20 ile 60 KB |
| Paylaşım görseli (Open Graph) | 1200 x 630 | yaklaşık 1,91:1 | 300 KB altı |
| Logo | gösterim boyutunun yaklaşık 2 katı | herhangi | 30 KB altı ya da SVG |
| Ekip ya da yazar fotoğrafı | 400 ile 800 | 1:1 | 30 ile 80 KB |
Retina ve 2x görsel ne demek?
Yeni telefonlarda, birçok dizüstünde ve çoğu Mac'te ekran yoğunluğu yüksektir: bir CSS pikseli iki ya da üç fiziksel pikselle çizilir. Gösterim alanı kadar geniş bir görsel bu ekranlarda yumuşak, hafif bulanık görünür. Genişliği iki katına çıkarmak (2x) onu keskinleştirir; 3x ise çok az kişinin fark edeceği bir iyileşme için dosyayı ciddi büyütür. Bu yüzden genelde üst sınır 2x'tir.
Siten ya da kullandığın altyapı duyarlı görselleri destekliyorsa (srcset; WordPress, Shopify, ikas, IdeaSoft gibi çoğu sistem bunu kendisi ekler) 2x boyutta tek bir büyük sürüm yükle, küçük kopyaları sistem üretsin. Desteklemiyorsa en geniş gösterim genişliğinin 2 katında tek görsel en iyi uzlaşmadır.
Tam genişlikte bir üst görsel için bu, masaüstünde yaklaşık 2560 piksel demek. Telefonda aynı alan 400 CSS piksel civarındadır, duyarlı bir yapıda orada 800 ile 1200 piksel arası bir sürüm sunulur.
En boy oranı ve bozmadan boyutlandırma
En boy oranı, genişlik ile yükseklik arasındaki ilişkidir. 16:9 videoların ve çoğu banner'ın geniş şeklidir, 3:2 birçok fotoğraf makinesinin, 4:3 çoğu telefon kamerasının doğal şeklidir, 1:1 karedir ve ürün listelerinde yaygındır. Aynı türdeki bütün görsellerde tek oran kullanmak sayfaları derli toplu gösterir.
Oran korunduğu sürece boyutlandırma şekli değiştirmez, sadece büyüklüğü değiştirir. Oranı koru açıkken boyutlandırıcı görseli yazdığın genişlik ve yüksekliğin içine sığdırır, asla esnetmez. Paylaşım görseli için 1200 x 630 ya da ürün için kare gibi kesin bir şekil gerekiyorsa önce görsel kırpma aracıyla kırp, sonra boyutlandır.
Küçük görselleri büyütme. Büyütmek detay eklemeden piksel ekler; sonuç hem büyük hem bulanık olur. Bu yüzden Küçük görselleri büyütme seçeneği baştan açıktır.
Tipik bir site için adım adım
- Ölç: sayfayı aç, görselin üstünde sağ tıklayıp İncele'yi seç ya da temanın belgelerinde içerik genişliğine bak.
- Orijinalin şekli farklıysa o tür görsel için kullandığın orana kırp.
- Piksel modunda gösterim genişliğinin iki katına boyutlandır.
- Çıktı formatını seç: altyapın kabul ediyorsa en küçük dosya için WebP, etmiyorsa JPG. Logo ve şeffaf grafiklerde PNG kalsın.
- Dosya hâlâ hedefin üstündeyse sıkıştır, sonra yükleyip sayfayı telefonda kontrol et.
Sık yapılan hatalar
- Kameradan çıkan orijinali yükleyip küçültmeyi tarayıcıya bırakmak. 4000 piksellik dosyanın tamamı yine iner; sayfa yavaşlar ve Largest Contentful Paint puanı düşer.
- Sadece HTML'deki width ve height ile küçültmek. Bunlar dosya boyutunu değil gösterim boyutunu belirler. Yine de yazılmalılar, çünkü yer ayırıp sayfa kaymasını önlerler.
- Fotoğraf için PNG kullanmak. PNG kaydedilmiş bir fotoğraf, JPG ya da WebP halinin çoğu zaman 5 ile 10 katıdır.
- Aynı ızgarada farklı oranlar kullanmak; ürün listeleri dağınık görünür.
- Yazıyı görselin içine gömmek. Arama motorları okuyamaz, telefonda da minicik kalır; yazıyı görselin üstüne gerçek metin olarak koy.
Daha hızlı sayfalar için ipuçları
İlk ekranın altındaki görseller tembel yüklenmeli (lazy loading), ziyaretçi o bölüme yaklaştıkça insin; çoğu içerik sistemi bunu kendisi ekler. Pazaryerlerine (Trendyol, Hepsiburada, Amazon) yüklenen ürün fotoğraflarında ise kural farklı: her pazaryeri kendi en küçük ölçüsünü ve oranını ister, genelde kare ya da dikey ve en az 1000 piksel. Yüklemeden önce o pazaryerinin güncel kurallarına bak. En üstteki ana görsel ise normal yüklenmeli, çünkü hız puanının ölçtüğü en büyük öğe çoğu zaman odur.
Klasörlerin tamamını tek seferde boyutlandır: bütün görselleri ekle, genişliği bir kez yaz ve Hepsini ZIP olarak indir'i kullan. Listede her dosyanın eski ve yeni boyutu yazar. Her şey tarayıcında olduğu için yüzlerce ürün fotoğrafı bile hiçbir şey yüklenmeden işlenir.