Cara Mengoptimalkan Gambar Untuk WordPress, Panduan Lengkap
Orang-orang di web tidak mempunyai banyak waktu untuk menggunakan data – karena jumlah data yang tersedia sangat banyak. Ada begitu banyak data sehingga kami tidak punya waktu untuk membaca semuanya! Sebagai kurator konten untuk web modern, tugas Anda adalah memaksimalkan hasil. Semakin banyak Anda mengungkapkannya dengan lebih sedikit kata, semakin baik Anda dalam pekerjaan Anda.
Mengapa Gambar (sangat) Penting?
Ada banyak sekali alasan mengapa Anda ingin (dan harus) menggunakan gambar dalam postingan dan artikel Anda:
- Gambar berfungsi sebagai rangsangan visual untuk ajakan bertindak (CTA). CTA dapat berupa tugas apa pun yang Anda ingin pengunjung Anda lakukan. CTA umum termasuk berlangganan buletin Anda, membagikan artikel Anda melalui media sosial, atau membeli produk Anda.
- Gambar meningkatkan hubungan yang ingin dibangun penulis dengan pembaca.
- Gambar menyampaikan lebih banyak hal melalui lebih sedikit.
Oleh karena itu, pada dasarnya penting bagi kita untuk menggunakan gambar yang tepat dalam presentasi kita (postingan blog, laporan informal, presentasi PowerPoint aktual, dll.) agar dapat meninggalkan kesan di benak pembaca!
Tapi tunggu! Ada masalah!
Gambar menghabiskan sekitar 63% bandwidth yang digunakan oleh situs web modern, jadi semakin penting untuk mengoptimalkan kecepatannya dengan benar.
Penundaan satu detik pada waktu muat halaman dapat mengurangi tingkat konversi sebesar 7%
Kami telah membuktikan bahwa orang-orang memiliki rentang perhatian yang pendek (salah satu kelemahan dari tingkat produksi konten modern). Bahkan jika Anda menggunakan gambar yang tepat, jika gambar tersebut tidak dimuat dalam jangka waktu yang dapat diterima, minat akan hilang.
Mayoritas situs mempunyai masalah yang sama – mereka menggunakan gambar yang sangat bagus, namun cara gambar tersebut disajikan kepada pengunjung buruk. Ukuran besar, pengoptimalan yang buruk, format yang salah, dimensi (ukuran) yang terlalu besar, gambar tidak responsif, dan kesalahan SEO yang ceroboh, adalah beberapa masalah paling umum yang dihadapi web modern. Dalam artikel hari ini, kami akan memberi Anda 10 tips pengoptimalan gambar mudah yang dapat Anda gunakan untuk menghindari masalah ini.
1. Ubah Ukuran Gambar dengan Dimensi Besar
“Extra Fries” tidak selalu baik
Ini klasik. Misalkan Anda memerlukan foto berukuran 150×150 piksel di halaman “Tim” situs Anda. Biasanya Anda akan menggunakan headshot 5MP, mengeditnya sedikit, dan terakhir mengunggahnya.
Apakah Anda menemukan masalahnya? Beberapa orang langsung mengupload gambar 5MP yang sebenarnya! Tema WordPress akan memuat seluruh gambar 5MP (yaitu 5 x 10^6 piksel) dan meminta browser untuk mengecilkannya ke dimensi yang diperlukan yaitu 150x150 piksel. Intinya, browser hanya menampilkan 0,0045% gambar aslinya!
Anda akhirnya membuang-buang bandwidth Anda dan pengunjung Anda (bahkan jika Anda menyajikan gambar melalui Jaringan Pengiriman Konten seperti Stackpath CDN), menghabiskan lebih banyak ruang hard disk dan meningkatkan waktu buka. Tidak ada fitur yang Anda inginkan di situs Anda.
Selalu ubah ukuran (dan maksud saya ubah ukuran, perkecil) gambar ke dimensi yang diperlukan, lalu unggah!
Anda tidak memerlukan perangkat lunak mewah untuk melakukan ini – ada alat online gratis seperti ImageResize.org yang dapat Anda gunakan untuk mengubah ukuran dan mengoptimalkan gambar Anda dengan cepat. Cukup unggah dan sesuaikan pengaturan foto Anda. Setelah selesai unduh gambar yang dioptimalkan untuk digunakan di situs Anda. Mereka juga menawarkan Kompresor Gambar cepat jika Anda hanya ingin mengurangi ukuran file.
Alat Bermanfaat:
- IrfanView adalah freeware luar biasa untuk mengubah ukuran gambar Anda secara batch dengan opsi lanjutan seperti pengoptimalan, tanda air, dan batas.
- ImageMagick adalah alat sumber terbuka canggih yang dapat digunakan dalam berbagai bahasa pemrograman dan sistem operasi. Anda dapat menulis aplikasi Anda sendiri atau menggunakannya melalui baris perintah.
- ImageOptim (Mac) memungkinkan Anda menyeret seluruh folder dan mengoptimalkan banyak gambar dengan cepat.
- TinyPNG adalah alat kompresi gambar online dengan API.
2. Gunakan Format Gambar yang Benar
Format yang digunakan untuk gambar memainkan peran penting. Sebagai aturan umum, gunakan PNG untuk grafik vektor dan gambar yang dihasilkan komputer seperti clip art, dll. Gunakan JPEG untuk foto atau gambar dengan berbagai warna. Untuk penjelasan mendetail, lihat jawaban StackOverflow yang mengagumkan ini.
3. Gunakan JPEG Progresif
JPG Dasar (Normal) versus JPG Progresif
Bagi orang awam, JPEG terdiri dari dua jenis – Baseline dan Progresif. Secara visual, keduanya sama. Perbedaannya terletak pada cara pemuatannya:
- JPEG dasar hanya memiliki satu lapisan – berisi seluruh gambar. Jika diminta, seluruh gambar dimuat sekaligus.
- JPEG progresif menyusun gambar dengan banyak lapisan. Gambar JPEG Progresif dimuat lapis demi lapis, yang secara bertahap meningkatkan kualitasnya, pada akhirnya memberi Anda tampilan tanpa kehilangan.
IrfanView Mendukung Konversi Batch dengan JPEG Progresif
Semua pengubah ukuran gambar utama memungkinkan Anda menyimpan gambar sebagai JPEG Progresif.
4. Aktifkan Beban Lambat
Pemuatan Lambat adalah teknik penghematan sumber daya yang luar biasa di mana gambar dimuat hanya ketika pengunjung menggulir ke bawah ke bingkai tampilan gambar. Simak artikel – “15 Mobil Paling Irit Bahan Bakar Tahun 2014”. Tentu saja, artikel ini akan berisi setidaknya 15 gambar. Dan berapa pun ketinggian perangkat tampilan – monitor, tablet, atau ponsel cerdas, Anda tidak dapat memuat seluruh 15 gambar dalam bingkai tampilan. Anda harus menggulir ke bawah untuk melihat semua gambar.
Dengan mengaktifkan Lazy Loading, gambar hanya akan dimuat ketika pengunjung berada di sekitar gambar. Dengan kata lain, gambar mulai dimuat tepat saat Anda menggulir ke bawah untuk melihatnya. Namun, beberapa gambar pertama dimuat secara instan, karena Anda sudah berada dalam bingkai tampilan. Pemuatan Lambat menghemat bandwidth di kedua sisi dan meningkatkan waktu muat! Anda dapat menggunakan Lazy Loading di WordPress dengan Plugin BJ Lazy Load.
5. Tambahkan CDN
Menggunakan Content Delivery Network (CDN) akan menyajikan gambar dari server yang secara fisik paling dekat dengan lokasi pengunjung. Jika pengunjung dari India meminta gambar, dan CDN memiliki POP (titik kehadiran, atau hanya server) di Tokyo dan New York, gambar akan disajikan dari server yang berlokasi di Tokyo.
Ketika Anda memiliki lalu lintas yang cukup besar, Anda harus menyiapkan CDN dengan WordPress untuk mengurangi waktu buka dan mendapatkan kinerja secara keseluruhan.
Di sini, di WPExplorer, kami menggunakan Cloudflare, dan kami memiliki daftar tambahan layanan CDN gratis yang direkomendasikan yang mungkin ingin Anda periksa. Namun menyiapkan CDN sendiri bisa jadi rumit, dan di situlah plugin bisa berguna.
Publisitas Pembongkaran Media
Pilihan yang bagus adalah plugin Publitio Offload Media yang memungkinkan Anda menyimpan file media di manajer media berbasis cloud Publitio. Dengan plugin terinstal, Anda dapat dengan mudah memindahkan seluruh perpustakaan media dari server Anda, dan bahkan mengoptimalkan kualitas gambar dan video saat Anda melakukannya. Setelah dipindahkan, gambar disajikan dengan cepat dari Publitio CDN. Ini akan mengosongkan banyak ruang server dan benar-benar dapat mempercepat situs Anda (terutama jika Anda menggunakan paket hosting murah dengan ruang terbatas). Bahkan ada tombol Sinkronkan Sekarang yang sederhana untuk secara otomatis menambahkan media baru ke cloud saat Anda mengedit postingan baru. Dan paket Publitio premium mencakup fitur tambahan untuk CNAME khusus, banyak tanda air, dan bahkan enkripsi video.
6. Deklarasikan Atribut 'alt'
Atribut 'alt' mendeskripsikan gambar untuk mesin pencari. Teks yang Anda masukkan di kolom ini akan ditampilkan kepada pengguna jika gambar tidak dapat dimuat. Banyak orang cenderung membiarkan kolom ini kosong. Ini sangat merugikan SEO, dan Anda kehilangan traffic. Anda harus selalu mencoba memasukkan kata kunci situs Anda ke dalam tag alt gambar Anda.
7. Optimalkan Kompres Gambar
Gambar yang dioptimalkan 40% lebih terang dibandingkan gambar normal. Ini meningkatkan waktu muat dan menghemat bandwidth. Dari daftar Plugin Pengoptimalan Gambar WordPress Terbaik Freddy, kami akan merekomendasikan WPSmush.it untuk mengoptimalkan gambar Anda. Kraken.io juga merupakan opsi online yang bagus untuk mengompresi gambar dalam sekejap. Kami menggunakannya sepanjang waktu di WPExplorer untuk mengoptimalkan gambar unggulan sebelum mengunggahnya ke postingan dan demo tema.
8. Gambar Responsif
Desain Web Responsif ada di sini
Meskipun situs Anda responsif, bukan berarti gambar Anda responsif. Itu berarti gambar header yang Anda gunakan untuk layar desktop 22″ juga disajikan ke iPhone 5″. Saat Anda mengunggah gambar, WordPress akan mengubah ukurannya menjadi beberapa versi – Gambar Kecil, Sedang, Ukuran Penuh, dll. Ini dapat diubah oleh pengembang. Tema yang dikodekan dengan baik akan menyajikan versi gambar berukuran “Sedang”, sehingga menghemat bandwidth.
Plugin Picturefill.WP akan menggantikan tag gambar dengan elemen <picture> baru yang akan menyajikan gambar berbeda berdasarkan kueri media. Ini cukup eksperimental (yang berarti ada bug) dan tidak boleh digunakan di situs langsung.
9. Keterangan Gambar
Teks tidak selalu diperlukan, meskipun dalam beberapa kasus, diperlukan – seperti tangkapan layar dalam tutorial. Memberi teks pada gambar membantu pembaca memahami topik dengan lebih baik, sekaligus meningkatkan SEO Anda.
10. Nama File Gambar
Pikirkan tentang nama file dari sudut pandang mesin pencari. Gunakan teks yang sama seperti yang Anda gunakan pada tag 'judul' gambar. Selain itu, coba sertakan kata kunci yang paling relevan dengan situs Anda.
Kesimpulan
SEO Gambar sangat penting untuk situs web mana pun – lama atau baru. Orang-orang yang menerapkan SEO gambar dengan benar (terkadang hal ini bisa menjadi hal biasa), akan memperoleh sejumlah besar lalu lintas organik (jenis lalu lintas terbaik) dalam jangka panjang.
Punya teknik pengoptimalan yang mengagumkan? Melontarkan!