Optimasi Gambar untuk Web

Gambar merupakan pendukung untuk setiap elemen web, mulai dari ilustrasi artikel, gambar pendukung artikel bahkan gambar-gambar yang digunakan dalam desain webnya.

Ada berbagai macam tipe file gambar, seperti jpg, png, dan gif. semuanya memiliki karakteristik dan kualitas yang berbeda, lalu tipe file apa yang cocok digunakan untuk web? disini saya mencoba berbagi tips optimasi gambar untuk web, memilih tipe file yang tepat dan optimasi gambar agar ukurannya lebih kecil namun masih memiliki kualitas yang baik.

Memilih tipe file yang tepat

Seperti yang telah saya sebutkan ada berbagai macam tipe file gambar, diantaranya jpg, png dan gif. Berikut ini saya jelaskan kapan suatu tipe file harus digunakan :

JPEG

Ketika gambar yang ingin anda gunakan dalam web, misalnya dalam artikel atau bahkan elemen pendukung desain web memiliki bermacam-macam warna atau kompleksitas warna yang tinggi contoh sederhananya adalah gambar hasil “jepretan foto” gunakan tipe file JPEG.

contoh gambar JPEG

Penggunaan tipe file JPEG pada gambar-gambar tersebut sangat mendukung karena file JPEG mampu meyimpan beragam informasi warna/menjaga kualitas gambar meskipun ukuran filenya kecil.

GIF

Ketika gambar memiliki warna sedikit, atau sebagian area didominasi oleh satu warna, maka tipe gambar gif lah yang cocok untuk digunakan. Contoh gambar yang bisa memiliki tipe gif ini adalah logo (logo sederhana), diagram dan lain-lain.

Contoh gambar gif

Contoh gambar gif 2

PNG

Tipe file PNG bisa digunakan ketika gambar yang akan anda gunakan memiliki transparansi. Meskipun tipe file GIF bisa memiliki transparansi namun tipe file PNG lebih cocok untuk masalah ini. tipe gif hanya bisa mentransparankan 100%, ketika ada gradasi warna yang memiliki transparansi, tipe file GIF akan memiliki kualitas yang rendah. berbeda dengan tipe PNG.

Perbandingan Transparansi pada PNG dan GIF

Contoh diatas adalah contoh transparansi pada shadow. bagian kiri adalah file PNG dan bagian kanan adalah file GIF (dengan transparansi). Transparansi PNG lebih halus (nilai transparans bisa berkisar antara 0 s.d 100%) sedangkan GIF memiliki area transparan 100% (tidak bisa memiliki transparansi misalnya 50%).

Optimasi Tipe File

Dengan menggunakan image editor seperti Photoshop, setiap tipe file gambar, masih bisa dioptimasi agar gambar memiliki ukuran rendah dan ramah akan bandwidth internet namun masih memiliki kualitas yang tinggi.

Optimasi menggunakan Photoshop

Dalam photoshop, setiap Anda ingin menyimpan gambar untuk kebutuhan web, pastikan pilih menu File>Save For Web and Devices.

Save for Web and Devices

Atur preset yang disediakan, misalnya ketika Anda ingin menyimpan gambar dengan tipe file JPEG, atur presetnya seperti berikut :

Perbandingan masing-masing preset/Quality

atau anda juga bisa mengatur “Quality”-nya sendiri, perhatikan juga ukuran yang dihasilkan dan kualitas gambarnya.

Untuk mendapatkan transparansi dalam file PNG, pastikan anda memiliki preset PNG-24, jika tidak maka gambar akan memiliki background putih.

Optimasi menggunakan Situs pihak ketiga

Ada beberapa situs yang melayani untuk optimasi gambar-gambar yang akan digunakan dalam web. misalnya smush.it dari yahoo. Kadang gambar yang telah anda optimasi melalui langkah sebelumnya masih bisa dioptimasi kembali oleh smush.it, sehingga file yang dihasilkan lebih kecil namun masih menjaga kualitasnya.

Smush It

Pada contoh berikut, saya melakukan optimasi untuk file JPEG, dan hasilnya masih bisa dioptimasi sebesar 0.17% dan ukuran gambar berkurang sebesar 38bytes.

Optimasi Gambar melalui HTML

Optimasi melalui HTML berbeda dengan optimasi sebelumnya. Dalam HTML anda bisa membantu mengoptimalkan kecepatan loading gambar, dengan menentukan atribut width dan height pada gambar. Jika anda tidak menentukan kedua atribut tersebut maka ukuran gambar akan dikalkulasikan terlebih dahulu oleh browser/CPU sebelum ditampilkan dan ini cukup memakan waktu ketika gambar memiliki ukuran super :).

<img src="gambar.jpg" alt="Ilustrasi" width="200" height="300">

Jadi pastikan anda menentukan atribut width dan height ini sesuai dengan ukuran gambar.

Jangan meresize melalui atribut width dan height

Jangan sekali-kali meresize/merubah ukuran gambar dengan menentukan atribut width dan height, cara ini akan memperlambat proses loading web. Misalnya anda memiliki gambar dengan ukuran 600px800px namun anda hanya membutuhkan gambar dengan ukuran 200px300px dan anda melakukan resizing dengan atribut width dan height :

<img src="gambar.jpg" alt="Ilustrasi" width="200" height="300">

Solusinya adalah, buat file berbeda untuk ukuran yang berbeda, jangan merubah ukuran gambar dengan menggunakan atribut html. Jangan Pernah! 🙂

Kesimpulan

Penggunaan tipe gambar yang tepat dan cara pemuatan gambar yang tepat (dengan menyertakan atribut width dan height) dapat mempercepat loading web, selain itu gambar yang telah dioptimasi akan memiliki ukuran yang relatif kecil namun memiliki kualitas tinggi. Jika demikian, bukan Anda saja yang senang, pengunjung pun ikut senang karena loading webnya yang cepat :).

Referensi : “HTML and CSS: Design and Build Websites” oleh Jon Duckett

Category HTML & CSS, Photoshop, Tips & TricksTag

7 Komentar untuk “Optimasi Gambar untuk Web

  1. Saya pernah resize foto hanya pakai atribut width dan height, ternyata dimarahi tools SEO juga hehe
    makasih mas atas ilmunya..

    Oh ya, untuk resize foto secara massal belum disampaikan ya..saya pernah menggunakan software ringan untuk resize foto secara massal > Format Factory

  2. kalo misalkan saya resize gambarnya pke css itu ngruhh juga gak sih?
    apakah resize image dr css sama ajh dg meresize melalui atribut width dan height?

Tinggalkan Komentar Anda

This site uses Akismet to reduce spam. Learn how your comment data is processed.