Ulasan Ringkas Beberapa Perkakas untuk Optimasi Gambar dan Video

Mari Sebut Ini Masalah Bersama

Gambar atau video (baca: aset) dengan kualitas maksimal dan ukuran minimal merupakan salah satu kebutuhan wajib untuk penyedia konten situs atau aplikasi. Bagaimanapun juga, aset dengan ukuran dan kualitas jumbo baik secara langsung maupun tak langsung akan memberikan dampak pada situs atau layanan terkait. Beberapa situs semisal Google Page Insight atau Web dot dev pun kerap menjadi tolok ukur apakah aset-aset yang digunakan dalam sebuah halaman sudah optimal atau belum.

Berangkat dari hal ini, tentunya kemudian kita akan berpikir dan mencari metode-metode optimasi aset. Setidaknya, ada dua poin yang biasanya diminta oleh analisator situs tersebut berkaitan dengan standar optimasi untuk aset-aset media. Pertama, ukuran yang sesuai, dan kedua adalah format gambar diharuskan agar menggunakan format generasi terbaru. Untuk yang kedua ini, jujur saja, pada awalnya sangat membingungkan untuk saya. Selain dua hal tersebut, pencatuman alt text pada tag-tag img-pun biasanya juga menjadi salah satu poin evaluasi.

Pencarian Perkakas

Ada banyak perkakas pengelola gambar yang dapat dipilih untuk mengoptimalkan sebuah gambar. Secara umum, saya membaginya menjadi dua golongan, optimizer daring dan luring. Saya akan membahasnya satu per satu berdasarkan pengalaman saya ketika menggunakannya.

compresspng

compresspng(dot)com (singkatnya, CPC) merupakan layanan daring yang dapat digunakan untuk melakukan kompresi berkas citra. Berkas citra yang dapat dikompresi melalui layananan ini hanyalah berkas dengan format PNG dan JPG (ada layanan kompres PDF juga, namun tidak saya masukkan sebagai bahasan di sini). Dibandingkan dengan layanan serupa lainnya, squoosh.app atau yang lain misalnya, menurut saya CPC inilah yang terbaik. Berikut beberapa alasan yang mebuat saya sangat menyukai perkakas ini:

• Dapat melakukan kompresi banyak gambar sekaligus (maksimal 25–30 gambar dalam sekali proses).
• Tidak perlu melakukan pengaturan parameter-parameter tertentu yang membingungkan, apalagi untuk teman-teman yang barangkali masih awam.
• Tidak memerlukan input data berupa surel atau sejenisnya untuk menggunakan layanan ini.
• Tidak ada batasan jumlah gambar harian, sehingga dapat digunakan secara berulang.
• Dapat digunakan dipelbagai jenis sistem operasi, karena berupa layanan web-based.

Pun demikian, ada satu hal yang kurang memuaskan, bagi saya, dari layanan ini. Bukan hal yang krusial sebenarnya, namun sesekali cukup merepotkan, yakni perubahan nama pada berkas hasil kompresi. Yaps, seperti layaknya optimasi pada berkas *.js atau *.css, layanan tersebut akan menyisipkan tanda -min pada akhir nama berkas hasil kompres. Artinya, mau tidak mau Anda harus melakukan penamaan ulang pada berkas-berkas hasil kompresi tersebut apabila hendak digunakan sebagai aset. Saya biasanya menggunakan perkakas Krenamer di KDE untuk menghapus string -min tersebut secara serentak.

ImageMagick

Perkakas ImageMagick (IM) merupakan perkakas yang secara baku ada di hampir semua distribusi Linux. Perkakas ini termasuk perkakas yang sangat powerfull untuk urusan manipulasi, konversi, dan atau optimasi gambar. Meskipun memiliki versi GUI, saya pribadi lebih senang menggunakan IM dalam mode CLI melalui terminal/konsol. Beberapa parameter yang biasanya digunakan untuk melakukan kompresi gambar via IM antara lain -quality, -size, -alpha off, dst. Berbeda dengan CPC, IM tidak memerlukan koneksi internet, sehingga IM termasuk kategori perkakas kompresi kedua. Untuk menggunakan IM cukup dengan perintah convert nama-gambar.png [paramater] nama-gambar-terkompresi.png

Pada beberapa kasus tertentu IM tidak dapat memenuhi kebutuhan kompresi gambar secara maksimal. Silakan untuk membandingkan ukuran kompresi dari CPC dan IM untuk melihat perbedaannya. Di sisi lain, untuk mendapatkan kualitas kompres yang maksimal tanpa mengurangi kualitas gambar, maka mau tidak mau Anda harus menentukan nilai dari parameter-parameter konversi secara manual. Hal ini, bagi seorang awam dan pemalas seperti saya, tentunya adalah hal yang merepotkan. Terlepas dari itu semua, terkadang oleh web analisator yang saya singgung sebelumnya, output dari IM ini terkadang masih dideteksi sebagai format gambar generasi lawas.

Ah iya, karena saya menggunakan IM di mode cli, maka perkakas ini dapat melakukan bulk converting/compressing alias mengonversi dan mengompres gambar dalam jumlah banyak secara sekaligus. Ini juga berlaku untuk semua perkakas yang dapat dijalankan di mode cli lainnya. Untuk caranya, akan saya jelaskan di akhir tulisan ini.

SVGO

