Setelah kemarin saya mengganti Yoast SEO di blog Wordpress self hosted saya dengan Rank Math, makin keliatan deh bahwa optimasi image ini punya poin yang cukup gede dalam optimasi mesin pencari--alias SEO.

Kalau hal ini diabaikan, poinnya turunnya lumayan banget.

So, kali ini mau sharing soal optimasi image, apa saja langkahnya dan apa saja yang mesti diketahui serta diperhatikan saat kita ngulik image untuk blog atau web pada umumnya.

Tentang Optimasi Image

Jadi, menurut State of Web report yang ada di httparchive, image--yang bisa berupa foto, infografis, atau apa pun itu--takes up more than half dari keseluruhan "berat" halaman web.

Yes, lebih dari setengahnya. Ini yang harus dicatat.

Makanya, kalau kita lagi ngetes page speed, baik itu yang pakai tools-nya Google, atau pakai Pingdom, atau tool lainnya, kalau web kita ternyata lola selalu akhirnya dikasih saran, untuk me-reduce size images dengan cara mengompresnya.

Ya, kamu tahu sendirilah, bahwa loading time itu ngaruh banget dalam SEO, karena berperan dalam user experience. Kalau visitor datang ke web atau blog kita, dan ternyata blognya lola cuma karena imagenya yang berat, ya ...



Kenapa?

1. Menunggu itu berat, gaes. Seberat rindu.
2. Ya loading image itu kan pake kuota juga ya, cyint. Apa kabar para fakir kuota sobat misqueen, huh?
3. Hosting web atau blog kamu sendiri nih, bakalan cepet habis kalau itu image gede-gede. Kalau habis, kamu mesti upgrade space yang mana makin gede makin mehong! Padahal duit setoran Adsense belum bisa ditarik pan? #eh

So ya gitu deh.
Jangan abaikan soal compressing image ini ya.

Jadi, mari kita lihat apa saja yang perlu diperhatikan ya, gaes.

5 Hal yang Perlu Kamu Tahu untuk Optimasi Image dalam rangka Memperingan Loading Blog

1. JPEG/JPG vs PNG vs GIF

Kamu kenal berapa tipe file image?

Sebenarnya tipe file image ini ada buanyak banget! Hanya saja, masing-masing ada ada peruntukannya sendiri-sendiri. Ada yang dipake buat nyetak dalam bentuk hard copy, ada yang dipake para desainer grafis lantaran resolusinya yang tinggi, ada yang cocok untuk keperluan online (termasuk di dalamnya blog) karena ukurannya kecil sehingga lebih ringan.

Mari kita kenalan dengan beberapa tipe file image yang sering dipake di dunia online. Ini penting, supaya kamu tahu bedanya, sehingga kamu tahu mana yang seharusnya dipakai.

• JPEG/JPG: tipe file image ini yang paling banyak atau populer. Range kualitasnya cukup lebar secara teknis, mulai dari low qualities (biasanua sih paling minim resolusi 72dpi untuk diupload) hingga yang high qualities (batas maksimal biasanya 300 dpi). Tipe file ini adalah yang paling sempurna untuk "dikonsumsi" secara online.
• PNG: tipe file image ini lebih "berat" ketimbang JPEG atau JPG. Biasanya dipakai karena butuh background transparan yang memang disupport oleh tipe file ini. Yang pakai tipe file ini biasanya adalah logo atau header. Nah, untuk foto sebaiknya hindari penggunaan tipe file ini. Karena bakalan berat beud. Untuk infografis juga demikian. Pokoknya kalau nggak butuh bekgron transparan, jangan pakai tipe file ini ya.
• GIF: tipe file ini biasanya dipakai buat animasi-animasi kecil. Biasanya sih meme-meme itu deh. Sudah pada tahulah pasti. Biasanya GIF ini juga lebih berat ketimbang JPEG, karena ya si animasi itu. Makanya, kalau mau pakai GIF ya nggak usah kebanyakanlah di satu postingan. Satu dua aja udah cukup. Itu juga pilih yang ukurannya kecil aja.

2. CMYK vs RGB

CMYK adalah singkatan dari cyan, magenta, yellow, and key (black), pigmen yang digunakan dalam cartridge tinta untuk membentuk spektrum full color. Dalam produk cetak, kombinasi keempat warna ini membantu membentuk gambar yang lebih berkualitas yang mempunyai spektrum warna yang kompleks.

Tapi, komputer punya "standar" berbeda dengan mesin cetak. Komputer menganut mazhab RGB, yang merupakan kependekan dari red, green, and blue--yang merupakan spektrum warna yang ideal untuk dilihat di screen.

