10 Tips Optimasi Gambar Yang Perlu Anda Tahu

cara optimasi image

Jika Anda menjalankan toko online, pengoptimalan gambar adalah seni yang ingin Anda kuasai. Dari menarik pembeli yang menggunakan gambar Google hingga mengurangi waktu pemuatan situs, optimisasi gambar adalah bagian penting dari membangun situs web e-commerce yang sukses, karena fotografi produk Anda adalah landasan toko online Anda.

Apa itu optimasi gambar?

Optimasi gambar adalah tentang mengurangi ukuran file gambar Anda sebanyak mungkin tanpa mengorbankan kualitas sehingga waktu buka halaman Anda tetap cepat. Ini juga tentang SEO gambar. Artinya, mendapatkan gambar produk dan gambar dekoratif untuk diperingkat di Google dan mesin pencari gambar lainnya.

Pernahkah pertanyaan berikut membuat Anda bingung?

  • Mengapa ketika saya melakukan pencarian gambar 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?

Hari ini Anda akhirnya akan memiliki jawaban karena kita menyelami lebih dalam pertanyaan ini dan banyak lagi.

cara optimasi image

Berikut cara mengoptimalkan gambar untuk web:

  1. Beri nama gambar Anda secara deskriptif dan dalam bahasa sederhana.
  2. Optimalkan atribut alt Anda dengan hati-hati.
  3. Pilih dimensi gambar dan sudut produk Anda dengan bijak.
  4. Kurangi ukuran file gambar Anda.
  5. Pilih jenis file yang tepat.
  6. Optimalkan thumbnail Anda.
  7. Gunakan peta situs gambar.
  8. Waspadalah terhadap gambar dekoratif.
  9. Berhati-hatilah saat menggunakan jaringan pengiriman konten (CDN).
  10. Uji gambar Anda.
  11. (opsional) Gunakan hosting berkualitas bagus untuk mempercepat website anda. Bisa anda lihat di artikel hosting terbaik berikut.

1. Beri nama gambar secara deskriptif dan sederhana

Sangat mudah untuk menembus ratusan jepretan produk dan mempertahankan nama file default yang ditetapkan oleh kamera Anda.

Ketika datang ke SEO gambar, penting untuk menggunakan kata kunci yang relevan untuk membantu peringkat halaman web Anda di mesin pencari. Membuat nama file yang deskriptif dan kaya kata kunci sangat penting untuk optimasi gambar. Mesin pencari tidak hanya merayapi teks di halaman web Anda, mereka juga merayapi nama file gambar Anda.

Anda dapat menggunakan nama generik yang ditugaskan kamera Anda untuk gambar (mis. DCMIMAGE10.jpg). Namun, akan jauh lebih baik untuk menamai file 2012-Ford-Mustang-LX-Red.jpg.

Pikirkan tentang bagaimana pelanggan Anda mencari produk di situs web Anda. Pola penamaan apa yang mereka gunakan ketika mereka mencari? Pada contoh di atas, pembeli mobil dapat mencari istilah seperti:

2012 Red Ford Mustang LX
Ford Mustang LX Red 2012
Red Ford Mustang LX 2012

Lihatlah analisis situs web Anda untuk melihat pola kata kunci apa yang diikuti pelanggan Anda. Tentukan pola penamaan yang paling umum yang mereka gunakan dan terapkan rumus itu untuk proses penamaan file gambar Anda.

Jika Anda tidak akan mendapatkan data-driven, pastikan untuk menggunakan kata kunci yang relevan dan membantu ketika memberi nama gambar Anda (yaitu mencoba untuk menjadi deskriptif).

2. Optimalkan atribut alt di image Anda

Atribut Alt adalah alternatif teks untuk gambar ketika browser tidak dapat membuatnya dengan benar. Mereka juga digunakan untuk aksesibilitas web. Bahkan ketika gambar ditampilkan, jika Anda mengarahkan kursor ke atasnya, Anda akan melihat teks atribut alt (tergantung pada pengaturan browser Anda).

