Modern sayfalar ve web bölümleri, cihazlar arasında tamamen duyarlı olacak şekilde tasarlanmıştır; başka bir deyişle, web bölümlerinde kullanılan resimler nerede gösterildiklerine, hangi düzenin kullanıldığına ve hangi cihazda görüntülendiklerine bağlı olarak farklı ölçeklerde farklılık gösterir. Örneğin, modern sayfalar mobil cihazlarda harika görünecek şekilde tasarlanmıştır ve otomatik görüntü ölçekleme bu çekici deneyimin yaratılmasına yardımcı olur.
Hangi resim boyutları en iyi sonucu verir?
Duyarlı sayfa tasarımı nedeniyle, bir görüntünün tüm cihazlarda ve düzenlerde belirli bir şekli korumasını sağlayacak piksel cinsinden belirli bir yükseklik veya genişlik yoktur. Görüntüler, çeşitli cihazlarda ve düzenlerde mümkün olan en iyi sonucu göstermek için otomatik olarak yeniden boyutlandırılır ve kırpılır. Ancak, resimlerinizin sayfalarınızda harika görünmesini sağlamanıza yardımcı olabilecek bazı yönergeler vardır.
Sayfanız için en iyi resim boyutlarını bulmak şu faktörlere bağlıdır:
- En boy oranı: resimlerin yüksekliği ve genişliği arasındaki ilişki
- Sütun düzeni: Sayfanızdaki sütunların türü ve sayısı
- Web bölümü düzeni: Resmin kullanıldığı Web Bölümü için seçtiğiniz düzen
En boy oranı
En boy oranı, resimlerin genişliği ve yüksekliği arasındaki ilişkidir. Genellikle 3:2, 4:3 veya 16:9 gibi iki sayı olarak ifade edilir. Genişlik her zaman ilk sayıdır. Örnek olarak, 16:9 oranı 1600 piksel genişliğinde ve 900 piksel yüksekliğinde olabilir. Veya, 1920 x 1080, 1280 x 720 veya 16:9'a eşit olarak hesaplanabilecek başka herhangi bir genişlik/yükseklik bileşimi olabilir. Resimlerinizin en boy oranlarını belirlemenize yardımcı olmak için çevrimiçi olarak ve bazı fotoğraf düzenleme araçlarında en boy oranı hesaplayıcıları bulabilirsiniz.
Çoğu durumda, modern web bölümlerindeki görüntüler, düzene bağlı olarak 16:9 veya 4:3 en boy oranına sahip olduklarında, düzenler ve cihazlar arasında en iyi sonucu verir.
Sütun düzenleri
Bir sayfa, tam genişlikli sütunlar, bir sütun, iki sütun, üç sütun, üçte bir sol ve üçte bir sağ sütunlar gibi farklı sütun türleri ve düzenleri içeren bölümlerle düzenlenebilir. Bir sütunun genişliğini doldurması beklenen resimler için genel bir kural, resimlerin en az yerleştirildikleri sütun kadar geniş olmasıdır. Örneğin, bir sütundaki resim web bölümünde yer alan bir resmin genişliği en az 1204 piksel olmalıdır.
Aşağıda, sütun düzenlerinin her biri için genişlik yönergeleri verilmiştir:
| Düzen | Piksel cinsinden genişlik |
|---|---|
| Tam genişlikli sütun | 1920 |
| Tek sütun | 1204 |
| İki sütun | Sütun başına 586 |
| Üç sütun | Sütun başına 380 |
| Üçte bir sol sütun | Sol sütun için 380; Sağ sütun için 792 |
| Üçte bir sağ sütun | Sol sütun için 792; Sağ sütun için 380 |
Sayfaların duyarlı yapısı nedeniyle, tam genişlikte sütunlardaki resimler her zaman ekranınızın tam genişliğinde görüntülenir ve ekran boyutuna göre otomatik bir yükseklik sağlanır.
Diğer sütun düzenleri içine yerleştirilen resimlerin yüksekliği sizin en boy oranınıza bağlıdır. Burada 16:9 ve 4:3 en boy oranları (en yakın piksele yukarı/aşağı yuvarlanır) için yükseklik/genişlik yönergeleri verilmiştir. Bu, resimlerinizi mobil cihazlar için uygun şekilde ölçeklendirilen bir genişlik ve yükseklikte tutmaya yardımcı olur, örneğin:
| EN BOY ORANI DÜZEN |
16 x 9 Genişlik x Piksel cinsinden yükseklik |
4 x 3 Genişlik x Piksel cinsinden yükseklik |
|---|---|---|
| Tek sütun | 1204 x 677 | 1204 x 903 |
| İki sütun | 586 x 330 | 586 x 439 |
| Üç sütun | 380 x 214 | 380 x 285 |
| Üçte bir sol sütun | Sol sütun için 380 x 446; Sağ sütun için 792 x 446 | Sol sütun için 380 x 594; Sağ sütun için 792 x 594 |
| Üçte bir sağ sütun | Sol sütun için 792 x 446; Sağ sütun için 380 x 446 | Sol sütun için 792 x 594; Sağ sütun için 380 x 594 |
Web bölümü düzenleri
Kullandığınız web bölümlerindeki düzenler, resimlerinizin ölçeklendirilme biçimini de etkiler. Aşağıdaki örneklerde farklı web bölümleri, kullanabileceğiniz bazı seçenekler ve en boy oranları gösterilmektedir.
| Hero web bölümü | Döşeme ve Katman mizanpajları için aşağıdaki en boy oranları şunlardır:
|
| Vurgulanan içerik web bölümü | 16:9, Döngü, Film Şeridi ve Izgara düzenleri için en boy oranıdır. Aşağıda 16:9 en boy oranına bir örnek verilmiştir. İlk resim Film Şeridi düzenini, ikinci görüntü ise Izgara düzenini gösterir: 
|
| Görüntü web bölümü | Görüntüler, web bölümünü içeren bölümün genişliğine genişletilir. Aşağıda, Resim web bölümünde 16:9 en boy oranının kullanıldığı bir resim örneği verilmiştir. 
Ayrıca Görüntü düzenleme aracını kullanarak en boy oranını veya serbest kırpma seçeneğini de kullanabilir ya da resminizi büyütmek veya küçültmek için yeniden boyutlandırma tutamaçlarını kullanabilirsiniz. 
|
| Resim galerisi web bölümü | Farklı düzenlerde aşağıdaki en boy oranları kullanılabilir:
|
| Haberler web bölümü | Düzene bağlı olarak, Haber web bölümündeki resimler 4:3, 16:9 veya 21:9 olabilir. Aşağıda, En İyi hikaye ve Döngü düzenindeki görüntülere bir örnek verilmiştir: 
|
| Sayfa başlığı alanı | Resimler en iyi şekilde yatay veya 16:9 veya daha büyük en boy oranına sahip olduklarında ve en az 1 MB boyutunda olduklarında görünür. Ayrıca, özellikle resim küçük resimlerde, haber düzenlerinde ve arama sonuçlarında kullanıldığında, resmin en önemli bölümünü görünümde tutmak için bir odak noktası ayarladığınızdan emin olun. Hoparlörde odak noktası ayarlı örnek (orijinal görüntü 16:9): 
|
| Sayfa küçük resmi | Sayfa küçük resimleri arama sonuçları, vurgulanan içerik sonuçları, haber gönderileri ve daha fazlası gibi yerlerde gösterilir. Varsayılan olarak, küçük resim sayfa başlığı alanından veya sayfada ilk sırada bulunan web bölümünden (sayfa düzeninin sol üst kısmı gibi) gelir. Varsayılanı geçersiz kılabilir ve sayfa küçük resmini değiştirebilirsiniz. Bunu yaparken, 16:9 en boy oranına sahip bir resim kullanmak en iyisidir. Örnek (orijinal resim 16:9): 
|
| Hızlı bağlantılar web bölümü | Hızlı bağlantılar web bölümünde altı farklı düzen vardır. Önceden ayarlanmış en boy oranları şunlardır:
|
İpucu
Sayfa başlığı alanına veya Hero web bölümüne bir resim eklediğinizde, odak noktasını her zaman görüntülemek istediğiniz resim alanına ayarlamak da en iyisidir. Bu iki senaryo için bir odak noktası ayarlama hakkında daha fazla bilgi edinmek için bkz. Hero web bölümünü kullanma ve SharePoint sitesinde modern sayfalar oluşturma ve kullanma.
Site üst bilgisi resim önerileri
Sayfalara ek olarak, genişletilmiş düzende özel logolar veya resimler eklemek isteyebilirsiniz. İşte bu öğeler için boyut önerileri.
| Öğe | Açıklama | Öneri Genişlik x Piksel cinsinden yükseklik |
|---|---|---|
| Site logosu | Yüklenen tasarıma bağlı olarak kare olmayan ve şeffaf olabilen daha büyük logo. | 192 x 64 Biçim: PNG, JPEG, SVG (Grupla bağlantılı sitelerde SVG'ye izin verilmez) |
| Site logosu küçük resmi | Site logosu yüklenmediğinde veya kare biçiminin gerekli olduğu yerlerde kullanılan kare logo küçük resmi. Bu öğe gereklidir. |
64 x 64 Biçim: PNG, JPEG, SVG (Grupla bağlantılı sitelerde SVG'ye izin verilmez) |
| Genişletilmiş düzen site logosu | Genişletilmiş üstbilgi düzeni, genişletilmiş bir site logosu genişliğine sahiptir. | 300 x 64 Biçim: JPEG, PNG, SVG |
| Genişletilmiş Düzen arka plan görüntüsü | Genişletilmiş üst bilgiyle kullanılabilecek yeni bir arka plan resmi. | 2560 x 164 Biçim: JPEG, PNG |