Cara Mengoptimalkan Gambar Untuk WordPress [Panduan Utama]

Jika Anda memiliki situs WordPress, Anda menyadari kesulitan dalam memeliharanya. Kadang-kadang Anda mungkin menghabiskan berjam-jam untuk sesuatu yang seharusnya hanya membutuhkan beberapa menit untuk dicapai. Ini dapat terjadi jika situs Anda lambat dan membengkak karena gambar yang terlalu besar atau dioptimalkan dengan buruk.

Selain itu, menggunakan teknik pengoptimalan mesin telusur akan membantu pengunjung menemukan Anda dan menyimpannya di situs web Anda. Mengoptimalkan gambar Anda untuk web adalah salah satu praktik tersebut.

Pertimbangkan setiap piksel sebagai area yang memungkinkan untuk pengoptimalan setiap kali Anda mendesain atau mengedit gambar. Dibutuhkan waktu dan upaya untuk mempertimbangkan piksel sebagai bagian individu, tetapi itu sepadan dengan usaha.

Namun, ada beberapa cara untuk mengoptimalkan gambar di WordPress. Ingatlah bahwa tujuannya adalah untuk mengurangi ukuran file tanpa mengurangi kualitas gambar.

Posting ini akan mengajarkan Anda cara mengoptimalkan gambar WordPress Anda dan membebaskan lebih banyak waktu untuk aktivitas lain.

Apa itu Optimasi Gambar?

Ini adalah proses mengurangi ukuran file gambar tanpa mempengaruhi kualitasnya dan menerapkan teknik SEO gambar yang tepat. Gambar yang dioptimalkan lebih mudah disimpan di hard drive atau diunggah ke Internet. Selain itu, ia memiliki lebih sedikit potensi masalah karena kecepatan unduh yang lambat.

Ukuran gambar Anda memiliki dampak signifikan pada waktu pemuatan situs web Anda. Umumnya, semakin besar gambar, semakin lama waktu yang dibutuhkan browser pengunjung untuk memuat. Ini dapat membuat pengunjung Anda frustrasi dan dapat menyebabkan mereka meninggalkan situs web Anda.

Anda harus mengikuti beberapa tips pengoptimalan penting untuk memastikan bahwa gambar Anda dioptimalkan untuk kinerja.

Manfaat Optimasi Gambar

Untuk menjadi webmaster yang sukses, Anda perlu memahami cara kerja gambar di situs web. Anda mungkin juga diminta untuk mengoptimalkan beberapa gambar dari waktu ke waktu.

Manfaat optimasi gambar adalah:

• Waktu Muat Halaman Lebih Cepat: Gambar yang dioptimalkan dimuat dengan cepat, diterjemahkan ke dalam situs yang memuat lebih cepat. Ini sangat penting bagi pengguna seluler, yang cenderung meninggalkan situs web yang terlalu lama dimuat.
• Peningkatan peringkat SEO: Gambar yang dioptimalkan juga membantu peringkat SEO situs Anda. Google menggunakan kecepatan pemuatan halaman Anda sebagai faktor peringkat, jadi mengoptimalkan gambar Anda dapat membantu Anda mendapatkan peringkat lebih tinggi dalam hasil pencarian.
• Mengurangi Penggunaan Bandwidth: Gambar yang dioptimalkan menggunakan bandwidth yang lebih sedikit, yang dapat menghemat uang untuk tagihan hosting Anda.
• Peningkatan Pengalaman Pengguna: Situs web yang dioptimalkan dengan baik memberikan pengalaman pengguna yang lebih baik, dengan pemuatan halaman yang lebih cepat dan kinerja mesin telusur yang lebih baik.
• Mengurangi waktu pengunduhan seluler: Gambar yang dioptimalkan juga dapat membantu membuat situs Anda ramah seluler, penting untuk peringkat Google dalam penelusuran seluler.
• Kepuasan Pelanggan: Pengalaman pengguna yang lebih baik meningkatkan kepuasan pelanggan, yang mengarah ke penjualan yang lebih tinggi dan lebih banyak pelanggan tetap.

