Mengoptimalkan Gambar

File gambar biasanya memiliki ukuran yang paling besar di antara file-file yang lain pada sebuah halaman web. Semakin besar ukuran halaman web maka akan semakin lambat dalam proses pemuatan halaman web. Apalagi jika gambar yang ditampilkan di halaman web sangat banyak. Untuk mengurangi beban server dan mengurangi waktu pemuatan gambar oleh web browser, maka diperlukan optimasi terhadap file gambar.

Banyak cara untuk mengoptimalkan gambar seperti mengonversi gambar, mengurangi resolusi dan dimensi gambar, menghilangkan meta file gambar. Semua itu harus dilakukan agar ukuran gambar menjadi lebih kecil sehingga akan mempercepat proses pemuatan gambar oleh web browser. Dalam mengurangi ukuran file gambar harus dilakukan dengan hati-hati, agar kualitas gambar tetap terjaga. Karena, dengan mengurangi ukuran file gambar biasanya akan membuat gambar menjadi buram atau kurang begitu jelas. Selain menurunkan ukuran file gambar, juga harus mengetahui teknik pemuatan gambar di HTML seperti menggunakan lazy load.

Di sini, saya akan berbagi wawasan tentang cara mengoptimalkan file gambar agar tidak membuat halaman web menjadi lambat.

Memilih Format Gambar

Sebelum melakukan optimasi file gambar, hal yang pertama harus dilakukan adalah memilih file gambar yang terbaik untuk halaman web. Terdapat banyak sekali format gambar saat ini seperti, JPEG/JPG, PNG, GIF (untuk gambar animasi), JPEG XR, dan WebP. Jika akan menggunakan gambar yang memiliki banyak warna (seperti foto) sebaiknya menggunakan format JPEG atau JPG. Jika akan menggunakan gambar dengan sedikit warna (seperti gambar berbasis vektor) atau mendukung transparansi maka pilihlah format PNG. Untuk menampilkan gambar animasi maka harus menggunakan format GIF atau format video seperti mpg.

Sebenarnya format gambar yang terbaik buat halaman web adalah JPEG XR dan WebP, tetapi kedua gambar tersebut belum didukung oleh semua web browser. Anda bisa mengonversi format gambar menjadi WebP dengan bantuan tool online seperti, WebP Converter, Ezgif, Convertio, dan sejenisnya. Jika menggunakan CMS WordPress, Anda bisa menggunakan plugin seperti LiteSpeed Cache, WebP Express, Cache Enabler, untuk mengonversi format gambar menjadi WebP secara otomatis. Selain mengubah format menjadi WebP, plugin tersebut secara otomatis akan menyediakan gambar dengan format WebP di halaman web jika browser mendukungnya. Jika browser tidak mendukungnya, maka format gambar standar yang akan ditampilkan.

Mengurangi Ukuran File Gambar

Seperti yang telah saya katakan di atas, mengurangi ukuran gambar harus dilakukan secara hati-hati. Jangan sampai mengurangi ukuran gambar tetapi menyebabkan kualitas gambar menurun. Berikut ini beberapa cara untuk mengurangi ukuran file gambar.

Kurangi Resolusi dan Dimensi Gambar

Pada umumnya kualitas gambar yang baik memiliki resolusi 300 dpi atau lebih. Dalam dunia desain grafis atau dunia percetakan, resolusi gambar di bawah 300 dpi tidak disarankan. Untuk keperluan printing, saya tidak pernah menggunakan gambar dengan resolusi di bawah 300 dpi. Kecuali untuk di-uploud ke situs web, saya biasa menggunakan gambar dengan resolusi 72 dpi.

Selain memperhatikan resolusi gambar, perhatikan juga dimensi gambarnya. Meskipun memiliki resolusi gambar yang rendah tetapi dimensi gambarnya masih besar, tidak akan mengurangi ukuran file gambar secara maksimal. Jadi, untuk mengurangi ukuran file gambar, harus mengurangi resolusi dan dimensinya. Tapi ingat! Perhatikan juga gambarnya, apakah tetap jernih atau menjadi buram.

Untuk mengurangi resolusi atau dimensi gambar, bisa menggunakan aplikasi desain grafis seperti Adobe PhotoShop atau aplikasi desain grafis lainnya.

Kompresi File Gambar

Mengompresi file gambar dapat menurunkan ukuran filenya tanpa harus kehilangan kualitas gambar. Banyak sekali penyedia layanan online untuk mengompres file gambar. Rata-rata layanan tersebut mampu mengurangi ukuran gambar hingga 80% tanpa harus kehilangan kualitas. Anda bisa mengunjungi situs seperti ShortPixel, TinyJPG, Compressor.io, dan sejenisnya. Bagi pengguna WordPress, banyak sekali plugin yang akan mengompresi ukuran gambar secara otomatis ketika gambar di-upload, seperti Smush Image Compression, ShortPixel Image Optimizer, Robin Image Optimizer, dan masih banyak lagi yang lainnya.

Gunakan Lazy Load Image

Jika kita membuka sebuah halaman web yang dipenuhi dengan gambar, mungkin kita akan merasa frustrasi dengan waktu pemuatan halaman web yang lama. Kita mungkin akan kehilangan kesabaran dan meninggalkan halaman web tersebut sebelum semua media gambar selesai ditampilkan. Lazy load adalah cara untuk meminimalkan permintaan terhadap file gambar pada waktu pemuatan halaman. Jika kita pernah mengunjungi toko online, dan melihat gambar-gambar produk yang kosong saat menggulir scroll ke halaman bawah, kita berarti sedang melihat proses lazy load.

Saat kita mengaktifkan lazy load di situs kita, kita dapat mengonfigurasi gambar untuk dimuat secara tidak sinkron (asynchronies). Itu berarti, hanya konten yang tampil di viewport (above the fold) yang akan dimuat lebih awal. Sisanya, konten akan dimuat berdasarkan kebutuhan, yaitu saat menggulir scroll ke bawah halaman. Jika pengunjung tidak menggulirkan scroll ke halaman bawah, maka media gambar tidak akan pernah dimuat. Seperti yang dapat anda bayangkan, dampak dari pemuatan asynchronies pada halaman yang dipenuhi media gambar sangat membantu kecepatan situs web. Terutama pengunjung yang menggunakan seluler akan senang atas penghematan bandwidth atau kuota yang diberikan lazy load kepada mereka.

Gunakan CSS Sprite

CSS sprite adalah salah satu cara untuk mengurangi jumlah permintaan HTTP terhadap file gambar, yaitu dengan cara menggabungkan beberapa gambar ke dalam satu file gambar saja. Untuk menampilkan salah satu gambar dari gambar gabungan, dapat menggunakan properti CSS background-position untuk menentukan letak posisi gambar yang akan ditampilkan.

Halaman web yang memiliki banyak gambar, terutama gambar-gambar yang kecil, seperti ikon, tombol, dll., dapat memakan waktu lama untuk memuat dan menghasilkan beberapa permintaan HTTP. Dengan menggunakan image sprite akan secara signifikan mengurangi jumlah permintaan HTTP yang dibuat browser ke server, dan sangat efektif untuk meningkatkan waktu pemuatan halaman web dan kinerja situs secara keseluruhan.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *