Bismillahirrohmanirrohim.
Ada beberapa perkakas yang menurut Penulis bermanfaat untuk mengoptimalkan berkas svg, png, dan jpg. Manfaat nantinya untuk aset website, icon, background, patern, mockup, cover dan lain-lain. Tapi sayangnya belum ada versi GUI, semuanya menggunakan perintah terminal di GNU/Linux.
Pertama, kompresi berkas svg dengan SVGO
Laman Web: https://github.com/svg/svgo
Perkakas favorit Penulis adalah svgo
, karena dengan svgo
ini mampu mengkompres berkas svg
menjadi minimalis, dengan menghilangkan layer, metadata, dan objek tersembunyi. Sangat berguna untuk optimasi website jika menggunakan asset svg
. Misalnya ilustrasi Penulis yang berada di GNOME.ID, hanya sekian detik untuk menampilkan ilustrasi di bagian header dan fiture section.
Cara Install svgo
di distro GNU/Linux
$ sudo npm install -g svgo
Repo Fedora
$ sudo dnf install nodejs-svgo
Lanjut ke demontrasinya (Penulis menggunakan GNU/Linux KDE NEON). Contoh Penulis punya 3 jenis ilustrasi. Kemudian lihat isi berkasnya.
$ ls -lh
total 680K
-rw-r--r-- 1 hervyqa users 224K May 14 11:02 ilustrasi-1.svg
-rw-r--r-- 1 hervyqa users 174K May 14 11:02 ilustrasi-2.svg
-rw-r--r-- 1 hervyqa users 280K May 14 11:02 ilustrasi-3.svg
Kompresi berkas svg dengan nama lain.
$ svgo ilustrasi-1.svg -o ilustrasi-1-hasil.svg
ilustrasi-1.svg:
Done in 664 ms!
223.576 KiB - 82.8% = 38.366 KiB
Dari contoh diatas svgo berhasil merubah ilustrasi-1.svg
menjadi ilustrasi-1-hasil.svg
. Dari 223.567 Kib manjadi 38.366 Kib.
Anda juga bisa kompresi berkas svg sekaligus. Tapi jika anda melakukan ini harap backup dulu berkas svg inkscape aslinya.
mkdir backup
cp *.svg backup
Kemudian kompres berkas svg sekaligus
svgo *.svg
ilustrasi-1.svg:
Done in 451 ms!
223.576 KiB - 82.8% = 38.366 KiB
ilustrasi-2.svg:
Done in 536 ms!
173.315 KiB - 88.5% = 19.988 KiB
ilustrasi-3.svg:
Done in 336 ms!
279.723 KiB - 94.3% = 15.963 KiB
Kompresi berkas PNG dengan OptiPng
Laman Web: http://optipng.sourceforge.net/
Perkakas optipng
berfungsi untuk kompresi berkas png
. Sama dengan svgo tadi, tujuannya sama-sama untuk kompresi berkas.
Cara install di GNU/Linux:
- openSUSE
$ sudo zypper install optipng
- Debian/Ubuntu/Mint
$ sudo apt install optipng
- Fedora
$ sudo dnf install optipng
- Centos dengan repo epel
$ su -c 'yum install optipng'
- Arch/Manjaro
$ sudo pacman -S optipng
Mari kita coba. Kita lihat ukuran berkasnya dahulu.
$ ls -lh
total 284K
-rw-r--r-- 1 hervyqa users 281K Jul 6 13:05 gambar.png
Kemudian kompres berkas pngnya.
$ optipng gambar.png
** Processing: /home/hervyqa/Documents/ilustrasi/2019/gambar.png
1000x661 pixels, 4x8 bits/pixel, RGB+alpha
Input IDAT size = 286837 bytes
Input file size = 287388 bytes
Trying:
zc = 9 zm = 8 zs = 0 f = 0
zc = 9 zm = 8 zs = 1 f = 0
zc = 1 zm = 8 zs = 2 f = 0
zc = 9 zm = 8 zs = 3 f = 0
zc = 9 zm = 8 zs = 0 f = 5 IDAT size = 273737
zc = 9 zm = 8 zs = 1 f = 5 IDAT size = 268841
zc = 1 zm = 8 zs = 2 f = 5
zc = 9 zm = 8 zs = 3 f = 5
Selecting parameters:
zc = 9 zm = 8 zs = 1 f = 5 IDAT size = 268841
Output IDAT size = 268841 bytes (17996 bytes decrease)
Output file size = 268972 bytes (18416 bytes = 6.41% decrease)
Kemudian cek lagi.
$ ls -lh
total 264K
-rw-r--r-- 1 hervyqa users 263K Jul 10 07:58 gambar.png
Alhamdulillah! dari 281Kib jadi 263Kib. Meskipun ukuran berkasnya tidak terlalu signifikan berubahnya.
Tips: Lalu kapan menggunakan optipng
? Gunakanlah optipng
ketika membutuhkan foto bitmap, blur dan transparansi gambar.
Kompresi berkas JPG dan JPEG dengan JpegOptim
Laman Web: https://github.com/tjko/jpegoptim
Terakhir jpegoptim
. Perkakas ini berfungsi untuk kompresi berkas jpg
dan jpeg
.
Cara install di GNU/Linux:
- openSUSE
$ sudo zypper install jpegoptim
- Debian/Ubuntu/Mint
$ sudo apt install jpegoptim
- Fedora
$ sudo dnf install jpegoptim
- Centos dengan repo epel
$ su -c 'yum install jpegoptim'
- Arch/Manjaro
$ sudo pacman -S jpegoptim
Caranya hampir sama dengan optipng
. kita cek dulu berkasnya.
$ ls -lh
total 308K
-rw-r--r-- 1 hervyqa users 302K Jul 6 14:58 gambar.jpg
Kemudian kompres berkas jpgnya.
$ jpegoptim gambar.jpg
/home/hervyqa/Documents/ilustrasi/2019/gambar.jpg 750x600 24bit P Exif IPTC XMP Adobe [OK] 308454 --> 295806 bytes (4.10%), optimized.
Tips: Jadi, menggunakan jpegoptim
itu ketika membutuhkan foto bitmap, blur dan tidak memutuhkan transparansi gambar. Jika butuh transparansi pakai png
dan kompresinya pakai optipng
.
Nah itu tadi 3 perkakas tambahan favorit untuk memaksimalkan aset. Sekian dan terima kasih sudah membaca. Semoga bermanfaat.