Web siteleri için uygun görsel ölçüleri

Kendi düzeninizdeki alanı ölçün

Tarayıcı penceresinin tamamı yerine sayfadaki görsel alanının genişliğini belirleyin. Önce temanın veya görsel bloğunun önerdiği ölçülere bakın. Bunlar yoksa tarayıcının inceleme aracını kullanın ya da sitenizi yöneten kişiden telefonda ve bilgisayarda görünen genişliği kontrol etmesini isteyin. Gerekli büyük galeri veya yakınlaştırma görünümünü de hesaba katın.

720 piksel genişlikte gösterilen bir görsel için 720 ve 1440 piksel genişlikteki sürümleri karşılaştırın. Büyük sürüm, yüksek piksel yoğunluklu ekranda daha net görünebilir; ancak ek ayrıntının büyük dosyaya değip değmediğini kontrol edin. Yeterince büyük bir orijinal kullanın: 900 piksellik kaynağı 1440 piksele büyütmek eksik ayrıntıyı geri getirmez.

Yerleşime göre başlangıç ölçüleri

2400 piksellik kapak herkes için doğru değildir. Telefon küçük sürüm veya farklı kırpma isteyebilir. Ürün yakınlaştırması ise normal karttan ayrı, daha büyük dosya gerektirebilir.

Pikselleri dosya büyüklüğünden ayırın

Piksel ölçüleri 1200 × 800 gibi ızgarayı tanımlar. Dosya büyüklüğü kilobayt veya megabayt olarak saklama ve aktarımı anlatır. Aynı ölçülerdeki görseller ayrıntı, biçim ve sıkıştırma nedeniyle farklı büyüklükte olabilir.

CSS pikseli, sayfa düzenindeki görünür boyutu ölçer. Yoğun pikselli ekranlarda bir CSS pikseli birden çok fiziksel ekran pikseli kullanabilir. Bu yüzden net bir görsel, görünen genişliğinden daha fazla görsel pikseline ihtiyaç duyabilir.

Düzenle başlayın. 600 CSS piksel genişliğindeki fotoğraf genellikle masaüstünü dolduran fotoğrafla aynı kaynağı istemez. Piksel yoğunluğu yüksek ekranlar CSS genişliğinden fazla pikselden yararlanabilir; bunun değeri görsele ve dosya boyutundaki artışa bağlıdır.

Oranları bilinçli koruyun

Yeniden boyutlandırma aracı içinde en boy oranını kilitleyin ve 3000 × 2000 piksellik özgün görsel için 1200 piksel genişlik girin. Yükseklik otomatik olarak 800 olur. İki ölçüyü birden hesaplayıp girmeniz gerekmez. Yüzlerin ve dairelerin şeklinin korunduğunu kontrol edin.

Kare küçük resim için geniş fotoğrafı sıkıştırmak yerine kırpın. Kırpma aracında konuyu küçük ekranda görünür tutun. Büyütmek hiç yakalanmamış ayrıntıları üretmez.

Gerekli boyutları sunun

Duyarlı görsel kodu tarayıcının dosyalar arasından seçmesini sağlar. Genişliğe dayalı srcset ve sizes mevcut ölçüler ve gösterim alanını tanımlar; dosya oluşturmaz. MDN duyarlı görsel rehberine bakın.

CMS’nin zaten sürümleri ve kodu üretip üretmediğini kontrol edin. Statik sayfalarda dosyaları dışa aktarıp sayfadan referans verin. Sayfaya bağlanmamış üç yükleme duyarlı sunum oluşturmaz.

Görseller için dosya boyutu hedefi belirleyin

Temsili görselleri ve bütün sayfayı test edin. On iki ürün kartı ile tek ayrıntılı fotoğraflı portföyün bütçeleri farklıdır. Tek bir kilobayt sınırı hız veya kalite garantilemez.

1. Gerçek gösterim boyutunda inceleyin.
2. Küçük ölçü ve verimli biçim karşılaştırın.
3. İndirilen dosyanın boyutunu ve görünen ayrıntıları kontrol edin.
4. Ayarı tekrar kullanmadan önce mobilde deneyin.

Kapak, ürün ve küçük resimleri ayırın

Geniş kapağın konusu mobilde kayboluyorsa görüntüyü esnetmek yerine ayrı kırpma hazırlayın. Ürün yakınlaştırması büyük bir dosya isteyebilir, fakat her küçük ürün kartının onu indirmesi gerekmez. Kare küçük resim, yatay fotoğrafı sıkıştırarak değil kırparak hazırlanır.

Her alan için oranı, en büyük gösterim genişliğini, denenecek ölçüleri ve gerekli ayrıntıları kaydedin. Tema değişince yeniden kontrol edin. Telefon hâlâ en büyük dosyayı indiriyorsa duyarlı görsel seçimini inceleyin. Sayfanın kullanmadığı küçük bir çıktı daha üretmek işe yaramaz.