Jahat Dengan Gambar Di WordPress

Tidak terasa sudah lima tahun pakai WordPress.org. Tidak terasa pula sudah ada 529 tulisan dan cerita ngawur di dalam tarjiem ini. Setiap kali menulis, pasti ada satu gambar ilustrasi dalam tulisan itu. Wajib. Sebagaimana halnya standar tulisan yang baik versi mesin pencari.

Tulisan ini tidak hanya berlaku bagi wordpress.org saja. Pengguna wordpress.com yang versi gratisan (dan berbayar) juga wajib memperhatikan hal ini. Termasuk pengguna blogspot atau mesin CMS yang lain, Ghost misalnya.

Berkembang Biak

Masalah pertama adalah masalah yang timbul saat gambar dimasukkan ke dalam sebuah tulisan, di-upload.

Logo WordPress Sampul Biru Keren
Logo WordPress Sampul Biru Keren

Ketika sebuah gambar besar diunggah ke #WordPress, secara otomatis WordPress akan menghasilkan beberapa gambar yang lebih kecil.

Saya sendiri tidak menyadari ini saat pertama kali menggunakan WordPress. Baru sadar setelah tulisan di blog ini sudah mencapai 300 tulisan. Mungkin satu atau dua tahun yang lalu, saat mencari hos baru.

Awalnya 500 MB sudah cukup dan sekarang minimal perlu 1 GB. Awalnya biaya “hidup” blog ini bisa 50 ribu per tahun. Sekarang dan selanjutnya harus siap bayar sewa tempat alias hosting minimal 125 ribu per tahun.

Hasil Uji Coba Unggah Gambar Dari Localhost Tiga Tema WordPress Blocksy, GeneratePress, dan Twenty Sixteen
Hasil Uji Coba Unggah Gambar Dari Localhost Tiga Tema WordPress Blocksy, GeneratePress, dan Twenty Sixteen

Satu Gambar = Lima Gambar

Tahun lalu saya kira WordPress akan menghasilkan tiga gambar turunan untuk satu gambar besar yang diunggah. Jadi total ada empat. Ternyata salah. Minimal WordPress otomatis akan menghasilkan lima gambar turunan jika dimensi lebar gambar asli di atas 1.024 piksel, (>100 KB).

Satu gambar 123 KB akan menjadi 233 KB atau bertambah jadi 90%.

tarjiem.com

Artinya, jika ukuran awal satu gambar tersebut adalah 123 KB (1.280 piksel x 960 piksel), maka total ukuran empat gambar keturunan lainnya adalah 111 KB atau bertambah sekitar 90%. Itu jika dimensi yang dimasukkan adalah 1.280 x 960.

Jika dimensinya lebih besar, maka akan jadi lebih banyak. Misal lebar x panjang gambar asli tersebut adalah 4589 x 2699 piksel (613 KB) , maka akan ada tujuh gambar yang dihasilkan. Berkembang biak jadi sekitar 400%. Banyak.

Pengaturan Gambar/Setting wp-admin>Settings>Media di WordPress
Pengaturan Gambar/Setting wp-admin>Settings>Media di WordPress

1.024 Piksel, 768 Piksel, 300 Piksel, dan 150 Piksel

Itu adalah lebar atau tinggi minimum yang akan dikembangbiakan oleh sistem WordPress. Pengaturan awalnya ada di wp-admin > Settings> Media.

Misal dimensi gambar yang diunggah adalah 1.280 piksel x 960 piksel (lebar x panjang) maka WordPress akan menghasilkan empat gambar yang lebih kecil dimensinya. Total ada lima gambar. Satu gambar asli, empat gambar turunan. Masing-masing lebar adalah 1.024 Piksel, 768 Piksel, 300 Piksel, dan 150 Piksel.

Rasio 4:3

Sebenarnya ada banyak rasio yang mesti dihafal jika berurusan dengan gambar di WordPress. Terlebih lagi jika dihubungkan dengan #tema WordPress yang dipakai. Rasionya bisa berbeda-beda. Contohnya di https://www.elegantthemes.com/blog/divi-resources/the-ultimate-guide-to-using-images-within-divi.

