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.
Core Web Vitals: Faktor baru pada SEO
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.
Gambar dan Kecepatan Website
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.
Panduan Lengkap Cara Optimasi Gambar di WordPress
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?
Optimasi Gambar Secara Manual
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: Mengidentifikasi Gambar
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.
Mengidentifikasi Gambar Menggunakan Image Size Info
- Install Extension Google Chrome Image Size Info
- Kemudian klik install atau Tambahkan pada Chrome
- Buka halaman website Anda. Klik kanan pada salah satu gambar pada halaman website Anda.
- Kemudian klik view info
- Gambar yang saya unggah memiliki dimensi yang besar. Memiliki dimensi atau ukuran 1745 x 1163px. Gambar tersebut memiliki ukuran file sebesar 330kb. Cukup besar bukan? Padahal yang ditampilkan di dalam website hanya berkisar 800 x 540px.
Perbedaan Gambar dan Ukuran File
Jika Anda lihat, tidak ada perbedaan yang signifikan. Tidak ada yang pecah (resolusi berkurang). Atau adanya perbedaan warna yang jelas. Tetapi jika Anda perbesar Anda akan melihat perbedaan pada ukurannya dan perbedaan pada resolusinya.
Langkah Kedua: Memperkecil dimensi gambar
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.
Memperkecil Gambar Menggunakan Microsoft Paint
- Klik kanan pada gambar yang ingin Anda unggah.
- Kemudian klik Open with MS Paint
- Kemudian klik resize atau klik Ctrl+W
- Klik Pixels kemudian rubah ukuran horizontal menjadi nilai yang Anda dapat pada ekstensi Image Size Info. Kita mendapat bahwasanya apa yang ditampilkan adalah 800x540px. Maka masukkan 800 pada horizontal.
- Kemudian klik File, Save As dan klik ekstensi file jpg.
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.
Memperkecil Gambar Menggunakan Adobe Photoshop
Adobe Photoshop merupakan software pengelola gambar berbayar. Jika Anda memiliki Adobe Photoshop Anda bisa membacanya. Jika tidak, Anda bisa melewati bagian ini.
- Klik kanan gambar yang Anda ingin unggah. Klik Open with Adobe Photoshop.
- Tunggu beberapa menit atau detik software terbuka.
- Klik Image, Kemudian Klik Image Size. Atau Anda dapat klik Alt+Ctrl+I
- Kemudian rubah satuan percent menjadi pixels. Sama seperti apa yang dilakukan pada Microsoft Paint. Sesuaikan lebar atau width menjadi 800px.
- Kemudian klik File dan klik Save As
- Kemudian atur kualitas gambar yang akan Anda simpan
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.
Langkah Ketiga: Melakukan Kompresi Gambar
Setelah Anda memperkecil dimensi gambar. Langkah selanjutnya adalah mengkompresi gambar. Ada beberapa website untuk membantu Anda dalam mengkompresi gambar. Yaitu:
- Compressor.io apa yang saya suka pada website ini adalah bagaimana Compressor.io dapat melakukan kompresi tanpa mengurangi resolusi yang ada. Jika Anda ingin mengkompresi gambar tanpa kehilangan resolusinya gunakan alat atau website ini.
- Website Planet mungkin belum Anda dengar sebelumnya. Website Planet adalah sebuah website yang memiliki berbagai macam alat yang membantu dalam membangun website. Di dalam website ini juga berisi berbagai macam review tentang hosting. Kompresi gambar dalam website ini sangatlah baik. Outputnya sangat kecil, namun gambar terlihat pecah. Jika Anda menginginkan output yang kecil. Gunakanlah Website Planet.
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.
Optimasi Gambar Menggunakan Plugin
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
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:
- imagick,
- cwebp,
- vips,
- dan gd
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
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.
Optimasi Gambar Menggunakan CDN Image
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.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
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.
Kesimpulan
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.