Tahun 2021 ini, BINUS School of Design mengadakan sebuah event bernama INACADE. Sebuah event untuk mengumpulkan karya-karya desain yang akan ditampilkan dalam pameran online di website INACADE itu sendiri. Saya berkesempatan untuk membuatkan website pameran tersebut beserta form untuk pengumpulan karyanya.

Pada pembuatan form pengumpulan tersebut saya dapat pelajaran yang sangat penting setelah form tersebut digunakan dan ditampilkan hasilnya. Kalau biasanya form hanya untuk pengumpulan saja lalu data nya di export atau ditampilkan dalam bentuk excel, kali ini data yang terkumpul harus ditampilkan lagi di website dalam bentuk pameran online yang menampilkan nya dalam bentuk gambar galeri.

Fyi, Form tersebut memilik banyak field yang harus diisi, termasuk beberapa field berbentuk file gambar dengan maksimal upload 5MB. Hasil submit form tersebut saya simpan tanpa adanya manipulasi terhadap datanya, baik itu data text atau pun data berbentuk gambar. Sehingga jika user mengupload gambar dengan ukuran 4MB dan resolusinya mencapai 3000pixel atau lebih, maka yang disimpan juga ukurannya seperti itu. Jadi selain bisa membebankan storage server, gambar tersebut juga membuat website pameran online menjadi lambat dan kadang lag karena ukuran gambar nya yang sangat besar. Tentu saja itu juga membutuhkan kuota bandwidth yang besar. Sedangkan kecepatan akses website adalah prioritas utama pemilik website.

Dari kasus form submit website INACADE saya belajar, jika ada kebutuhan gambar yang diupload akan ditampilkan kembali di website, sebaiknya buatkan fitur resize untuk ukuran thumbnail nya (gambar preview yang ada dihalaman galeri). Agar gambar yang diload saat diakses user ukurannya kecil dan membuat website diakses lebih cepat. Gambar dengan ukuran asli yang sampai 4MB tadi ditampilkan saat pengunjung ingin melihat lebih detail saja, contohnya saat gambar thumbnail diklik muncul gambar popup dengan ukuran 4MB tadi. Jadi gambar asli nya tidak dihapus melainkan membuatkan gambar baru dengan ukuran thumbnail.

Kita juga bisa melakukan resize pada gambar aslinya, misal yang tadinya beresolusi sampai 3000 pixel, diresize dengan ukuran standart di website yaitu menjadi 1920 pixel saja, jika memang ada kebutuhan seperti itu. Tentunya ukuran gambar pun akan ikut mengecil dan storage server menjadi lebih luas.

Untuk resize gambarnya sendiri, karena website dibuat dengan PHP (WordPress), saya memakai library Gumlet: PHP Image Resize untuk melakukannya. Dengan library tersebut kita dapat meresize gambar ke dalam beberapa ukuran dalam sekali jalan. Silahkan untuk dicek di dokumentasi Github nya.

Fyi lagi, cara meresize gambar asli menjadi ukuran thumbnail sudah saya terapkan di event berikut nya yaitu Beyond Reality 2021. Setelah belajar dari kesalahan sebelumnya.

Semoga bermanfaat.