Tips Optimasi Gambar Dengan Plugin Imagify

Imagify – Gambar dapat membuat tampilan situs web Anda lebih menarik dan sangat bagus. Tetapi jika menggunakan banyak gambar, dapat memperlambat situs Anda apalagi jika Anda tidak melakukan optimasi. Oleh karena itu ada baiknya Anda mempelajari cara optimasi gambar agar mempercepat loading website. Untungnya, ada banyak cara yang dapat Anda terapkan untuk mempercepat loading gambar di website tanpa memengaruhi kualitas gambar. Berikut adalah enam tips yang dapat Anda gunakan untuk mempercepat loading gambar di WordPress:

  1. Kompres foto.
  2. Ubah ukuran foto.
  3. Konversikan foto ke format yang dioptimalkan seperti WebP .
  4. Gunakan content delivery network (CDN) untuk mempercepat waktu download gambar.
  5. Lazy load image.
  6. Aktifkan cache browser untuk mempercepat kunjungan berikutnya.

Tips Optimasi Gambar Dengan Plugin Imagify

1. Kompres Foto

1. Tips Optimasi Gambar Dengan Plugin Imagify

Kompresi foto berfungsi untuk mengecilkan ukuran file gambar tanpa mengubah dimensinya. Kompresi bekerja dengan menghapus informasi yang berlebihan/tidak perlu dan menerapkan berbagai algoritma untuk mengurangi ukuran file.

Ada dua jenis kompresi:

  • Lossless: pengurangan kecil ukuran file tanpa perubahan kualitas.
  • Lossy: pengurangan ukuran file yang jauh lebih besar, tetapi ada penurunan kualitas gambar.

Sebagian besar situs web, cukup dengan kompresi lossy. Namun, jika Anda seorang fotografer atau di industri lain yang mengutamakan kualitas gambar, Anda dapat menggunakan kompresi lossless.

Jika Anda menggunakan kompresi lossy, Anda dapat mencapai penghematan yang cukup banyak. Setelah menggunakan kompresi lossy, ukuran dari 133,7 KB akan menjadi 36,9 KB dengan sedikit perubahan kualitas, terjadi pengurangan kurang lebih 73%.

2. Ubah Ukuran Foto

Kompresi foto memungkinkan Anda mengubah ukuran file gambar tanpa mengubah dimensinya. Pada foto semakin besar dimensi gambar, semakin besar ukuran filenya. Dan semakin besar ukuran file, semakin lambat gambar tersebut dimuat.

Untuk website, Anda harus mencoba mengubah ukuran gambar ke ukuran yang tepat. Misalnya, jika area konten situs memiliki lebar 800 px, Anda dapat mengubah ukuran gambar menjadi 800 px ( atau mungkin menggandakannya menjadi 1.600 px untuk memperhitungkan monitor resolusi tinggi seperti layar Retina).

Berikut adalah contoh pengujian hanya mengubah ukuran gambar tanpa menambahkan kompresi:

2. Tips Optimasi Gambar Dengan Plugin Imagify

Jika Anda menggabungkan kompresi dengan pengubahan ukuran, Anda dapat menghemat ukuran gambar. Jadi hanya dengan mengubah ukuran dan mengompresi gambar, Anda dapat menurunkan dari 380 KB menjadi 101 KB dan hampir tidak ada perubahan kualitas (dengan asumsi Anda menampilkannya di website).

3. Konversi Foto ke WebP

WebP adalah format gambar modern dari Google yang menawarkan ukuran file yang lebih kecil daripada JPEG atau PNG tanpa kehilangan kualitas.

Rata-rata, gambar WebP 25-34% lebih kecil dari gambar JPEG yang sebanding dan 26% lebih kecil dari gambar PNG

4. Gunakan Content Delivery Network (CDN)

CDN pada dasarnya hanyalah jaringan server global di seluruh dunia. Jika Anda mengonfigurasi situs WordPress menggunakan CDN, Anda dapat meng-host semua foto situs Anda (dan file statis lainnya) di jaringan server ini.

Kemudian, pengunjung situs dapat mengunduh foto dari lokasi jaringan terdekat dengan mereka dibandingkan harus mendownloadnya langsung dari server hosting situs Anda.

Dengan mengurangi jarak yang harus ditempuh oleh file gambar, mereka akan memuat lebih cepat untuk pengunjung website Anda.