Setiap piksel gambar di layar komputer atau ponsel kamu merupakan sumber cahaya, dan memproyeksikan kombinasi warna primer untuk membentuk berkas cahaya terakhir. Singkatnya, RGB inilah yang seharusnya menjadi tipe spektrum warna untuk optimasi gambar online.

Supaya lebih jelas, coba perhatikan gambar berikut.



Yang kanan, adalah spektrum warna CMYK--yang biasa dipakai di mesin cetak. Sedangkan yang kiri adalah spektrum warna RGB--untuk konsumsi monitor laptop dan ponsel. Beda banget kan? Padahal kalau yang CMYK nanti dicetak, hasilnya kurang lebih sama dengan yang RGB.

Saya bilang kurang lebih, karena ya bisa sama persis bisa enggak. Tergantung settingan, baik settingan mesin cetak maupun settingan monitor. Bahkan satu merek monitor bisa saja berbeda penampakan dengan settingan merek monitor yang lain, meski parameternya disamain.

Rumit ya? Iya, makanya sering ada perbedaan kalau kita lagi bikin artwork yang akan dicetak--buku termasuk--begitu dicetak, loh, warnanya kok beda? Ya itu dia penyebabnya.

Nah, ini malah jadi melebar ke soal cetak mencetak deh :)) Tapi enggak apa-apa, biar tahu dasarnya yah.

Jadi intinya, pastikan spektrum warna yang digunakan adalah RGB. Biasanya sih settingan kamera sudah sama dengan settingan monitor laptop dan ponsel, jadi nggak perlu diulik lagi. Cuma nanti kalau misal kamu menemukan ada perbedaan warna seperti di atas, kamu tahu. Oh, mungkin ini pakai spektrum warna CMYK.

FYI, karena lebih kompleks spektrumnya, sudah pasti CMYK akan lebih berat loading-nya.

Lanjut!

3. Resize sesuai lebar frame

Nah, kebanyakan pasti pada nggak pernah tahu berapa ukuran image yang paling pas untuk blog masing-masing kan ya? Sehingga akhirnya image yang dipakai tuh adalah yang punya ukuran gede, biar aman. Nggak pecah-pecah.

Ini nggak salah sih.
Tapi perlu kamu tahu juga, bahwa seberapa pun lebar image yang dipakai akan secara otomatis diperkecil oleh platform blog. Jadi buat apa pakai image yang terlalu besar? Mubazir, dan malah bikin blog kamu tambah berat.

Nah, yang jadi pertanyaan adalah, "Buat image di blog itu pasnya ukurannya berapa sih?"
Pertanyaan ini sering banget saya dapatkan.

Terus terang, saya enggak tahu.
Karena, setiap blog itu punya ukuran pasnya sendiri-sendiri tergantung template yang dipakai.

Lha, kalau gitu gimana cara tau ukuran pasnya?
Ada beberapa cara:

Cara 1. Pakai Photoshop

Kalau kamu terbiasa pakai Photoshop, kamu bisa pencet tombol print screen yang ada di keyboard laptop atau PC, lalu buka PS > New ...



Nanti kan akan kebuka popup untuk bikin artwork baru. OK. Saat sudah ada new file-nya, lalu ctrl V. Maka yang kamu print screen tadi akan terkopas di file PSD yang baru itu.

Krop-lah sesuai frame lebar tulisan. Kalau sudah baru deh diliat berapa ukurannya di Image Size.

Cara 2. Pakai Addon di browser

Ada Addon di Mozilla Firefox yang namanya Measure-It. Tambahkan ke browser Mozilla Firefox kamu. Seharusnya sih, di Chrome juga ada, karena addons ini cukup populer. Silakan cari di webstore-nya ya. Addon ini gratis.






Nah, ambil aja berarti ukuran 730 px untuk lebar. Untuk tingginya biasanya menyesuaikan sih. Saya biasanya pakai 4:3. Jadi untuk 730 px, tingginya untuk perbandingan itu berarti sekitar 500 px. Ini maksimal. Lebih pendek sih oke juga. Kalau tinggi, nggak usah dipermasalahkan pada intinya.

Jadi, yang dipakai satuan ukurannya adalah pixel ya, bukan centimeter. Inget nih. Karena kita akan pakai di monitor, bukan jadi produk cetak. Jadi ukuran standarnya pakai pixel.

So, berapa pun image yang akan dipakai, pastikan lebarnya 730 px. Ini di blog saya ini. Blog kamu beda lagi. Silakan diukur lebar frame kontennya, tidak termasuk sidebar ya. Supaya pas.

Kalau sudah diukur, selanjutnya kan gampang dijadikan standar.

4. Kompres supaya lebih ringkas lagi

5. Lengkapi SEO Onpage