Berhubung ada banyak, saya sendiri menggunakan hafalan rasio 4:3 saja. Ada juga rasio 16:9 atau 9:16 untuk vertikal. Kalau dipikir-pikir, entah kenapa dua rasio itu mirip dengan Golden Ratio yang 1,618 itu.

Ponsel

Ini adalah masalah kedua.

Mereka yang mengakses dunia maya kebanyakan menggunakan layar kecil alias telepon seluler atau ponsel. Artinya, dimensi ukuran asli gambar sulit ditampilkan. Mungkin itu pula alasan WordPress membuat gambar berkembang biak. Cukup visioner.

Kartun Orang Zombi Mayat Hidupt Ke Kantor Berdasi Berjalan Sambil Lihat HP-hindustantimes.com
Kartun Orang Zombi Mayat Hidup Ke Kantor Berdasi Berjalan Sambil Lihat HP-hindustantimes.com

Gambar besar untuk layar lebar atau layar komputer dan gambar kecil untuk telepon genggam alias handphone, Ha Pe.

Sekitar 85% persen pengunjung web, sampel dari blog saya sendiri, menggunakan HP. Artinya, tidak ada gunanya mengunggah gambar besar dalam sebuah tulisan. Toh pada akhirnya gambar yang ditampilkan akan ditayangkan di layar kecil. Gambar kecil.

Bacaan lain: Facebook yang Menciptakan Dunia Ketiga

Rata-rata ponsel ukurannya 4 inci – 5 inci atau sekitar 400 piksel x 800 piksel. Artinya, ukuran gambar 768 piksel itu sudah cukup untuk di ponsel.

Gambar: We Are Now A Society Of Multi-Taskers And Multi-Screeners - briansolis.com
Gambar: We Are Now A Society of Multi-Taskers And Multi-Screeners – briansolis.com

Kalau pun ingin menggunakan gambar besar, 1.024 piksel dan 768 piksel itu termasuk ukuran besar untuk ukuran layar kecil. Kemudian ditambah dengan pengguna ponsel pintar “harga mahal” tidak begitu banyak.

Kecuali gambar itu adalah gambar yang sangat-sangat penting, maka gambar yang akan diunggah itu layak beresolusi besar dan ukuran besar. Seperti sebuah gambar yang kemungkinan besar akan banyak dipakai dan menjadi rujukan banyak orang, jadi viral. Contohnya saja logo.

Desain Situs kitabisa.com

Coba buka situs kitabisa.com dari komputer/layar besar. Saya sendiri kaget melihat tampilannya memanjang ke bawah di layar komputer yang besar ini, Agustus 2020. Kiri-kanan kosong. Lebar situs saja 480 piksel di layar komputer. Ini menunjukkan kalau pengakses dunia maya ini benar-benar didominasi oleh layar kecil alias telepon seluler, smartphone.

Desain Situs kitabisa.com 4 Agustus 2020 Layar PC Lebar 500 Piksel
Desain Situs kitabisa.com 4 Agustus 2020 Layar PC Lebar 500 Piksel

Lihat juga lini masa facebook yang lebar bagian tengahnya itu hanya 500 piksel. Tentunya dilihat dari layar komputer ini.

Cache

Masalah ketiga ini tidak ada hubungan langsung dengan gambar tapi ada hubungannya dengan biaya operasional blog. Soal duit. Agak sedikit teknis.

WP Rocket VS SWIFT Perbandingan Plugin WordPress Berbayar vs Gratis
WP Rocket VS SWIFT Perbandingan Plugin WordPress Berbayar vs Gratis

Versi plugin cache swift yang saat ini dipakai (Agustus 2020) menghasilkan tambahan sekitar 200 MB cache untuk 768 halaman “postingan”.

Arti cache adalah halaman yang sama tapi itu versi statis dalam konteks WordPress. Itu pemahaman saya merujuk themeisle.com/blog/caching-in-wordpress. Dengan adanya versi cache, maka sebuah halaman jadi lebih cepat saat dibuka (loading).

Jika 200 MB adalah hasil 529 postingan, maka kurang lebih rata-rata satu halaman beratnya sekitar 28 KB. Kalau perhitungan saya tidak salah loh ya.

Tiga belas ciri-ciri tulisan yang baik versi wordpress seo plugin yoast
Tiga belas ciri-ciri tulisan yang baik versi wordpress seo plugin yoast

Jadi, jika ada 1.000 tulisan maka setidaknya kebutuhan ruang penyimpanan tambahan 400 MB. Total kebutuhan penyimpanan jadi 2 GB. Si tarjiem.com tanpa cache perlu sekitar 500 MB dan ditambah hasil cache 200 MB, jadi 700 MB.

500 tulisan akan menghasilkan tambahan 200 MB cache.

Kata tulisan ini

Itu pula yang menjadi alasan kenapa tahun 2020 ini jarang ada tulisan baru di blog jualan jasa penerjemah Inggris Indonesia ini. Semakin banyak tulisan, semakin bertambah pula kebutuhan kapasitas penyimpanan dan otomatis biaya “hidup” tarjiem ini jadi semakin besar. Jika pengunjungnya banyak, tentu tidak masalah.

Prosedur standar satu tulisan wajib ada satu gambar. Saya pun menyiasatinya dengan menggunakan gambar yang sebelumnya dipakai untuk tulisan baru. Jika gambar tersebut hanya gambar “pemanis” saja. Contohnya beberapa gambar yang ada di tulisan ini. Tiga gambar baru, sisanya gambar lama.

Mekanik Balap Mobil di Pit Stop Nascar
Mekanik Balap Mobil di Pit Stop Nascar

Kecepatan

Masalah keempat adalah kecepatan.

Semakin besar gambar yang diunggah, semakin lambat situs diakses. Apalagi lewat ponsel lalu ditambah dengan kondisi akses jaringan internet di negeri ini. Diperparah lagi dengan kondisi ponsel yang “lambat”. Kuota juga jadi boros.

Kesimpulan

Berdasarkan tulisan ini dan beberapa tulisan sebelumnya, contohnya Lima Tips Mengelola Blog Bergambar atau Foto, tentang WP Smush Memadatkan 5,5MB 823 Gambar Selama 1 Jam atau Gambar Losslessly Compressing Dari Google PageSpeed Insights, maka sebaiknya “jahatlah” dengan gambar. Khususnya saat diunggah ke WordPress.

Saran pemakaian gambar di WordPress:

  1. Satu gambar untuk 300 kata dan kelipatannya
  2. Jika horizontal (versi komputer) ukuran gambar besar sebaiknya maksimal 1.024 piksel x 768 piksel atau ukuran sedang 768 piksel x 576 piksel (rasio 4:3, lebar x panjang)
  3. Jika vertikal (versi desain HP) sebaiknya ukuran gambar 576 piksel x 768 piksel (rasio 4:3, lebar x panjang)
  4. Hindari mengunggah gambar yang ukurannya atau file size lebih dari 150 KB, kecuali jika terpaksa. Sebaiknya di bawah 100 KB.
  5. Sebisa mungkin gunakan dimensi 768 piksel (lebar atau tinggi) untuk gambar di dalam tulisan.
  6. Sebelum diunggah, gambar wajib dikompres dulu secara manual dan pakai plugin.
  7. Gambar unggulan WordPress (feature image) kadang minta 1.200 piksel x 675 piksel, jadi gunakan gambar yang sama saja/gambar sebelumnya. Alternatif lain, cukup gunakan dimensi 1.024 piksel x 768 piksel. Sehingga gambar turunan yang dihasilkan hanya tiga gambar, sekitar 150 KB untuk JPG atau bertambah jadi 90%.
  8. Jika memungkinkan, gunakan gambar versi kartun atau PNG ketimbang gambar versi foto atau JPG/JPEG.
  9. Gunakan satu gambar ilustrasi yang kira-kira bisa dipakai untuk tulisan-tulisan berikutnya. Seperti gambar mobil di atas.