CDN sangat bermanfaat jika audiens situs Anda tersebar di wilayah geografis yang luas, seperti beberapa negara atau benua.

Namun, jika situs web Anda hanya menargetkan di lokasi geografis tertentu (seperti Indonesia saja), Anda tidak perlu menggunakan CDN.

5. Lazy Load Images

Lazy load memungkinkan Anda menunggu untuk memuat gambar yang berada di luar viewport yang terlihat oleh pengunjung. Sebaliknya, situs Anda hanya akan memuat gambar “tepat pada waktunya” saat pengunjung mulai menggulir ke bawah.

Lazy load akan menghasilkan waktu loading awal situs jauh lebih cepat, bahkan jika Anda memiliki banyak gambar pada halaman postingan.

6. Aktifkan Cache Browser

Cache browser tidak akan membuat foto dimuat lebih cepat saat seseorang pertama kali mengunjungi situs Anda. Tapi akan membuat gambar dimuat secara instan untuk kunjungan berikutnya.

Cache browser memungkinkan Anda memberi tahu browser pengunjung untuk menyimpan gambar situs Anda di komputer lokal pengunjung (dalam cache browser).

Setelah pengunjung mendownload gambar pada kunjungan pertama, mereka dapat memuat gambar tersebut dari cache browser lokal mereka pada kunjungan berikutnya, yang akan menghasilkan waktu loading situs yang lebih cepat.

Sekarang, mari masuk ke bagaimana Anda dapat menerapkan enam taktik di atas pada situs WordPress. Anda hanya perlu dua plugin untuk mengatur semuanya:

  • Imagify – Anda akan menggunakan ini untuk mengoptimalkan file gambar itu sendiri.
  • WP Rocket – Anda dapat menggunakan plugin ini untuk mempercepat situs web Anda.

TERKAIT: Cara Setting WP Rocket

Imagify: Kompres, Ubah Ukuran, dan Konversikan Gambar ke WebP

Imagify adalah plugin WordPress yang mudah digunakan dan dapat menangani pengoptimalan gambar. Setelah Anda mengonfigurasinya, secara otomatis akan mengoptimalkan semua gambar yang Anda upload ke WordPress menggunakan cara berikut:

  • Kompres gambar menggunakan algoritma lossless, lossy sedang, atau lossy agresif.
  • Ubah ukuran gambar ke dimensi maksimum.
  • Konversikan gambar ke WebP.
  • Anda juga dapat mengubah ukuran dan mengompres foto situs Anda yang ada dengan satu klik.

Instal dan aktifkan plugin Imagify gratis dari WordPress.org. Setelah Anda mengaktifkan, plugin akan meminta Anda untuk memasukkan kunci API, yang memungkinkan Anda menghubungkan situs WordPress ke layanan pengoptimalan Imagify.

Untuk mendapatkan kunci API, Anda dapat mendaftar untuk mendapatkan akun Imagify gratis. Anda dapat mengoptimalkan 20 MB gambar per bulan secara gratis ( ~200 gambar per bulan).

Jika Anda melebihi batas tersebut, paket berbayar dikenakan biaya $4,99/bulan untuk 500 MB (~5.000 gambar) atau $9,99/bulan untuk penggunaan tak terbatas. Setelah Anda memiliki API Key, Anda dapat menempelkannya di kotak dan klik Connect Me:

3. Tips Optimasi Gambar Dengan Plugin Imagify

Kemudian, buka Settings → Imagify untuk mengonfigurasi pengaturan pengoptimalan gambar. Di bagian atas, Anda dapat memilih tingkat kompresi yang diinginkan.

4. Tips Optimasi Gambar Dengan Plugin Imagify

Jika Anda menggulir ke bawah, Anda dapat membuat Imagify secara otomatis mengonversi gambar ke WebP dan menampilkannya kepada pengunjung situs Anda. Untuk gambar WebP, sebaiknya gunakan metode tag <picture>:
5. Tips Optimasi Gambar Dengan Plugin Imagify

Di bawah itu, Anda dapat memberi tahu Imagify untuk mengubah ukuran gambar besar ke dimensi maksimum (berdasarkan lebar).

6. Tips Optimasi Gambar Dengan Plugin Imagify

Imagify secara otomatis akan mengoptimalkan semua gambar baru yang Anda unggah ke situs WordPress Anda.

ARTIKEL TERBARU
ARTIKEL TERKAIT