Gambar untuk blog disiapkan dengan satu patokan: ukuran tampilnya di dalam artikel. Gambar yang ditampilkan selebar kolom konten tidak perlu menyimpan piksel berkali-kali lipat, karena piksel berlebih itu tidak terlihat dan hanya menambah berat halaman. Ukur lebar kolom tulisan Anda, sediakan gambar dengan lebar minimal sebesar itu, lalu kecilkan berkasnya lewat Kompres Foto sebelum diunggah.
Yang membedakan gambar blog dari gambar toko: gambar blog mendukung tulisan, bukan menjual barang. Gambar yang terlalu banyak justru memecah bacaan, dan setiap gambar menambah waktu muat. Karena itu, keputusan pertama bukan soal teknis, melainkan gambar mana yang benar-benar perlu ada.
Artikel ini membahas tiga jenis gambar yang biasa muncul di blog: gambar utama, gambar di dalam artikel, dan gambar pratinjau untuk tautan yang dibagikan. Ketiganya punya kebutuhan yang berbeda.
Tiga jenis gambar dan kebutuhannya
Gambar utama adalah gambar di bagian atas artikel. Karena muncul paling awal, gambar ini paling terasa pengaruhnya pada waktu muat. Sediakan versi yang cukup besar untuk kolom konten, dan jangan lebih. Kalau tema Anda menampilkan gambar utama selebar penuh layar, sediakan versi yang lebih besar, lalu periksa hasilnya setelah dikompres.
Gambar di dalam artikel biasanya tampil lebih kecil, mengikuti lebar kolom. Kalau gambar itu berisi tangkapan layar atau teks, ketajamannya lebih penting daripada ukurannya. Tangkapan layar lebih baik disimpan sebagai PNG, karena huruf dan garis tipis kehilangan ketajaman saat disimpan sebagai JPG.
Gambar pratinjau adalah gambar yang muncul saat tautan artikel dibagikan di media sosial atau aplikasi pesan. Kebutuhannya berbeda dari gambar di dalam halaman: subjeknya harus berada di tengah, karena platform memotong mengikuti rasionya sendiri. Pembahasan khususnya ada di cara menyiapkan gambar open graph.
Menentukan lebar dari tema blog Anda
Cara paling sederhana: buka salah satu artikel di blog Anda, perbesar jendela peramban, lalu perhatikan lebar area tulisan. Gambar di dalam artikel biasanya mengikuti lebar itu. Catat angkanya, dan pakai sebagai acuan saat menyiapkan gambar.
Kalau angka itu sulit diukur, buka gambar yang sudah ada di artikel dan lihat informasi berkasnya di peramban. Dimensi gambar yang tampil bagus di halaman itu bisa dijadikan patokan.
Untuk layar berkerapatan tinggi, gambar utama bisa disiapkan pada dua kali lebar tampilnya. Ini pilihan, bukan keharusan; gambar pendukung di dalam artikel biasanya cukup satu kali.
Yang perlu dihindari adalah mengunggah foto kamera apa adanya. Foto ponsel bisa berukuran ribuan piksel, sementara kolom artikel hanya selebar beberapa ratus piksel. Selisih itu hanya menambah berat tanpa menambah ketajaman yang terlihat.
Memilih format untuk gambar blog
JPG untuk foto. Ukurannya kecil, dan detail yang dibuang kompresinya tidak terlihat pada gambar bertekstur. Foto suasana, foto orang, dan foto produk termasuk kelompok ini.
PNG untuk tangkapan layar, diagram, dan gambar berisi teks. PNG menyimpan seluruh detail, sehingga huruf tetap tajam. Ukurannya lebih besar, tetapi untuk gambar bergaris tajam perbedaannya tidak sebesar pada foto. Kalau ukuran berkas lebih penting daripada ketajaman mutlak, PNG bisa diubah ke WebP.
WebP untuk blog yang ingin halaman paling ringan. Pada mutu yang sama, ukurannya paling kecil di antara ketiganya. Peramban modern sudah mendukungnya, tetapi periksa dulu apakah sistem blog Anda bisa menerima unggahan WebP dan menampilkannya dengan benar. Konversi antar ketiga format dikerjakan di Konversi Format Gambar, dan perbandingan sifatnya ada di Perbedaan JPG PNG dan WebP.
Nama berkas dan teks alternatif
Nama berkas yang deskriptif membantu saat artikel Anda bertambah banyak dan gambarnya perlu dipakai ulang. Nama seperti cara-menyeduh-kopi-v60.jpg lebih berguna daripada DSC_0912.jpg. Hindari spasi, dan pakai tanda hubung.
Teks alternatif menjelaskan isi gambar untuk pembaca yang tidak bisa melihatnya. Isinya deskripsi singkat, bukan pengulangan judul artikel. Contoh yang berguna: "Tiga botol kopi susu di atas meja kayu", bukan "gambar kopi".
Untuk gambar yang murni hiasan dan tidak membawa informasi, teks alternatif boleh dibiarkan kosong. Teks alternatif yang diisi tanpa alasan justru menambah gangguan bagi pembaca layar.
Cantumkan juga dimensi gambar saat menyisipkannya. Tanpa atribut lebar dan tinggi, tata letak artikel bergeser saat gambar selesai dimuat, dan pembaca kehilangan posisi bacaannya. Panduannya ada di cara menentukan dimensi gambar di HTML.
Langkah menyiapkan gambar untuk blog
- Pilih gambar yang benar-benar mendukung tulisan. Buang sisanya.
- Simpan salinan asli di luar folder unggahan.
- Tentukan lebar target sesuai kolom artikel Anda.
- Di Kompres Foto, pilih Kompres JPG, Kompres PNG, atau Kompres WebP mengikuti format berkas.
- Unggah beberapa berkas sekaligus. Hasilnya dikemas dalam arsip ZIP kalau lebih dari satu.
- Pilih ukuran akhir lewat chip di pratinjau. Ukuran persen tersedia dari 10 sampai 200 persen. Pada pengujian di layanan ini, persen 50 mengubah gambar 1600x1200 menjadi 800x600.
- Periksa pratinjau pada bagian yang paling penting: teks di dalam tangkapan layar, wajah, atau detail yang jadi pokok bahasan.
- Unduh hasilnya, ganti namanya, lalu sisipkan ke artikel dengan teks alternatif dan dimensi yang benar.
Kalau formatnya perlu diubah, kerjakan konversinya sebelum kompresi, supaya mutunya tidak turun dua kali.
Menyisipkan gambar di dalam tulisan
Peletakan gambar memengaruhi kenyamanan membaca. Gambar yang memutus satu paragraf di tengah membuat pembaca kehilangan alur. Letakkan gambar di antara paragraf, pada titik di mana pembahasan berganti.
Untuk artikel panjang, gambar di bagian atas dan satu atau dua gambar di tengah biasanya cukup. Menambah banyak gambar membuat halaman berat dan membuat pembaca menggulir lebih jauh tanpa membaca lebih banyak.
Untuk tangkapan layar yang berisi teks, pastikan ukurannya cukup untuk dibaca pada layar ponsel. Tangkapan layar penuh desktop yang ditampilkan kecil di artikel akan sulit dibaca. Potong bagian yang penting saja, atau tampilkan bagian itu sebagai gambar terpisah.
Kesalahan yang sering terjadi
Mengunggah foto langsung dari kamera. Dimensinya jauh lebih besar daripada kebutuhan kolom artikel.
Memakai PNG untuk semua gambar. Foto sebagai PNG menghasilkan berkas jauh lebih besar tanpa keuntungan yang sepadan.
Memakai JPG untuk tangkapan layar berisi teks. Huruf dan garis tipis kehilangan ketajaman, dan isinya jadi sulit dibaca.
Menaruh banyak gambar di bagian atas artikel. Gambar utama yang berat menahan tampilan pertama, dan pembaca dari jaringan seluler paling merasakannya.
Mengompres berkali-kali. Setiap penurunan mutu menumpuk. Ulangi dari berkas asli kalau hasilnya kurang pas.
Mengganti gambar tanpa memikirkan cache. Pembaca bisa masih melihat versi lama. Alur penggantian yang aman ada di cara mengganti gambar website tanpa error.
Kapan tidak perlu mengompres
Kalau gambar Anda sudah berukuran wajar dan artikel memuatnya dengan cepat, tidak ada yang perlu diubah. Kompresi baru diperlukan ketika ada gambar yang berat, ketika halaman memuat banyak gambar, atau ketika pembaca mengeluh halaman lambat.
Kalau gambar akan dicetak, misalnya untuk materi pendamping artikel, jangan turunkan dimensinya. Cetakan memerlukan piksel lebih banyak daripada layar.
Kalau gambarnya memuat data pribadi yang tidak boleh keluar dari perangkat, kerjakan penyesuaiannya memakai aplikasi di komputer sendiri. Kebijakan pemrosesan berkas di layanan ini ada di kebijakan privasi.
Pertanyaan yang sering muncul
Apakah setiap artikel harus punya gambar? Tidak. Gambar berguna kalau ia menambah informasi yang sulit dijelaskan dengan kata. Artikel yang tidak membutuhkannya lebih ringan tanpa gambar.
Berapa gambar yang ideal dalam satu artikel? Tidak ada angka yang berlaku umum. Yang bisa dipegang: setiap gambar harus punya alasan, dan gambar di bagian atas sebaiknya tidak lebih dari satu.
Apakah gambar harus diberi teks di dalamnya? Sebaiknya tidak, kalau teksnya penting. Teks di dalam gambar tidak terbaca mesin pencari dan tidak bisa diperbesar pembaca. Kalau teks itu perlu, tulis sebagai teks halaman, bukan sebagai bagian dari gambar.
Apakah gambar blog perlu memakai WebP? Kalau sistem blog Anda menerimanya dan menampilkannya dengan benar, WebP memberi halaman yang lebih ringan. Kalau ada keraguan, JPG untuk foto dan PNG untuk tangkapan layar adalah pilihan yang aman.
Bolehkah memakai gambar dari sumber lain di blog? Boleh kalau Anda punya hak pemakaiannya. Untuk gambar milik orang lain, cek lisensinya dan cantumkan kredit sesuai ketentuan pemiliknya. Kalau ragu, pakai gambar buatan sendiri.
Mulai dari gambar utama
Pilih satu gambar utama, ukur lebar kolom artikel Anda, lalu kecilkan berkasnya lewat kompres gambar. Setelah hasilnya pas, pakai pengaturan yang sama untuk gambar lain di artikel itu. Untuk pekerjaan format, buka Konversi Format Gambar. Pekerjaan gambar di situs yang lebih luas ada di Gambar untuk Web, dan panduan besarnya di Panduan Gambar dan Foto.