Cara Mengoptimalkan Gambar Untuk WordPress, Panduan Lengkap

Cara Mengoptimalkan Gambar Untuk WordPress, Panduan Lengkap

Orang-orang di web tidak punya banyak waktu untuk mengkonsumsi data – karena ada begitu banyak yang terakhir. Ada begitu banyak data sehingga kami tidak punya waktu untuk membaca semuanya! Sebagai kurator konten untuk web modern, tugas Anda adalah memaksimalkan throughput. Semakin banyak Anda mengekspresikan dengan kata-kata yang lebih sedikit, semakin baik Anda dalam pekerjaan Anda.


Mengapa Gambar (sangat) Penting?

Ada banyak, banyak alasan mengapa Anda akan (dan harus) menggunakan gambar dalam posting dan artikel Anda:

  • Gambar berfungsi sebagai rangsangan visual untuk ajakan bertindak (CTA). CTA dapat berupa tugas apa pun yang Anda ingin pengunjung lakukan. CTA umum termasuk berlangganan buletin Anda, membagikan artikel Anda di media sosial atau membeli produk Anda.
  • Gambar meningkatkan koneksi yang penulis coba jalin dengan pembaca.
  • Gambar lebih banyak disampaikan melalui lebih sedikit.

Oleh karena itu, sangat penting bahwa kita menggunakan gambar yang tepat dalam presentasi kita (posting blog, laporan informal, presentasi PowerPoint yang sebenarnya, dll.) Untuk meninggalkan tanda di benak pembaca.!

Tapi tunggu! Ada masalah!

Gambar mengambil sekitar 63% dari bandwidth yang digunakan oleh situs web modern, sehingga semakin penting bahwa mereka dioptimalkan untuk kecepatan.

Penundaan satu detik dalam waktu pemuatan halaman dapat mengurangi tingkat konversi sebesar 7%

Kami telah menetapkan bahwa orang memiliki rentang perhatian yang pendek (salah satu kelemahan dari tingkat produksi konten modern). Bahkan jika Anda menggunakan gambar yang tepat, jika mereka tidak memuat dalam jangka waktu yang dapat diterima, bunga hilang.

10 Kesalahan Optimasi Gambar Paling Umum

Sebagian besar situs memiliki masalah – mereka menggunakan gambar yang sangat baik, tetapi cara gambar disajikan kepada pengunjung buruk. Ukuran besar, optimasi yang buruk, format yang salah, dimensi (ukuran) yang tidak perlu, gambar yang tidak responsif dan kesalahan SEO yang ceroboh, adalah beberapa masalah paling umum yang dihadapi web modern. Dalam artikel hari ini, kami akan membahas masalah ini!

1. Dimensi Besar

“Extra Fries” tidak selalu baik

Ini klasik. Misalkan Anda membutuhkan foto 150 × 150 piksel di halaman “Tim” situs Anda. Biasanya, Anda akan menggunakan headshot 5MP, mengeditnya sedikit dan akhirnya mengunggahnya.

Apakah Anda menemukan masalah? Beberapa orang langsung mengunggah 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 150x150px. Intinya, browser hanya menampilkan 0,0045% dari gambar asli!

Anda akhirnya menghabiskan 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 mengubah ukuran (dan dengan mengubah ukuran maksud saya berhemat) gambar ke dimensi yang diperlukan dan kemudian mengunggahnya!

ImageResize.org

Anda tidak perlu perangkat lunak mewah untuk melakukan ini – ada alat online gratis seperti ImageResize.org Anda dapat menggunakan untuk mengubah ukuran dan mengoptimalkan gambar dengan cepat. Unggah dan sesuaikan pengaturan foto Anda. Ketika Anda selesai mengunduh gambar yang dioptimalkan untuk digunakan di situs Anda. Mereka juga menawarkan yang cepat Kompresor Gambar jika Anda hanya ingin mengurangi ukuran file.

Alat yang Bermanfaat:

  • IrfanView adalah freeware yang sangat baik untuk mengubah ukuran gambar Anda dengan opsi tingkat lanjut seperti optimasi, tanda air dan batas.
  • ImageMagick adalah alat open-source 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 untuk menyeret seluruh folder dan mengoptimalkan banyak gambar dengan cepat.
  • TinyPNG adalah alat kompresi gambar online dengan API.

2. Format Gambar Salah

shutterstock_108312266

Format yang digunakan untuk gambar memainkan peran penting. Sebagai pedoman 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 terperinci, lihat ini jawaban StackOverflow yang luar biasa.

3. Tidak menggunakan JPEG Progresif

Baseline (Normal) JPG versus JPG Progresif

Baseline (Normal) JPG versus JPG Progresif