14 Hal Penting Untuk Mengoptimalkan Gambar Untuk Web

Akan lebih baik untuk mempertimbangkan banyak faktor saat mengoptimalkan gambar untuk penggunaan web. Ada banyak jenis file yang berbeda dan beberapa cara berbeda untuk mengoptimalkannya. Berikut ini adalah beberapa hal yang perlu dipertimbangkan saat mengoptimalkan gambar untuk web.

Kualitas vs. Ukuran:

Kualitas gambar selalu penting, tetapi Anda juga harus mempertimbangkan ukuran file saat mengoptimalkan penggunaan web. Akan lebih baik untuk menjaga ukuran file gambar Anda sekecil mungkin tanpa mengorbankan kualitas untuk mempercepat waktu pemuatan di halaman web.

Resolusi standar untuk gambar di web adalah 72 DPI (Dots Per Inch). Oleh karena itu, disarankan untuk menyimpan gambar sebagai JPG daripada PNG, karena jenis file ini lebih kecil.

Selain itu, akan lebih baik jika Anda menggunakan kedalaman warna serendah mungkin tanpa mengurangi kualitas gambar. Kedalaman warna standar adalah 24-bit , yang dapat diubah di properti file.

Format Berkas Gambar:

Untuk menentukan format gambar mana yang harus dipilih, perlu memahami berbagai gambar dan tujuannya. Anda harus menyimpan file sebagai JPG , tetapi saat mengoptimalkan gambar untuk web, pilih PNG-8 atau PNG-24.

Umumnya, file PNG paling baik untuk gambar dengan banyak warna dan latar belakang transparan, sedangkan file JPEG paling baik untuk gambar dengan banyak detail.

Oleh karena itu, Anda harus menggunakan format PNG untuk gambar dengan latar belakang transparan dan JPEG untuk gambar dengan banyak detail untuk mengoptimalkan file gambar Anda untuk web.

Ukuran & Dimensi File:

Saat mengoptimalkan gambar untuk web, dua faktor utama yang perlu dipertimbangkan adalah ukuran file dan dimensi. Lebih baik bereksperimen dengan salah satu faktor ini sebelum mengubah yang lain, sehingga Anda dapat melihat apa yang membantu tujuan Anda memiliki ukuran file yang lebih kecil atau gambar yang lebih besar.

File gambar besar dapat menyebabkan situs web berjalan lambat , jadi Anda perlu mengubah ukuran gambar sebelum mengunggahnya. Dimensi yang direkomendasikan untuk gambar pada halaman web adalah lebar 600-800 piksel dan tinggi 500-600 piksel.

Lebih signifikan dari ini kemungkinan besar akan menyebabkan gambar diubah ukurannya oleh browser, yang mengakibatkan hilangnya kualitas.

Rank Math sangat cocok untuk menyesuaikan resolusi gambar Anda secara otomatis. Ini akan menambahkan dimensi gambar untuk Anda sehingga Anda tidak perlu khawatir tentang dimensinya.

Tingkatkan SEO Gambar:

Setiap gambar yang Anda unggah ke situs web Anda harus berfungsi sebagai sumber informasi untuk mesin pencari. File gambar dengan lebih banyak detail lebih baik untuk optimasi mesin pencari.

Praktik SEO gambar yang paling menarik adalah:

• Optimalkan Teks Judul Gambar: Saat menyimpan gambar Anda, pastikan untuk memberi mereka judul yang informatif. Ini akan muncul sebagai tooltip ketika kursor melayang di atas gambar. Selain itu, bermanfaat bagi mesin pencari untuk mempelajari gambar.
• Gunakan tag Alt: Mesin pencari juga menggunakan tag alt saat mengindeks gambar. Teks alt tag harus disesuaikan untuk setiap gambar dan menjelaskan apa yang ada di gambar seakurat mungkin.
• Gunakan Nama File Gambar yang Tepat: Jika memungkinkan, nama file gambar Anda juga harus deskriptif dan menyertakan kata kunci. Saat bekerja dengan perangkat lunak pengedit gambar, simpan gambar Anda dengan nama file deskriptif.

