Pada suatu video yang di kutip oleh google, seorang Pengembang bernama Alan Kent membagikan kiat kiat dan tips mengoptimalkan gambar gambar yang diperuntukan kepada situs situs web e-niaga. Walaupun terdapat 6 kiat didalam video tersebut yang ditunjukan untuk web e-niaga, tetapi saran dan tips tersebut berlaku untuk situs web apapun karena pada dasarnya suatu web itu terdiri dari tulisan dan dijaikan dengan gambar gambar dalam jumlah besar untuk mendukung informasi yang dibuat dalam artikel didalam web tersebut.
6 Kiat dan Tips Google Untuk Optimasi Gambar Situs Web
Inilah rangkuman kiat dan tipd google untuk membuat gambar gambar pada situs web temen temen dimuat dengan lebih cepat, efisien dan ramah SEO.
1. Pilih Ukuran Gambar yang Sesuai
Cara mudah untuk mengetahui tepat atau tidaknya ukuran gambar situs web yaitu dengan membuka situs pagespeed insights untuk mengetes situs temen temen, kemudian lihat pada bagian ukuran gambar yang sesuai, biasanya terdapat pada bagian laporan/report google pagespeed insights. Jika hasil Report menunjukan hasil gambar lebih besar atau kecil yang tidak sesuai dengan web, anda dapat memperbaikinya sesuai dengan kiat resolusi gambar agar lebih responsif, cepat dan efisien.
Pentingnya menentukan lebar dan tingginya gambar adalah hal yang wajib sebelum mempublis artikel web, karena resolusi gambar yang tidak tepat atau tinggi dapat berpengaruh pada ukuran file menjadi besar, hal tersebut dapat mengakibatkan halaman web anda terasa lama dan berat saat diunduh.
Sebagian besar proses byte yang didownload pada halaman web akan teralokasikan juga untuk gambar. Sehingga optimasi sebuah gambar sering kali sangat berpengaruh terhadap penghematan pengunduhan byte halaman dan meningkatkan performa web. Semakin kecil ukuran byte yang didwonload akan semakin cepat juga browser merender dan mendownload konten temen temen.
2. Pilih Format Gambar yang Tepat
Sama seperti ulasan diatas, temen temen bisa mendeteksi format gambar yang tepat yaitu dengan cara mengetes web temen temen dengan menggunakan Google Pagespeed Insights, Lihat pada bagian menu Laporan tayangan gambar dalam format generasi berikutnya. Laporan tersebut berisikan cantuman gambar yang disarankan untuk dapat dikonversi ke format file yang lebih optimal dan efisien.
Sebelum temen temen menambahkan gambar ke dalam web alahkah baiknya temen temen harus memikirkan tentang format gambar seperti format file PNG, JPG atau WEBP. mengapa demikian ?. karena sebuah gambar dengan format tertentu akan mempengaruhi ukuran file gambar tersebut. Mungkin ada beberapa kelebihan dan kekurangan pada setiap format gambar misalnya jika ukuran file gambar kecil maka kualitas gambar cenderung menurun namun lebih baik dalam pemrosesan rendering pada sebuah website. Dibawah ini ilalfa sajikan saran beserta keterangan beberapa format gambar beserta saran dalam penggunaanya :
- Format .JPG : format yang disarankan untuk temen temen ketika ingin berbagi sebuah gambar
- Format .PNG : format gambar terbaik untuk gambar yang memiliki desain kompleks seperti ilustrasi.
- Format .SVG : format terbaik untuk kebutuhan desain animasi dan web.
- Format .WEBP : format gambar terbaik untuk kebutuhan Web karena memiliki ukuran file yang kecil tapi tidak menurunkan kualitas sebuah gambar.
3. Hilangkan Pergeseran Tata Letak Kumulatif Gambar ( CLS )
Tata Letak Komulatif adalah metrik vital web yang penting dan berpusat pada perubahan halaman visual yang bergerak, bergeser dari satu tempat ke tempat lain saat memuat halaman web. semakin rendah nilai CLS pada suatu web maka akan sangat membantu sekali untuk halaman web temen temen agar lebih menarik. Hal yang cukup terlihat adanya pergeseran Tata Letak Kumulatif dihalaman web yaitu ketika temen temen sdang membaca sebuah artikel secara online tiba tiba halaman web tersebut berubah tanpa adanya peringatan bahkan jika lebih parahnya temen temen akan mengetuk tautan atau tombol atu gambar download atau link lain, sebelum jari temen temen tepat mengetuk tombol atau gambar tersebut tiba tiba ada tautan/gambar yang bergerak sendiri dan akhirnya temen temen mengeklik sesuatu tersebut.
Penyebab besarnya CLS tersebut diantaranya yaitu :
- Penggunaan gambar atau video dengan dimensi yang tidak diketahui.
- Font yang tidak optimal membuat render lebih besar/kecil dari fallback.
- Gambar suatu widget iklan yang dinamis mengubah ukuran secara otomatis.
- Konten yang disuntikan dinamis.
Untuk mengetahui nilai CLS website, temen temen bisa berkunjung dan menguji web dengan membuka link web.dev Pagespeed Insight https://pagespeed.web.dev/analysis
4. Penggunaan Cache Gambar Di Browser
Tips untuk mengoptimalkan gambar selajutnya yaitu dengan mengatur setelan cache pada platform atau server web yang bisa temen temen rubah untuk menyesuaikan masa penggunaan cache pada gambar yang terdapat di situs web. Hal tersebut bertujuan untuk memberi tahu seberapa lama browser menyimpan gambar dengan aman.
Untuk mengetahui apakah cache respon HTTP telah di setel dengan benar, temen temen bisa mengunjungi Pagespeed Insights untuk mendeteksi pengaturan cache tersebut.
5. Kompres Gambar Dengan Tepat Dan Sesuai
Tips berikutnya untuk mengoptimalkan gambar pada web yaitu dengan memperhatikan faktor kualitas yang tepat dan sesuai untuk gambar agar efisien sekaligus mempertahankan kualitas gambar didalam suatu situs web. Jika temen temen mengecek situs web di Pagespeed Insights, Di dalam Laporan PageSpeed akan menampilkan Encode Images Efficiently yang dapat digunakan oleh temen temen untuk mengetahui gambar yang tepat untuk selanjutnya dioptimalkan dengan kompresi. Selain itu, laporan tersebut juga menampilkan potensi penghematan ukuran file gambar.
Tips dari ilalfa yaitu gunakan alat konversi dan kompresi gambar untuk menemukan kualitas yang tepat dan sesuai dengan harapan temen temen. Konversi beberapa gambar dengan nilai yang berbeda beda untuk menentukan kesesuaian kualitas yang tepat kemudian bandingkan gambar tersebut sebelum dan sesudah di konvert.
Sesuai saran dari Google temen temen bisa menggunkana Platform Squoosh.app untuk cara mudah mengkopres gambar yang dapat dibandingkan sesudah dan sebelum diubah.
No comments:
Post a Comment