Cara Mudah Menyajikan Gambar Skala di WordPress (Langkah demi Langkah)

Pernahkah Anda mengunjungi sebuah situs dan pergi dalam hitungan detik karena gambar tidak dimuat cukup cepat? Itu tepatnya apa yang mungkin dialami pengunjung Anda jika Anda tidak melayani gambar berskala di situs WordPress Anda. 

Masalah ini terjadi ketika gambar Anda terlalu besar untuk ukuran tampilan mereka, yang menyebabkan situs Anda memuat lambat dan berdampak negatif pada pengalaman pengguna.

Tapi don't khawatir, we've siap membantu! Ikuti tutorial cepat di bawah ini untuk belajar cara menyajikan gambar yang diubah ukurannya dengan mudah!

Mengapa Anda Harus Menyajikan Gambar yang Diubah Ukurannya?

Gambar yang diskalakan adalah gambar yang telah diubah ukurannya untuk menyesuaikan dimensi tepat di mana mereka akan ditampilkan di halaman web. Ini berbeda dari unggahan asli, yang biasanya memiliki ukuran dan resolusi jauh lebih besar.

Misalnya, gambar unggulan asli Anda mungkin berukuran 4000 x 3000 piksel, tetapi situs web Anda hanya menampilkannya pada 800 x 600 piksel. Jika gambar asli digunakan alih-alih versi yang diperkecil, situs Anda akan memuat lebih lambat.

Ketika gambar tidak diubah ukurannya dengan benar, browser harus mengubah ukuran secara manual secara real-time. Hal ini akan memperlambat pemuatan halaman, memaksa pengguna menunggu dan berpotensi meningkatkan tingkat pentalan.

Penting untuk menggunakan gambar yang diubah skalanya karena tidak melakukannya dapat menyebabkan beberapa masalah:

• Waktu muat yang tidak perlu, karena pengguna harus mengunduh file yang lebih besar dari yang diperlukan.
• Gambar yang berpixelasi atau buram, jika gambar terlalu kecil dan diperluas.
• Waktu pemrosesan yang meningkat, karena browser harus mengubah ukuran gambar secara langsung, menyebabkan penundaan dalam menampilkan konten.

Panduan Langkah-demi-Langkah

1. Gunakan Alat Pengedit Gambar

Metode ini menawarkan percepatan pengubahan ukuran gambar dengan menggunakan alat pengeditan. Anda dapat menggunakan alat seperti Adobe Photoshop untuk membuat gambar yang terukur dengan tepat. Photoshop memungkinkan penyesuaian yang luas sehingga Anda dapat menentukan dimensi piksel berdasarkan persyaratan ukuran.

Jika Anda mencari alternatif gratis, alat daring seperti PhotoPea adalah pilihan yang baik. Namun, untuk tutorial ini, kami akan fokus pada Photoshop karena fitur-fiturnya yang komprehensif.

Untuk mengubah ukuran gambar sebelum mengunggah, ikuti tutorial di bawah ini:

• Buka gambar Anda di Photoshop.
• Klik Gambar tab dan pilih Ukuran Gambar.

• Di kotak dialog yang muncul, ubah ukuran gambar sesuai dengan persyaratan tampilan webpage's. 

Sebagai contoh, jika gambar asli Anda berukuran 1281 x 493 px dan Anda ingin memperbesarnya menjadi 3600 x 2400 px, masukkan dimensi baru. 

• Ubah Resolusi menjadi 72 PPI untuk penggunaan web, atau 300 PPI jika Anda membutuhkan kualitas cetak tinggi.
• Kemudian, pilih metode resampling. Dua opsi paling cocok untuk optimasi web adalah:

• Klik OK untuk menerapkan perubahan. Gambar Anda sekarang telah diubah ukurannya.
• Untuk menyimpan gambar, buka File tab dan pilih Export.

• Klik Ekspor Sebagai dan pilih format file apa saja serta sesuaikan pengaturan untuk mencapai ukuran file terkecil tanpa kehilangan kualitas gambar terlalu banyak.

2. Manfaatkan Ukuran Gambar Bawaan WordPress's

Jika Anda lebih memilih untuk tidak menginstal perangkat lunak pihak ketiga, Anda dapat menggunakan editor gambar bawaan di WordPress. Dengan alat ini, Anda dapat melakukan tugas pengeditan gambar dasar seperti memotong, membalik, dan mengubah ukuran.

Anda dapat mengakses fitur ini dengan mengklik gambar apa pun di postingan atau perpustakaan media Anda. Selain itu, Anda dapat menentukan ukuran gambar khusus dengan memodifikasi file functions.php di tema Anda.

Untuk menyederhanakan, mari kita mulai dengan panduan dasar di bawah ini:

• Unggah gambar Anda ke postingan WordPress Anda. 

• Pilih gambar, lalu klik Ganti dan pilih Buka Perpustakaan Media dari menu.

• Di bilah sisi, klik Edit Gambar.

• Anda akan dibawa ke editor gambar. Klik pada Skala untuk mengubah ukuran gambar

• Masukkan dimensi baru untuk gambar Anda. Misalnya, ubah dari 1198 × 744 px menjadi 805 x 500 px. Rasio aspek dibatasi, sehingga nilai lainnya akan menyesuaikan secara otomatis berdasarkan lebar atau tinggi yang Anda masukkan.

• Klik Skala tombol untuk menerapkan perubahan.
• Gambar Anda sekarang telah diskalakan dan siap digunakan dalam posting Anda.

3. Manfaatkan Plugin

• Pasang dan aktifkan WP Meta SEO di situs WordPress Anda.

• Dari dasbor WordPress Anda, buka WP Meta SEO > Penyunting gambar.