Catatan- Jika Anda menggunakan plugin Rank Math WordPress, gambar Anda akan dioptimalkan untuk SEO, dan nama file gambar serta tag alt akan secara otomatis menyertakan kata kunci.

Kompresi yang tepat:

Ini adalah faktor kunci lain yang perlu dipertimbangkan saat mengoptimalkan gambar Anda. Anda harus mengompres gambar Anda sebanyak mungkin sebelum mengunggahnya ke server.

Anda perlu menggunakan alat kompresi seperti Photoshop atau GIMP untuk melakukan ini. Atau, Anda dapat menggunakan alat gratis seperti TinyJPG dan ImageOptim . Itu selalu disarankan untuk memiliki gambar terkompresi di situs web Anda untuk mempercepat waktu pemuatan.

Atau, Anda dapat menggunakan plugin seperti ShortPixel atau WP-Optimize untuk mengompresi gambar Anda secara otomatis saat diunggah ke situs web Anda. Plugin ini direkomendasikan untuk siapa saja yang ingin mengoptimalkan gambar di situs web mereka.

Anda harus mengingat fakta berikut saat mengompresi gambar:

• Lossy : Kompresi lossy adalah jenis kompresi yang menghapus beberapa data dari gambar untuk membuat file lebih kecil. Jenis kompresi ini sering digunakan untuk gambar yang tidak akan mengalami penurunan kualitas yang nyata.
• Lossless : Kompresi lossless adalah bentuk kompresi yang menghilangkan beberapa informasi yang berlebihan tanpa mengurangi kualitas konten. Jenis kompresi ini sering digunakan untuk gambar yang perlu mempertahankan kualitasnya setelah kompresi, seperti gambar JPEG lossless.

Anda dapat mengetahui lebih detail tentang kompresi lossless iklan lossy dari blog ShortPixel.

Sajikan Gambar Dalam Format Next-Gen:

Secara default, browser akan mencoba memuat gambar dalam format yang sama dengan tempat mereka disimpan. Misalnya, gambar JPEG dimuat saat URL berisi .jpg. Namun, Anda dapat memaksa browser untuk memuat format gambar yang berbeda menggunakan ekstensi file yang benar.

Misalnya, jika Anda memiliki gambar JPEG, Anda dapat mengubah ekstensi ke .png, dan browser akan memuat gambar itu.

Anda dapat melakukan ini dengan menggunakan plugin WordPress JPG ke PNG. Dengan plugin ini, Anda akan secara otomatis mengubah semua gambar JPG Anda menjadi file PNG. Anda dapat mengikuti panduan tentang cara mengonversi gambar PNG ke JPG di WordPress.

Anda dapat dengan mudah menemukan gambar penyajian dalam format generasi berikutnya menggunakan GtMatrix atau alat wawasan kecepatan halaman Google.

Catatan- Secara umum, adalah bijaksana untuk menyimpan gambar sebagai kedua jenis file untuk dilihat oleh browser yang mengenali ekstensi file yang berbeda. Dengan demikian, jika file gagal dimuat, Anda dapat mengganti JPEG yang rusak dengan PNG tanpa harus mengunggah ulang gambar.

Gabungkan Gambar Menggunakan CSS Sprite:

Kombinasi gambar secara tradisional dilakukan dengan menggunakan perangkat lunak pengedit gambar. Namun, sekarang diketahui bahwa metode sprite CSS juga dapat digunakan untuk menggabungkan gambar.

Prosesnya melibatkan pembuatan gambar kosong dan memuat gambar yang ingin Anda gabungkan ke dalamnya pada posisi yang berbeda. Kemudian, dengan menggunakan CSS, masing-masing gambar individual ini dapat diposisikan di atas area yang sama dari gambar baru.

Oleh karena itu, browser dapat mengunduh satu file gambar daripada beberapa gambar. Ini sangat penting untuk perangkat seluler, karena mereka biasanya memiliki koneksi internet yang lebih lambat. Anda dapat melakukan ini dengan generator sprite CSS.

