Panduan lengkap cara optimasi gambar di WordPress diperuntukkan untuk Anda yang masih bingung dalam mengoptimasi gambar. Di dalam website atau situs ada berbagai macam asset. Seperti kode di dalam tema baik HTML, CSS, Javascript dan juga gambar. Artikel ini merupakan konten terupdate 2021. Sewaktu-waktu kami akan menambahkan tips dan trik baru dalam artikel ini.
Tahukah Anda bahwasanya kecepatan website menjadi salah satu ranking factor baru pada mesin pencarian Google. Google telah mengkonfirmasi bahwa Core Web Vitals menjadi salah satu faktor untuk mencapai ranking yang baik pada mesin pencarian Google.
Google berdalih dengan adanya Core Web Vitals akan memastikan pengguna dapat menikmati kualitas saat mengakses sebuah konten pada suatu halaman website.
Core Web Vitals di inisiasi oleh Google bertujuan agar menyajikan dan menampilkan konten yang berkualitas sehingga pengguna dapat menikmati pengalaman yang baik ketika mengakses suatu halaman website.
Ada beberapa hal yang menjadi ukuran Core Web Vitals semuanya mengacu pada pengalaman pengguna atau biasa disebut dengan User Experience (UX).
Salah satunya adalah loading. Yang dimaksudkan disini adalah waktu pengguna memuat sebuah website. Sebagai contohnya: ada suatu website yang diakses oleh pengguna. Pengguna membutuhkan waktu 10 detik untuk mendapatkan seluruh konten yang dimuat di dalam website tersebut.
Cukup memakan waktu yang lama bukan? Dengan adanya penerapan Core Web Vitals yang akan diterapkan pada bulan Mei 2021. Untuk meningkatkan pengalaman pengguna dalam mengakses sebuah website.
Dikutip dari laman Twitter Google Search Central. Google akan menerapkan Core Web Vitals dan juga faktor-faktor lain yang berkaitan dengan pengalaman pengguna (UX atau User Experience). Sebagai salah satu ranking signal atau ranking factor.
"We're announcing that page experience ranking signals for Google Search will launch in May 2021. This will combine Core Web Vitals and previous UX-related signals."
— Twitter Google Search Central
Kecepatan atau disebut loading dalam metric Google, menjadi salah satu faktor baru untuk SEO (Search Engine Optimization). Jika Anda ingin meraih peringkat pertama atau masuk pada halaman pertama Google. Pastikan kecepatan website Anda cepat dan mudah diakses oleh berbagai macam perangkat atau devices.
PROMO WordPress Hosting Paling Cepat
Core Web Vitals bukan masalah. Gunakan Cloudku, WordPress Hosting Super Cepat. Bergabung dan raihlah peringkat pertama Google.
Website memiliki berbagai macam asset (kode berupa CSS, JavaScript, HTML, dan gambar) untuk menampilkan sebuah konten untuk pengguna. Aset-aset ini yang menentukan cepat tidaknya suatu website.
Pada WordPress, ada berbagai macam tema yang ditawarkan. Setiap tema menawarkan berbagai macam fungsi yang berbeda dan aset yang berbeda. Tergantung dari kebutuhan pemilik dari website tersebut untuk mengkomunikasikan pesan kepada pengguna sesuai tujuan dari pemilik website tersebut.
Gambar salah satu jenis aset yang hampir selalu hadir pada setiap website. Tahukah Anda gambar salah satu aset yang membuat cepat tidaknya sebuah website.
Ada hampir 2 Milyar website aktif hingga hari ini. Namun, masih banyak pula gambar yang disajikan pada website belum dimaksimalkan secara penuh untuk website.
Hal ini bisa menjadi peluang Anda untuk meraih ranking di Google. Melalui langkah kecil dengan mengoptimasi gambar. Dapat membantu Anda dalam meraih halaman pertama Google atau bahkan menjadi nomor satu pada mesin pencarian Google.
Sebelum kita beralih pada panduan lengkap cara optimasi gambar di WordPress. Kita dalami terlebih dahulu mengenai gambar. Gambar memiliki berbagai macam ukuran berupa tinggi dan lebar, warna, ukuran file dalam bentuk kilobytes ataupun megabytes.
Besarnya ukuran tinggi dan lebar gambar mempengaruhi besar kecilnya ukuran file gambar. Kepadatan warna gambar juga mempengaruhi besar kecilnya sebuah gambar.
Jika Anda memiliki sebuah laptop, biasanya ukuran lebar dan tinggi berkisar 1388px x 768px. Itu adalah rata-rata ukuran atau resolusi yang paling banyak digunakan di dunia. Artinya Anda hanya dapat melihat website dengan ukuran maksimal 1388px x 768px.
Untuk ukuran perangkat kecil biasanya memiliki ukuran dibawah 460px. Jika Anda memasukkan sebuah gambar dengan ukuran 6000px x 4000px. Akan cukup overkill bukan? Ukuran tinggi dan lebar yang besar mempengaruhi ukuran file gambar. Semakin banyak ukuran file semakin lama diakses oleh pengguna.
Ada beberapa ekstensi gambar yang biasanya muncul yaitu: jpg, png dan gif. Masing-masing ekstensi memiliki perbedaan masing-masing.
Optimasi sebuah gambar intinya bukan untuk sekedar memperkecil ukuran gambar. Tetapi menyajikan sebuah gambar yang maksimal baik ukuran file dan juga kualitas gambarnya. Karena saya yakin gambar adalah salah satu bagian dari komunikasi.
Jika Anda seorang Photographer dan memiliki sebuah website tentu Anda harus menyajikan sebuah gambar sebaik mungkin. Dengan kualitas yang baik dan tidak pecah.
Bagaimana cara optimasi gambar di WordPress dengan baik?
Tingkat kesulitan: Menengah
Hasil akhir: Baik - ukuran file kecil dan gambar tidak pecah
Tujuan: Mengoptimasi gambar secara manual menggunakan beberapa software seperti MS. Paint, Adobe Photoshop dan dibantu oleh beberapa software berbasis website.
Alat yang digunakan: Image Size Info (Google Chrome Extension), Microsoft Paint atau Adobe Photoshop dan Compressor.io dan Website Planet Image Compressor.
Cara ini merupakan cara yang paling saya sukai. Dimana kita dapat mengatur sesuai dengan kebutuhan sebuah website.
Cara ini sangat sesuai digunakan oleh website berskala kecil. Atau website yang Anda kelola sendiri. Pengalaman saya dalam mengelola website besar seperti situs pemberitaan sangatlah sulit untuk menerapkan cara ini.
Pasalnya saya dihadapkan dengan puluhan wartawan dan redaktur yang tidak memiliki pengetahuan pada bidang ini. Dan memakan waktu yang lama untuk melakukan edukasi tentang cara optimasi gambar di WordPress.
Langkah pertama pada optimasi gambar yaitu mengidentifikasi gambar yang akan disajikan di dalam website. Jika Anda mencoba memasukkan pada tema WordPress Anda pasti kebingungan. Berapa ukuran yang harus saya masukkan di dalamnya.
Jika Anda mendevelop sebuah tema WordPress sendiri. Anda akan tahu berapa ukuran yang harus Anda masukkan di dalamnya. Jika Anda tidak mendevelop sendiri gunakan ekstensi Google Chrome untuk mempermudah Anda.
Perbedaan Gambar dan Ukuran File
Setelah melakukan identifikasi gambar yang akan disajikan. Langkah selanjutnya adalah memperkecil dimensi gambar. Anda dapat melakukannya melalui Microsoft Paint atau Adobe Photoshop, Anda juga bisa melakukan pada software pengolahan gambar yang memiliki kemampuan untuk memperkecil gambar lainnya.
Untuk Microsoft Paint memiliki keterbatasan dalam menyimpan gambar dalam format png. Jika Anda ingin memperkecil gambar png Anda bisa menggunakan Adobe Photoshop atau software pengelola gambar lainnya.
Adobe Photoshop merupakan software pengelola gambar berbayar. Jika Anda memiliki Adobe Photoshop Anda bisa membacanya. Jika tidak, Anda bisa melewati bagian ini.
Pada Adobe Photoshop Anda bisa menyimpan dalam bentuk JPG, PNG, dan berbagai macam format yang bisa Anda pilih. Anda bisa mengatur kualitas gambar pada Adobe Photoshop.
Perbedaan Gambar dan Ukuran File Pada Adobe Photoshop
Pada studi kasus ini saya menyimpan pada kualitas 12 atau Maximum. Gambar yang ditampilkan juga memiliki kesamaan dengan Microsoft Paint. Tetapi yang menjadi perbedaannya adalah Anda dapat menyimpan dalam berbagai format. Namun, Anda harus merogoh kocek agak dalam untuk berlangganan Adobe Photoshop.
Setelah Anda memperkecil dimensi gambar. Langkah selanjutnya adalah mengkompresi gambar. Ada beberapa website untuk membantu Anda dalam mengkompresi gambar. Yaitu:
Melakukan kompresi gambar pada kedua website ini cukuplah mudah. Anda hanya perlu mengunggah gambar atau drag and drop gambar yang ingin Anda kompresi.
Unggahlah gambar yang sudah Anda perkecil dimensinya. Unggah pada website tersebut. Kemudian simpan dan unggah di dalam website Anda.
Perbedaan Kompresi Compressor.io vs Website Planet
Jika dilihat, Compressor.io mengkompresi gambar dari 155kb menjadi 33kb. Dan Website Planet merubah gambar dari ukuran 155kb menjadi 30kb. Memang tidak memiliki perbedaan yang signifikan. Namun, bayangkan jika halaman website Anda memiliki 10 gambar. Jika Anda menggunakan Website Planet, Anda akan menghemat 30kb.
Tingkat kesulitan: Mudah
Hasil akhir: Menengah - ukuran file kecil dan gambar tidak pecah
Tujuan: Mengoptimasi gambar secara otomatis menggunakan plugin.
Alat yang digunakan: Plugin
Cara ini sangat sesuai untuk Anda yang tidak mau direpotkan untuk memperkecil gambar secara manual. Dan juga cocok untuk website berskala besar (yang selalu update artikel) seperti website portal berita. Namun, plugin dapat memakan sumber daya hosting Anda.
Ada beberapa plugin yang bisa Anda gunakan. Namun kebanyakan plugin optimasi gambar memakan resource cukup besar. Cara kerja mereka pun juga menambahkan gambar pada WordPress. Akhirnya storage atau media penyimpanan semakin cepat terkuras.
Terlebih lagi, plugin optimasi gambar memakan CPU Usage pada hosting. Dan juga dalam pemrosesannya plugin optimasi gambar menggunakan WP-Cron.
Anda juga tidak bisa melakukan kontrol langsung terhadap kualitas gambar yang akan disajikan kepada pengguna. Tetapi, ada beberapa plugin yang baik dan patut Anda coba.
WebP Express
Plugin gratis satu ini menjadi salah satu andalan saya untuk mengoptimasikan gambar pada WordPress. Meskipun tergolong sulit untuk dioperasikan. Namun plugin ini dapat bekerja dengan baik.
WebP Express salah satu plugin unggulan optimasi gambar. Plugin ini menggunakan WebP Convert Library. Dimana, dapat mengkonversikan gambar menjadi format yang direkomendasikan Google yaitu WebP dalam berbagai metode. Metode yang digunakan adalah:
Bahkan WebP Express juga menyediakan metode alternatif yaitu EWWW.
Secara fungsi, plugin ini mengkonversikan gambar yang awalnya dalam bentuk format jpg maupun png dirubah menjadi WebP. WebP memiliki kompresi yang tinggi dibandingkan dengan format seperti jpg dan png.
Sehingga, kualitas yang ditampilkan sama seperti apa yang diunggah. Plugin ini juga dibekali kemampuan untuk merubah kualitas gambar. Anda dapat mengatur kualitas dalam ukuran persentase.
Shortpixel
Shortpixel merupakan plugin optimasi gambar yang baik. Tidak membebankan kepada server atau hosting
Shortpixel bisa dikatakan sebagai CDN Image. Keunikan plugin ini adalah Anda tidak perlu direpotkan dalam mengatur kualitas dalam gambar. Shortpixel melalui Shortpixel CDN bekerja ketika pengguna mengakses halaman website Anda.
Shortpixel menganalisa HTML/CSS/JS pada halaman website Anda. Kemudian diwaktu yang bersamaan, Shortpixel mengoptimasi gambar dengan sempurna dan menjadikan ukuran yang tepat pada website Anda.
Kemampuan ini lah yang disebut dengan On The Fly Optimization kemampuan mengoptimasi ketika pengguna mengakses sebuah halaman website.
Fungsi ini biasa digunakan pada CDN Image. Yang menjadikan perbedaan antara plugin dengan CDN Image adalah fungsi tersebut yang dibebankan oleh Content Delivery Network atau biasa disebut dengan CDN. Sehingga tidak memakan resource pada hosting Anda.
Namun, Shortpixel memiliki keterbatasan. Untuk versi gratis dari Shortpixel, Anda hanya diberikan kuota 100 gambar setiap bulan. Anda dapat menggunakan link afiliasi yang ada diatas untuk mendapatkan diskon tambahan.
Jika Anda ingin menampilkan sebuah gambar dengan dimensi, resolusi, kualitas, dan kompresi yang tepat CDN Image lah jawabannya. Untuk menampilkan dimensi, resolusi, kualitas dan kompresi yang tepat membutuhkan adanya Content Delivery Network.
Content Delivery Network ini dibekali dengan teknologi atau kemampuan untuk mengoptimasi gambar secara real-time. Kemampuan ini dapat membaca HTML/CSS/JS pada suatu halaman website agar dapat menyajikan gambar secara tepat.
CDN Image tidak membebankan server maupun tidak memakan media penyimpanan (storage). CDN Image dibekali dengan kontrol terhadap kualitas secara penuh. Ada berbagai macam CDN Image yang saya rekomendasikan. CDN Image ini terus berkompetisi untuk mengoptimasi gambar yang tepat untuk disajikan kepada pengguna.
CDN juga dapat membantu meningkatkan nilai pada Lighthouse, PageSpeed Insights dan GTMetrix. Berikut CDN Image yang saya rekomendasikan.
Imagekit.io
Imagekit adalah CDN Image yang memiliki kontrol penuh terhadap kualitas gambar. Dan menyajikan gambar dengan output paling baik. Dibandingkan dengan CDN Image yang lain, Imagekit memiliki performa paling baik.
Imagekit.io CDN Image memiliki performa yang sangat baik. Dibandingkan dengan CDN Image gratis lainnya CDN Image ini mampu menambahkan score yang cukup tinggi pada PageSpeed Insights dan GTMetrix.
Kelebihan dari plugin ini adalah Anda dapat mengontrol gambar sesuai apa yang Anda inginkan. Anda dapat mengontrol kualitas, dimensi, memotong gambar, mengatur aspect ratio, memberikan effect, bahkan Anda dapat memasukkan overlay text pada gambar, dan parameter lainnya.
Untuk versi gratisnya, Anda diberikan kuota sebanyak 20GB per bulan. Kuota ini sangatlah besar. Dengan fitur yang beragam dan performa yang paling baik. CDN Image ini layak menjadi yang pertama.
Statically
Statically salah satu CDN Image yang sekarang berkembang pesat. Selain dapat mengoptimasi gambar. Statically juga dapat mengoptimasi JavaScript secara On The Fly
Alternatif lainnya Anda bisa menggunakan Statically. Statically memiliki keunggulan dapat mengoptimasi JavaScript. Pengaturan cukup mudah dibandingkan dengan Imagekit.
Namun, Statically tidak memiliki kontrol penuh terhadap gambar seperti Imagekit. Dan jika Anda ingin menggunakan Statically Anda diwajibkan untuk menginstall plugin Statically.
Statically bisa menjadi alternatif website Anda yang memiliki gambar yang berlimpah. Kelebihan lain pada Statically ialah tidak adanya kuota yang diberikan tiap bulannya.
Untuk cara yang paling saya rekomendasikan. Adalah cara manual dan dikombinasikan dengan CDN Image Imagekit. Dimana saya dapat melakukan kontrol penuh terhadap kualitas dan output pada gambar. Dan juga hasil kompresi kombinasi Cara Optimasi Manual dengan CDN Imagekit sangatlah baik. Jika Anda ingin mengejar score PageSpeed Insights, Lighthouse, dan GTMetrix. Anda juga dapat mencobanya.
Namun, jika Anda yang praktis gunakanlah Shortpixel. Shortpixel sangat cocok digunakan untuk website skala besar. Harga yang ditawarkan pun cukup terjangkau.