Untuk orang awam, JPEG terdiri dari dua jenis – Baseline dan Progressive. Secara visual, keduanya sama. Perbedaannya terletak pada cara mereka dimuat:

  • Baseline JPEG hanya memiliki satu lapisan – berisi seluruh gambar. Saat diminta, seluruh gambar dimuat sekaligus.
  • JPEG progresif menyusun gambar dengan banyak lapisan. Gambar JPEG Progresif dimuat lapis demi lapis, yang secara bertahap meningkatkan kualitas, pada akhirnya memberi Anda tampilan lossless.
IrfanView Mendukung Konversi Gelombang dengan JPEG Progresif

IrfanView Mendukung Konversi Gelombang dengan JPEG Progresif

Semua resizer gambar utama memungkinkan Anda untuk menyimpan gambar sebagai JPEG Progresif.

4. Tidak menggunakan Beban Malas

Pemuatan Malas sangat bagus penghematan sumber daya teknik di mana gambar dimuat hanya ketika pengunjung menggulir ke bawah ke bingkai tampilan gambar. Pertimbangkan sebuah artikel – “15 Mobil Paling Hemat Bahan Bakar di 2014”. Secara alami, artikel ini akan mengandung setidaknya 15 gambar. Dan terlepas dari ketinggian perangkat layar – monitor, tablet, atau smartphone, Anda tidak dapat memuat semua 15 gambar dalam bingkai tampilan. Anda harus menggulir ke bawah untuk melihat semua gambar.

Dengan Pemuatan Malas diaktifkan, gambar akan dimuat hanya ketika pengunjung berada di sekitar gambar. Dengan kata lain, gambar mulai dimuat tepat ketika Anda menggulir ke bawah untuk melihatnya. Namun, beberapa gambar pertama dimuat secara instan, karena Anda sudah berada dalam bingkai tampilan. Pemuatan Malas menghemat bandwidth di kedua ujungnya dan meningkatkan waktu muat! Anda dapat menggunakan Lazy Loading di WordPress dengan Plugin Pengaya BJ Lazy.

5. Tidak menggunakan CDN

jaringan cdn

Menggunakan Jaringan Pengiriman Konten (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 dilayani dari server yang berlokasi di Tokyo.

Ketika Anda memiliki lalu lintas yang cukup, Anda harus menyiapkan CDN dengan WordPress untuk menurunkan waktu muat Anda dan mendapatkan kinerja secara keseluruhan. Di sini, di WPExplorer, kami sarankan Cloudflare. Untuk situs yang baru lahir, kami akan merekomendasikan daftar layanan CDN gratis yang bisa Anda coba.

6. Tidak menyatakan Atribut ‘alt’

Atribut ‘alt’ menjelaskan gambar untuk mesin pencari. Teks yang Anda masukkan dalam bidang ini akan ditampilkan kepada pengguna jika gambar tidak dapat dimuat. Banyak orang cenderung membiarkan bidang ini kosong. Ini sangat merugikan untuk SEO, dan Anda kehilangan lalu lintas. Anda harus selalu mencoba memasukkan kata kunci situs Anda dalam tag alt gambar Anda.

7. Tidak Mengoptimalkan Gambar

pensil-krayon-poin

Gambar yang dioptimalkan lebih ringan 40% dari gambar normal. Ini meningkatkan waktu buka dan menghemat bandwidth. Dari daftar Freddy tentang Plugin Pengoptimalan Gambar WordPress Terbaik, 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 sini di WPExplorer untuk mengoptimalkan gambar yang ditampilkan sebelum mengunggahnya ke posting dan demo tema.

8. Gambar Responsif

Desain Web Responsif ada di sini

Desain Web Responsif ada di sini

Meskipun situs Anda responsif, bukan berarti gambar Anda. Itu berarti gambar header yang Anda gunakan untuk layar desktop 22 “juga disajikan ke iPhone 5”. Saat Anda mengunggah gambar, WordPress mengubah ukurannya menjadi beberapa versi – Gambar Kecil, Sedang, Ukuran Penuh, dll. Ini dapat diubah oleh pengembang. Tema yang dikodekan dengan baik akan melayani versi berukuran “Sedang” dari gambar, sehingga menghemat bandwidth.

Itu Picturefill.WP plugin akan mengganti tag gambar dengan yang baru elemen yang akan menyajikan gambar berbeda berdasarkan permintaan media. Ini cukup eksperimental (itu 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. Gambar takarir membantu pembaca memahami topik dengan lebih baik, sambil meningkatkan SEO Anda.

10. Nama File Gambar

Pikirkan nama file dari sudut pandang mesin pencari. Gunakan teks yang sama seperti yang Anda lakukan pada tag ‘title’ dari gambar. Juga, coba sertakan kata kunci Anda yang paling relevan dengan situs Anda.

Kesimpulan

pahlawan-11

SEO gambar sangat penting untuk situs web apa pun – lama atau baru. Orang yang menerapkan SEO gambar tepat (kadang-kadang bisa sangat biasa), berdiri untuk mendapatkan sejumlah besar lalu lintas organik (jenis lalu lintas terbaik) di jangka panjang.

Punya teknik optimasi yang luar biasa? Menembakkan!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map