Nonaktifkan Tautan Panas Gambar:

Menautkan gambar dengan cepat menyiratkan bahwa siapa pun dapat mengambil gambar Anda dan mempublikasikannya di situs web mereka. Akibatnya, Anda akan mengalami kehilangan bandwidth yang mengganggu karena gambar akan diunduh dari server Anda ke server lain. Anda dapat mencegahnya dengan menggunakan perlindungan hotlink untuk gambar Anda.

Anda dapat mengonfigurasi perlindungan hotlink gambar melalui akun cPanel Anda. Prosesnya sangat mudah.

• Anda akan melihat ikon berlabel Hotlink Protection di bawah tab Security.
• Klik pada ikon ini untuk mengakses jendela berikut.
• Klik tombol Enable untuk mencegah gambar Anda di-hotlink.

Catatan- Jika Anda adalah pengguna Cloudflare, Anda dapat mencegah gambar Anda di-hotlink dengan mengaktifkan opsi " Perlindungan Hotlink ".

Gambar Tembolok:

Untuk situs web apa pun, ini penting. Anda harus menyimpan gambar Anda dalam cache sehingga orang dapat melihatnya lebih cepat. Dalam kebanyakan kasus, pengunjung situs web yang ada memiliki cache ini di browser mereka, tetapi jika ada masalah dengan hosting Anda, Anda mungkin ingin mengaturnya secara terpisah.

Setiap kali Anda menginstal WordPress menggunakan layanan hosting, penyedia hosting menangani semua caching untuk Anda. Anda juga dapat menginstal plugin caching.

WP Rocket adalah plugin yang ideal untuk menyimpan gambar karena mudah digunakan dan dipasang. Anda cukup menginstal dan mengaktifkannya, lalu Anda siap melakukannya. Tentu saja, ada plugin caching lainnya, tetapi WP Rocket adalah pilihan utama untuk tujuan ini.

Cache Gravatar:

Gravatar adalah ikon kecil yang mengikuti alamat email Anda di seluruh web. Misalnya, ketika Anda meninggalkan komentar di blog WordPress lain, Gravatar Anda akan muncul di sebelahnya.

Layanan Gravatar menghasilkan Gravatar, yang menyimpannya di servernya. Oleh karena itu, jika Anda mengomentari banyak blog, atau bahkan beberapa blog dengan lalu lintas tinggi, Gravatar Anda akan di-cache di server Gravatar.

Akibatnya, Gravatar Anda akan dimuat dengan cepat di semua blog tersebut. Namun, di sisi lain juga bisa merugikan, karena jika layanan Gravatar tidak tersedia, atau Gravatar Anda dihapus dari salah satu blog yang Anda komentari, Gravatar Anda akan hilang dari semua blog tersebut.

Sangat tidak menarik untuk menyesuaikan Gravatar dengan gambar yang komprehensif. Ini karena jika Gravatar kustom Anda tidak muncul di blog tersebut, gravatar default akan digunakan sebagai gantinya, yang mungkin tidak sesuai.

Ada dua kemungkinan solusi untuk masalah ini:

• Buat Gravatar Anda sekecil mungkin. Gambar yang lebih kecil akan dimuat lebih cepat dan menggunakan bandwidth lebih sedikit daripada yang lebih besar.
• Anda harus menghosting layanan Gravatar versi Anda sendiri di domain yang Anda kontrol. Ini akan membutuhkan server web Apache, PHP, dan database MySQL untuk menyimpan Gravatar secara lokal alih-alih menyimpannya dalam cache di server Gravatar.

Sajikan Gambar Dari CDN:

Jika gambar Anda disajikan oleh jaringan pengiriman konten (CDN), pastikan untuk mengaktifkan caching. Akibatnya, browser dan perangkat lain tidak perlu mengunduh gambar yang sama beberapa kali.