Atribut alt juga menambah nilai SEO ke situs web Anda. Menambahkan atribut alt yang sesuai yang menyertakan kata kunci yang relevan ke gambar di situs web Anda dapat membantu Anda peringkat lebih baik di mesin pencari. Sebenarnya, menggunakan atribut alt mungkin adalah cara terbaik untuk produk e-commerce Anda muncul di pencarian gambar dan web Google.

Prioritas nomor satu dalam hal 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 biasa, seperti yang Anda lakukan untuk nama file gambar Anda.
  • Jika Anda menjual produk yang memiliki nomor model atau nomor seri, gunakan di atribut alt Anda.
  • Jangan isi atribut alt Anda penuh dengan kata kunci (mis. Alt = “ford mustang muscle car beli sekarang harga terbaik murah dijual”).
  • Jangan gunakan atribut alt untuk gambar dekoratif. Mesin pencari dapat menghukum Anda karena optimasi yang berlebihan.

Akhirnya, selalu lakukan pemeriksaan kewarasan dari waktu ke waktu. Lihat sumber halaman web Anda dan periksa untuk melihat apakah atribut alt Anda diisi dengan benar. Anda akan terkejut dengan apa yang Anda lewatkan ketika Anda bergerak dengan kecepatan kewirausahaan.

3. Pilih dimensi gambar dan sudut produk Anda dengan bijak

Ini adalah praktik umum untuk menunjukkan berbagai sudut produk Anda. Kembali ke contoh Ford Mustang, Anda tidak ingin hanya menunjukkan satu foto mobil saja, terutama jika Anda mencoba untuk menjualnya. Anda sebaiknya menunjukkan foto-foto:

  • Interior.
  • Bagian belakang, terutama spoiler udara itu.
  • Pelek.
  • Mesinnya … itu Mustang .

Cara terbaik untuk memanfaatkan foto-foto ekstra ini adalah dengan mengisi atribut alt Anda. Dan cara Anda melakukannya adalah dengan membuat atribut alt unik untuk setiap jepretan produk.

  • 2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg -> menggunakan atribut alt: alt = “2012 Ford Mustang LX Trim Interior Kulit Merah”
  • 2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg -> menggunakan atribut alt dari: alt = “2012 Ford Mustang LX Red Rear View Spoiler Udara”

Kuncinya di sini adalah untuk menambahkan deskripsi ke atribut alt dasar Anda sehingga pencari potensial mendarat di situs web Anda. Jika Anda melakukan pekerjaan ekstra, Google akan membalas Anda dengan peringkat bagus di halaman pencarian nantinya.

Sebuah kata hati-hati dalam menyediakan gambar yang lebih besar

Sekarang Anda mungkin ingin memberikan tampilan yang lebih besar bagi pengunjung Anda, yang bisa membuat pengalaman pengguna yang luar biasa, tapi hati-hati.

Apa pun yang Anda lakukan, jangan letakkan gambar terbesar di halaman web Anda dan cukup menyusutkan dimensi melalui kode sumber. Ini akan menambah waktu buka halaman Anda karena ukuran file yang lebih besar terkait dengan gambar.

Alih-alih, buatlah gambar yang lebih kecil dan berikan opsi untuk melihat gambar yang lebih besar di jendela sembul atau di laman web terpisah. Kiat : Pelajari cara membuat gambar produk diperbesar dalam tema Anda menggunakan zoom gambar jQuery .

4. Kurangi ukuran file gambar Anda

Pertimbangkan ini:

  • Hampir 50% konsumen bahkan tidak akan menunggu 3 detik untuk memuat situs e-niaga.
  • … dan, secara global, waktu muat halaman rata-rata sebenarnya meningkat.
  • Amazon menemukan bahwa jika halaman mereka melambat hanya dalam satu detik, mereka akan kehilangan $ 1,6 miliar per tahun .
  • Google menggunakan waktu pemuatan halaman sebagai faktor peringkat dalam algoritma mereka.

