Halo. Konten blog kami telah diterjemahkan secara otomatis demi kenyamanan Anda. Mohon maaf bila sesekali ada terjemahan yang buruk.

Mengoptimalkan Gambar untuk Web: Sebuah Panduan Praktis

Nov 8, 2016 by Michelle Nickolaisen
A practical guide to optimizing images for the web
Posted Nov 8, 2016 by Michelle Nickolaisen

Gambar adalah penting untuk menjalankan sebuah toko e-commerce berhasil — setelah semua, jika pelanggan potensial anda tidak dapat melihat apa yang mereka beli, mereka tidak sangat mungkin untuk membelinya. Gambar juga dapat membuat atau menghancurkan anda posting blog, meningkatkan SEO anda, dan lebih.

Jauhkan membaca untuk mencari tahu bagaimana untuk membuat foto anda dan gambar yang bekerja untuk anda.

Mengapa optimasi gambar peduli?

Manfaat yang paling jelas untuk mengoptimalkan gambar anda adalah bahwa hal itu lebih baik bagi anda dalam jangka panjang.

Hal ini membuat pengguna ingin bertahan di website anda (karena mereka dapat dengan jelas melihat gambar anda dan mereka tidak mengambil selamanya untuk memuat).

Membuat website anda lebih mudah untuk menemukan di hasil pencarian (karena baik optimasi gambar ini juga search-engine friendly).

Ada juga fakta bahwa itu baik untuk anda pengguna. Optimasi gambar, selain dari umumnya menjadi lebih user-friendly, juga membantu membuat website anda lebih mudah diakses untuk orang-orang dengan gangguan visual (yang mungkin menggunakan pembaca layar yang menarik dari alt-tag untuk menggambarkan gambar untuk pengguna).

Yang berarti lebih banyak pengunjung untuk website anda dan berpotensi lebih banyak penjualan.

Baca juga: Sederhana Cara untuk Membuat Produk Lebih Menarik bagi Konsumen

Optimasi gambar 101

Jadi apa yang masuk ke optimasi gambar?

Nama File dan kode

Pertama dan termudah yang dapat anda lakukan adalah mengubah nama file gambar untuk sesuatu yang deskriptif, daripada 10934.jpg.

Menggambarkan baik apa yang digambarkan dalam gambar ("RedCorvette.jpg") atau apa yang ada di post, jika ini adalah untuk posting blog ("MaintainingYourCorvette.jpg").

Setelah itu, anda dapat menambahkan tag "alt" .

Ini adalah sebuah tag yang masuk dalam kode gambar yang memberikan penjelasan singkat tentang apa itu gambar — anda ingin mendeskripsikan gambar dalam beberapa kata saat menggunakan kata kunci yang relevan.

Dengan contoh di atas, anda mungkin memiliki alt tag "Tahun 2010 Corvette Merah Pemeliharaan."

Tapi jangan kata kunci barang alt tag — anda tidak menambahkan "mobil corvette merah pemeliharaan 2010 mobil toko membeli" sebagai alt-tag karena itu dapat memicu filter spam di algoritma mesin pencari, dan itu juga tidak user-friendly untuk tunanetra pemirsa.

Sebagian besar situs memiliki cara mudah untuk mengedit tag alt, tapi jika tidak, anda dapat klik "view source" atau "view HTML" dalam editor teks untuk mengakses dan mengedit sendiri.

Alt-Tags_HTML_Image_Code.png

Selain dari nama file dan alt tag, banyak situs pembangun (seperti WordPress) akan memberikan anda ruang untuk judul gambar, keterangan, dan ciri-ciri (dan akan dengan mudah membiarkan anda mengedit alt tag) ketika anda meng-upload gambar, seperti yang ditunjukkan di bawah ini.

Mengisi semua bidang yang tersedia adalah yang terbaik rule of thumb untuk optimasi. Judul akan ditampilkan kepada pemirsa rata-rata, tetapi segala sesuatu yang lain akan sebagian besar akan digunakan oleh mesin pencari dan pembaca layar (untuk tunanetra pemirsa yang mengandalkan deskripsi gambar).

 image descriptions

Deskripsi gambar di WordPress

Ukuran dan format

