SharePoint modern sayfalarında resim boyutlandırma ve ölçeklendirme
Applies ToMicrosoft 365’te SharePoint

Modern sayfalar ve web bölümleri, cihazlar arasında tam olarak yanıt verecek şekilde tasarlanmıştır; başka bir deyişle, web bölümlerinde kullanılan görüntüler nerede gösterildiğine, hangi düzenin kullanıldığına ve görüntülendikleri cihaza bağlı olarak farklı ölçeklendirilir. Örneğin, modern sayfalar mobil cihazlarda harika görünecek şekilde tasarlanmıştır ve otomatik görüntü ölçeklendirme bu çekici deneyimin oluşturulmasına yardımcı olur.

Cihazlar arasında sayfa örnekleri

En iyi hangi görüntü boyutları çalışır?

Hızlı yanıt veren sayfa tasarımı nedeniyle, piksel cinsinden görüntünün cihazlar ve düzenler arasında belirli bir şekli korumasını sağlayacak belirli bir yükseklik veya genişlik yoktur. Çeşitli cihazlarda ve düzenlerde mümkün olan en iyi sonucu göstermek için görüntüler otomatik olarak yeniden boyutlandırılır ve kırpılır. Ancak, resimlerinizin sayfalarınızda harika göründüğüne emin olmanıza yardımcı olabilecek bazı yönergeler vardır.

Sayfanız için en iyi görüntü boyutlarını bulmak şu faktörlere bağlıdır:

  • En boy oranı: Görüntülerin 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ı, görüntülerin 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. Örneğin, 16:9 oranı 1600 piksel genişlikte 900 piksel yüksekliğe sahip olabilir. Ya da 1920 x 1080, 1280 x 720 veya 16:9'a eşit olarak hesaplanabilir diğer genişlik/yükseklik bileşimleri olabilir. Görüntülerinizin en boy oranlarını belirlemenize yardımcı olmak için en boy oranı hesaplayıcılarını çevrimiçi olarak ve bazı fotoğraf düzenleme araçlarında bulabilirsiniz. 

16:9 ve 4:3 en boy oranları örnekleri.

Çoğu durumda, modern web bölümlerindeki görüntüler düzene bağlı olarak en boy oranı 16:9 veya 4:3 olduğunda düzenlerde ve cihazlarda en iyi şekilde çalışır.

Sütun düzenleri

Sayfa, tam genişlikli sütunlar, bir sütun, iki sütun, üç sütun, üçte bir sol ve üçüncü sağ sütunlar gibi farklı sütun türlerini ve düzenlerini içeren bölümlerle birlikte yerleştirilebilir. Bir sütunun genişliğini doldurması beklenen görüntüler için genel bir kural, en az yerleştirildikleri sütun kadar geniş olmalarıdır. Örneğin, bir sütundaki görüntü web bölümündeki bir resim en az 1204 piksel genişliğinde olmalıdır.

Sütun düzenlerinin her biri için genişlik yönergeleri aşağıdadır:

Düzen

Piksel cinsinden genişlik

Tam genişlikli sütun

1920

Bir 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şlikli sütunlardaki görüntüler ekran boyutuna göre otomatik yükseklikle her zaman ekranınızın tam genişliğinde görüntülenir.

Diğer sütun düzenlerine yerleştirilen görüntülerin yüksekliği en boy oranınıza bağlıdır. 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 aşağıdadır. Bu, görüntülerinizi mobil cihazlar için uygun şekilde ölçeklendirilecek genişlikte ve yüksekte tutmak için yararlıdır, örneğin:

EN BOY ORANı

DÜZEN

16 x 9

Genişlik x Piksel cinsinden yükseklik

4 x 3

Genişlik x Piksel cinsinden yükseklik

Bir 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, görüntülerinizin nasıl ölçeklendirileceğini de etkiler. Aşağıdaki örneklerde farklı web bölümleri ve kullanabileceğiniz bazı seçenekler ve en boy oranları gösterilir.

Hero web bölümü

Kutucuklar ve Katmanlar düzenleri için aşağıdaki en boy oranları şunlardır:

  • Kutucuklar: Web bölümünün yüksekliği 8:3 en boy oranını izleyecek şekilde ölçeklendirilir ve web bölümü içindeki görüntüler 4:3 en boy oranına ölçeklendirilir.

  • Katmanlar: Tek bir katman 8:3 en boy oranına ölçeklendirilir ve her katmanın içindeki görüntüler 16:9'a yakın bir en boy oranına ölçeklendirilir.

  • Mobil cihazlarda, saat 16:9'da Bir Döngü düzeni kullanılır.

Katmanlar düzeninde (üst) ve Kutucuklar düzeninde (alt) gösterilen bir görüntü örneği aşağıda verilmiştir:

Katmanlar ve Kutucuklar düzenlerindeki Hero web bölümü görüntüleri örneği

Vurgulanan içerik web bölümü

16:9, Döngü, Film Şeridi ve Kılavuz düzenleri için en boy oranıdır.

İşte 16:9 en boy oranı örneği. İlk resimde Film şeridi düzeni, ikinci görüntüde Kılavuz düzeni gösterilir:

Film şeridi düzenini kullanan Vurgulanan içerik web bölümü.