Selain itu, jangan lupa juga, gambar yang dipakai sebaiknya mengikuti tata tertib hak cipta alias hasil foto dari kamera sendiri. Bisa juga diambil dari situs penyedia gambar bebas copyright. Contohnya ada buanyak, seperti pixabay.com atau unsplash.com.

Untuk plugin WordPress untuk urusan gambar, bebas. Saat ini tarjiem pakai Imagify versi gratisan.

Sangkala: Saya sendiri belum merazia gambar-gambar dalam tulisan lama. Jadi mohon maaf kalau ada gambar yang lupa menyebutkan sumbernya.

Manfaatkan Media Sosial

Solusi lain, manfaatkan media sosial. Jika satu tulisan itu perlu banyak gambar, tidak ada salahnya mengirim dulu gambar tersebut ke media sosial, Facebook atau Instagram. Kemudian, ditempelkan atau embed kiriman Facebook tersebut ke dalam tulisan di WordPress.

Saya melakukan ini untuk beberapa tulisan sebelumnya. Biasanya tulisannya berlabel Facebook. Titip gambar.

Dengan media sosial, tidak perlu khawatir, ukuran gambar yang akan diunggah. Meski pada akhirnya gambar tersebut otomatis tetap kena kompres juga. Kebanyakan hasil unduhan dari media sosial, gambarnya kurang dari 1 MB.

WhatsApp

Bisa juga dengan bantuan WhatsApp atau WA. Setiap gambar yang diunggah ke WA, otomatis akan dikompres oleh WA. Unggah dulu ke WA/grup WA/kirim chat, lalu unduh. Coba saja.

Isometrik

Saya juga baru paham, kenapa tren desain blog atau situs menggunakan elemen desain isometrik tahun 2020 ini. Selain PNG dan ukuran gambarnya kecil, gambarnya menarik. Padahal sebelumnya elemen desain tampaknya lebih mendominasi JPG atau JPEG, foto.

Hasil Uji Coba Unggah Gambar Dari Localhost Tiga Tema WordPress Blocksy, GeneratePress, dan Twenty Sixteen
Hasil Uji Coba Unggah Gambar Dari Localhost Tiga Tema WordPress Blocksy, GeneratePress, dan Twenty Sixteen
WebP

Mungkin, ketika teknologi format gambar WebP kerjaan Google benar-benar diterapkan di WordPress dan infrastruktur lainnya sudah mendukung, bisa jadi permasalahan gambar dan kebutuhan kapasitas penyimpanan sebuah blog tidak jadi masalah. Sayangnya, mungkin itu masih beberapa tahun lagi. Saya sendiri menunggunya dari dua tahun yang lalu. Sepertinya masih 3 atau 4 tahun lagi WebP baru bisa 100% cocok untuk di Indonesia.

Akan Melelahkan

Urusan gambar di WordPress ini benar-benar melelahkan. Setelah capek menulis, lalu “dipaksa” untuk memasukkan gambar bebas hak cipta dengan ketentuan dimensi dan ukuran yang merepotkan. Seperti saat menulis tulisan ini selama hampir empat jam. Kemudian mengolah gambar saja untuk dipakai ke dalam tulisan hampir satu jam. Lima jam hanya untuk menulis ini. Belum proses penyuntingan. Mencari saltik.

Akan tetapi, hal ini akan terasa jika blog atau tulisannya sudah ribuan. Contohnya saja skripsi. Jika skripsi banyak gambar berwarna, biaya print akan mahal. Itu mungkin dulu. Entah kalau di zaman COVID-19 ini, kuliah daring.

Default image
Ridha Harwan
Penjual jasa penerjemah Inggris ke bahasa Indonesia dan Indonesia ke bahasa Inggris. Cek profil di sini atau tombol media sosial di bawah ini. Terima kasih atas kunjungannya.

Leave a Reply

tarjiem.com adalah blog dan lapak jasa penerjemah bahasa Inggris ke Indonesia dan Indonesia ke Inggris.

Bandung - Jawa Barat

WhatsApp: +6285210384502