Mengurangi ukuran file gambar anda. Jelas, anda ingin gambar untuk menjadi cukup besar untuk melihat, tapi anda tidak perlu meng-upload gambar yang ribuan piksel lebar dan tinggi.

Pastikan untuk tidak meng-upload gambar ukuran penuh dan kemudian hanya mengubah dimensi yang tampak seperti melalui kode gambar. Jika anda melakukan itu, komputer pengunjung akan memiliki untuk memuat gambar ukuran penuh dan itu akan memperlambat waktu muat turun.

Tidak ada yang keras dan cepat aturan untuk ukuran atau dimensi, tapi inti umum adalah "terkecil ukuran file mungkin tanpa membuat gambar terlalu kecil atau tidak terbaca."

Untuk in-line blog gambar, banyak situs akan dengan lebar 500-800 dan tinggi 300-600. Anda selalu dapat menyertakan link ke gambar ukuran penuh, sehingga orang-orang dapat mendapatkan gambar yang lebih besar ketika mereka klik.

Sejauh file size pergi, gambar tidak boleh lebih besar dari 1MB, dan idealnya, sebagian besar dari mereka akan menjadi sekitar 100-200kb.

Anda juga dapat mengurangi resolusi untuk membuat ukuran file yang lebih kecil, tapi dengan munculnya retina display, anda tidak ingin mengurangi resolusi terlalu banyak atau gambar akan terlihat kabur pada mereka menampilkan.

Untuk mengubah ukuran, anda biasanya dapat memilih untuk mengekspor gambar pada sedikit lebih rendah kualitas, perubahan dimensi gambar, atau mengubah jenis file (lihat di bawah).

Menggunakan format file yang tepat untuk pekerjaan. Bagi sebagian besar menggunakan, .jpg akan menjadi taruhan terbaik anda. Mendukung banyak warna dengan sedikit mungkin ukuran.

Gif cenderung lebih besar ukuran file yang bijak untuk gambar statis, tetapi mereka yang besar untuk gambar animasi (Giphy, siapa pun?).

Ini adalah cara yang bagus untuk menunjukkan anda produk dari semua sudut atau dalam gerak tanpa membuat pengguna memuat video full — Ecwid memungkinkan anda menggunakan animasi gif yang.

Untuk gambar dengan teks, .png adalah sebuah pilihan — gambar-gambar cenderung lebih besar dalam ukuran, tapi memiliki rak teks (dan juga mendukung transparansi).

Praktik terbaik untuk gambar

Di situs anda:

  • Pastikan untuk menyertakan semua keterangan tambahan mungkin, untuk membuat halaman produk anda dan posting blog search-engine friendly.
  • Termasuk beberapa sudut dari produk anda.
  • Pastikan anda mengatur gambar fitur, seperti itulah biasanya gambar yang menarik untuk media sosial preview.

Selalu menggunakan gambar berkualitas tinggi yang lebih luas dari 500px-1000px untuk gambar produk anda. Setelah meng-upload mereka ke toko anda, Ecwid host gambar dan membuat beban cepat secara otomatis. Untuk memastikan beban anda waktu terbaik, cobalah untuk tidak meng-upload gambar yang sangat besar, misalnya, orang-orang dalam format 4K.

It’s terbaik untuk menggunakan gambar persegi untuk produk anda dan kategori gambar, seperti gambar persegi yang mobile-friendly dan selalu terlihat baik pada setiap perangkat. Check out Ecwid toko demo untuk contoh.

Ecwid mendukung retina-siap thumbnail dibuat dari gambar produk anda, jadi don’t khawatir tentang toko anda terlihat baik pada layar retina!

Semua yang harus anda lakukan adalah login ke Panel Kontrol anda, kemudian pergi ke Pengaturan dan kemudian "what's New" untuk mengaktifkan fitur.

the Ecwid Control Panel

Belajar lebih banyak: Cara Optimize Gambar Produk: Langkah-Demi-Langkah Petunjuk dan Sebuah Overview Jasa

Di media sosial:

Secara umum, anda tidak ingin menggunakan gambar yang sama di beberapa jaringan sosial — itu lebih baik untuk men-tweak gambar untuk mengoptimalkan itu untuk masing-masing jaringan sosial. Check out Hubspot sosial media gambar cheat sheet untuk mendapatkan gambar yang tepat spesifikasi untuk semua jaringan.