Akan lebih baik untuk mempertimbangkan bagaimana gambar Anda akan ditampilkan saat menyiapkan CDN. Selain itu, penulisan ulang CDN harus diaktifkan pada gambar Anda. Anda dapat melakukan ini dengan plugin Perfmatters

Dengan menggunakan plugin ini, Anda dapat dengan mudah menghubungkan situs Anda ke jaringan CDN. Akibatnya, jika situs Anda dapat menyajikan konten melalui jaringan pengiriman konten, gambar Anda akan ditampilkan oleh server CDN.

Anda dapat menggunakan salah satu jaringan CDN berikut.

• CloudFlare
• KelinciCDN

Apa yang tidak boleh Anda lakukan saat mengoptimalkan gambar untuk situs web Anda

Hindari Pengalihan URL Gambar:

Jika Anda menggunakan pengalihan URL di situs web Anda, itu akan menunda penampilan gambar. Selain itu, gambar tidak di-cache oleh browser, yang dapat menyebabkan penundaan dalam memuat halaman.

Jadi saat mengoptimalkan gambar Anda untuk web, Anda harus menghindari penggunaan pengalihan URL apa pun.

Hindari Tajuk Kedaluwarsa:

Jika Anda menggunakan header kedaluwarsa pada gambar Anda, browser mungkin tidak menyimpannya dalam cache. Ini juga menyebabkan browser meminta ulang gambar setiap kali dimuat ke halaman.

Anda harus menghindari pengaturan header yang kadaluwarsa pada gambar situs web Anda jika Anda ingin mengoptimalkannya.

Hindari Menyematkan Gambar:

Penting untuk tidak menyematkan gambar pada halaman saat mengoptimalkan gambar untuk web. Ini karena saat Anda menyematkan gambar, browser mengunduh seluruh gambar sebelum menampilkannya.

Ini dapat menyebabkan situs web Anda dimuat dengan lambat dan membuat pengunjung Anda frustrasi. Sebagai gantinya, gunakan tag <img> atau tag <object> untuk menyertakan tautan ke gambar di server Anda. Dengan demikian, browser hanya dapat mengunduh file gambar, bukan seluruh halaman.

Alat Pengoptimalan Gambar Terbaik:

Konten berkualitas tinggi sangat penting untuk mengembangkan blog profesional. Selain itu, gambar berkualitas diperlukan agar blog tampil menarik. Namun, sulit untuk menemukan alat gratis untuk mengoptimalkan gambar tanpa kehilangan resolusi dan gambar yang dirancang dengan indah.

Sebagai hasilnya, saya telah menyusun daftar beberapa alat pengoptimalan gambar yang paling efektif untuk memfasilitasi pekerjaan kita.

• TinyJPG: TinyJPG adalah alat online yang berguna untuk mengompresi gambar JPEG. Tingkat kompresi alat ini sangat tinggi, dan kualitas gambarnya masih bagus.
• Toolur: Toolur adalah alat online yang berguna untuk mengoptimalkan gambar untuk web. Ini mengoptimalkan gambar dengan mengurangi ukuran file tanpa mempengaruhi kualitas gambar.
• ImageOptim: ImageOptim adalah salah satu alat pengoptimalan gambar teratas. Alat ini membantu Anda meningkatkan kecepatan memuat situs dengan mengoptimalkan gambar di halaman web. Ia bahkan dapat mengoptimalkan gambar yang telah dikompresi.
• GIMP: GIMP adalah editor gambar hebat yang memungkinkan Anda mengurangi ukuran file gambar sambil menjaga kualitas gambar. Ini adalah alternatif yang layak untuk Adobe Photoshop.

Plugin Pengoptimalan Gambar Terbaik untuk WordPress

Ada beberapa plugin pengoptimalan gambar berbeda yang tersedia untuk WordPress. Memilih yang paling cocok untuk kebutuhan Anda bisa jadi sulit. Berikut adalah daftar plugin teratas.

• Pengoptimal Gambar EWWW
• Bayangkan oleh Tim Roket WP
• Pengoptimal Gambar ShortPixel
• WP Smush
• reSmush.it

