Langkah-Langkah Meningkatkan Secara Optimal Image Untuk Memperingan Loading Dan Apa Saja Yang Penting Untuk Diperhatikan

26 views

Setelah kemarin aku mengganti Yoast SEO di blog WordPress self hosted saya dengan Rank Math, makin keliatan deh bahwa meningkatkan secara optimal image ini punya poin yang cukup gede dalam meningkatkan secara optimal mesin pencari–alias SEO.

Kalau hal ini diabaikan, poinnya turunnya tidak mengecewakan banget.

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

Tentang Optimasi Image

Jadi, berdasarkan State of Web report yang ada di httparchive, image–yang sanggup 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 hasilnya dikasih saran, untuk me-reduce size images dengan cara mengompresnya.

Ya, kau tahu sendirilah, bahwa loading time itu ngaruh banget dalam SEO, alasannya yaitu berperan dalam user experience. Kalau visitor tiba ke web atau blog kita, dan ternyata blognya lola cuma alasannya yaitu 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 sahabat misqueen, huh?
  3. Hosting web atau blog kau sendiri nih, bakalan cepet habis kalau itu image gede-gede. Kalau habis, kau mesti upgrade space yang mana makin gede makin mehong! Padahal duit setoran Adsense belum sanggup 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 karena resolusinya yang tinggi, ada yang cocok untuk keperluan online (termasuk di dalamnya blog) alasannya yaitu ukurannya kecil sehingga lebih ringan.

Mari kita kenalan dengan beberapa tipe file image yang sering dipake di dunia online. Ini penting, supaya kau tahu bedanya, sehingga kau 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) sampai yang high qualities (batas maksimal biasanya 300 dpi). Tipe file ini yaitu yang paling sempurna untuk “dikonsumsi” secara online.
  • PNG: tipe file image ini lebih “berat” ketimbang JPEG atau JPG. Biasanya digunakan alasannya yaitu butuh background transparan yang memang disupport oleh tipe file ini. Yang pakai tipe file ini biasanya yaitu 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 digunakan buat animasi-animasi kecil. Biasanya sih meme-meme itu deh. Sudah pada tahulah pasti. Biasanya GIF ini juga lebih berat ketimbang JPEG, alasannya yaitu 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 yaitu 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 memiliki spektrum warna yang kompleks.

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

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

Supaya lebih jelas, coba perhatikan gambar berikut.

Yang kanan, yaitu spektrum warna CMYK–yang biasa digunakan di mesin cetak. Sedangkan yang kiri yaitu 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, alasannya yaitu ya sanggup sama persis sanggup enggak. Tergantung settingan, baik settingan mesin cetak maupun settingan monitor. Bahkan satu merek monitor sanggup 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 ia penyebabnya.

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

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

FYI, alasannya yaitu lebih kompleks spektrumnya, sudah niscaya CMYK akan lebih berat loading-nya.

Lanjut!

3. Resize sesuai lebar frame

Nah, kebanyakan niscaya pada nggak pernah tahu berapa ukuran image yang paling pas untuk blog masing-masing kan ya? Sehingga hasilnya image yang digunakan tuh yaitu yang punya ukuran gede, biar aman. Nggak pecah-pecah.

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

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

Terus terang, aku 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 kau terbiasa pakai Photoshop, kau sanggup pencet tombol print screen yang ada di keyboard laptop atau PC, kemudian buka PS > New …

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

Krop-lah sesuai frame lebar tulisan. Kalau sudah gres 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, alasannya yaitu 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. Kaprikornus untuk 730 px, tingginya untuk perbandingan itu berarti sekitar 500 px. Ini maksimal. Lebih pendek sih baiklah juga. Kalau tinggi, nggak usah dipermasalahkan pada intinya.

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

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

Kalau sudah diukur, selanjutnya kan praktis dijadikan standar.

4. Kompres supaya lebih ringkas lagi

Apanya yang ringkas? Ya, data file image-nya.
Dengan dikompres, data-data yang nggak terpakai akan disingkirkan. Sehingga file image kau akan lebih ramping lagi.
Kalau di WordPress ada pluginsnya. Ada beberapa sih, di antaranya WP Smush, EWWW Image Optimizer, CW Image Optimizer, dan lain-lain.
Kalau nggak mau nambah plugins, atau buat kau yang ngeblog di Blogspot, sanggup pakai TinyPNG.

5. Lengkapi SEO Onpage

Yang terakhir, jangan lupa lengkapi SEO Onpage. Meliputi:
  • Ganti nama file yang sesuai dengan keywords artikel.
  • Lengkapi alt image attributes, isi dengan keywords utama
  • Lengkapi dengan kredit kalau kau ambil dari source lain.

Gitu deh, langkah-langkah meningkatkan secara optimal image biar nggak bikin blog kita berat.
Nah, kalau ukuran images untuk digunakan di media sosial sih, aku pernah kasih di blog ini. Silakan dilihat kalau ada yang kelewat.
Rumit ya?
Iya, siapa bilang ngeblog gampang? :))