Cara Menentukan Ukuran dan Menempatkan Foto dalam Artikel Teks dan Gambar
Untuk artikel yang nyaman dibaca, sesuaikan ukuran setiap foto berdasarkan fungsinya: beri ruang yang cukup bagi gambar yang memuat bukti atau konteks penting agar terlihat jelas, dan pertahankan ukuran gambar pendukung lebih kecil jika teks di sekitarnya sudah menjelaskan poin tersebut. Tempatkan di samping bagian teks yang diperjelasnya, pertahankan urutan baca yang runtut, dan periksa tata letak pada lebar layar sempit. Panduan ini berfokus pada penataan foto dalam artikel digital; pilihan yang mengutamakan tujuan ini juga dapat diterapkan pada tata letak cetak, tetapi perilaku tampilan layar memerlukan pengecekan tersendiri.
Mulailah dari fungsi foto
Sebelum memindahkan atau mengubah ukuran foto, tentukan apa yang diharapkan didapat oleh pembaca dari foto tersebut. Apakah foto itu bukti yang perlu mereka teliti, contoh yang membuat bacaan lebih mudah dibayangkan, atau sekadar pemanis? Pembedaan ini jauh lebih berguna daripada langsung memulai dengan ukuran lebar gambar yang ditentukan sebelumnya.
Jika foto memuat informasi yang tidak ada di dalam teks, berikan ruang yang cukup agar detail yang relevan dapat terbaca. Gambar dokumen, objek, atau proses yang kecil dapat gagal menjalankan tugas utamanya jika pembaca tidak dapat memeriksanya. Jika foto hanya mengilustrasikan poin yang sudah dijelaskan dalam teks, ukuran yang lebih kecil mungkin sudah cukup—atau gambar tersebut mungkin sebenarnya tidak diperlukan. Ini adalah aturan desain praktis yang disimpulkan dari fungsi foto, bukan standar ukuran universal. Panduan gambar GOV.UK Design System juga menyatakan bahwa gambar harus memenuhi kebutuhan nyata pengguna dan berfungsi sebagai alat bantu visual, sementara informasi penting harus tetap tersedia secara tertulis. Rekomendasi tersebut ditulis untuk layanan daring pemerintah, jadi anggaplah itu sebagai referensi yang bermanfaat, bukan buku aturan untuk setiap jenis artikel.
Alat bantu pengambilan keputusan yang praktis adalah menetapkan salah satu dari tiga peran untuk setiap foto: meneliti (inspect), mengilustrasikan (illustrate), atau menghias (ornament). “Meneliti” biasanya membutuhkan tampilan yang lebih besar serta penjelasan atau takarir (caption) yang mengarahkan perhatian ke detail relevan. “Mengilustrasikan” sering kali dapat ditampilkan dalam ukuran sedang di dekat paragraf yang didukungnya. “Menghias” tidak memiliki fungsi informasi; pertimbangkan untuk menghapusnya atau membuatnya tidak mencolok secara visual. Kategori-kategori ini adalah alat penyuntingan praktis, bukan terminologi baku yang ditetapkan oleh sumber acuan.
Pilih ukuran berdasarkan tingkat kepentingan dan ruang yang tersedia
Gunakan kolom teks artikel sebagai batas awal Anda. Foto yang membentang selebar kolom mudah diperhatikan dan memberi ruang lebih bagi konten yang mendetail; gunakan perlakuan tersebut untuk gambar yang tingkat kepentingannya membenarkan adanya jeda visual. Foto yang lebih kecil dan sejajar dengan kolom dapat mendukung poin terdekat tanpa menyaingi judul atau teks. Hindari memilih ukuran hanya karena berkas aslinya berukuran besar: dimensi tampilan harus sesuai dengan tata letak dan informasi yang perlu dilihat oleh pembaca.
Berikut ini adalah contoh pertimbangan, bukan templat baku: anggaplah kolom konten selebar 700 piksel memuat foto yang menampilkan objek dua bagian yang perbedaannya menjadi inti pembahasan teks tersebut. Tampilan yang mendekati lebar penuh kolom dapat mempermudah perbandingan. Jika foto yang sama hanya sebagai pembangun suasana umum dan paragraf sudah memuat penjelasannya, tampilan yang lebih sempit dapat mempertahankan penekanan pada teks. Angka 700 piksel hanyalah contoh lebar kolom; ini bukan standar yang direkomendasikan.
Ketika foto muncul di samping teks pada layar lebar, perlakukan keduanya sebagai satu pasangan. Berikan lebar yang cukup pada gambar untuk menampilkan subjeknya dan ruang yang cukup pada teks agar tetap nyaman dibaca. Jika salah satunya terasa sempit, susunlah secara bertumpuk alih-alih mengecilkan foto dan memadatkan salinan teks ke dalam baris yang sempit. Pada layar yang lebih kecil, urutan satu kolom sering kali merupakan susunan yang paling jelas: teks, lalu foto terkait, kemudian bagian teks berikutnya. Penjelasan W3C tentang WCAG 2.2 Reflow menjelaskan bagaimana banyak halaman artikel dapat beradaptasi menjadi satu kolom dan memaparkan tujuan menghindari pengguliran dua arah untuk konten bacaan biasa. Penjelasan tersebut juga mencatat pengecualian untuk konten yang makna atau kegunaannya memerlukan tata letak dua dimensi. Intinya bagi tata letak artikel adalah memastikan pemasangan gambar dan teks tidak memaksa pembaca menggeser layar ke samping untuk mengikuti teks.
Tempatkan setiap foto di lokasi yang keterhubungannya jelas
Letakkan foto di dekat kalimat atau paragraf yang menjelaskan alasan foto tersebut ada di sana. Jika pembaca harus menggulir melewati beberapa paragraf yang tidak terkait untuk menemukan gambarnya, keterhubungannya mungkin menjadi tidak jelas. Demikian pula, foto besar yang disisipkan di tengah-tengah alur argumen sebuah kalimat dapat memutus logika pemikiran. Penempatan yang rapi biasanya setelah bagian teks pertama yang memperkenalkan subjeknya, atau tepat sebelum langkah yang memerlukan gambar tersebut.
Gunakan takarir (caption) jika itu menambahkan informasi spesifik: mengidentifikasi subjek, menunjukkan detail, atau menjelaskan mengapa gambar tersebut penting. Jangan gunakan takarir hanya untuk mengulang kalimat di sekitarnya kata demi kata. Jika foto memerlukan pengamatan saksama, jelaskan apa yang perlu diperhatikan di teks terdekat serta di dalam takarir; pembaca tidak seharusnya menebak-nebak maksudnya hanya dari penempatannya.
Hubungan antara foto dan teksnya juga penting bagi pembacaan nonvisual. Panduan Images Tutorial dari W3C menyatakan bahwa gambar informatif membutuhkan teks alternatif yang menyampaikan informasi pentingnya, sedangkan gambar dekoratif dapat menggunakan teks alternatif kosong agar teknologi asistif dapat melewatinya. Panduan informative-image dari W3C menekankan bahwa teks alternatif harus mengungkapkan makna gambar dalam konteksnya, bukan sekadar menyebutkan objek yang terlihat. Sebagai langkah praktis, tanyakan: jika seseorang tidak dapat melihat foto ini, informasi apa yang akan terlewatkan oleh mereka? Cantumkan informasi penting di dalam teks artikel, dan berikan teks alternatif yang sesuai untuk gambar tersebut. Jika gambar tidak menambahkan hal baru di luar teks di dekatnya, mengulang deskripsinya mungkin tidak diperlukan.
Pertahankan bentuk foto yang fungsional
Rasio aspek foto—hubungan antara lebar dan tingginya—memengaruhi ruang yang digunakannya dan apa yang tetap terlihat. Mulailah dengan menyesuaikan seluruh foto di dalam area yang dipilih. Pangkas (crop) hanya jika subjek tetap jelas dan pemangkasan tidak menghilangkan detail yang dibutuhkan pembaca. Potongan lanskap mungkin cocok untuk gambar utama yang lebar; gambar potret mungkin bekerja lebih baik pada lebar yang lebih kecil di dalam kolom. Ini adalah pilihan komposisi, bukan aturan yang kaku.
Jika pemangkasan menghilangkan konteks, mengubah makna yang terlihat, atau menyembunyikan detail yang dibahas dalam artikel, gunakan pemangkasan yang berbeda atau tampilkan proporsi aslinya. Untuk diagram, label, atau dokumen, periksa ukuran tampilan akhir: teks yang tertanam dalam foto bisa menjadi terlalu kecil untuk dibaca. Panduan gambar GOV.UK umumnya menyarankan agar tidak menempatkan teks di dalam gambar karena sulit dibaca, disalin, diubah ukurannya, atau diakses dengan pembaca layar; jika teks sangat penting bagi gambar, sediakan maknanya di konten tertulis terdekat juga.
Periksa tata letak pada ukuran yang digunakan pembaca
Pratinjau artikel pada lebar desktop yang luas dan lebar ponsel yang sempit. Pastikan foto tidak meluap keluar dari kolom teks, menutupi konten, atau membuat teks terhimpit di sampingnya. Ikuti urutan baca dari judul ke paragraf lalu ke foto: ketika tata letak bertumpuk, gambar harus tetap muncul di dekat bagian teks yang dijelaskannya. Periksa juga takarir dan detail penting apa pun pada gambar dalam ukuran tampilan sebenarnya.
Untuk halaman web, ukuran tampilan dan ukuran berkas adalah dua keputusan yang terpisah. Berkas sumber yang besar mungkin diperlukan untuk tampilan yang besar, tetapi mengirimkan berkas gambar yang terlalu besar ke layar yang lebih kecil dapat memboroskan kuota data. Panduan web.dev tentang responsive images dari Google menjelaskan bagaimana peramban dapat memilih di antara berbagai ukuran gambar untuk kondisi tampilan yang berbeda, dan mencatat bahwa tidak ada jumlah versi gambar tunggal yang pasti benar. Ini adalah panduan implementasi untuk penerbitan web; panduan ini tidak menentukan letak posisi gambar di dalam artikel.
Urutan pengambilan keputusan cepat
Tentukan fungsinya. Apakah foto tersebut dimaksudkan untuk diteliti, untuk mengilustrasikan teks, atau hanya untuk menghias halaman?
Temukan kaitannya. Tentukan bagian teks yang memperkenalkan atau bergantung padanya, lalu tempatkan foto di samping bagian tersebut.
Atur lebar tampilan. Berikan ruang yang cukup untuk bukti penting; biarkan foto pendukung mengambil lebih sedikit ruang jika detailnya tidak esensial.
Periksa pemotongannya (crop). Pastikan subjek dan semua konteks yang relevan tetap terlihat.
Baca tata letak secara berurutan. Pada layar sempit, pastikan teks dan foto tetap muncul dalam urutan yang masuk akal dan teks tetap nyaman dibaca.
Deskripsikan informasinya. Tambahkan takarir jika membantu, dan sediakan teks alternatif berdasarkan peran gambar.
Aturan praktisnya sederhana: biarkan tingkat kepentingan menentukan dominasi tampilan, biarkan teks terkait menentukan penempatan, dan biarkan pratinjau layar sempit menunjukkan apakah susunan tersebut masih berfungsi dengan baik. Jika foto sulit dipahami pada ukuran yang Anda pilih, perbesar ukurannya, sederhanakan pemotongannya, atau jelaskan detail yang relevan di dalam teks.