Anda dapat menggunakan plugin EWWW Image Optimizer , Imagify by WP Rocket Team, dan ShortPixel Image Optimizer dari daftar di atas.

Anda harus menggunakan plugin premium untuk optimasi gambar untuk mendapatkan hasil yang optimal. Jika Anda ingin menghemat uang, coba EWWW Image Optimizer .

FAQ

Bagaimana cara membuat gambar WebP di WordPress?

Saat Anda menggunakan WP Rocket untuk mengoptimalkan gambar di situs Anda, itu akan secara otomatis menyimpannya sebagai WebP. Sebaliknya, jika Anda ingin mengonversi gambar JPG atau PNG menjadi gambar WebP, Anda dapat melakukannya dengan plugin.

Anda dapat menggunakan salah satu plugin berikut untuk ini.

• Konverter WebP untuk Media
• WebP Ekspres

Plugin hebat yang saya gunakan untuk WebP adalah Gambar Terbang oleh WP Speed ​​Matters. Ia bekerja dengan tema apa pun dan menangani semuanya. Selain itu, ini memungkinkan Anda untuk membuat gambar WebP dengan ukuran apa pun yang Anda inginkan dan menyediakan layanan CDN gambar gratis, yang merupakan manfaat yang signifikan.

Bagaimana cara menunda gambar di luar layar?

Atribut defer dapat digunakan dalam JavaScript untuk memuat gambar di luar layar, memungkinkan browser untuk merender halaman awal memuat lebih cepat. Ini membutuhkan tag awal dan akhir. Sebagai contoh:

<img src=”image-source.png” alt=”” width=”100px” height=”100px” title=”Beberapa teks tooltip” data-defer=”offscreen-image.jpg” />

Catatan- Tunda hanya didukung di HTML5, bukan XHTML.

Dengan menggunakan plugin JavaScript seperti Perfmatters, Anda dapat menunda pemuatan gambar Anda. Hasilnya, Anda dapat mengubah tag img ke elemen apa pun yang Anda inginkan, seperti div.

<div data-defer="offscreen-image.jpg"></div>

Bagaimana Memperbaiki Tunda Gambar Offscreen?

• Memuat gambar dengan lambat.
• Lazy memuat gambar latar belakang.

Gambar di paro atas harus dikecualikan dari pemuatan lambat untuk memastikan bahwa pengguna segera melihatnya. Namun, untuk menyelesaikan gambar yang ditangguhkan di luar layar atau pemuatan lambat di situs WordPress, Anda dapat menggunakan plugin Perfmatters. Plugin ini memungkinkan Anda untuk meningkatkan kecepatan pemuatan situs WordPress Anda dengan menunda pemuatan gambar di luar layar.

Catatan- Anda dapat mengaktifkan pemuatan lambat gambar menggunakan plugin WP Rocket. Jadi Anda bisa menggunakan salah satunya.

Kesimpulannya

WordPress adalah sistem manajemen konten yang kuat yang memungkinkan Anda membuat dan mengelola situs web Anda sendiri. Namun, mengoptimalkan gambar untuk WordPress bisa jadi sulit tanpa alat yang sesuai.

Masalah dengan mengoptimalkan gambar untuk WordPress adalah begitu banyak metode yang tersedia. Misalnya, Anda dapat menggunakan plugin, alat online, atau bahkan perangkat lunak Anda sendiri.

Metode yang paling efektif untuk mengoptimalkan gambar untuk WordPress adalah dengan menggabungkan semua teknik ini . Selain itu, Anda dapat menggunakan plugin yang akan mengidentifikasi gambar mana yang perlu diubah ukurannya, dan Anda juga dapat mengubah ukurannya secara manual.

Selain mengoptimalkan ukuran gambar untuk WordPress, Anda juga harus mengoptimalkan jumlah file per postingan. Coba gunakan plugin premium untuk mengoptimalkan gambar dan kecepatan situs web. Hasilnya, Anda akan dapat mengembangkan situs web yang ramah pengguna, cepat, dan efisien.