Genişletilmiş fotoğrafların görüntülendiği Vurgulanan içerik Kılavuz düzeni.

Resim web bölümü

Görüntüler, web bölümünü içeren bölümün genişliğine genişletilecektir. 

Görüntü web bölümündeki 16:9 en boy oranını kullanan bir görüntü örneği aşağıda verilmiştır.

Döngü 16:9 oranını kullanan Resim web bölümündeki bir resim.

Görüntü düzenleme aracını kullanarak en boy oranını veya serbest kırpmayı değiştirme veya yeniden boyutlandırma tutamaçlarını kullanarak görüntünüzü büyütme veya küçültme seçeneğiniz de vardır.

SharePoint düzenleme aracında bir fotoğraf açılır.

Resim galerisi web bölümü

Aşağıdaki en boy oranları farklı düzenlerde kullanılabilir:

  • Tuğla ve Döngü düzenleri tüm görüntülerin en boy oranlarına dikkat eder: 16:9, 1:1, 4:3 vb. 

  • Kılavuz düzeni üç en boy oranına izin verir: 1:1 kare, 16:9 geniş ve 4:3 standart.

İlk görüntüdeResim galerisi web bölümündeki Tuğla düzeni gösterilir (16:9 ve 1:1 en boy oranlarını koruyarak). İkinci resimde Kılavuz düzeni gösterilir (1:1 en boy oranı kullanılarak).

Tuğla düzeni seçeneğini kullanarak Resim galerisi web bölümü.

Kılavuz düzeni seçeneğini kullanarak Resim galerisi web bölümü.

Haber web bölümü

Düzene bağlı olarak, Haberler web bölümündeki görüntüler 4:3, 16:9 veya 21:9 olabilir.

Top story ve Carousel düzenindeki görüntülerin bir örneği aşağıda verilmiştir:

Haber düzenleri resim örnekleri

Sayfa başlığı alanı

Görüntüler yatay veya en boy oranında 16:9 veya daha yüksek olduğunda ve en az 1 MB boyutunda olduğunda en iyi şekilde 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.

Konuşmacıda odak noktası ayarlanmış örnek (özgün resim 16:9):

Sayfa başlığı alanında 16:9 görüntüsü örneği.

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 sayfanın ilk sırasına göre (sayfa düzeninin sol üst kısmı gibi) web bölümünden gelir. Varsayılanı geçersiz kılabilir ve sayfa küçük resmini değiştirebilirsiniz. Bunu yaptığınızda en iyi yöntem 16:9 en boy oranına sahip bir görüntü kullanmaktır.

Örnek (özgün görüntü 16:9):

Vurgulanan içerik web bölümünde sayfa küçük resmi görüntüsü örneği

Hızlı bağlantılar web bölümü

Hızlı bağlantılar web bölümünün altı farklı düzeni vardır. Önceden ayarlanmış en boy oranları şunlardır:

  • Sıkıştırılmış, Liste, Kutucuklar: 1:1, 4:3

  • Film Şeridi, Kılavuz, Düğme: 16:9

İlk resimde Hızlı bağlantılar web bölümündeki Sıkıştırılmış düzengösterilir. İkinci görüntüde Film Şeridi düzenini kullanarak aynı Hızlı bağlantılar web bölümü gösterilmektedir.

Bağlantılar için küçük resim görüntülerini gösteren Hızlı bağlantılar web bölümü.

Görüntüler için 16:9 oranını gösteren Hızlı bağlantılar web bölümü.

İpuçları: 

Site üst bilgisi görüntüsü önerileri

Sayfalara ek olarak, genişletilmiş bir düzende özel logolar veya resimler eklemek isteyebilirsiniz. Bu öğeler için boyut önerileri aşağıdadır.

Öğe

Açıklama

Öneri

Genişlik x Piksel cinsinden yükseklik

Site logosu

Karşıya yüklenen tasarıma bağlı olarak kare olmayan ve saydam olabilecek daha büyük logo.

192 x 64 

Biçim: PNG, JPEG, SVG (Gruba bağlı sitelerde SVG'ye izin verilmez)

Site logosu küçük resmi

Site logosu yüklenmezse veya kare biçimin gerekli olduğu yerlerde kullanılan kare logo küçük resmi.

Bu öğe gereklidir.

64 x 64 

Biçim: PNG, JPEG, SVG (Gruba bağlı sitelerde SVG'ye izin verilmez)

Genişletilmiş düzen sitesi logosu

Genişletilmiş üst bilgi düzeninin genişletilmiş site logo genişliği vardır.

300 x 64

Biçim: JPEG, PNG, SVG

Genişletilmiş Düzen arka plan resmi

Genişletilmiş üst bilgiyle kullanılabilecek yeni bir arka plan görüntüsü.

2560 x 164

Biçim: JPEG, PNG

Daha fazla yardıma mı ihtiyacınız var?

Daha fazla seçenek mi istiyorsunuz?

Abonelik avantajlarını keşfedin, eğitim kurslarına göz atın, cihazınızın güvenliğini nasıl sağlayacağınızı öğrenin ve daha fazlasını yapın.

Topluluklar, soru sormanıza ve soruları yanıtlamanıza, geri bildirimde bulunmanıza ve zengin bilgiye sahip uzmanlardan bilgi almanıza yardımcı olur.