Mengunggah gambar

Anda dapat menggunakan berbagai jenis gambar, seperti logo perusahaan, foto produk, tayangan slide, banner, dan gambar postingan blog. Anda juga dapat mengubah gambar Anda dengan tindakan potong dan ubah ukuran, serta menyesuaikan pengaturan media di tema Anda untuk mengubah bingkai atau bayangan di semua media yang ditampilkan di toko Anda.

Untuk menampilkan gambar di toko online Anda persis seperti yang Anda inginkan, Anda perlu menggunakan rasio aspek gambar yang benar. Gambar dioptimalkan secara otomatis untuk etalase toko online Anda dengan Shopify Content Delivery Network (CDN).

Mengunggah gambar di editor tema

Anda dapat menambahkan gambar ke tema Anda di editor tema. Anda juga dapat mengunggah gambar di bagian Konten > File di admin Shopify Anda. Untuk mempelajari lebih lanjut, lihat Mengunggah dan mengelola file.

Langkah-langkah:

Menambahkan gambar menggunakan bidang meta

Jika Anda telah menyiapkan bidang meta untuk gambar, Anda dapat menggunakan pemilih sumber dinamis untuk menambahkan gambar ke toko online Anda. Untuk informasi selengkapnya tentang bidang meta dan format gambar yang didukung, lihat Menambahkan nilai ke bidang meta.

Mengatur titik fokus pada gambar

Anda dapat menggunakan titik fokus untuk menentukan bagian terpenting dari gambar di toko online Anda. Saat mengatur titik fokus pada gambar, Anda menjadikannya area fokus. Titik fokus akan selalu ditampilkan dalam bingkai, bahkan jika Anda memiliki tema yang memotong gambar agar sesuai dengan tata letak. Titik fokus memberi Anda lebih banyak kontrol atas cara gambar ditampilkan di berbagai ukuran layar, dan saat tema menggunakan rasio aspek yang berbeda.

Anda hanya dapat memiliki satu titik fokus per gambar, tetapi Anda dapat mengubah titik fokus atau menghapusnya kapan saja.

Kompatibilitas titik fokus dengan tema gratis Shopify

Anda dapat mengatur titik fokus pada versi tema gratis Shopify berikut:

• Semua tema dalam keluarga Horizon
• Colorblock versi 3.0.0 dan yang lebih baru
• Craft versi 5.0.0 dan yang lebih baru
• Crave versi 5.0.0 dan yang lebih baru
• Dawn versi 7.0.0 dan yang lebih baru
• Origin versi 1.0.0 dan yang lebih baru
• Publisher versi 1.0.0 dan yang lebih baru
• Refresh versi 2.0.0 dan yang lebih baru
• Ride versi 3.0.0 dan yang lebih baru
• Rise versi 1.0.0 dan yang lebih baru
• Sense versi 5.0.0 dan yang lebih baru
• Spotlight versi 0.0.1 dan yang lebih baru
• Studio versi 4.0.0 dan yang lebih baru
• Taste versi 4.0.0 dan yang lebih baru
• Trade versi 1.0.0 dan yang lebih baru

Jika Anda menggunakan tema pihak ketiga, periksa dokumentasi tema Anda untuk mengetahui apakah tema Anda mendukung penggunaan titik fokus.

Menambahkan titik fokus ke gambar

Jika Anda menambahkan titik fokus ke gambar, lalu menggunakan gambar tersebut di beberapa tempat di toko online Anda, titik fokus yang sama akan berlaku di mana pun Anda menggunakan gambar tersebut.

Bergantung pada cara tema Anda memotong dan mengubah ukuran gambar, titik fokus mungkin tidak selalu berada di tengah secara visual.

Langkah-langkah:

1. Klik gambar dari salah satu lokasi berikut di admin Shopify Anda:
   • Di bagian Konten > File.
   • Di editor tema.
   • Di bagian Media pada cantuman produk Anda di bagian Produk.
   • Di editor email Shopify Messaging.
   • Di bagian Bidang meta pada sumber daya apa pun yang memiliki metafield jenis Referensi file untuk menambahkan gambar.
2. Untuk memilih bagian gambar tempat Anda ingin mengatur titik fokus, klik gambar atau seret titik biru.
3. Klik Simpan.

Menghapus titik fokus dari gambar

Langkah-langkah:

1. Klik gambar dari salah satu lokasi berikut di admin Shopify Anda:
   • Di bagian Konten > File.
   • Di editor tema.
   • Di bagian Media pada cantuman produk Anda di bagian Produk.
   • Di editor email Shopify Messaging.
   • Di bagian Bidang meta pada sumber daya apa pun yang memiliki metafield jenis Referensi file untuk menambahkan gambar.
2. Klik Hapus.
3. Klik Simpan sebagai baru.

Format gambar

Format gambar berikut ini didukung:

• JPEG
• JPEG Progresif
• PNG
• GIF
• HEIC
• WebP

Menggunakan gambar JPEG

Gambar JPEG ideal untuk fotografi dan gambar diam lainnya dengan warna yang kompleks. Format JPEG memiliki palet jutaan warna. JPEG juga memiliki kompresi lossy, yang dapat membantu menjaga agar waktu pemuatan halaman tetap cepat tanpa penurunan kualitas gambar yang terlihat. Gunakan format JPEG untuk jenis gambar berikut:

• produk
• banner atau tayangan slide
• halaman dan postingan blog

Menggunakan gambar PNG

Gambar PNG ideal untuk grafis dan ikon dengan warna datar dan tanpa gradien. Format PNG juga mendukung transparansi pada gambar. Gunakan format PNG untuk jenis gambar berikut:

• logo
• ikon
• garis batas dan trim

Kompresi gambar otomatis dan pemilihan format

Gambar tidak dikompresi saat Anda mengunggahnya ke admin Shopify, yang membantu mempertahankan kualitas aslinya. Namun, hal berikut dapat terjadi untuk menjaga agar waktu pemuatan halaman tetap cepat bagi pelanggan Anda:

• Saat gambar ditampilkan melalui tema toko Anda, gambar berkualitas tinggi mungkin akan dikompresi
• Shopify secara otomatis menentukan format file terbaik untuk digunakan saat menampilkan gambar Anda
• Saat browser web pelanggan mendukung format gambar modern seperti WebP dan AVIF (AV1 Image File Format), gambar Anda akan dikirimkan dalam format tersebut
• GIF secara otomatis dikonversi ke format WebP animasi untuk meningkatkan performa dengan mengurangi ukuran file

Pertimbangkan tindakan berikut untuk kualitas gambar terbaik:

• Unggah gambar beresolusi lebih tinggi hingga 5000 px x 5000 px atau 25 megapiksel
• Pilih jenis gambar dengan kompresi lebih sedikit seperti PNG untuk gambar garis, teks, dan grafis ikonik dengan transparansi
• Gunakan JPEG untuk foto produk atau tayangan slide
• File SVG didukung tetapi memiliki batasan - file tidak dapat ditransformasikan (diubah ukurannya, dipotong, dll.) tanpa meminta format raster (JPEG, WebP, PNG)

Jenis file lain seperti PSD (Photoshop Document), TIFF (Tagged Image File Format), dan BMP (Bitmap) diterima, tetapi akan dikonversi menjadi JPEG/PNG saat diunggah.

Batas unggahan gambar

Unggahan gambar ke Shopify memiliki batasan dalam hal megapiksel (MP) dan ukuran file yang diukur dalam megabita (MB). Megapiksel digunakan untuk menunjukkan berapa juta piksel yang menyusun sebuah gambar. Megabita digunakan untuk menunjukkan berapa juta bita memori atau ruang disk yang digunakan oleh sebuah gambar.

Gambar yang diunggah ke Shopify tidak boleh melebihi salah satu dari batasan berikut:

• 20 megapiksel
• 20 megabita

Untuk menemukan nilai megapiksel gambar Anda, Anda dapat menggunakan persamaan berikut:

(lebar piksel x tinggi piksel)/1.000.000

Misalnya, gambar dengan resolusi 4900 px kali 6930 px adalah 33,9 megapiksel berdasarkan persamaan: (4900x6930)/1.000.000 = 33,9 MP.

Profil warna gambar

Saat Anda melihat gambar di toko online, warna dalam gambar mungkin ditampilkan berbeda dari gambar asli yang Anda unggah ke Shopify. Hal ini bisa terjadi saat gambar memiliki profil warna, yaitu seperangkat data yang disimpan dalam file dengan ekstensi .ICC atau .ICM.

Profil warna sering kali tertanam dalam gambar untuk membantu menstandardisasi cara warna ditampilkan di berbagai perangkat. Saat gambar ditampilkan di toko online Anda, profil warnanya akan dihapus.

Profil warna dihapus karena alasan berikut:

• Tidak semua perangkat dapat membaca profil warna .ICC atau .ICM, jadi membiarkannya tetap utuh dapat mengakibatkan inkonsistensi warna gambar di berbagai perangkat.
• Saat gambar yang diunggah tidak menyertakan profil warna, browser web akan mengasumsikan sRGB, yaitu profil warna paling umum yang digunakan untuk menampilkan gambar di web. Hal ini memastikan gambar Anda ditampilkan sama di semua browser web dan perangkat utama.
• Profil warna dapat memakan banyak ruang disk, yang dapat mengakibatkan waktu pemuatan halaman lebih lama.

Menghapus profil warna dari gambar

Anda dapat menghapus profil warna dari gambar dengan menyimpannya tanpa profil warna sebelum Anda mengunggahnya ke Shopify. Proses ini bervariasi, tergantung pada program penyuntingan gambar Anda.

Lihat dokumentasi Adobe tentang cara Menetapkan atau menghapus profil warna (Illustrator, Photoshop) dan Menetapkan atau menghapus profil warna (InDesign).

Praktik terbaik untuk tayangan slide, banner gambar, dan gambar lebar penuh

Banyak tema Shopify menampilkan gambar atau tayangan slide besar yang skalanya disesuaikan dengan tinggi browser atau ukuran layar Anda.

Jika Anda menggunakan salah satu tema ini atau memiliki tayangan slide atau gambar latar belakang yang besar, Anda perlu memahami jenis gambar apa yang paling baik untuk ditampilkan.

Karena gambar besar tidak dapat muat di semua perangkat, Shopify terkadang hanya menampilkan sebagian gambar tergantung pada perangkat yang Anda gunakan. Jika tayangan slide gambar Anda berisi banyak gambar besar, Anda mungkin mendapati bahwa sebagian gambar tidak terlihat.

Pertimbangan untuk menggunakan gambar untuk tayangan slide atau banner gambar

Untuk memastikan gambar Anda berfungsi dengan baik dengan tema Anda, perhatikan poin-poin berikut:

• Gambar yang Anda gunakan untuk tayangan slide atau latar belakang sebaiknya tidak berisi teks. Jika teks merupakan bagian dari gambar itu sendiri, teks tersebut mungkin akan bergeser, terpotong, atau disesuaikan berdasarkan tema Anda. Gunakan editor tema untuk menambahkan teks dan tautan ke tayangan slide dan latar belakang.

• Untuk gambar yang Anda gunakan dalam tayangan slide atau sebagai latar belakang, pilih gambar sederhana agar teks yang ditumpangkan mudah dibaca.

Gambar lebar di layar tinggi

Gambar lebar mungkin terpotong di bagian kiri dan kanan saat perangkat yang digunakan untuk melihatnya memiliki layar tinggi, seperti ponsel atau tablet yang dilihat dalam mode potret. Dalam contoh di bawah, jika orang adalah bagian terpenting dari gambar, Anda dapat menempatkan titik fokus di sisi kanan gambar.

Gambar tinggi di layar lebar

Gambar tinggi mungkin terpotong di bagian atas dan bawah saat perangkat yang digunakan untuk melihatnya memiliki layar lebar, seperti laptop atau monitor desktop. Dalam contoh di bawah, jika sepatu adalah bagian terpenting dari gambar, Anda dapat menempatkan titik fokus di bagian bawah gambar.

Perilaku pemuatan gambar

Saat Anda mengunjungi halaman di toko online, Anda mungkin melihat gambar tampak sedikit buram pada awalnya, lalu menjadi tajam sesaat kemudian. Ini adalah perilaku yang wajar yang membantu meningkatkan kecepatan muat dan pengalaman pengguna toko Anda.

Tema Shopify menggunakan teknik yang disebut lazy loading, yang memuat versi gambar yang lebih kecil terlebih dahulu sementara gambar beresolusi penuh dimuat di latar belakang. Hal ini memungkinkan pelanggan untuk langsung meninjau konten tanpa harus menunggu gambar besar dimuat sepenuhnya. Proses ini biasanya selesai dalam waktu kurang dari satu detik, tetapi menciptakan persepsi bahwa toko Anda dimuat lebih cepat.

Teknik ini sangat bermanfaat untuk toko yang memiliki banyak gambar karena dapat meningkatkan waktu muat halaman awal secara signifikan dan memberikan umpan balik visual langsung kepada pelanggan.

Penyelesaian masalah gambar