Jadi, jika Anda memiliki gambar yang perlahan “ngiler” di layar dan butuh waktu 15 detik untuk memuat? Nah, Anda bisa mencium calon pelanggan itu selamat tinggal!

Jadi, apa yang bisa kamu lakukan?

Ketika seorang pelanggan tiba di situs Anda, perlu beberapa saat untuk memuat semuanya, tergantung pada seberapa besar file Anda. Semakin besar ukuran file, semakin lama waktu yang dibutuhkan untuk memuat halaman web. (Catatan: Jika Anda seorang pedagang Shopify, kami secara otomatis mengompres gambar, jadi ini seharusnya tidak menjadi masalah bagi Anda.)

Jika Anda dapat mengurangi ukuran file gambar pada halaman web Anda dan meningkatkan kecepatan pemuatan halaman, lebih sedikit orang yang mengunjungi situs Anda akan mengklik.

Salah satu cara Anda dapat 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 serendah mungkin sambil tetap memperhatikan kualitas gambar.

Cara mengoptimalkan gambar tanpa Photoshop

Jika Anda tidak memiliki Adobe Photoshop, ada banyak alat daring yang dapat Anda gunakan untuk mengedit gambar. Adobe bahkan memiliki aplikasi pengeditan gambar gratis untuk smartphone dan tablet, Photoshop Express . Alat ini tidak memiliki semua kemampuan versi desktop Adobe Photoshop, tetapi mencakup semua dasar-dasar pengeditan gambar dan tidak memerlukan biaya tambahan.

Alat pengeditan gambar online mengesankan lainnya adalah:

  • PicMonkey telah dideskripsikan oleh para ahli sebagai “alat pengeditan foto yang luar biasa hebat”.
  • PIXLR super user-friendly dan dilengkapi dengan aplikasi gratis 100% untuk smartphone Anda, sehingga Anda dapat mengedit saat bepergian.
  • Canva adalah editor gambar online yang cukup canggih.

Akhirnya, selalu ada GIMP . GIMP adalah aplikasi perangkat lunak pengedit gambar open-source gratis yang dapat dijalankan pada Windows, Mac atau Linux. Itu dapat melakukan semua yang dapat dilakukan Photoshop, tetapi cenderung sedikit clunkier. Tetapi untuk aplikasi pengeditan gambar gratis, Anda tidak bisa mengalahkannya.

Seberapa besar seharusnya file gambar?

Untuk gambar e-niaga, aturan praktis yang baik adalah mencoba menjaga ukuran file gambar Anda di bawah 70 kb. Kadang-kadang bisa 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.

Gambar JPEG (atau .jpg) agak dari jenis 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) memiliki kualitas lebih rendah daripada 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 yang sederhana dan sederhana di laman web (yang mencakup hanya beberapa warna). Tetapi untuk gambar dan foto yang kompleks, GIF tidak selalu menarik. Ini terutama berlaku untuk gambar besar.

Gambar PNG menjadi lebih populer sebagai alternatif untuk GIF. PNG mendukung lebih banyak warna daripada GIF dan mereka tidak menurun seiring waktu dengan penghematan ulang, 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 beberapa tips yang perlu diingat ketika memilih jenis file:

  • Dalam kebanyakan kasus dalam e-commerce, JPEG akan menjadi taruhan terbaik Anda. Mereka memberikan kualitas terbaik untuk ukuran file terkecil.
  • Jangan pernah menggunakan GIF untuk gambar produk besar. Ukuran file akan sangat besar dan tidak ada cara yang baik untuk menguranginya. Gunakan GIF hanya untuk gambar kecil dan gambar dekoratif.
  • PNG dapat menjadi alternatif yang baik untuk JPEG dan GIF. Jika Anda hanya bisa mendapatkan foto produk dalam format PNG, coba gunakan PNG-8 melalui PNG-24. PNG unggul sebagai gambar dekoratif sederhana karena ukuran file yang sangat kecil.

