Cara Optimasi Gambar Di Wordpress Untuk Menghemat Diskspace
Cara Optimasi Gambar Di Wordpress Untuk Menghemat Diskspace - Sebagai pengguna WordPress self-hosted, salah satu masalah yang kerap timbul adalah insufficient disk space atau disk space tidak cukup untuk menyimpan data-data web kita.
Untuk yang belum familiar, jadi semua data web kita disimpan di tempat bernama server (berikutnya disebut hosting). Data itu berupa theme, core WP, plugin, konten (tulisan & image), dsb.
Tanpa hosting, web kita tidak bisa diakses oleh umum.
Sebagaimana tempat penyimpanan, pasti ada batasannya atau kapasitas. Kapasitas penyimpanan data inilah yang disebut disk space.
Masing-masing hosting punya kapasitas disk space, ada yg 2GB, 3GB, dst. Tergantung paket hosting yg Anda beli.
"Apakah insufficient disk space akan berpengaruh terhadap performa web?"
Tentu saja. Berikut beberapa di antaranya:
- Tidak bisa update core WP/theme/plugin.
- Tidak bisa memasukkan konten baru.
- Dalam beberapa kasus bahkan berpengaruh pada loading speed.
"Lalu bagaimana solusinya?"
Banyak hal yg bisa kita lakukan. Misalnya, menambah kapasitas disk space, menghapus plugin yg tidak perlu, optimasi image, dsb.
Di utas ini, kita khusus membahas optimasi image.
OPTIMASI IMAGE DI WORDPRESS
Image menjadi salah satu konten yg paling banyak memakan disk space, terutama klo Anda punya ratusan artikel.
And fyi, 1 img akan di-generate menjadi beberapa img dng berbagai ukuran. Jadi, kebayang lah ya akan sebesar apa disk spave yg diperlukan.
So, ada beberapa cara yg bisa dilakukan untuk menghemat disk space.
1. Hapus Unattached Image
Pernah gak Anda upload foto di media untuk jadi featured image atau konten artikel tapi ternyata gak dipake dan gak dihapus? Entah krn lupa, entah karena haroream.
Kalau satu mungkin tak masalah, kalau puluhan? Tah nu kitu nu ngadoresakeun. Hahaha.
So, hapus unattached image/image yg tidak dipakai. Media >> unattached >> delete.
Note
Ada beberapa img yg dipakai tapi termasuk unattached img:
- Logo
- Favicon
- Header
- Image di landing page/page
Yang ini tentu jangan dihapus.
2. Kompres Image Sebelum Diunggah
Kalau ini Anda pasti sudah tahu. Kompres dulu img sebelum diunggah agar ukurannya tidak lalawora.
Berapa sih img size yg ideal? IMO, maks 300 kb untuk featured image. Sekitar 200 kb untuk image dalam artikel.
Dimensi beragam, tergantung theme yg Anda gunakan.
Tip:
- Kompres dulu baru diunggah. Gunakan image resizer seperti tiny png, compressor dot io, dsb.
- JANGAN GUNAKAN PLUGIN. Plugin image compressor memakan resource besar ketika dia bekerja. Dalam beberapa kasus bisa membuat server down.
3. Gunakan File SVG
Scalable Vector Graphics (SVG) adalah ekstensi img yg paling ideal krn ukurannya sangat kecil tapi kualitasnya bagus. Sama seperti vektor.
Note:
- Hanya gunakan SVG jika gambar yg Anda gunakan berupa vektor, bukan bitmap.
- WordPress tidak bisa upload SVG, gunakan plugin. Juga untuk menutup celah isu keamanan.
- Jika menggunakan file SVG sbg featured image, biasanya gambarnya tidak tampil ketika artikel dibagikan di medsos.
4. Gunakan File WebP
Untuk image berbentuk bitmap (Contoh: foto), gunakan file WebP.
Seperti yg disampaikan Mas Aldwyn, di WP 5.8 kita bisa langsung upload WebP ke media. Image dengan format WebP selain ukurannya lebih kecil tapi kualitasnya sangat baik, juga ideal untuk website. Hingga utas ini ditulis, hanya Safari yg tidak support WebP sedangkan browser lain sudah support. Jadi, saya kira ini tidak terlalu masalah.
Untuk mengkonversi Jpeg/PNG ke WebP, kamu bisa menggunakan online converter. Saya sendiri menggunakan https://pixlr.com/x/.
Anda hanya perlu membuat file baru >> upload image >> save as WebP.
5. Gunakan Google Photos
Image yg digunakan untuk web tidak hanya bisa disimpan di hosting web kita, bisa juga disimpan di tempat lain. Contohnya Google Photos.
Buatlah satu akun Google baru khusus untuk foto-foto web. Lumayan tuh dapet 15 GB gratis.
Upload img ke Google Photos >> setting share/public >> pilih img yg akan digunakan >> klik kanan >> copy image address
Paste di "Insert from URL".
Selain Google Photos, Anda juga bisa meng-hosting-kan foto-foto blog Anda di tempat lain. Tapi hati-hati, jangan sampai image hotlinking. Haram hukumnya. :D
Image hotlinking tuh misalnya Anda menggunakan foto dari Pixabay. Alih-alih mengunduh lalu mengunggah di blog Anda, Anda cuma klik kanan copy image address lalu paste URL-nya di blog Anda.
Itu artinya Anda menggunakan server Pixabay. Kasihan banget, udah mah pake foto gratis, membebani server mereka pula. :(
6. Featured Image from URL (FIFU)
Sayangnya, hanya img dalam artikel yg bisa memakai eksternal URL, tidak dengan featured image.
Tapi, Anda bisa menggunakan plugin FIFU.
Poin 5 & 6 bukannya tanpa kelemahan. Karena img disimpan di server pihak ketiga, bukan di hosting web kita, maka setiap kali loading, browser harus memanggil source dari luar. Ini sedikit banyak berpengaruh terhadap loading speed.
But so far, saya pribadi tidak pernah mengalami kendala alias aman-aman aja.
7. Lazy Loading
Setiap kali web kita diakses melalui browser, maka setiap kali itu pula source dipanggil/loading (kita lupakan dulu soal cache). Ada CSS, font, HTML, JS, dsb. Termasuk image.
Jika satu source belum selesai loading, maka source lainnya harus menunggu. Ngantre gitu lah. Semakin banyak source yg diperlukan untuk memuat satu halaman, maka semakin lama loading-nya.
Sederhananya begitu.
Nah, jika kita menggunakan lazy load, image tidak ikut antrean. Dia hanya akan dimuat jika kita sudah scroll sampai ke image tsb.
Poin 7 ini tidak berpengaruh langsung ke disk space, lebih ke untuk loading speed. But yeah, gak apa-apa, deh.
Saya kira 7 poin saja cukup. Jika ada yang ingin mengoreksi atau menambahkan, dengan senang hati saya persilakan.
Posting Komentar