Halaman dan komponen web modern dirancang agar sepenuhnya responsif di seluruh perangkat, yang berarti bahwa gambar yang digunakan dalam komponen web akan menskalakan berbeda tergantung pada tempat gambar ditampilkan, tata letak mana yang digunakan, dan perangkat tempat gambar tersebut ditampilkan. Misalnya, halaman modern dirancang agar terlihat bagus di perangkat seluler, dan penskalaan gambar otomatis membantu menciptakan pengalaman yang menarik itu.
Ukuran gambar apa yang paling sesuai?
Karena desain halaman yang 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 dipangkas secara otomatis untuk menampilkan hasil terbaik di berbagai perangkat dan tata letak. Namun, ada beberapa panduan yang dapat membantu Anda memastikan gambar terlihat bagus di halaman Anda.
Menemukan ukuran gambar terbaik untuk halaman Anda bergantung pada faktor-faktor berikut:
- 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 angka pertama. Sebagai contoh, rasio 16:9 lebar bisa 1600 piksel dengan tinggi 900 piksel. Atau, bisa jadi 1920 x 1080, 1280 x 720, atau kombinasi lebar/tinggi lainnya yang dapat dihitung sama dengan 16:9. Anda dapat menemukan kalkulator rasio aspek secara online dan di beberapa alat pengeditan foto untuk membantu Anda menentukan rasio aspek gambar.
Biasanya, gambar di komponen web modern berfungsi paling baik di seluruh tata letak dan perangkat ketika memiliki rasio aspek 16:9 atau 4:3, tergantung pada tata letaknya.
Tata letak kolom
Halaman dapat ditata letak dengan bagian yang menyertakan berbagai tipe dan tata letak kolom, seperti kolom lebar penuh, satu kolom, dua kolom, tiga kolom, sepertiga kolom kiri, dan sepertiga kolom kanan. Aturan umum untuk gambar yang diharapkan dapat mengisi lebar kolom adalah setidaknya selebar kolom seperti kolom tempat gambar tersebut ditempatkan. Misalnya, gambar dalam komponen web gambar dalam satu kolom harus memiliki lebar minimal 1204 piksel.
Berikut adalah pedoman 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 |
| Sepertiga kolom kiri | 380 untuk kolom kiri; 792 untuk kolom kanan |
| Sepertiga kolom kanan | 792 untuk kolom kiri; 380 untuk kolom kanan |
Karena sifat halaman yang responsif, gambar dalam kolom lebar penuh akan selalu ditampilkan pada lebar penuh layar Anda dengan tinggi otomatis berdasarkan ukuran layar.
Tinggi gambar yang ditempatkan dalam tata letak kolom lain akan bergantung pada rasio aspek Anda. Berikut adalah pedoman tinggi/lebar untuk rasio aspek 16:9 dan 4:3 (dibulatkan ke atas/bawah ke piksel terdekat). Hal ini berguna untuk menjaga gambar Anda pada lebar dan tinggi yang diskalakan dengan tepat untuk perangkat seluler, misalnya:
| RASIO ASPEK TATA LETAK |
16 x 9 Lebar x Tinggi dalam piksel |
4 x 3 Lebar x Tinggi dalam piksel |
|---|---|---|
| Satu kolom | 1204 x 677 | 1204 x 903 |
| Dua kolom | 586 x 330 | 586 x 439 |
| Tiga kolom | 380 x 214 | 380 x 285 |
| Sepertiga kolom kiri | 380 x 446 untuk kolom kiri; 792 x 446 untuk kolom kanan | 380 x 594 untuk kolom kiri; 792 x 594 untuk kolom kanan |
| Sepertiga kolom kanan | 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 memengaruhi skala gambar Anda. Contoh berikut memperlihatkan komponen web yang berbeda dan beberapa opsi serta rasio aspek yang dapat Anda gunakan.
| Komponen Web | Rasio aspek |
|---|---|
| Komponen web Hero | Rasio aspek berikut untuk tata letak Petak dan Lapisan adalah:
|
| Komponen web konten yang disorot | 16:9 adalah rasio aspek untuk tata letak Carousel, Filmstrip, dan Grid. Berikut adalah contoh rasio aspek 16:9. Gambar pertama memperlihatkan tata letak Filmstrip, dan gambar kedua memperlihatkan tata letak Kisi: 
|
| Komponen web gambar | Gambar akan diperluas hingga lebar bagian yang berisi komponen web. Berikut adalah contoh gambar di komponen web Gambar yang menggunakan rasio aspek 16:9. 
Anda juga memiliki opsi untuk mengubah rasio aspek atau pemangkasan bebas menggunakan alat pengeditan gambar atau menggunakan handel pengubah ukuran untuk membuat gambar Anda lebih besar atau lebih kecil. 
|
| Komponen web galeri gambar | Rasio aspek berikut dapat digunakan dalam tata letak yang berbeda:
|
| Komponen web Berita | Tergantung pada tata letak, gambar di komponen web Berita dapat berukuran 4:3, 16:9, atau 21:9. Berikut adalah contoh gambar dalam Cerita teratas dan tata letak Korsel: 
|
| Area judul halaman | Gambar akan terlihat paling baik jika dalam format lanskap atau rasio aspek 16:9 atau lebih besar, dan jika ukurannya minimal 1 MB. Selain itu, pastikan untuk mengatur titik fokus agar bagian terpenting gambar tetap terlihat, terutama saat gambar digunakan dalam gambar mini, tata letak berita, dan hasil pencarian. Contoh (gambar asli 16:9) dengan titik fokus diatur pada speaker: 
|
| Gambar mini halaman | Gambar mini halaman ditampilkan di tempat-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 dapat menimpa default dan mengubah gambar mini halaman. Ketika Anda melakukannya, sebaiknya gunakan gambar dengan rasio aspek 16:9. Contoh (gambar asli 16:9): 
|
| Komponen web tautan cepat | Komponen web Tautan cepat memiliki enam tata letak yang berbeda. Berikut adalah rasio aspek yang telah ditetapkan sebelumnya:
|
Tips
Saat menambahkan gambar ke area judul halaman atau komponen web Hero, sebaiknya atur titik fokus di area gambar yang ingin selalu Anda tampilkan. Untuk mempelajari selengkapnya tentang mengatur titik fokus untuk dua skenario ini, lihat Menggunakan komponen web Hero dan Membuat dan menggunakan halaman modern di situs SharePoint.
Rekomendasi gambar header situs
Selain halaman, Anda mungkin ingin menambahkan logo atau gambar kustom dalam tata letak yang diperluas. Berikut adalah rekomendasi ukuran untuk elemen-elemen tersebut.
| Elemen | Deskripsi | Rekomendasi Lebar x Tinggi dalam piksel |
|---|---|---|
| Logo situs | Logo yang lebih besar yang bisa non-persegi dan transparan tergantung pada desain yang diunggah. | 192 x 64 Format: PNG, JPEG, SVG (SVG tidak diizinkan di situs yang terhubung dengan grup) |
| Gambar mini logo situs | Gambar mini logo persegi yang digunakan jika tidak ada logo situs yang diunggah atau di tempat yang memerlukan format persegi. Elemen ini diperlukan. |
64 x 64 Format: PNG, JPEG, SVG (SVG tidak diizinkan di situs yang terhubung dengan grup) |
| Logo situs tata letak yang diperluas | Tata letak header yang diperluas memiliki lebar logo situs yang diperluas. | 300 x 64 Format: JPEG, PNG, SVG |
| Gambar latar belakang Tata Letak Diperluas | Gambar latar belakang baru yang dapat digunakan dengan header yang diperluas. | 2560 x 164 Format: JPEG, PNG |