Bagaimana cara mengoptimalkan gambar pada website toko online Anda? Kali ini saya akan menjabarkan secara rinci optimasi gambar yang berpengaruh dengan waktu memuat situs, bahkan bisa mengurangi waktu memuat pada situs Anda.
Optimasi gambar ini adalah bagian penting ketika Anda sedang membangun website ecommerce yang sukses.
Apa itu Optimasi gambar?
Optimasi gambar adalah mengenai pengurangan ukuran file pada gambar Anda sebanyak mungkin tanpa mengurangi kualitas sehingga halaman Anda bisa memuat waktu lebih cepat. Ini juga tentang SEO gambar.
Ini akan membuat gambar produk dan gambar dekorasi mendapatkan peringkat lebih baik di mata Google dibandingkan dengan gambar lain di mesin pencari.
Pernahkah Anda mengikuti pertanyaan-pertanyaan berikut ini?
- Mengapa ketika saya melakukan pencarian gambar di Google, foto produk saya tidak pernah muncul?
- Apakah saya perlu menambahkan atribut alt ke gambar saya?
- Apa perbedaan antara JPEG, GIF dan PNG? Kapan saya harus menggunakan satu sama lain?
Nah, sekarang Anda akhirnya akan memiliki jawaban-jawaban tersebut di atas karena kita akan menggali lebih dalam dari pertanyaan ini dan bahkan lebih.
1. Namai gambar Anda secara deskriptif dan dalam bahasa sederhana
Ketika Anda membidik produk dengan sebuah kamera, biasanya nama file akan tersimpan secara default.
Tetapi ketika diterapkan dalam gambar SEO, penting untuk menggunakan kata kunci yang relevan untuk membantu peringkat halaman web Anda di mesin pencari.
Buat yang deskriptif, nama file kaya kata kunci sangat penting untuk optimasi gambar.
Mesin pencari tidak hanya merayapi nama pada laman web Anda, mereka juga merayapi nama file gambar Anda.
Ambil gambar ini, sebagai contoh.
Anda akan menggunakan nama generik kamera yang ditetapkan pada gambar (e.g. DCIM001.jpg). Namun, itu akan lebih baik menamainya file Mobil-Mitsubishi-Expander-White-Pearl.jpg.
Pikirkan mengenai bagaimana konsumen Anda mencari produk pada website Anda. Apakah pola penamaan yang mereka gunakan ketika mereka mencari? Dalam contoh di atas, pembeli mobil mungkin mencari istilah seperti:
- Mobil Mitsubishi Expander White Pearl Ultimate A/T 2017
- Mitsubishi Expander White Pearl Ultimate A/T2017
- 2017 Mitsubishi Expander White Pearl Ultimate A/T
Lihatlah analisis website Anda untuk melihat pola kata kunci yang diikuti pelanggan Anda. Tentukan pola penamaan yang paling umum yang mereka gunakan dan terapkan rumus itu ke proses penamaan file gambar Anda.
Jika Anda tidak ingin menggunakan data tersebut, pastikan untuk menggunakan kata kunci yang relevan dan berguna saat memberi nama gambar Anda (misal: cobalah deskriptif).
Lihat Q & A ini dari Moz untuk memahami pentingnya penamaan file gambar secara strategis di situs Anda. Ini pasti dapat meningkatkan SEO on-page Anda, namun juga dapat membantu halaman dan gambar Anda berperingkat lebih tinggi di search engine results pages (SERPs).
2. Optimalkan atribut alt Anda dengan hati-hati
Atribut alt adalah teks alternatif untuk gambar ketika browser tidak dapat benar membuatnya. Mereka juga digunakan untuk aksesibilitas web. Bahkan saat gambar ditampilkan, jika Anda mengarahkan kursor ke atasnya, Anda akan melihat teks atribut alt (tergantung pada setelan browser Anda).
Atribut alt juga menambahkan nilai SEO ke situs Anda. Menambahkan atribut alt yang sesuai yang menyertakan kata kunci yang relevan dengan gambar di situs Anda dapat membantu Anda mendapatkan peringkat yang lebih baik di mesin pencari.
Sebenarnya, menggunakan atribut alt mungkin cara terbaik untuk produk ecommerce Anda muncul di gambar Google dan penelusuran web.
Mari kita lihat kode sumber atribut alt.
<img src="mobil-mitsubishi-expander-white-pearl.jpg" alt="Mitsubishi Expander White Pearl Ultimate " width="740" height="400" />
Prioritas nomor satu ketika menyangkut pengoptimalan gambar adalah mengisi setiap atribut alt untuk setiap gambar produk di situs Anda.
Berikut adalah beberapa aturan sederhana untuk atribut alt:
- Jelaskan gambar Anda dalam bahasa sederhana, sama seperti yang Anda lakukan untuk nama file gambar Anda.
- Jika Anda menjual produk yang memiliki nomor model atau nomor seri, gunakan atribut alt Anda.
- Jangan mengisi atribut alt Anda yang penuh dengan kata kunci (misal: alt = “mobil mitsubishi expander white pearl ultimate tahun 2017”).
- Jangan gunakan atribut alt untuk gambar dekoratif. Mesin telusur dapat menghukum Anda karena lebih mengoptimalkan.
Akhirnya, selalu lakukan pemeriksaan kesegaran dari waktu ke waktu. Lihat sumber halaman web Anda dan periksa untuk melihat apakah atribut alt Anda terisi dengan benar. Anda akan terkejut dengan apa yang Anda lewatkan saat Anda bergerak dengan kecepatan entrepreneurship.
3. Pilih dimensi dan sudut produk Anda dengan bijak
Sudah menjadi kebiasaan umum untuk menunjukkan banyak sudut produk Anda. Kembali ke contoh Mitsubishi Expander, Anda tidak ingin hanya menunjukkan satu tembakan dari mobil, terutama jika Anda mencoba menjualnya. Ini akan menjadi kepentingan terbaik Anda untuk menunjukkan gambar:
- Interior dan Eksterior
- Desain yang atraktif dan dinamis
- Fitur teknologi terdepan dan keamanan
- Mesin dengan kenyamanan dan performanya
Cara terbaik untuk memanfaatkan foto tambahan ini adalah dengan mengisi atribut alt Anda. Dan cara Anda melakukannya adalah dengan menciptakan atribut alt yang unik untuk setiap produk yang ditembak.
- Mobil-Mitsubishi-Expander-White-Pearl-2017-Emergency-Stop-Signal.jpg -> menggunakan atribut alt: alt=”Mobil Mitsubishi Expander White Pearl 2017 Emergency Stop Signal”
- Mobil-Mitsubishi-Expander-White-Pearl-2017-Smart-System-Etacs.jpg -> using the alt attribute of: alt=”Mobil Mitsubishi Expander White Pearl 2017 Smart System Etacs”
Kuncinya di sini adalah menambahkan deskripsi ke atribut alt dasar Anda sehingga pencari potensial mendarat di situs Anda. Jika Anda melakukan pekerjaan ekstra, Google akan memberi penghargaan kepada Anda dengan pencari.
Sebuah kata peringatan untuk memberikan gambar yang lebih besar
Sekarang Anda mungkin ingin memberikan tampilan yang lebih besar untuk pengunjung Anda, yang dapat membuat pengalaman pengguna hebat, tapi hati-hati.
Apa pun yang Anda lakukan, jangan menempatkan gambar terbesar di halaman web Anda dan cukup mengecilkan dimensi melalui kode sumber. Ini akan meningkatkan waktu buka halaman Anda karena ukuran file yang lebih besar terkait dengan gambar.
Sebagai gantinya, buatlah gambar yang lebih kecil dan berikan pilihan untuk melihat gambar yang lebih besar dalam pop-up atau pada halaman web yang terpisah.
4. Kurangi ukuran file gambar Anda
Pertimbangkan hal ini:
- Hampir 50% konsumen bahkan tidak akan menunggu 3 detik untuk website ecommerce dimuat.
- … dan, secara global, rata-rata waktu buka halaman sebenarnya meningkat.
- Amazon menemukan bahwa jika halaman mereka melambat hanya dalam satu detik, mereka akan kehilangan $1,6 miliar per tahun.
- Google menggunakan waktu buka halaman sebagai faktor peringkat dalam algoritmanya.
Jadi, jika Anda memiliki gambar yang perlahan di layar dan memakan waktu 15 detik untuk dimuat? Nah, Anda bisa mencium calon pelanggan itu pergi
Jadi, apa yang bisa Anda lakukan?
Saat pelanggan tiba di situs Anda, perlu beberapa saat untuk memuat semuanya, tergantung seberapa besar file Anda. Semakin besar ukuran file, semakin lama dibutuhkan halaman web untuk dimuat. (Catatan: Jika Anda adalah pemasar di web ecommerce Shopify, secara otomatis memampatkan gambar, jadi ini seharusnya tidak menjadi masalah bagi Anda.)
Jika Anda dapat mengurangi ukuran file gambar di halaman web Anda dan meningkatkan kecepatan pemuatan halaman, semakin sedikit orang yang mengunjungi situs Anda akan mengkliknya.
Salah satu cara Anda bisa mengurangi ukuran file gambar adalah dengan menggunakan perintah “Save for Web” di Adobe Photoshop. Saat menggunakan perintah ini, Anda ingin menyesuaikan gambar dengan ukuran file terendah yang mungkin sambil memperhatikan kualitas gambar.
- Quality: Temukan ini di pojok kanan atas (i.e. 70).
- File format: Temukan ini di pojok kanan atas (i.e. JPEG).
- Optimization: Temukan kotak centang ini di pojok kanan atas (i.e. Optimized).
- Color: Temukan kotak centang ini di pojok kanan atas (i.e. Convert to sRBG).
- Downsizing and sharpening: Temukan ini di bagian bawah, sudut kanan (i.e. W: and H:).
- Expected file size: Temukan ini di bagian bawah, sudut kiri (i.e. 136.7K).
Anda juga dapat memilih untuk menggunakan “Export As”.
Cara mengoptimalkan gambar tanpa Photoshop
Jika Anda tidak memiliki Adobe Photoshop, ada banyak tool online yang dapat Anda gunakan untuk mengedit gambar. Adobe bahkan memiliki aplikasi editing gambar gratis untuk smartphone dan tablet, Photoshop Express.
Tool ini tidak memiliki semua kemampuan versi desktop Adobe Photoshop, namun mencakup semua dasar editing gambar.
Pengeditan gambar online yang mengesankan lainnya juga
- PicMonkey telah dijelaskan oleh para ahli sebagai “tool pengedit foto yang sangat bagus”.
- PIXLR adalah aplikasi pengedit foto yang super user-friendly dan hadir dengan aplikasi gratis 100% untuk ponsel cerdas Anda, sehingga Anda dapat mengedit saat dalam perjalanan.
- Canva adalah editor gambar online lain yang cukup maju.
Yang lainnya ada GIMP. GIMP adalah sebuah open source, aplikasi software pengedit gambar dan gratis yang dapat dijalankan di Windows, Mac atau Linux.
Software ini bisa melakukan segala hal yang bisa dilakukan Photoshop, tapi cenderung sedikit berat. Tapi untuk aplikasi editing gambar gratis, Anda tidak bisa mengalahkannya.
Seberapa besar seharusnya file gambar?
Untuk gambar ecommerce, aturan praktis yang bagus adalah cobalah Anda untuk menetapkan ukuran file gambar di bawah 70 kb. Terkadang memang sulit, terutama untuk gambar yang lebih besar.
5. Pilih jenis file yang tepat
Ada tiga jenis file umum yang digunakan untuk mengirim gambar ke web: JPEG, GIF, dan PNG.
Mari kita lihat tiga jenis file dan bagaimana pengaruhnya terhadap gambar yang sama:
Gambar JPEG (atau .jpg) agak mirip dengan tipe file lama. JPEG telah menjadi gambar standar de facto Internet. Gambar JPEG dapat dikompres secara signifikan, yang menghasilkan gambar berkualitas dengan ukuran file kecil. Pada gambar di atas, format JPEG memungkinkan kualitas yang layak pada ukuran file yang rendah.
Gambar GIF (.gif) lebih rendah dari gambar JPEG dan digunakan untuk gambar yang lebih sederhana, seperti ikon dan gambar dekoratif. GIF juga mendukung animasi, karena saya yakin Anda tahu.
Mengenai pengoptimalan gambar, GIF sangat bagus untuk gambar sederhana dan sederhana di halaman web (yang hanya mencakup beberapa warna). Tapi untuk gambar dan foto yang rumit, GIF tidak selalu menarik. Hal ini terutama berlaku untuk gambar besar.
Kita bisa lolos dengan menggunakan GIF pada gambar MacBook di atas karena foto cukup kecil sehingga GIF bekerja dengan baik.
Gambar PNG menjadi lebih populer sebagai alternatif GIF. PNG mendukung lebih banyak warna daripada GIF dan tidak terdegradasi dari waktu ke waktu dengan menghemat waktu, seperti yang dilakukan JPEG.
Meskipun jenis file PNG mulai digunakan lebih sering, ukuran file masih bisa jauh lebih besar daripada gambar JPEG.
Perhatikan bagaimana gambar PNG-24 lebih dari tiga kali lebih besar dalam ukuran file daripada PNG-8. Inilah sebabnya mengapa Anda harus sangat berhati-hati dengan PNG.
Berikut adalah contoh ekstrim, di mana ukuran file gambar telah ditetapkan pada ukuran 24 kb untuk ketiga jenis file:
Seperti yang bisa Anda lihat, JPEG adalah pemenang yang jelas di sini. GIF dan PNG harus menurunkan kualitas agar tetap pada ukuran file yang rendah.
Berikut adalah beberapa tip yang perlu diingat saat memilih jenis file:
- Dalam kebanyakan kasus dalam ecommerce, JPEG akan menjadi taruhan terbaik Anda. Mereka memberikan kualitas terbaik untuk ukuran file terkecil.
- Jangan pernah menggunakan GIF untuk gambar produk yang besar. Ukuran file akan sangat besar dan tidak ada cara yang baik untuk menguranginya. Gunakan GIF untuk gambar kecil dan gambar dekoratif saja.
- PNG bisa menjadi alternatif yang baik untuk JPEG dan GIF. Jika Anda hanya bisa mendapatkan foto produk dalam format PNG, coba gunakan PNG-8 di atas PNG-24. PNG unggul sebagai gambar dekoratif sederhana karena ukuran file mereka sangat kecil.
Sebagian besar software editing gambar dapat menyimpan gambar ke format file yang telah dibahas di atas.
6. Optimalkan thumbnail Anda
Banyak website ecommerce akan menggunakan gambar kecil, terutama pada halaman kategori. Mereka dengan cepat menampilkan produk tanpa terlalu banyak mengambil barang tidak bergerak.
Pergunakan thumbnail dengan baik tapi hati-hati, karena biasanya thumbnail ini akan dipresentasikan pada titik kritis selama proses belanja.
Jika halaman kategori Anda tidak dapat dimuat dengan cepat, Anda bisa saja kehilangan calon pelanggan yang berkunjung ke toko online Anda. Jadi, bagi para pedagang ecommerce tidak perlu mengkhawatirkan tentang pengoptimalan gambar kecil yang tampil dalam bentuk thumbnail.
Jadi, apa yang bisa Anda lakukan?
- Buatlah ukuran file thumbnail Anda sekecil mungkin. Ini mungkin layak untuk membiarkan slide berkualitas mendukung ukuran file yang lebih rendah di sini. Ingat, dampak kumulatif gambar mini Anda akan berdampak besar pada waktu buka halaman Anda.
- Variasikan teks atribut alt Anda untuk tidak menduplikat teks yang akan Anda gunakan untuk versi yang lebih besar dari gambar yang sama. Seperti kasus faktual, membuat teks alt Anda sangat berbeda. Hal terakhir yang Anda inginkan adalah gambar kecil diindeks daripada gambar yang lebih besar. Sebuah kasus bisa dibuat untuk meninggalkan teks alt sepenuhnya.
7. Gunakan sitemap gambar
Jika situs Anda menggunakan galeri Javascript, gambar pop-up atau cara “mencolok” lainnya untuk meningkatkan keseluruhan pengalaman berbelanja, sitemap gambar akan membantu mendapatkan gambar Anda yang diperhatikan oleh Google.
Perayap web tidak dapat merayapi gambar yang tidak disebutkan secara khusus di kode sumber laman web. Jadi, agar perayap mengetahui gambar yang tidak dikenal, Anda harus mencantumkan lokasinya di sitemap gambar.
Anda dapat memasukkan baris berikut di file robots.txt
Anda, menunjukkan jalan ke sitemap Anda:
Sitemap: http://example.com/sitemap_location.xml
Atau Anda bisa mengirimkan sitemap ke Google menggunakan Search Console.
Google memiliki banyak panduan untuk penerbitan gambar, yang dapat membantu peringkat website Anda lebih tinggi di SERP. Selain itu, Anda dapat menggunakan Google Sitemap untuk memberi Google lebih banyak informasi tentang gambar di website Anda, yang dapat membantu Google menemukan lebih banyak gambar Anda daripada yang dimilikinya.
Menggunakan sitemap tidak menjamin bahwa gambar Anda akan terindeks oleh Google, namun ini jelas merupakan langkah positif menuju citra SEO. Google Webmaster Tools memiliki banyak saran untuk memformat sitemap Anda dengan benar.
Penting bagi Anda untuk menambahkan tag khusus untuk semua gambar Anda. Anda juga bisa membuat sitemap yang terpisah untuk membuat daftar gambar secara eksklusif.
Yang penting adalah menambahkan semua informasi yang diperlukan, saat menggunakan tag tertentu, untuk setiap sitemap yang Anda miliki atau akan buat. Ikuti panduan ini yang disarankan Google saat membuat sitemap dengan informasi gambar.
8. Waspadalah terhadap gambar dekoratif
website sering memiliki beragam gambar dekoratif, seperti gambar latar belakang, tombol dan batas. Apapun produk yang tidak terkait kemungkinan bisa dianggap sebagai citra dekoratif.
Meskipun gambar dekoratif dapat menambahkan banyak daya tarik estetika ke halaman web, namun gambar-gambar ini dapat menghasilkan ukuran file gabungan yang besar dan waktu muat yang lambat.
Oleh karena itu, Anda mungkin ingin mempertimbangkan untuk melihat lebih dekat gambar dekoratif Anda sehingga tidak mengganggu kemampuan situs web Anda untuk mengubah pengunjung menjadi pelanggan.
Anda ingin memeriksa ukuran file dari semua gambar dekoratif di situs Anda dan menggunakan template yang meminimalkan ukuran file.
Berikut adalah beberapa tip untuk mengurangi ukuran file gambar dekoratif Anda:
- Untuk gambar yang membentuk batas atau pola sederhana, buatlah mereka menjadi PNG-8 atau GIF. Anda bisa membuat gambar bagus yang ukurannya hanya beberapa ratus byte.
- Jika memungkinkan, gunakan CSS untuk membuat area berwarna daripada menggunakan gambar. Gunakan styling CSS sebanyak mungkin untuk mengganti gambar dekoratif.
- Perhatikan baik-baik gambar latar belakang bergaya wallpaper. Itu bisa jadi file besar. Kecilkan mereka sebanyak mungkin tanpa merusak kualitas gambar.
Salah satu trik yang bisa Anda gunakan untuk mengurangi ukuran gambar latar belakang Anda adalah dengan memotong bagian tengah gambar latar belakang, dan membuatnya menjadi warna rata atau bahkan transparan. Hal ini dapat menurunkan ukuran file secara substansial.
9. Hati-hati saat menggunakan content delivery networks (CDN)
Pedagang Shopify tidak perlu khawatir tentang hal ini karena shopify adalah solusi yang dihosting, namun yang lain harus memperhatikannya. Content delivery networks (CDN) dikirim ke tempat untuk menampung gambar dan file media lainnya.
Mereka dapat meningkatkan kecepatan pemuatan halaman Anda dan membantu memecahkan masalah bandwidth.
Satu kelemahan adalah ketika datang ke backlink. Seperti yang mungkin Anda ketahui, backlink sangat penting untuk SEO dan semakin banyak backlink yang Anda miliki, semakin baik situs Anda melakukannya di mesin pencari.
Dengan menempatkan gambar Anda di CDN, Anda kemungkinan besar akan menghapus gambar dari domain Anda dan menempatkannya di domain CDN. Jadi, ketika seseorang menautkan gambar Anda, mereka sebenarnya terhubung ke domain CDN.
Oleh karena itu, praktik terbaiknya adalah:
- Hanya karena sesuatu yang “tren” tidak berarti Anda harus mengikutinya. Tentukan apakah itu benar-benar langkah terbaik untuk bisnis Anda terlebih dahulu.
- Jika situs Anda melakukan banyak bisnis setiap bulan, maka CDN kemungkinan besar merupakan ide bagus karena dapat membantu mengatasi masalah bandwidth.
- Jika situs Anda hanya mendapat ribuan pengunjung setiap hari saat ini, kemungkinan situasi hosting Anda saat ini dapat menangani beban.
Ada beberapa cara seputar isu SEO gambar yang terkait dengan CDN, namun pastikan Anda memiliki bantuan profesional untuk menyusun strategi langkah Anda terlebih dahulu.
10. Uji gambar Anda
Inti mengoptimalkan gambar Anda adalah membantu meningkatkan profit Anda. Saya telah berbicara tentang mengurangi ukuran file dan membuat mesin telusur mengindeks gambar Anda, namun bagaimana dengan pengujian gambar untuk melihat apa yang mengkonversi ke lebih banyak pelanggan?
- Uji jumlah gambar produk per halaman: Karena waktu muat menjadi masalah bagi beberapa situs e-commerce yang tidak dihosting, Anda mungkin mendapati bahwa mengurangi jumlah gambar pada halaman akan meningkatkan rasio klik per tayang dan penjualan. Mungkin juga menyediakan banyak gambar per halaman akan meningkatkan pengalaman pengguna dan menghasilkan lebih banyak penjualan. Satu-satunya cara untuk menemukan ini adalah mengujinya.
- Uji sudut yang disukai pelanggan Anda: Anda mungkin melihat peningkatan loyalitas pelanggan dengan memberikan pandangan yang ingin dilihat pelanggan Anda. Cara terbaik untuk mengetahuinya adalah dengan mensurvei pelanggan Anda tentang apa yang paling mereka sukai saat melihat hasil jepretan produk Anda. Survei dan berbicara dengan pelanggan Anda adalah kebiasaan yang bagus untuk masuk ke dalam, secara umum. Masih, verifikasi dengan pengujian.
- Uji berapa banyak cantuman produk yang harus Anda miliki di halaman kategori: 10, 20, 100 produk? Uji jumlah produk yang Anda daftar di halaman kategori untuk melihat apa yang terbaik bagi pelanggan Anda.
Menjaga foto yang indah fungsional
Sekarang pertanyaan tentang gambar ecommerce Anda tidak akan membuat Anda bergoyang-goyang berjam-jam.
Anda tahu beberapa gambar strategi SEO untuk mendapatkan foto produk Anda ke hasil pencarian gambar Google. Anda tahu bagaimana memanfaatkan atribut alt secara penuh. Anda tahu perbedaan antara jenis file dan kapan memilih masing-masing pilihan.
Semoga tips yang saya paparkan di atas, bisa membantu Anda dalam pengoptimalan gambar di website toko online Anda.
Leave a Reply