Aşağıdaki makale size yardımcı olacaktır:Süper Hızlı Bir Mağaza için Shopify Görsel Boyutlarını Optimize Etme
Alışveriş görsel bir deneyimdir. Çevrimiçi alışveriş yapanlar olarak, ne satın alabileceğimizi daha iyi anlayabilmek için ürün görsellerine dalmak istiyoruz.
Google’a göre, Çevrimiçi alışveriş yapanların %50’si görsellerin ne satın alacaklarına karar vermelerine yardımcı olduğunu söyledi.
Ve kalite önemlidir. Etsy bunu buldu Alışveriş yapanların %90’ı ürün maliyetini, nakliye maliyetini ve incelemeleri geride bırakarak fotoğraf kalitesinin satın alma kararlarında “son derece önemli” veya “çok önemli” olduğunu söyledi.
En başarılı Shopify mağazaları bunun bir kanıtıdır. Mağazaları, ürünlerini ve marka değerlerini sergileyen güzel, yüksek çözünürlüklü görsellerle dolu.
Shopify mağazanızı muhteşem görsellerle zenginleştirmek şunları gerektirir: yenilikçi ürün fotoğrafçılığı stratejileri ve bu görsellerin mağazanızın çeşitli bölümlerine nasıl sığacağına dair net bir anlayış.
Shopify mağazanız için en iyi görsel boyutlarını bulmak, yalnızca harika görünmesini değil aynı zamanda harika yüklenmesini de sağlayacaktır.
#cta-visual-pb#
–
Shopify görsel boyutları müşteri deneyimi açısından neden önemlidir?
Zengin görsellerle dolu bir mağaza oluşturmak (yukarıdaki Brevitē’deki gibi) ziyaretçilerin ilgisini çekmek açısından önemli olsa da, bu görsellerle ilgili ayrıntılar mağazanızın işleyişini büyük ölçüde etkileyebilir.
Resimlerinizin boyutu önemlidir. Yalnızca dosya boyutu değil aynı zamanda boyutlar da önemlidir.
Dosya boyutu sayfalarınızın yüklenme hızını etkilerken, görsel boyutları da fotoğraflarınızın mağaza sayfalarınızda nasıl görüneceğini etkiler.
Mağazanızda görsellerin yayınlandığı çeşitli konumlar farklı ideal en boy oranlarına sahiptir. En boy oranı görüntünün boyutlarına göre belirlenir (veya tam tersi).
Örneğin, 1200 x 400 piksel boyutunda bir görüntünün en boy oranı 3:1’dir; görüntünün genişliği yüksekliğinin üç katıdır.
Bu, kahraman banner görseli veya slayt gösterisi bölümü gibi ekran boyunca uzanması gereken ancak tüm yüksekliği kaplamaması gereken bir görsel için uygun olacaktır.
Ana sayfanızın üst kısmına büyük kare bir resim yerleştirirseniz, bu çok fazla yer kaplar ve ziyaretçilerin resmin tamamını görmek için kaydırma yapmalarını gerektirir.
Bu yüzden, mağazanıza son yerleştirme için görsellerinizi nasıl kırptığınız önemlidir. Mağaza sayfalarınızın hızlı bir şekilde yüklenmesini sağlamak için bu görsellerin uygun şekilde sıkıştırılmasını isteyeceksiniz.
Shopify’daki görsel boyutlarına ilişkin yönergeler
Shopify bu konuda çok ayrıntılı öneriler sunmuyor ancak şunu söylüyorlar:
- Maksimum görüntü boyutları: 4472 x 4472 piksel veya 20 megapiksel
- Maksimum resim dosyası boyutu: 20 MB
- Kare görseller için önerilen boyutlar: 2048×2048
- Yakınlaştırma işlevi için minimum boyutlar: 800 x 800 piksel
Shopify’ın, görsellerinizi üç farklı boyuta göre yeniden boyutlandırabileceğiniz kendi yeniden boyutlandırma aracı vardır: Büyük (4472 x 4472 piksel), Orta (2048 x 2048 piksel) veya Kompakt (1024 x 1024 piksel).
Mağazaları hızlı tutmak için, Shopify, görselleri görüntülendikçe otomatik olarak sıkıştırır ve mümkün olduğunda WebP gibi alternatif dosya formatlarını kullanacaktır.
Üstelik, Shopify, çeşitli ekran çözünürlükleri için görselleri hafifçe kırparcep telefonları gibi.
Resimlerinizin istediğinizi göstermesini sağlamak için, resimlerinizi konu ortaya bakacak şekilde ayarlayın. Kare fotoğraflar, ekranda eşit şekilde yığıldıkları ve ekranın daha fazlasını doldurdukları için mobil yeniden konumlandırma için en iyisidir.
Shopify mağazanızda dikkate almanız gereken görsel türleri
Shopify mağazanızın çeşitli sayfaları, mağazanızın tasarımı için farklı amaçlara sahip çeşitli görsel türleri içerir.
Bunlardan birkaçına bakalım en popüler resim türleri İncelikle fotoğraflanmış görsellerden oluşan portföyünüzü bir araya getirirken dikkate almanız gerekenler.
- Ürün resimleri. Mağazanızdaki tartışmasız en önemli görseller olan ürünlerinizin bu ayrıntılı temsilleri, mağaza içi deneyimin yerini alacak her açıyı ve özelliği göstermelidir.
- Koleksiyon görselleri. Koleksiyonlarınız, alışveriş yapanları satış hunisine yönlendirmeye yardımcı olan mantıksal ürün seçimleridir. Bütün bir ürün kategorisinin ilgi çekici tasvirleri olmalıdırlar.
- Banner görselleri. Ekran boyunca uzanan bu geniş formatlı görseller, ana sayfa, koleksiyon sayfaları, Hakkımızda sayfası, SSS sayfası vb. gibi gösterildikleri sayfaya bağlı olarak birçok işleve hizmet eder.
- Slayt gösterisi görüntüleri. Bu görüntüler aynı zamanda ekran boyunca uzanarak tutarlı bir görsel dizi oluşturur.
- Logo/başlık resimleri. Genellikle markanızın logosu, mağazanızın başlığına yerleştirdiğiniz görsel her sayfada görünecektir.
- Blogda öne çıkan görsel. İçerik pazarlaması yapıyorsanız (ve yapmalısınız), blog yazılarınızdaki öne çıkan görsel, konuyu tanıtan sayfanın en üstünde olacaktır.
Bu yazının ilerleyen kısımlarında bu görsel türlerinin her biri için ideal görsel boyutlarını tanımlayacağız.
Shopify görselleri için dosya formatları (ve kullanmanız gerekenler)
Görseller tek bir biçimde gelmiyor, bu da her şeyi doğru yapmaya çalışan tüccarlar için işleri daha da karmaşık hale getiriyor.
En popüler görsel dosyası formatlarından birkaçını ve bunları Shopify mağazanızda nasıl kullanacağınızı burada bulabilirsiniz.
1. JPEG (veya JPG)
Bu en yaygın dosya formatı görüntüler için.
JPEG’ler, en küçük dosya boyutlarında görüntü kalitesini koruma konusunda mükemmeldir. Bu, sitelerini hafif ve hızlı tutması gereken e-ticaret web siteleri için harika bir haber.
Mükemmel renk aralıkları, yüksek çözünürlükleri ve küçük dosya boyutları göz önüne alındığında, JPEG’ler ürün fotoğrafları için mükemmeldir.
Shopify’ın önerdiği Şunun için JPEG’ler:
- Ürünler
- Bannerlar veya slayt gösterileri
- Blog gönderileri ve sayfaları
2.PNG
Daha yeni bir görüntü formatı olan PNG’ler genellikle JPEG’lerden daha büyüktür ancak daha yüksek kalitededir.
Bu kayıpsız format görüntü kalitesini etkilemeden sıkıştırılabilir. Bu aynı zamanda JPEG kadar sıkıştırılamayacağı anlamına da gelir.
JPEG’lerden farklı olarak, PNG’ler şeffaf arka planları desteklerbu nedenle logolar ve simgeler için mükemmeldirler.
Shopify’ın önerdiği PNG’ler için:
- Logolar
- Simgeler
- Kenarlıklar ve süslemeler
3.GIF
Hareketli görüntüler için klasik dosya formatıGIF’ler satıcıların mağazalarına biraz hareket katmasına olanak tanır.
Normal görseller ve fotoğraflar için mükemmel bir seçim olmasa da GIF, animasyonlar için tek yoldur. PNG’ler bunu yapabilir ancak GIF’ler kadar küçük sıkıştırılamazlar.
4.WebP
En yeni resim formatlarından biri olan WebP, Google tarafından çok daha küçük dosya boyutunda yüksek kaliteli resimler sunmak için oluşturuldu.
Bu formatı kendiniz yükleme konusunda endişelenmenize gerek yok çünkü Shopify, onu destekleyen tarayıcılar için otomatik olarak WebP görselleri sunar.
Shopify mağazanız için en iyi görsel boyutları
Mağazanız için en ideal görsel boyutları, kullandığınız Shopify temasına bağlı olacaktır.
Her temanın, herhangi bir belirli görüntü türü için kullanacağınız boyutu değiştirecek tasarım özellikleri olacaktır. Ancak burada hangi boyutların en iyi sonucu vereceğine dair bazı genel yönergeler vereceğiz.
Shopify ürün resmi boyutu
Ürün görselleri kare (1:1 en boy oranı) olmalı ve 2048 x 2048 piksele kadar. Yukarıda, muhteşem bir ürün sayfası tasarımına sahip, Copper Cow Coffee’den çarpıcı kare ürün görsellerinin harika bir örneği var.
Daha önce de belirtildiği gibi, görselleriniz yakınlaştırma özelliğini etkinleştirmek için en az 800 x 800 piksel. Alışveriş yapanlar, Shopify ürün sayfalarınızdaki küçük ürün ayrıntılarına odaklanma yeteneğinden memnun kalacaklardır.
Ürün resimleriniz şöyle olmalıdır: 300 KB’tan büyük değil. Bu görsellerden birçoğuna sahip olacaksınız, böylece mağazanızın yavaşlamasına hızla katkıda bulunabilirler.
Shopify koleksiyonu görsel boyutu
Ürün koleksiyonlarınızı temsil eden görseller de kare ve kare şeklinde olmalıdır. 2048 x 2048 piksele kadar.
Bu görüntüler dikey veya yatay olabilir, ancak bunların hepsini aynı en boy oranında tutmak tutarlılığın korunmasına yardımcı olacaktır. Ayrıca kare format, mobil cihazlarda daha iyi istiflenmeye olanak tanır.
Ana sayfanızda koleksiyon görselleriniz yer alacaktır, bu nedenle bunların muhteşem göründüğünden emin olun. İlk izlenimler önemlidir.
Shopify banner görselinin boyutu
Sayfa ne olursa olsun ziyaretçilerin ilk göreceği şey banner resmi olacaktır.
Shopify banner boyutları şu şekilde olmalıdır: 1200-2000 piksel genişlik ve 400-600 piksel yükseklik aralığında. Ekranın ne kadarını kaplamasını istediğinize bağlı olarak yüksekliği seçebilirsiniz.
En popüler ekran çözünürlüğü 1920 x 1080 pikseldir (16:9 en boy oranı), bu nedenle ekrana yayılacak görüntüleri düzenlerken bunu aklınızda bulundurun.
Koleksiyon sayfası banner’ları genellikle daha kısa olur ana sayfa banner’larından ziyade görüntüye panoramik bir kalite kazandırır. TKEES’ten gelen bu bir ~4:1 en-boy oranı, oysa yukarıdaki ana sayfa banner’ı 3:1’e daha yakındır.
Şafak temasında banner yüksekliği için küçük, orta ve büyük seçenekleri arasından seçim yapabilirsiniz; bu, banner’ın ekranın üst kısmında ne kadar yer kaplayacağına karar verir.
Resim, resim banner bölümüne sığacak şekilde otomatik olarak kırpılacaktır.
Shopify slayt gösterisi görsel boyutu
Slayt gösterisi görsel bölümünüz, ekran boyunca uzandığı için banner görseline çok benzer olacaktır.
Shopify slayt gösterisi boyutları şu şekilde olmalıdır: 1200-2000 piksel genişliğinde ve 400-600 piksel yüksekliğinde.
Yine, ekranın üst kısmındaki alanı dolduracak veya diğer bölümlerin kaydırma yapmadan slayt gösterisinin altında görünmesine izin verecek şekilde en boy oranınızı istediğiniz gibi ayarlayın.
Shopify blog görseli boyutu
Blogunuzun öne çıkan görseli, tam genişlikte olduğu varsayılarak 1800×1000 piksel1,8:1 en-boy oranıdır.
Ancak boyut hem Shopify temanıza hem de ekranın ne kadarını kaplamasını istediğinize bağlı olacaktır. Örneğin, Hippy Feet’in 1920 x 500 piksel boyutunda öne çıkan bir görseli var, bu da blog girişini ekranın üst kısmına getiriyor ve ziyaretçileri okumaya başlamaya teşvik ediyor.
Gönderilerinizdeki görseller metniniz kadar geniş (veya daha geniş) olmalıdır. 600 piksel.
Bu görüntüler farklı en-boy oranlarında olabilir ancak ekranı dolduracak kadar uzun olmamalıdır. Noktası bir blog yazısı sonuçta metindir.
Shopify, logoların 450 x 250 piksel kadar büyükancak logonuz için ideal boyut 200×200 piksel.
Logonuz her sayfada görünecektir, bu nedenle mümkün olan en iyi kalitede, ancak mağazanızı şişirmeden işlenmesini istiyorsunuz.
The Ridge, markasını sürekli olarak aklınızda tutmak için logosunu sayfalarının üstüne ve ortasına yerleştirir.
Shopify arka plan resmi boyutu
Arka plan resimleri ekran çözünürlüklerini taklit etmelidir; 1920×1080 piksel.
Bu, gerilmeden veya kırpılmadan ekranı doldurmalarına olanak sağlamalıdır. Bu görüntünün 1 MB’tan büyük olmadığından emin olun.
Shopify görsellerinizi optimize etme
Bu gönderiden çıkarılacak en önemli sonuç, görsellerinizin mağazanıza eklenmeden önce optimize edilmesi gerektiğidir.
Shopify, mağazanızı hızlı tutmak için varsayılan olarak resimlerinizde optimizasyon konusunda kendi payına düşeni yapsa da buna güvenmek istemezsiniz. Mümkün olan en iyi başlangıç noktasından optimizasyon yapmalarına izin verin.
Görüntü optimizasyon araçları
Bu görselleri mağazanıza eklemeye başlamadan önce onları en uygun boyutlara ve dosya boyutlarına getirmek isteyeceksiniz.
Bunu yapmak için araçlara ihtiyacınız olacak.
Photoshop
En popüler fotoğraf düzenleme yazılımını kullanıyorsanız görsellerinizi mağazanıza yüklemeden önce kolayca yeniden boyutlandırabilir ve kırpabilirsiniz.
Ayrıca bunları da seçebilirsiniz Web için Kaydet dosyayı tercih ettiğiniz formatta optimize etmek için dışa aktarma seçeneği.
Shopify’ın Resim Yeniden Boyutlandırıcısı
E-ticaret mağazası sahiplerine yardımcı olan araçlar için her zaman iyi olan Shopify’ın basit bir yeniden boyutlandırma aracı vardır.
Fotoğrafınızı yüklersiniz, yeniden boyutlandırmak istediğiniz boyutu seçersiniz (büyük, orta ve küçük seçenekleriniz vardır) ve gönderirsiniz. Daha sonra yeni daha küçük dosyayı indirebilirsiniz.
Diğer Aletler
Resimlerinizi optimize etmek ve yeniden boyutlandırmak için bir sürü harika araç var. Hatta bazıları ücretsiz!
İşte birkaç harika seçenek:
- TinyPNG
- Kraken
- ImageOptim
- PNG Eldiveni
Her birinin faydaları vardır, ancak hepsi işi yapacaktır. ImageOptim’i kullanıyoruz ve bizim için harika çalışıyor.
Shogun Sayfa Oluşturucu ile görsellerinizi kolayca düzenleyin ve sıkıştırın
Resimlerinizin Shopify mağaza sayfalarınızda tam olarak görünmesini sağlamak o kadar da zor olmak zorunda değil.
Shogun Sayfa Oluşturucu, görüntüleri ideal boyutlarınıza ve en boy oranlarınıza göre kırpmanıza olanak tanıyan yerleşik bir görüntü düzenleyiciye sahiptir.
Sayfanıza bir Resim öğesi ekleyip bir fotoğraf seçtikten sonra Resmi Düzenle.
Düzenleyicinin görselinizi çevirme, döndürme, yakınlaştırma, yeniden boyutlandırma ve kırpma seçenekleri olacaktır.
Alt kısımdaki önceden ayarlanmış bir en boy oranına tıkladığınızda, kırpma penceresi otomatik olarak bu boyutları alacaktır.
En boy oranını korurken kırpma penceresini büyütmek veya küçültmek için köşeyi sürükleyin. Kırpma pencerenizin boyutları ekranın sağ tarafında gösterilecektir.
Editörün alt kısmındaki boyutları düzenlemeniz yeterli. resminizi yeniden boyutlandırmak için
Basit kırpma ve düzenlemenin ötesinde görsellerinizi varsayılan olarak optimize edebilirsiniz.
Resim öğesine ilişkin özelleştirme seçenekleri şunları içerir: Görüntü kalitesi Yükleme süresini azaltmak amacıyla görüntüleri sıkıştırmak için açılır menü.
Photoshop’un Web için Kaydet özelliğine benzer şekilde en iyi kaliteyi seçebilirsiniz.
Sayfa Oluşturucu’da görsellerinizi özelleştirmenin diğer yolları:
- Fareyle üzerine gelindiğinde farklı bir resim görüntüle
- Erişilebilirlik için görsellerinize alternatif metin ekleyin
- Başlıkları, metni, düğmeleri ve daha fazlasını görüntünüzün üzerine yerleştirin
- Kenarlık yarıçapı ayarlarıyla yuvarlak görüntüler oluşturun
- Görüntüleri bir ışık kutusu açılır penceresinde açın
Muhtemelen kendi görselleriniz olsa da, Page Builder aynı zamanda Unsplash ile entegre olarak muhteşem ücretsiz stok fotoğrafları parmaklarınızın ucuna getiriyor.
Muhteşem (hızlı yüklenen) görsellerle müşteri deneyimini yükseltin
Kusursuz ve hızlı bir alışveriş deneyimi oluşturmak için mağaza görsellerinizi doğru şekil ve boyutta yapmak çok önemlidir.
Mağazanızı doğru detaylarla tasarlamanız size yardımcı olacaktır. İşleri ilk seferde doğru yaparak zamandan ve sorundan tasarruf edin her şey yerli yerine oturduktan sonra düzeltmek yerine.
Shopify, mağazanızın hızlı bir şekilde yüklenmesini sağlamak için çok şey yapar görüntüleri sıkıştırarak ve bunları alışveriş yapanlarınız için mümkün olan en iyi formatlarda sunarak. İşinizi önceden yaparak ve Shopify’ın diğer endişelerle ilgilenmesine izin vererek mağazanız daha da hızlı olacaktır.
Mağazanıza görsel ekleme sürecini daha da kolaylaştırmak için, Shogun Sayfa Oluşturucu, bunları doğrudan düzenleyiciden yapmanız için ihtiyaç duyduğunuz araçları içerir.
–
#cta-visual-pb#
