Pengatur ukuran gambar dan skala di halaman SharePoint modern

Pengatur ukuran gambar dan skala di halaman SharePoint modern

Catatan: Kami ingin secepatnya menyediakan konten bantuan terbaru dalam bahasa Anda. Halaman ini diterjemahkan menggunakan mesin dan mungkin terdapat kesalahan tata bahasa atau masalah keakuratan. Kami bertujuan menyediakan konten yang bermanfaat untuk Anda. Dapatkah Anda memberi tahu kami apakah informasi ini bermanfaat untuk Anda di bagian bawah halaman ini? Berikut artikel dalam bahasa Inggris untuk referensi.

Halaman modern dan komponen web yang dirancang untuk menjadi sepenuhnya responsif di perangkat, berarti bahwa gambar yang digunakan di komponen web akan skala berbeda bergantung pada tempat mereka diperlihatkan, tata letak mana yang digunakan, dan perangkat yang mereka sedang ditampilkan. Sebagai contoh, halaman modern didesain untuk tampak bagus di perangkat seluler, dan gambar otomatis penskalaan membantu membuat pengalaman yang menarik.

Contoh halaman di seluruh perangkat

Gambar apa ukuran bekerja paling baik?

Karena desain halaman responsif, tidak ada tertentu tinggi atau lebar dalam piksel yang akan memastikan bahwa gambar akan mempertahankan menjadi bentuk tertentu di seluruh perangkat dan tata letak. Gambar diubah ukurannya dan dipotong secara otomatis untuk memperlihatkan hasil kemungkinan terbaik di berbagai perangkat dan tata letak. Namun, ada beberapa panduan yang bisa membantu Anda memastikan bahwa gambar Anda terlihat lebih bagus di halaman Anda.

Menemukan ukuran gambar terbaik untuk halaman Anda tergantung pada faktor ini:

  • Rasio aspek: hubungan antara tinggi dan lebar gambar

  • Tata letak kolom: tipe dan jumlah kolom di halaman Anda

  • Tata letak komponen Web: tata letak yang Anda pilih untuk komponen web di mana gambar sedang digunakan

Rasio aspek

Rasio aspek adalah hubungan antara lebar dan tinggi gambar. Biasanya dinyatakan sebagai angka dua, seperti 3:2, 4:3 atau 16:9. Lebar selalu merupakan angka pertama. Sebagai contoh, rasio 16:9 bisa 1600 piksel dalam lebar 900 piksel tinggi. Atau, itu bisa 1920 x 1080, 1280 x 720, atau apa pun lebar tinggi kombinasi lain yang dapat dihitung untuk 16:9 sama dengan. Anda dapat menemukan rasio aspek Kalkulator online dan di beberapa foto pengeditan alat untuk membantu Anda menentukan rasio aspek gambar Anda. 

Contoh 16:9 dan 4:3 rasio aspek.

Dalam banyak kasus, gambar di komponen modern web berfungsi paling baik seluruh tata letak dan perangkat saat mereka memiliki rasio aspek 16:9 atau 4:3, bergantung pada tata letak.

Tata letak kolom

Halaman dapat ditata dengan bagian yang menyertakan tipe kolom yang berbeda dan tata letak, seperti kolom lebar penuh, kolom satu, dua kolom, tiga kolom, satu-ketiga kiri dan satu-ketiga kanan kolom. Aturan umum untuk gambar yang diharapkan untuk mengisi lebar kolom adalah bahwa mereka akan setidaknya lebar sebagai kolom di mana mereka ditempatkan. Misalnya, gambar di komponen web gambar dalam satu kolom harus setidaknya 1204 piksel lebar. Berikut ini adalah panduan lebar untuk setiap tata letak kolom:

Tata Letak

Lebar dalam piksel

Kolom lebar penuh

1920

Satu kolom

1204

Dua kolom

586 per kolom

Tiga kolom

380 per kolom

Kolom kiri satu-ketiga

380 untuk kolom kiri; 792 untuk kolom kanan

Kolom kanan satu-ketiga

792 untuk kolom kiri; 380 untuk kolom kanan

Karena sifat responsif halaman, gambar dalam lebar penuh kolom akan selalu ditampilkan di lebar penuh layar Anda dengan tinggi yang otomatis berdasarkan pada ukuran layar.

Tinggi gambar ditempatkan dalam tata letak kolom lain akan bergantung pada rasio aspek. Berikut adalah tinggi lebar panduan untuk 16:9 dan 4:3 rasio aspek (dibulatkan ke atas/ke bawah ke terdekat piksel). Ini sangat membantu agar gambar Anda di lebar dan tinggi yang skala dengan tepat untuk perangkat seluler, misalnya.

RASIO ASPEK

16 x 9

4 x 3

Satu kolom

1204 x 677

1204 x 903

Dua kolom

586 x 330

586 x 439

Tiga kolom

380 x 214

380 x 285

Kolom kiri satu-ketiga

380 x 446 untuk kolom kiri; 792 x 446 untuk kolom kanan