SVGO merupakan perkakas untuk memangkas ukuran berkas SVG. Untuk yang belum tahu, SVG merupakan singkatan dari Scalabel Vector Graphic, sesuai namanya SVG merupakan format vektor populer yang biasanya digunakan untuk berkas ikon, ilustrasi, dan masih banyak lagi. Di dalam perkakas pengolah vektor Inkscape, sebenarnya juga telah disediakan SVG Optimizer untuk mengurangi ukuran berkas SVG, namun dalam beberapa kasus, hasilnya masih kurang maksimal. Nah di sinilah SVGO diperlukan. Pada dasarnya penggunaan SVGO ini sangatlah mudah. Untuk cara pemasangan dan penggunaannya yang lebih rinci, silakan merujuk pada halaman ini.

SVGO dapat dijalankan di berbagai platform, bahkan di Telegram. Yeps, mereka menyedian bot SVG yang dapat digunakan via aplikasi Telegram. Dengan kata lain, SVGO ini dapat dikategorikan pada dua kategori perkakas yang saya telah saya sebutkan di awal.

CWEBP

Perkakas cwebp ini merupakan perkakas yang paling saya rekomendasikan untuk para pengelola situs yang ingin melakukan optimasi aset pada web-web Anda. Perkakas ini tersedia untuk pelbagai platform, silakan untuk mengunduhnya di sini. Untuk beberapa distro Linux, perkakas ini juga telah disediakan di lumbung/repositori resmi distro.

Di awal tulisan, saya sempat menyinggung perihal permintaan analisator situs yang meminta gambar-gambar generasi terbaru, nah format cwebp inilah (menurut pemahaman saya) format yang dimaksud dalam permintaan tersebut. Terbukti, setelah saya melakukan encoding gambar ke format ini, aset-aset yang sebelumnya tak lulus audit karena dianggap mengguanakan format generasi lawas, dapat lolos begitu saja. Penggunaan perkakas ini cukup sederhana, cukup dengan perintah cwebp nama-gambar.png -o nama-gambar.webp. Sempat saya iseng untuk tetap menggunakan ekstensi yang sama pada gambar hasil kompresi, dan rupanya ketika saya gunakan sebagai sebuah situs, gambar tersebut masih dapat dimuat dengan baik.

Sebagai penyangkalan, format webp ini menurut salah seorang teman di grup diskusi belum banyak diadopsi secara global oleh beberapa versi peramban web. Sehingga masih dimungkinkan gambar dengan format ini tidak dapat dimuat sebagaimana mestinya. Namun, saya pribadi telah menggunakan format ini untuk beberapa proyek web dan aplikasi yang saya tangani. Hingga tulisan ini dimuat, belum ada laporan kegagalan dalam memuat gambar.

Untuk Anda yang tertarik menggunakan perkakas ini, dapat merujuk pada dokumentasi penggunaan cwebp melalui tautan ini. Selain mengompresi ukuran berkas JPG dan PNG, cwebp ini juga dapat digunakan untuk mengoptimasi berkas GIF.

Handbrake

Satu-satunya perkakas optimasi video yang saya sering gunakan hanyalah Hanbrake. Berbeda dengan perkakas lainnya, perkakas ini saya jalankan dalam mode GUI. Handbrake dapat melakukan kompres berkas video secara maksimal, terutama bila Anda menyimpannya dalam format M4V, format yang sering saya gunakan untuk keperluan unggah di kanal Youtube atau Telegram.

Anda dapat mengonversi berkas video secara berurutan dengan cara menambahkan video yang hendak dioptimasi ke dalam daftar antrean. Kecepatan render pada handbrake ini tentunya juga tergantung pada spesifikasi komputer/laptop yang digunakan.

Melalui Handbrake, Anda dapat pula mengatur kembali aspek rasio video Anda, menambah, menghapus, atau mengganti trek audio, dan beberapa penyuntingan dasar lainnya.

Bulk Action di Terminal

Melakukan tindakan secara serentak, misalnya untuk keperluan konversi berkas dalam jumlah banyak, sebenarnya cukup mudah. Saya biasanya menggunakan kombinasi perintah berikut ini untuk melakukannya.

1
2

# konversi dengan imagemagick
for i in *.png; do convert "$i" -quality 96 "${i%.*}.png"; done

1
2

# konversi dengan cwebp
for i in *.png; do cwebp "$i" -o "${i%.*}.webp"; done

Untuk konversi dengan SVGO tidak saya bahas karena di tautan pada pembahasan sudah cukup detail dibahas.

Untuk memahami struktur bulk action di atas, mari kita breakdown perintah tersebut

*for i in .png; Merupakan bagian yang mengindikasikan batasan jenis berkas yang akan dipilih dalam bulk action, pada contoh ini adalah berkas PNG. Huruf i yang terdapat setelah perintah for merupakan sebuah variabel.

do convert “$i” -quality 96 Setelah menentukan batasan jenis berkas, selanjutnya adalah perintah yang akan dieksekusikan pada jenis berkas terpilih, dalam contoh ini, berkas yang masuk dalam veriabel $i, akan di-convert -quality 96-kan.

“${i%.*}.png”; Merupakan keterangan output yang akan dihasilkan setelah jenis berkas terpilih dieksekusi. Pada contoh ini, output berkas yang telah dieksekusi akan disimpan dengan nama sesuai nama berkas (variable i) dengan format .png juga

done Menandai akhir dari perintah bulk action.

Anda dapat menggunakan format perintah tersebut untuk keperluan lain sesuai kebutuhan.

Terima kasih telah berkenan singgah di Mozelup!, Rania Amina :")