Sebagian besar perangkat lunak pengedit gambar dapat menyimpan gambar ke salah satu format file yang dibahas di atas.

6. Optimalkan thumbnail Anda

Banyak situs e-niaga akan menggunakan gambar mini, terutama pada halaman kategori. Mereka dengan cepat memamerkan produk tanpa menggunakan terlalu banyak real estat.

Thumbnail memang bagus, tapi hati-hati; mereka bisa menjadi pembunuh diam-diam. Korban? Kecepatan memuat halaman Anda. Thumbnail biasanya disajikan pada titik-titik kritis selama proses belanja. Jika mereka mencegah halaman kategori Anda tidak dimuat dengan cepat, Anda dapat kehilangan pelanggan potensial.

Jadi, apa yang bisa kamu lakukan?

Buat ukuran file thumbnail Anda sekecil mungkin. Mungkin layak membiarkan kualitas slide mendukung ukuran file yang lebih rendah di sini. Ingat, dampak kumulatif dari thumbnail Anda akan berdampak besar pada waktu buka halaman Anda.

Variasikan teks atribut alt Anda agar tidak menggandakan teks yang akan Anda gunakan untuk versi yang lebih besar dari gambar yang sama. Sebenarnya, buat teks alt Anda sangat berbeda. Hal terakhir yang Anda inginkan adalah gambar mini diindeks alih-alih gambar yang lebih besar. Sebuah case dapat dibuat untuk meninggalkan alt teks seluruhnya.

7. Gunakan sitemap gambar

Jika situs Anda menggunakan galeri Javascript, pop-up gambar atau cara “mencolok” lainnya untuk meningkatkan pengalaman berbelanja secara keseluruhan, peta situs gambar akan membantu membuat gambar Anda diperhatikan oleh Google.

Perayap web tidak dapat merayapi gambar yang tidak dipanggil secara khusus dalam kode sumber halaman web. Jadi, untuk memberi tahu perayap tentang gambar yang tidak dikenal, Anda harus mencantumkan lokasinya di peta situs gambar.

Anda dapat menyisipkan baris berikut di file robots.txt Anda, menunjukkan path ke sitemap Anda:

Sitemap: http://example.com/sitemap_location.xml

Atau Anda dapat mengirimkan peta situs ke Google menggunakan Search Console.

Google memiliki banyak panduan untuk penerbitan gambar , yang dapat membantu peringkat situs web Anda lebih tinggi pada SERP. Selain itu, Anda dapat menggunakan peta situs Google untuk memberikan lebih banyak informasi kepada Google tentang gambar-gambar di situs web Anda, yang dapat membantu Google menemukan lebih banyak gambar Anda daripada sendiri.

Menggunakan peta situs tidak menjamin bahwa gambar Anda akan diindeks oleh Google, tetapi ini jelas merupakan langkah positif menuju SEO gambar. Alat Webmaster Google memiliki banyak saran untuk memformat peta situs Anda dengan benar.

Penting bagi Anda untuk menambahkan tag khusus untuk semua gambar Anda. Anda juga dapat membuat peta situs terpisah untuk membuat daftar gambar secara eksklusif. Yang penting adalah menambahkan semua informasi yang diperlukan, saat menggunakan tag tertentu, ke peta situs apa pun yang Anda miliki atau akan Anda buat. Ikuti panduan ini yang disarankan Google ketika membuat peta situs dengan informasi gambar.

8. Waspadai gambar dekoratif

Situs web sering memiliki bermacam-macam gambar dekoratif, seperti gambar latar belakang, tombol dan batas. Apa pun yang tidak terkait dengan produk mungkin dapat dianggap sebagai gambar dekoratif.

