Halo Sob! Kalian pasti menginginkan website yang kalian buat menampilkan gambar yang dengan kualitas terbaik kan? Gambar yang kamu buat di aplikasi seperti Photoshop dan Illustrator terlihat luar biasa tetapi seringkali ukuran filenya sangat besar. Hal ini karena gambar dibuat dalam format yang membuatnya lebih mudah untuk dimanipulasi dengan cara yang berbeda.
Dengan ukuran file lebih dari beberapa megabyte per gambar, jika kamu meletakkan file-file ini di situs web akan sangat lambat untuk memuat. Di panduan kali ini, kami akan kasih tahu kamu cara mengoptimalkan Gambar pada Website. Baca sampai habis ya Sob!
Apa sih fungsi dari mengoptimalkan gambar Pada Website?Mengoptimalkan gambar untuk web kamu berarti menyimpan atau mengkompilasi gambar dalam format yang ramah web tergantung pada apa yang terkandung di dalamnya.
Gambar menyimpan data selain piksel yang kita lihat di layar. Data ini dapat menambahkan ukuran yang tidak perlu ke gambar sehingga menyebabkan waktu pemuatan website yang lebih lama saat pengguna menunggu gambar untuk diunduh.
Baca langkah-langkah dibawah ini ya sob:
STEP 1: Kamu bisa melakukan efisiensi / penghematan yang signifikan hanya dengan mengubah format gambar. Sebagai contoh, SVG seringkali merupakan cara terbaik untuk menyimpan logo sederhana:
<?xml version=”1.0″ encoding=”utf-8″?>
<svg version=”1.2″ baseProfile=”tiny” id=”Layer_1″ xmlns=”http://www.w3.org/2000/svg”
xmlns:xlink=”http://www.w3.org/1999/xlink”
x=”0px” y=”0px” viewBox=”0 0 612 792″ xml:space=”preserve”>
<g id=”XMLID_1_”>
<g>
<circle fill=”red” stroke=”black” stroke-width=”2″ stroke-miterlimit=”10″
cx=”50″ cy=”50″ r=”40″/>
</g>
</g>
</svg>
Karena gambar didefinisikan secara geometris, kode SVG ini dapat memperbesar dan skala ke ukuran berapa pun. Dan karena disimpan sebagai teks, kamu dapat mengompres dan memperkecil format SVG.
STEP 2 :
Elemen gambar memungkinkan kamu memberi tahu browser untuk mendapatkan versi gambar yang berbeda, tergantung pada karakteristik device pengguna.
Layanan Web Optimasi Gambar dan CDN
Kamu mungkin lebih baik membiarkan layanan web atau CDN mengoptimalkan gambar untuk kalian. Beberapa ini adalah aplikasi untuk melakukan optimasi gambar CDN:
Dan, ini dia beberapa aplikasi untuk melakukan optimasi gambar API :
STEP 3 : Cara ketiga untuk mengoptimasi gambar di website adalah dengan menjalankan GUI. Misalnya, dengan menggunakan aplikasi ImageOptim. Dengan menggunakan aplikasi tersebut, kamu tinggal drag and drop gambar ke UI-nya, kemudian secara otomatis aplikasi akan melakukan kompres gambar tanpa mengurangi kualitas secara nyata. Jika kamu menjalankan situs kecil dan dapat menangani secara manual mengoptimalkan semua gambar, opsi ini bisa banget buat dicoba.
STEP 4 :
Cara terakhir nih, kamu bisa melakukan optimasi gambar di website kamu dengan menjalankan command line tools yang bisa kamu intergrasikan ke toolchain build kamu. Untuk JPEG kamu bisa menggunakan Guetzli, MozJPEG , untuk PNG kamu bisa menggunakan pngquant , Zopfli dan untuk GIF kamu bisa menggunakan Gifsicle , SVGO
Gimana Sob? Mudah bukan untuk mengoptimasi gambar biar akses website kamu makin cepat.
Simak terus ya tutorial lengkap Jagoan Hosting di halaman tutorial Jagoan Hosting Indonesia ya, jika ada bagian dari tutorial yang tidak ditemukan, kamu bisa menghubungi teman-teman di Jagoan Hosting supaya bisa dibantu lebih lanjut melalui Live Chat atau fitur Open Tiket ya!