Jika anda memiliki teks penting di gambar, pastikan bahwa itu mudah untuk dibaca sebagai seseorang gulungan melalui Facebook atau Twitter timeline.

Pastikan anda mengoptimalkan listing anda untuk menampilkan gambar yang terlihat baik pada situs-situs seperti Facebook dan Twitter.

Misalnya, Twitter auto-generated link ringkasan (Ringkasan Card atau Kartu Ringkasan dengan Gambar Besar — untuk informasi lebih lanjut tentang kartu Twitter, kepala di sini) akan menggunakan salah satu gambar pertama pada halaman atau produk unggulan yang di gambar, suka jadi:

Gambar fitur anda harus dioptimalkan untuk terlihat baik pada link preview

Gambar fitur anda harus dioptimalkan untuk terlihat baik pada link preview

Beberapa gambar pencipta di bagian aplikasi di bawah ini memiliki pra-dibuat sosial media gambar template yang dapat anda gunakan untuk mendapatkan mulai melompat.

Terkait: Aplikasi Gratis terbaik untuk Menyempurnakan Media Sosial Anda Gambar

Dalam newsletter anda:

Jangan mengandalkan gambar untuk menyampaikan bagian-bagian penting dari email.

Banyak penyedia email tidak menampilkan gambar secara default (dan akan memberikan pengguna pilihan untuk menampilkan gambar), jadi jika anda memiliki bagian-bagian penting dari pesan dalam gambar, pengguna dapat memindai dengan cepat dan miss it. Sebaliknya, menggunakan gambar sebagai aksen visual untuk melengkapi kata-kata dalam email.

Semakin banyak orang yang membaca email pada ponsel mereka, jadi pastikan untuk menguji seberapa email anda tampilan pada layar yang lebih kecil dengan mengirimkan sendiri tes salinan laporan berkala dan membaca pada ponsel anda.

Ini juga berarti anda ingin memastikan gambar resolusi yang cukup tinggi untuk terlihat baik pada layar ponsel — misalnya, iPhone 6 memiliki PPI (piksel per inci) dari 326 dan 6 plus memiliki PPI 401.

Baca juga: Di mana untuk Menemukan Gratis Gambar di Web: Stok Foto, Database, dan Newsletters

Aplikasi yang anda butuhkan untuk mengoptimalkan gambar anda

Jika anda ingin gratis pengganti Photoshop, check out GIMP. Gratis, open-source, dan bekerja pada Windows, Mac, atau Linux.

The downside adalah bahwa ia memiliki sedikit curam kurva belajar dari Photoshop, tapi ada banyak tutorial online untuk membantu memandu anda melalui hal-hal.

Yang mengatakan, GIMP (atau Photoshop) mungkin berlebihan untuk rata-rata blog post/gambar produk. PicMonkey dapat membantu anda melakukan editing gambar dasar, bersama dengan kolase dan pembuatan gambar untuk sosial media.

Jika anda ingin mengedit gambar anda pada pergi, Pixlr memiliki beberapa aplikasi pilihan ditambah pilihan online. Jika anda mengedit foto, VSCO adalah tempat yang luar biasa untuk

Terakhir tetapi tentu tidak sedikit, ada Canva, yang kurang dari suatu gambar atau foto aplikasi editing, dan lebih dari grafis penciptaan alat untuk gambar online. Anda dapat dengan mudah menambahkan teks, bingkai foto, latar belakang, dan itu juga menawarkan media sosial siap gambar template.

Masih membutuhkan gambar produk untuk mengedit? Untuk kursus kilat untuk mengambil foto produk menggunakan smartphone anda, kepala di sini.

Baca juga: Bagaimana untuk Membuat Baik Latar belakang Foto Produk Anda Tanpa Menggunakan Photoshop

Belum mendirikan toko e-commerce anda belum? Mendaftar dan mulai menggunakan Ecwid hari ini.

About The Author
Michelle is a freelance writer living in Richmond, VA, with her Shiba Inu and cat named after the Hulk. When she's not writing about business, she can usually be found working on her novel series or other side projects, or training Brazilian jiu-jitsu.

Stay up to date!

Get free e-commerce tips, news and inspiring ideas delivered directly to your inbox