Tips and Triks

Optimasi Gambar Web : Kesalahan Umum dan Solusinya

Bagi sebagian pendapat gambar merupakan slah satu dari elemen penting dalam sebuah website. Di antara media lain, gambar itu sendiri mewakili lebih dari 60% dari rata-rata byte per jenis konten yang diunduh ketika halaman web dimuat. Oleh karena itulah yang menjadi alasan kenapa optimasi gambar di website perlu menjadi prioritas untuk mempercepat loading sebuah website dan memperbaiki ranking pencarian di mesin pencari. Inilah kesalahan paling umum yang dilakukan oleh pdeveloper dan desainer website saat menangani gambar, dan cara mengatasinya.

Menggunakan gambar untuk hal-hal yang dapat Anda lakukan dengan CSS
Pada saat spesifikasi CSS masih cukup dasar, gambar diperlukan untuk membuat background, icon, shadow dll. Akan tetapi dengan berkembangnya CSS3 yang sudah support untuk semua web browser. Anda sekarang dapat membuat situs web Anda lebih cepat untuk memuat dan menghemat bandwidth dengan menggunakan teknik CSS modern. Untuk membuat gradien anda juga sudah bisa menggunakan CSS murni. Untuk membuat icon anda sudah tidak perlu menggunakan icon gambar gunakan icon SVG atau webfont agar loading website anda lebih cepat.

Menggunakan Format Gambar Yang Salah
Satu kesalahan paling umum yang dilakukan ketika menampilkan gambar secara online adalah dengan menggunakan format gambar yang salah. .jpg, .gif dan .png adalah format gambar yang paling umum digunakan untuk menampilkannya di website. Tetapi itu tidak berarti bahwa Anda harus menggunakan format tersebut. Bahkan, setiap format memiliki pro dan kontranya sendiri, dan menggunakan format yang tepat untuk jenis gambar yang tepat adalah sesuatu yang pasti akan membuat Anda menghemat bandwidth dan loading situs Anda lebih cepat meskipun tetap menampilkan kualitas gambar yang baik.

Untuk menampilkan foto sebaiknya anda menggunakan format .jpg, sedangkan untuk untuk logo dan chart .png merupakan format yang paling sesuai. untuk format .gif  gunakan hanya untuk gambar yang sangat kecil misalnya background yang berulang yang tidak dapat dihandle oleh CSS murni. Seringkali Gif juga digunakan untuk menampilkan video pendek yang berulang ulang, tapi tahukah anda bahwa sebuah gambar gif sebesar 60MB jika menggunakan format mp4 hanya sekitar sedikit diatas 300Kb saja?

Salah satu format yang perlu di pertimbangkan yang akhir akhir ini sering digunakan adalah format WebP, format yang diciptakan oleh google, sebuah format yang memiliki kompressi sangat bagus untuk gambar website (26% lebih ringan dibandingkan dengan PNG). Saat ini, WebP didukung secara native di Chrome dan Opera, dan sangat mungkin akan diikuti oleh browser populer lainnya. Microsoft juga telah menciptakan format modern lain yang disebut JPEG-XR, yang saat baru support oleh browser Microsoft secara eksklusif.

Menggunakan gambar yang tidak dioptimasi
Untuk lebih optimal sebaiknya optimasi gambar yang akan anda tampilkan di website anda. Cara termudah untuk mengoptimalkan gambar adalah menggunakan fitur “Save for Web” pada saat menyimpan gambar menggunakan Adobe Photoshop. Jika Anda menggunakan WordPress, maka Anda harus menginstal plugin WP Smush: plugin ini otomatis akan mengoptimalkan gambar yang kita upload melaui WordPress media uploader dan gambar akan otomtis terkompressi hingga 90%, tanpa mengurangi kualitas gambar. Plugin ini juga memiliki pilihan untuk mengoptimalkan gambar yang telah anda upload sebelumnya. Untuk anda yang tidak mau repot plugin ini tentunya sangat rekomended, bahkan juga tersedia versi pro dengan tambahan beberapa fitur.

Menggunakan browser resizing pada gambar berukuran besar
Sejak 2016 website responsive yang mampu beradaptasi dengan berbagai ukuran device adalah sebuah keharusan untuk sebuah website yang baik. Meskipun membuat tampilan website yang responsive relatif mudah, tapi tidak demikina jika berurusan dengan gambar.

Sering kali kita menggunakan gambar dengan resolusi besar dan menggunakan browser resizing dan menurunkan resolusi pada ukuran browser yang lebih kecil. Masalah dengan perubah ukuran browser adalah bahwa Anda masih memberikan gambar besar yang sama, yang akibatnya membuat loading website anda pada perangkat seluler menjadi lambat dan menguras bandwith serta data seluler pengunjung. Solusi untuk mengatasi masalah ini adalah membuat thumbnail yang berbeda dari gambar yang sama dan memberikan ukuran gambar yang tepat sesuai dengan resolusi klien. Untuk melakukannya, Anda dapat menggunakan solusi open-source seperti ImageMagick, atau menggunakan layanan berbasis cloud seperti Cloudinary.

Tidak menggunakan caching pada gambar
Tidak menyimpan cache gambar merupakan kesalahan yang bisa membuat situs web Anda lebih lambat, dan menghabiskan bandwidth yang lebih besar. Gambar dan sumber daya statis lainnya harus disimpan dalam cache untuk menginstruksikan browser pengunjung yang mengunjungi kembali web kita untuk menggunakan kembali sumber daya yang sebelumnya diambil.

Caching dapat diimplementasikan dengan mudah dengan menambahkan kode dibawah ini ke dalam file .htaccess:


ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

Jika Anda pengguna WordPress untuk pembuatan website, sebaiknya gunakan plugin W3 Total Cache, yang memiliki fitur untuk cache gambar serta berbagai opsi lain untuk mempercepat website wordpress anda..

Tags
Show More

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Close