Mengubah ukuran dan skala gambar di halaman SharePoint modern

Mengubah ukuran dan skala gambar di halaman SharePoint modern

Halaman modern dan komponen web dirancang untuk sepenuhnya responsif di seluruh perangkat, yang berarti bahwa gambar yang digunakan dalam komponen Web akan diskalakan secara berbeda tergantung pada tempatnya diperlihatkan, tata letak yang digunakan, dan perangkat tempat file tersebut sedang ditampilkan. Sebagai contoh, halaman modern didesain agar terlihat bagus di perangkat seluler, dan skala gambar otomatis membantu menciptakan pengalaman yang menarik.

Contoh halaman di seluruh perangkat

Ukuran gambar apa yang paling baik?

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

Menemukan ukuran gambar terbaik untuk halaman Anda bergantung pada beberapa 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 tempat gambar digunakan

Rasio aspek

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

Contoh rasio aspek 16:9 dan 4:3.

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

Tata letak kolom

Halaman bisa ditata dengan bagian yang menyertakan tipe kolom dan tata letak yang berbeda, seperti kolom lebar penuh, satu kolom, dua kolom, tiga kolom, kiri satu ketiga dan kolom kanan satu ketiga. Aturan umum untuk gambar yang diharapkan untuk mengisi lebar kolom adalah mereka setidaknya selebar kolom tempat file ditempatkan. Misalnya, gambar dalam komponen Web gambar dalam satu kolom setidaknya berukuran 1204 piksel. 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 halaman yang responsif, gambar dalam kolom lebar penuh akan selalu ditampilkan dengan lebar penuh layar Anda dengan tinggi otomatis berdasarkan ukuran layar.

Tinggi gambar yang ditempatkan dalam tata letak kolom lainnya akan bergantung pada rasio aspek Anda. Berikut adalah panduan tinggi/lebar untuk rasio aspek 16:9 dan 4:3 (dibulatkan ke atas/bawah ke piksel terdekat). Ini sangat berguna untuk mempertahankan gambar Anda pada lebar dan tinggi yang berskala 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 skala gambar Anda. Contoh berikut memperlihatkan komponen web yang berbeda dan tata caranya dalam satu kolom, dan rasio aspek yang digunakan dalam masing-masing.

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

Contoh gambar 16_9

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

Komponen Web Hero

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

  • Petak: tinggi komponen Web didiskalakan untuk mengikuti rasio aspek 8:3, dan gambar di dalam skala komponen Web menjadi rasio aspek 4:3.

  • Lapisan: lapisan individu skala untuk rasio aspek 8:3, dan gambar dalam setiap skala lapisan ke rasio aspek di dekat 16:9.

  • Pada perangkat seluler, tata letak Carousel digunakan di 16:9.

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

Contoh gambar komponen Web Hero dalam tata letak lapisan dan petak

Komponen Web konten yang disorot

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

Berikut contoh gambar yang diperlihatkan dalam tata letak Filmstrip (atas) dan tata letak kartu (bawah).

Contoh gambar komponen Web konten yang disorot

Komponen Web gambar

Gambar akan diperluas ke lebar bagian yang berisi komponen web. Anda memiliki opsi untuk mengubah rasio aspek atau pemotong tangan bebas menggunakan Toolbar gambar, atau menggunakan gagang pengubah ukuran untuk memperbesar atau memperkecil gambar.

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

Gambar memperlihatkan tanda potong di 4:3

Komponen Web galeri gambar

Rasio aspek berikut ini digunakan dalam tata letak yang berbeda:

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

  • Ubin, kartu: 4:3

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

Contoh petak dan batu bata tata letak untuk komponen Web galeri gambar

Komponen web Berita -

Bergantung pada tata letak, gambar dalam komponen web Berita bisa 4:3, 16:9, atau 21:9. Berikut ini adalah contoh gambar dalam cerita teratas dan tata letak Carousel.

Contoh gambar tata letak Berita

Area judul halaman

Gambar terlihat paling baik ketika lanskap atau 16:9 atau lebih besar dalam rasio aspek, dan jika ukurannya setidaknya 1 MB. Juga, pastikan untuk mengatur focal point ke bagian paling penting dari gambar dalam tampilan, terutama ketika gambar digunakan dalam gambar mini, tata letak, dan hasil pencarian.

Contoh (gambar asli 16:9) dengan focal point yang diatur pada speaker.

Contoh gambar 16:9 dalam area judul halaman.

Gambar Mini Halaman

Gambar Mini halaman diperlihatkan di tempat seperti hasil pencarian, hasil konten yang 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 gunakan gambar dengan rasio aspek 16:9.

Contoh (gambar asli 16:9)

Contoh gambar Mini halaman di komponen Web konten yang disorot

Komponen Web Link cepat 

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

  • Pembuatan film, kisi, tombol: 16:9

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

Berikut adalah contoh gambar yang diperlihatkan dalam tata letak ringkas (atas) dan tata letak Filmstrip (bawah)

Contoh gambar dalam tata letak Link cepat

Tips: 

Catatan:  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? Berikut adalah artikel dalam bahasa Inggris untuk referensi.

Perlu bantuan lainnya?

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.

×