• Buka pengaturan Image SEO & HTML Resize.

• Aktifkan opsi Pengubahan Ukuran Gambar Dinamis untuk memungkinkan WP Meta SEO secara otomatis mengubah ukuran gambar berdasarkan ukuran tampilan mereka.

• Tentukan nilai lebar dan tinggi maksimum untuk mengontrol bagaimana gambar diubah ukurannya di front end.

Setelah diaktifkan, WP Meta SEO akan secara otomatis menyesuaikan dimensi gambar ketika ditampilkan di situs Anda, memastikan ukuran gambar optimal tanpa intervensi manual. Pendekatan ini meningkatkan kecepatan halaman, meningkatkan kinerja SEO, dan memberikan pengalaman pengguna yang lebih baik—terutama untuk situs dengan banyak gambar. 

Untuk detail lebih lanjut, Anda dapat menjelajahi dokumentasi resmi dan ikhtisar fitur:

• WP Meta SEO Fitur SEO Gambar & Pengubahan Ukuran HTML
• Dinamis Dokumentasi Pengubahan Ukuran Gambar

4. Terapkan gambar responsif menggunakan atribut srcset

Atribut atribut srcset digunakan dalam tag di HTML untuk menyediakan sumber gambar yang berbeda untuk berbagai resolusi layar. Dengan menambahkan atribut ini, peramban dapat memilih gambar yang paling tepat berdasarkan perangkat pengguna.

Sebagai contoh, jika seorang pengguna mengakses situs web Anda pada perangkat seluler dengan tampilan beresolusi rendah, peramban akan memuat gambar beresolusi lebih rendah untuk memberikan pengalaman yang lebih mulus.

Jika Anda ingin mengetahui cara menyajikan gambar berskala secara manual, ikuti petunjuk di bawah ini:

• Buka file HTML website's melalui editor kode Anda.
• Temukan untuk gambar yang ingin Anda optimalkan.

• Edit tag dan tambahkan atribut srcset, seperti yang ditunjukkan pada gambar. 

Dalam contoh ini, 100w dan 400w menunjukkan lebar sebenarnya dari setiap gambar. Browser akan menggunakan informasi ini untuk memutuskan gambar mana yang akan dimuat untuk perangkat user's.

• Simpan perubahan dan muat ulang situs web Anda untuk melihat hasilnya.

Cara Mengidentifikasi Gambar yang Tidak Diskalakan

Setelah mempelajari cara mengoptimalkan gambar, penting juga untuk mengidentifikasi gambar mana yang masih perlu diubah ukurannya dan mana yang sudah dioptimalkan.

Ada dua cara umum untuk memeriksa gambar yang belum diubah ukurannya, baik dengan menggunakan alat atau melakukan audit situs secara rutin. Ikuti tutorial di bawah ini:

1. Menggunakan Google PageSpeed Insights

Ini adalah alat penting yang menawarkan saran untuk membantu mempercepat situs web Anda. Saran-saran ini dihasilkan melalui analisis mendalam menggunakan Google Lighthouse. Salah satu saran umum adalah menyesuaikan ukuran gambar yang ditandai sebagai tidak terukur dengan benar.

Untuk melakukan pemeriksaan cepat, Anda dapat mengikuti instruksi di bawah ini:

• Buka Google PageSpeed Insight di https://pagespeed.web.dev.

• Tempelkan seluruh URL halaman web Anda ke dalam bidang input.
• Klik Analisis untuk memulai proses.
• Tunggu hingga selesai. PSI kemudian akan memberikan Anda laporan kinerja.
• Gulir ke bawah untuk menemukan entri berlabel Ukuran gambar dengan tepat.
• Jika ada, Anda akan melihat daftar gambar yang tidak terukur yang ditemukan di situs Anda.

Jika salah satu gambar Anda ditandai sebagai tidak terukur, Google PageSpeed Insights dapat menawarkan beberapa saran, termasuk:

• Menyajikan gambar dalam format generasi berikutnya, seperti WebP, AVIF, JPEG XR, atau JPEG2000.
• Mengubah ukuran gambar dengan tepat untuk memenuhi berbagai persyaratan ukuran, seperti mengubah ukuran menjadi 1000 x 1000 px untuk halaman detail produk, atau 400 x 400 px untuk halaman daftar produk.
• Menggunakan lazy loading, sehingga hanya gambar yang terlihat di layar user's dimuat segera.

2. Melakukan Audit Situs Rutin

Melakukan audit situs secara rutin memberikan Anda wawasan mendalam tentang kesehatan dan kinerja situs Anda.

Saat melakukan audit, cobalah untuk memprioritaskan peninjauan arsitektur situs Anda dan pengalaman pengguna untuk mengungkap potensi masalah apa pun.

Proses ini juga dapat mengungkap peluang optimasi gambar. Pastikan untuk menguji situs Anda di berbagai perangkat, seperti ponsel, tablet, dan desktop, untuk memastikan pengalaman yang konsisten.

Juga, perhatikan apakah gambar sudah diubah ukurannya dengan benar. Jika tidak, jangan lupa untuk mengikuti tutorial di atas.

Kesimpulan

Menggunakan gambar yang diubah ukurannya sangat penting untuk mengoptimalkan kinerja situs, terutama pada perangkat seluler. Ini membantu halaman Anda memuat lebih cepat dan mengurangi tingkat pentalan.

Namun, memperbesar sejumlah besar gambar dapat memakan waktu. Pertimbangkan menggunakan plugin seperti WP Media Folder, yang memungkinkan Anda secara otomatis mengubah ukuran, mengatur, dan mengganti gambar sambil memastikan mereka tetap dioptimalkan untuk kinerja.