Meskipun gambar dekoratif dapat menambah banyak daya tarik estetika ke halaman web, mereka dapat menghasilkan ukuran file gabungan yang besar dan waktu buka yang lambat. Karena itu, Anda mungkin ingin mempertimbangkan untuk melihat lebih dekat pada gambar dekoratif Anda sehingga mereka tidak akan mengganggu kemampuan situs web Anda untuk mengubah pengunjung menjadi pelanggan.

Anda ingin memeriksa ukuran file semua gambar dekoratif di situs Anda dan menggunakan templat yang meminimalkan ukuran file.

Berikut adalah beberapa tips untuk mengurangi ukuran file gambar dekoratif Anda:

  • Untuk gambar yang membentuk batas atau pola sederhana, buat menjadi PNG-8 atau GIF. Anda dapat membuat gambar yang terlihat bagus dengan ukuran 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 gambar latar belakang gaya-wallpaper yang besar itu. Itu bisa berupa file besar. Kecilkan mereka sebanyak mungkin tanpa merusak kualitas gambar.

Salah satu trik yang dapat Anda gunakan untuk menggerogoti ukuran gambar latar belakang Anda adalah dengan memotong bagian tengah gambar latar belakang, dan menjadikannya warna datar atau bahkan transparan. Ini dapat mengurangi ukuran file secara substansial.

9. Berhati-hatilah saat menggunakan CDN

Jaringan pengiriman konten (CDNs) adalah tempat tujuan untuk menyimpan gambar dan file media lainnya. Mereka dapat meningkatkan kecepatan memuat halaman Anda dan membantu menyelesaikan masalah bandwidth.

Satu-satunya kelemahan adalah ketika datang ke backlink. Seperti yang 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, kemungkinan besar Anda menghapus gambar dari domain Anda dan menempatkannya di domain CDN. Jadi ketika seseorang menautkan ke gambar Anda, mereka sebenarnya menautkan ke domain CDN.

Oleh karena itu, praktik terbaik adalah:

  • Hanya karena ada sesuatu yang “trendi” tidak berarti Anda harus mengikutinya seperti domba. Tentukan apakah itu benar-benar langkah terbaik untuk bisnis Anda terlebih dahulu.
  • Jika situs web Anda melakukan banyak bisnis setiap bulan, maka CDN kemungkinan besar merupakan ide yang bagus karena dapat membantu menyelesaikan masalah bandwidth.
  • Jika situs Anda hanya mendapat ribuan pengunjung sehari sekarang, kemungkinan situasi hosting Anda saat ini dapat menangani beban.

Ada beberapa cara seputar masalah SEO gambar yang terkait dengan CDN, tetapi pastikan untuk memiliki bantuan profesional Anda menyusun strategi langkah Anda terlebih dahulu.

10. Uji gambar Anda

Inti dari mengoptimalkan gambar Anda adalah untuk membantu meningkatkan laba Anda. Kami telah berbicara tentang mengurangi ukuran file dan membuat mesin pencari mengindeks gambar Anda, tetapi bagaimana dengan menguji gambar untuk melihat apa yang dikonversi menjadi lebih banyak pelanggan?

Uji jumlah gambar produk per halaman: Karena waktu buka adalah masalah untuk beberapa situs e-commerce yang tidak di-host, Anda mungkin menemukan bahwa mengurangi jumlah gambar pada halaman akan meningkatkan klik melalui tarif dan penjualan. Mungkin juga menyediakan banyak gambar per halaman akan meningkatkan pengalaman pengguna dan menghasilkan lebih banyak penjualan. Satu-satunya cara untuk mengetahuinya adalah dengan mengujinya.

Uji sudut mana 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 foto produk Anda. Melakukan survei dan berbicara dengan pelanggan Anda adalah kebiasaan yang baik untuk dilakukan, secara umum. Namun, verifikasi dengan pengujian.

Uji berapa banyak daftar produk yang harus Anda miliki di halaman kategori: 10, 20, 100 produk? Uji jumlah produk yang Anda daftarkan pada halaman kategori untuk melihat mana yang paling cocok untuk pelanggan Anda.