Cara Membuat Progressive Images

Dalam mengembangkan situs web konten visual seperti gambar (image) merupakan objek yang mengambil peranan besar, tetapi jika tidak hati-hati gambar juga bisa menjadi penyebab runtuhnya pengalaman pengguna di situs web anda karena gambar JPEG yang dimuat dengan lambat dapat menurunkan reputasi website dan konten.

Oleh karena itu, untuk menjaga pengalaman pengguna, saya memilih gambar (JPEG Progressive) sebagai koneten visual di website atau blog saya karena gambar jpg progresif atau lebih umum disebut dengan progressive image lebih ramah pengguna dibandingkan JPEG biasa.

Kelebihan Progressive Images

Progresif image dimuat langsung di situs web dan di awal pemuatan halaman progresif images akan dimuat dengan resolusi rendah terlebih dahulu dan kemudian resolusinya ditingkatkan saat situs web telah dimuat sepenuhnya. [Lihat selengkapnya]

Dengan demikian pengguna tidak perlu menunggu lebih lama untuk melihat konten dan berinteraksi di website atau blog. Hal itulah yang menjadi kelebihan progresif image di bandingkan gambar JPEG standar.

Lalu bagaimana cara membuat progressive image?

Membuat Progressive Images
Untuk membuat JPEG (image) progressive alat yang kita gunakan adalah photo editor terbaik sepanjang masa yaitu Photoshop (all version). Ada dua metode dalam membuat progressive image dengan menggunakan photoshop yaitu: [ads id="ads1"]

1. Melalui fitur Save as image

Setelah selesai menset-up gambar di photoshop, simpan gambar melalui fitur save as image, kemudian pada bagian Image Option pilih Progressive Images seperti yang saya contohkan pada gambar di bawah ini.
Cara Membuat Progressive Images
Catatan: Progressive Images hanya tersedia pada file JPEG (JPG), jadi jika ingin membuat progressive images, simpan gambar dengan format file JPEG lalu pilih Progressive.

2. Melalui fitur Save for web

  1. Buka dan set-up gambar di Photoshop
  2. Kemudian klik menu File
  3. Pilih Save for web
  4. Type file pilih JPEG, dan
  5. Centang Progressive Images
  6. Kemudian klik Save
Cara Membuat Progressive Images
Selesai...! Apa yang berbeda dari kedua cara membuat progressive images di atas? Motode yang pertama progressive images tidak melalui proses compress image sedangkan metode yang kedua progressive images sudah di kompres sehingga file size yang dihasilkan lebih kecil dan tentunya memuat gambar progresif yang kompres lebih ringan dibandingkan yang tidak kompres.

Meskipun demikian kedua metode menghasilkan progressive images yang ramah, menjaga pengalaman pengguna di situs web dan mempertahankan performa website yang optimal.

Saya sudah memulai untuk menggunakan progressive images di website (blog) saya, sekarang giliran anda untuk mulai menggunakan progressive images supaya performa website dan pengalaman pengguna di situs web anda tetap terjaga secara optimal.

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Mengatasi Render Blocking Resources Dari Template Blogger

Gambar
Cara Mengatasi Render-blocking resources -  Sedikitnya ada dua jenis resources pada template blogger yang menyebabkan bloking first paint pada halaman blog. Yang pertama resources yang berasal dari platform blogger (resources default) yang biasa kita sebut dengan bundle css blogger dan resources pihak ketiga (3rd party) seperti bundle css fontawesome dan library javascript. Kedua jenis resources (bundle css/js) tersebut sebenarnya bukan hal buruk untuk situs blog, kita hanya perlu memuatnya secara tidak sinkron (asynchron) jika memungkinkan, Dan khusus untuk bundle css/js bawaan blogger langkah terbaik saat ini untuk mengatasinya adalah adalah dengan menonaktifka-nya. Karena sangat tidak mungkin untuk memodifikasi kode tersebut. Dampak Negatif Render-Blocking Resources [ads id="ads1"] Yang paling nyata dampak negatif render-blocking resources adalah (bloking first paint) yaitu ketika browser memuat halaman blog yang pertama kali terlihat adalah layar putih, di butuhkan waktu
Baca selengkapnya

Cara Mengatasi URL Yang Dikecualikan (Discovered-Currently Not Indexed Status)

Gambar
Tahukah kamu apa itu " Discovered currently not indexed " dengan status " Excluded "? Discovered currently not indexed maksudnya adalah halaman (url) sudah ditemukan oleh google tetapi belum di-crawl, sedangkan status excluded adalah status url yang masuk dalam ketegori pengecualian atau di kecualikan. Biasanya halaman ( url ) yang dikecualikan juga tidak diindeks oleh google karena menurut google halaman (url) merupakan duplikat dari halaman yang diindeks, atau diblokir dari pengindeksan oleh beberapa mekanisme di situs web itu sendiri. Jika tag canonical url di terapkan dengan benar beberapa url atau halaman di situs web akan dikecualikan oleh crawler google, biasanya halaman yang dikecualikan merupakan halaman (url) yang memang tidak penting untuk diindeks seperi url ?m=1, ?m=0 dan /search. Pengecualian pada yang url seperti itu baik untuk situs web, dengan begitu url (halaman) duplikat akan terjaring kedalam keranjang pengecualian di search console. [ads id=&
Baca selengkapnya

Cara Mendaftarkan Blog Ke Google Adsense (Panduan Terupdate)

Gambar
Google adsense menjadi terget utama kebanyakan blogger di dunia, pasalnya google adsense memberikan penghasilan kepada konten kreator melalui monetisasi konten blog dengan iklan adsense. Oleh karena itu bagi kamu yang baru saja memulai blogging khususnya yang ngeblog di platform blogger saya akan menunjukkan cara mendaftarkan blog anda ke google adsense agar dapat dimonetisasi dengan iklan adsense. Tapi sebelumnya harap perhatikan dan terapkan beberapa poin di bawah ini agar blog anda dapat dimonetisasi dengan iklan adsense. Syarat Agar Blog Diterima Adsense Untuk Monetisasi Daftarkan blog anda ke google adsense jika sudah rampung. Pastikan konten blog tidak berisi konten dewasa dan perjudian. Buat navigasi yang relevan dengan konten dan niche blog. Pastikan blog memiliki trafik organik. [ads id="ads1"] Jika ke empat poin di atas yang menjadi syarat kelayakan situs (blog) untuk dimonetisasi dengan iklan adsense sudah dipenuhi oleh blog anda maka blog sudah siap untuk didaftar
Baca selengkapnya