Panduan Blogging: Cara Memaksimalkan Gambar Untuk Website

Panduan Blogging: Cara Memaksimalkan Gambar Untuk Website

CATATAN: Ini hanya salah satu cara untuk mengukur dan mengkompres gambar untuk website kita. Ada banyak cara lain yang bisa dipakai selain ini.


Cara Memaksimalkan Gambar Untuk Website – Langkah Demi Langkah

Langkah 1) Menganalisis situs dengan GTmetrix 

Langkah pertama dari tutorial “cara memaksimalkan gambar untuk website“, buka GTmetrix.com lalu masukan url website kita dan klik Analyze. Setelah laporan selesai, lihat tab PageSpeed.

 

Kita punya dua PR. Optimize Images dan Serve Scaled Image (Bagian ini akan memperluas dan menampilkan daftar gambar yang perlu diskalakan).

Hal ini bisa terjadi ketika ukuran asli gambar yang kita upload misalnya berukuran 2000 × 1095, namun ketika tampil di browser, diskalakan menjadi 524 × 287. Tentunya ini menambah pekerjaan browser sebelum menampilkan kepada pengguna. Jika kita bisa menyesuaikan ukuran gambar ini, kita bisa mengurangi filesize secara signifikan jika kita menyajikan gambar berukuran lebih tepat.


Langkah 2) Cari tahu ukuran tampilan maksimal gambar

Sebagian besar situs yang ada saat ini adalah responsif. Kita harus mengetahui ukuran gambar maksimal yang harus disajikan.

Buka postingan yang mengandung gambar lalu perlahan ubah ukuran browser (Di panduan ini, saya menggunakan Chrome ) dan perhatikan “break point” yaitu tempat gambar kita berubah menjadi besar. Jika sudah, berhenti mengecilkan browser kita.

Banyak tema responsif memiliki banyak break point, jadi terus lakukan ini sampai Anda melihat ukuran terbesar yang ditampilkan pada gambar. Secara umum, ini adalah ukuran maksimum yang harus kita upload ke website kita.

Cara untuk mengetahui dimensi gambarnya tinggal klik kanan pada gambar dan klik “Inspect“. Sorot kursor pada code yang ditunjukkan. di sana akan muncul gambar dan kode untuk gambar yang kita sorot serta dimensi yang disajikannya.

Memaksimalkan Gambar Untuk Website Dedi Purnomo

Gambar diatas adalah contoh postingan saya yang menggunakan gambar tidak sesuai dengan yang ditampilkan di browser. Ukuran “Natural 1280 x 640” adalah dimensi sebenarnya dari gambar atau gambar yang kita upload.

Perhatikan dimensi pertama yang kita lihat (dalam hal ini adalah 960 ×480) – saya akan menyebutnya ukuran tampilan maksimum .

Hal penting yang perlu diperhatikan

  • Jika gambar kita selalu mengikuti perataan ukuran browser , bahkan pada layar yang dimaksimalkan, ini berarti bahwa gambar kemungkinan berada dalam wadah yang tidak memiliki ukuran layar maksimum .
    • Hal terbaik yang dapat kita lakukan adalah mengekspor kualitas terbaik mengkompres gambar untuk menghemat filesize.
  • Jika gambar tidak berubah ukuran saat Anda memperbesar ukuran browser , berarti ukuran layar maksimumnya mungkin sudah maksimal
    • Catat dimensi-dimensi itu dan edit gambar sebelum diupload dengan cara rescale gambar kita sesuai dengan ukuran-ukuran itu.
  • Jika menggunakan WordPress , Anda mungkin melihat “srcset,” bersama dengan daftar URL gambar.
    • Versi WordPress selanjutnya secara otomatis menggunakan “srcset” untuk menangani gambar dengan skala yang terlalu banyak.
    • Anda seharusnya tidak perlu melakukan apapun di sini, karena tema WordPress harus menampilkan gambar berukuran berbeda pada resolusi layar yang berbeda.
    • Kita mungkin akan mendiskusikan “srcset” dalam artikel terpisah. Untuk saat ini, Anda bisa membaca lebih lanjut tentang “srcset” di sini .

Langkah 3) Ubah ukuran gambar ke ukuran tampilan maksimum

Cara Memaksimalkan Gambar Untuk Website selanjutnya yaitu gunakan editor foto (Photoshop, GIMP, dll) dan ubah ukuran dimensi foto hingga ukuran tampilan maksimal.

memaksimalkan gambar untuk wordpress

Gunakan editor gambar untuk mengubah ukuran gambar kita ke ukuran tampilan maksimum. Dalam website saya, ukuran maksimumnya adalah 960 x x480 px.

Ekspor gambar Anda untuk web, tergantung pada jenis grafisnya:

  • Foto dan gambar detail berwarna tinggi – Gunakan JPG.
    • Sesuaikan dengan kebutuhan sehingga ukuran tidak terlalu besar namun pesan yang ingin disampaikan tidak terganggu.
  • Logo dan grafis dasar dengan sedikit warna atau transparansi – Gunakan PNG.
    • PNG adalah format lossless, jadi tidak ada penyesuaian kualitas untuk dibuat.

Hal penting yang perlu diperhatikan

  • Jika ingin memastikan kualitas maksimum, kita dapat memilih dimensi ukuran tampilan maksimal 2x.
    • Misalnya, gambar dengan ukuran layar maksimum 400 x 200, Anda bisa mengubah ukuran gambar menjadi 800 x 400. Nakal dikit.. Hehee

Langkah 4) Memaksimalkan Gambar Untuk Website – Kompres gambarnya

Sebenarnya pada langkah ke-3 di atas, kita sudah banyak menghemat size. Tapi jika ingin lebih hemat, silahkan kunjungi Kraken.io atau Optimizilla.com. Upload gambar yang ingin dikompres dan unduh versi yang sudah dioptimalkan. Kita akan melihat penurunan substansial dalam filesize.

 

Baca Juga  TOP 10 Manfaat dari Aktifitas Blogging

Langkah 5) Ganti gambar yang tidak dioptimalkan dengan yang baru kita optimalkan

Langkah ini dilakukan jika sudah ada gambar yang terupload di website kita namun ukurannya tidak terlalu besar. Hal ini pasti aka menghabiskan banyak waktu dan pekerjaan. Tapi memang begini cara yang baik jika ingin website kita tidak lemot karena keberatan gambar.

Ganti atau masukkan kembali gambar kita dengan ukuran asli atau penuh untuk mempertahankan pengoptimalan yang kita lakukan pada gambar. Jika semua langkah ini sudah dijalankan. InsyaAllah kita akan mendapatkan score yang baik di pengukur kecepatan baik gtmetrix ataupun di Testmysite milik Google.

 

Sekian tutorial Cara Memaksimalkan Gambar Untuk Website. Semoga bermanfaat dan Selamat mencoba. Saya sudah mencoba dan hasilnya cukup memuaskan.

Salam blogger Indonesia.

Post Comment