380 x 594 untuk kolom kiri; 792 x 594 untuk kolom kanan

Kolom kanan satu-ketiga

792 x 446 untuk kolom kiri; 380 x 446 untuk kolom kanan

792 x 594 untuk kolom kiri; 380 x 594 untuk kolom kanan

Tata letak komponen Web

Tata letak di komponen web yang Anda gunakan juga akan mempengaruhi bagaimana menskalakan gambar Anda. Dalam contoh berikut ini memperlihatkan komponen web berbeda dan mereka tata letak dalam satu kolom, dan rasio aspek yang digunakan dalam masing-masing.

Pertimbangkan gambar ini yang memiliki asli sesuai rasio aspek dari 16:9:

Contoh gambar 16_9

Berikut adalah contoh gambar ini diperlihatkan dalam satu kolom halaman tata letak, dalam komponen web berbeda dan tata letak.

Komponen web Hero

Rasio aspek berikut ini untuk petak dan lapisan tata letak adalah:

  • Ubin: tinggi komponen web diskala untuk mengikuti rasio aspek 8:3, dan gambar dalam skala komponen web ke rasio aspek 4:3.

  • Lapisan: Lapisan masing-masing skala rasio aspek 8:3, dan gambar di dalam setiap skala lapisan rasio aspek dekat 16:9.

  • Di perangkat seluler, tata letak carousel digunakan di 16:9.

Berikut adalah contoh gambar diperlihatkan dalam lapisan tata letak (atas) dan ubin tata letak (bawah)

Contoh komponen web Hero gambar dalam tata letak lapisan dan petak

Komponen web konten yang disorot

16:9 adalah rasio aspek untuk tata letak Carousel, strip film, dan kartu.

Berikut adalah contoh gambar diperlihatkan dalam strip film tata letak (atas) dan kartu tata letak (bawah).

Contoh gambar komponen web konten yang disorot

Komponen web gambar

Gambar akan memperluas lebar bagian yang berisi komponen web. Anda memiliki opsi untuk mengubah rasio aspek atau potong gratis-tangan menggunakan toolbar gambar.

Berikut adalah contoh memperlihatkan tanda potong gambar (biru garis) di 4:3

Gambar memperlihatkan tanda potong di 4:3

Komponen web galeri gambar

Rasio aspek berikut ini digunakan dalam tata letak berbeda:

  • Tata letak bata menghormati rasio aspek semua gambar yang diperlihatkan: 16:9, 1:1, 4:3, dan seterusnya. 

  • Ubin, kartu: 4:3

Berikut adalah contoh gambar diperlihatkan dalam ubin tata letak (atas) dan bata tata letak (bawah)

Contoh tata letak ubin dan bata untuk komponen web galeri gambar

Komponen web Berita -

Bergantung pada tata letak, gambar di komponen web Berita dapat 4:3, 16:9, atau 21:9. Berikut adalah contoh gambar di atas cerita dan tata letak carousel.

Berita tata letak gambar contoh

Area judul halaman

Gambar terlihat terbaik ketika mereka lanskap atau 16:9 atau lebih besar di rasio aspek, dan ketika mereka setidaknya 1 MB ukuran. Juga, pastikan untuk mengatur titik fokus untuk Simpan bagian terpenting gambar dalam tampilan, khususnya ketika gambar digunakan di gambar mini, tata letak Berita, dan hasil pencarian.

Contoh (asli gambar 16:9) dengan titik fokus yang ditetapkan pada pembicara.

Contoh gambar 16:9 dalam area judul halaman.

Gambar Mini Halaman

Gambar Mini halaman diperlihatkan di tempat seperti hasil pencarian, hasil konten disorot, postingan Berita, dan lainnya. Secara default, gambar Mini berasal dari area judul halaman atau dari komponen web yang berada dalam urutan pertama pada halaman (seperti kiri atas tata letak halaman). Anda bisa mengesampingkan default dan mengubah gambar Mini halaman. Saat Anda melakukannya, sebaiknya menggunakan gambar dengan rasio aspek 16:9.

Contoh (asli gambar 16:9)

Contoh gambar Mini halaman di komponen web konten Highlighted

Komponen web tautan cepat 

Komponen web tautan cepat memiliki enam tata letak berbeda. Berikut adalah direkomendasikan rasio aspek:

  • Strip film, kisi, tombol: 16:9

  • Padatkan, daftar, ubin: 1:1, 4:3

Berikut adalah contoh gambar diperlihatkan dalam tata letak ringkas (atas) dan strip film tata letak (bawah)

Contoh gambar di tata letak tautan cepat

Tips: 

Kembangkan keterampilan Office Anda
Jelajahi pelatihan
Dapatkan fitur baru terlebih dahulu
Gabung ke Office Insiders

Apakah informasi ini bermanfaat?

Terima kasih atas umpan balik Anda!

Terima kasih atas umpan balik Anda! Sepertinya menghubungkan Anda ke salah satu agen dukungan Office kami akan sangat membantu.

×