Görsel yükleme

Şirket logonuz, ürün görselleri, slayt gösterileri, banner'lar ve blog gönderisi görselleri gibi farklı türde görseller kullanabilirsiniz. Ayrıca, görsellerinizi kırpma ve yeniden boyutlandırma işlemleriyle dönüştürebilir ve mağazanızda görüntülenen tüm medyalardaki kenarlığı veya gölgeyi değiştirmek için temanızdaki medya ayarlarınızı özelleştirebilirsiniz.

Görselleri online mağazanızda tam olarak istediğiniz gibi görüntülemek için doğru görsel en boy oranını kullanmanız gerekir. Görseller, Shopify İçerik Teslim Ağı (CDN) ile dijital vitrininiz için otomatik olarak optimize edilir.

Tema düzenleyicisinde görsel yükleme

Tema düzenleyicisinde temanıza görseller ekleyebilirsiniz. Ayrıca Shopify yöneticinizin İçerik > Dosyalar bölümünden de görseller yükleyebilirsiniz. Daha fazla bilgi edinmek için Dosya yükleme ve yönetme bölümüne bakın.

Adımlar:

Meta alanları kullanarak görsel ekleme

Görselleriniz için ayarlanmış meta alanlarınız varsa online mağazanıza görsel eklemek için dinamik kaynak seçiciyi kullanabilirsiniz. Meta alanlar ve desteklenen görsel biçimleri hakkında daha fazla bilgi için Meta alanlara değer ekleme bölümüne bakın.

Bir görselde odak noktası ayarlama

Online mağazanızdaki bir görselin en önemli bölümünü tanımlamak için odak noktalarını kullanabilirsiniz. Bir görselde odak noktası ayarladığınızda, o noktayı odak alanı haline getirirsiniz. Düzeninize sığması için görselinizi kırpan bir temanız olsa bile odak noktaları her zaman çerçeve içinde gösterilir. Odak noktaları, görselinizin farklı ekran boyutlarında nasıl görüntüleneceği ve temaların farklı en boy oranları kullandığı durumlar üzerinde size daha fazla kontrol olanağı sağlar.

Görsel başına yalnızca bir odak noktası belirleyebilirsiniz ancak istediğiniz zaman odak noktasını değiştirebilir veya kaldırabilirsiniz.

Odak noktasının Shopify'ın ücretsiz temalarıyla uyumluluğu

Shopify'ın ücretsiz temalarının aşağıdaki sürümlerinde odak noktası ayarlayabilirsiniz:

• Horizon ailesindeki tüm temalar
• Colorblock sürümü 3.0.0 ve üzeri
• Craft sürüm 5.0.0 ve üzeri
• Crave sürüm 5.0.0 ve üzeri
• Dawn sürüm 7.0.0 ve üzeri
• Origin sürüm 1.0.0 ve üzeri
• Publisher sürüm 1.0.0 ve üzeri
• Refresh sürüm 2.0.0 ve üzeri
• Ride sürüm 3.0.0 ve üzeri
• Rise sürüm 1.0.0 ve üzeri
• Sense sürüm 5.0.0 ve üzeri
• Spotlight sürüm 0.0.1 ve üzeri
• Studio sürüm 4.0.0 ve üzeri
• Taste sürüm 4.0.0 ve üzeri
• Trade sürüm 1.0.0 ve üzeri

Üçüncü taraf bir tema kullanıyorsanız temanızın odak noktalarını kullanmayı destekleyip desteklemediğini öğrenmek için temanızın belgelerini kontrol edin.

Görsele odak noktası ekleme

Bir görsele odak noktası ekler ve ardından görseli online mağazanızda birden fazla yerde kullanırsanız aynı odak noktası, görseli kullandığınız her yerde geçerli olur.

Temanızın görsellerinizi kırpma ve yeniden boyutlandırma şekline bağlı olarak, odak noktası her zaman görsel olarak ortalanmayabilir.

Adımlar:

1. Shopify yöneticinizdeki aşağıdaki konumlardan herhangi birindeki bir görsele tıklayın:
   • İçerik > Dosyalar bölümünde.
   • Tema düzenleyicide.
   • Ürünler bölümündeki ürün girişlerinizin Medya kısmında.
   • Shopify Messaging e-posta düzenleyicisinde.
   • Görsel eklemek için Dosya referansı türünde bir meta alana sahip olan herhangi bir kaynağın Meta alanlar bölümünde.
2. Odak noktası ayarlamak istediğiniz görselin bölümünü seçmek için görsele tıklayın veya mavi noktayı sürükleyin.
3. Kaydet'e tıklayın.

Görselden odak noktasını kaldırma

Adımlar:

1. Shopify yöneticinizdeki aşağıdaki konumlardan herhangi birindeki bir görsele tıklayın:
   • İçerik > Dosyalar bölümünde.
   • Tema düzenleyicide.
   • Ürünler bölümündeki ürün girişlerinizin Medya kısmında.
   • Shopify Messaging e-posta düzenleyicisinde.
   • Görsel eklemek için Dosya referansı türünde bir meta alana sahip olan herhangi bir kaynağın Meta alanlar bölümünde.
2. Kaldır'a tıklayın.
3. Yeni olarak kaydet'e tıklayın.

Görsel biçimleri

Aşağıdaki görsel biçimleri desteklenir:

• JPEG
• Aşamalı JPEG
• PNG
• GIF
• HEIC
• WebP

JPEG görsellerini kullanma

JPEG görseller, karmaşık renkler içeren fotoğraflar ve diğer sabit görseller için idealdir. JPEG biçimi, milyonlarca renkten oluşan bir palete sahiptir. JPEG'de ayrıca, fark edilir bir görüntü kalitesi kaybı olmadan sayfa yükleme sürelerini kısa tutmaya yardımcı olabilecek kayıplı sıkıştırma özelliği bulunur. Aşağıdaki görsel türleri için JPEG biçimini kullanın:

• ürünler
• banner'lar veya slayt gösterileri
• sayfalar ve blog gönderileri

PNG görselleri kullanma

PNG görselleri, gradyan içermeyen, düz renklere sahip grafikler ve simgeler için idealdir. PNG biçimi, görsellerde şeffaflığı da destekler. Aşağıdaki görsel türleri için PNG biçimini kullanın:

• logolar
• simgeler
• kenarlıklar ve süslemeler

Otomatik görsel sıkıştırma ve biçim seçimi

Shopify yöneticisine yüklediğiniz görseller, orijinal kalitelerini korumak amacıyla sıkıştırılmaz. Ancak müşterileriniz için sayfa yükleme sürelerini hızlı tutmak amacıyla aşağıdaki durumlar meydana gelebilir:

• Yüksek kaliteli görseller, mağaza temanız aracılığıyla sunulduğunda sıkıştırma işleminden geçebilir
• Shopify, görsellerinizi sunarken kullanılacak en iyi dosya biçimini otomatik olarak belirler
• Bir müşterinin web tarayıcısı WebP ve AVIF (AV1 Görüntü Dosyası Biçimi) gibi modern görsel biçimlerini desteklediğinde, görselleriniz bu biçimlerde sunulur
• GIF'ler, dosya boyutunu küçülterek performansı artırmak için otomatik olarak animasyonlu WebP biçimine dönüştürülür

En iyi görsel kalitesi için aşağıdaki eylemleri göz önünde bulundurun:

• 5000 piksel x 5000 piksel veya 25 megapiksele kadar daha yüksek çözünürlüklü görseller yükleyin
• Çizgi çizimler, metinler ve şeffaflık içeren simgesel grafikler için PNG gibi daha az kayıplı görsel türlerini seçin
• Ürün görselleri veya slayt gösterileri için JPEG kullanın
• SVG dosyaları desteklenir ancak sınırlamaları vardır. Taranmış biçim (JPEG, WebP, PNG) istenmeden dönüştürülemezler (yeniden boyutlandırma, kırpma vb.).

PSD (Photoshop Belgesi), TIFF (Etiketli Görüntü Dosyası Biçimi) ve BMP (Bitmap) gibi diğer dosya türleri kabul edilir ancak yükleme sırasında JPEG/PNG'ye dönüştürülür.

Görsel yükleme sınırları

Shopify'a görsel yüklemelerinin hem megapiksel (MP) hem de megabayt (MB) cinsinden ölçülen dosya boyutu açısından kısıtlamaları vardır. Megapiksel, bir görselin kaç milyon pikselden oluştuğunu belirtmek için kullanılır. Megabayt, bir görselin ne kadar bellek veya disk alanı kapladığını milyonlarca bayt cinsinden belirtmek için kullanılır.

Shopify'a yüklenen görseller aşağıdaki sınırlardan herhangi birini aşamaz:

• 20 megapiksel
• 20 megabayt

Görselinizin megapiksel değerini bulmak için aşağıdaki denklemi kullanabilirsiniz:

(piksel genişliği x piksel yüksekliği)/1.000.000

Örneğin, 4900 piksel x 6930 piksel çözünürlüğe sahip bir görsel, (4900x6930)/1.000.000 = 33,9 MP denklemine göre 33,9 megapikseldir.

Görsel renk profilleri

Online mağazanızda bir görseli görüntülediğinizde, görseldeki renkler Shopify'a yüklediğiniz orijinal görseldeki renklerden farklı görüntülenebilir. Bu durum, bir görselin .ICC veya .ICM uzantılı bir dosyada saklanan bir veri kümesi olan bir renk profiline sahip olması durumunda meydana gelebilir.

Renk profilleri, renklerin farklı cihazlarda görüntülenme biçimini standartlaştırmaya yardımcı olmak için genellikle görsellere eklenir. Görseller online mağazanızda görüntülendiğinde renk profilleri kaldırılır.

Renk profillerinin kaldırılma nedenleri şunlardır:

• Tüm cihazlar .ICC veya .ICM renk profillerini okuyamadığından, bunların olduğu gibi bırakılması cihazlar arasında görsel renklerinde tutarsızlıklara neden olabilir.
• Yüklenen bir görsel renk profili içermiyorsa web tarayıcısı tarafından, web'de görselleri görüntülemek için kullanılan en yaygın renk profili olan sRGB varsayılır. Bu, görsellerinizin tüm önemli web tarayıcılarında ve cihazlarda aynı şekilde görüntülenmesini sağlar.
• Renk profilleri büyük miktarda disk alanı kaplayabilir ve bu da sayfa yükleme sürelerinin uzamasına neden olabilir.

Bir görselden renk profilini kaldırma

Shopify'a yüklemeden önce görselinizi renk profili olmadan kaydederek renk profilini kaldırabilirsiniz. Bu işlem, görsel düzenleme programınıza bağlı olarak değişiklik gösterir.

Adobe'nin Renk profili atama veya kaldırma (Illustrator, Photoshop) ve Renk profili atama veya kaldırma (InDesign) hakkındaki belgelerini görüntüleyin.

Slayt gösterileri, görsel banner'ları ve tam genişlikli görseller için en iyi uygulamalar

Birçok Shopify temasında, tarayıcınızın yüksekliğine göre ölçeklenen veya ekran boyutunuza uyum sağlayan büyük görseller ya da slayt gösterileri bulunur.

Bu temalardan birini kullanıyorsanız veya büyük bir slayt gösteriniz ya da arka plan resminiz varsa hangi tür görsellerin en iyi şekilde görüntülendiğini anlamanız gerekir.

Büyük görseller tüm cihazlara sığmadığından, Shopify bazen kullandığınız cihaza bağlı olarak görselin yalnızca bir bölümünü görüntüler. Görsel slayt gösteriniz çok sayıda büyük görsel içeriyorsa görsellerin bazı bölümlerinin görünmediğini fark edebilirsiniz.

Slayt gösterileri veya görsel banner'ları için görsel kullanırken dikkat edilmesi gerekenler

Görsellerinizin temanızla iyi çalıştığından emin olmak için aşağıdaki noktaları aklınızda bulundurun:

• Slayt gösterileri veya arka planlar için kullandığınız görsellerde metin bulunmamalıdır. Metin, görselin bir parçasıysa temanıza göre yeri değiştirilebilir, kırpılabilir veya ayarlanabilir. Slayt gösterilerinize ve arka planlarınıza metin ve bağlantı eklemek için tema düzenleyiciyi kullanın.

• Slayt gösterilerinde veya arka plan olarak kullandığınız görseller için, üzerine eklenen metinlerin kolayca okunabilmesi amacıyla basit görseller seçin.

Uzun ekranlardaki geniş görseller

Geniş görseller, dikey modda görüntülenen bir cep telefonu veya tablet gibi uzun bir ekrana sahip cihazda görüntülendiğinde soldan ve sağdan kırpılabilir. Aşağıdaki örnekte, görselin en önemli kısmı insanlar ise görselin sağ tarafına bir odak noktası yerleştirebilirsiniz.

Geniş ekranlardaki uzun görseller

Uzun görseller, dizüstü bilgisayar veya masaüstü monitör gibi geniş bir ekrana sahip cihazda görüntülendiğinde üstten ve alttan kırpılabilir. Aşağıdaki örnekte, görselin en önemli kısmı ayakkabılar ise görselin alt kısmına bir odak noktası yerleştirebilirsiniz.

Görsel yükleme davranışı

Online mağazanızdaki bir sayfayı ziyaret ettiğinizde, görsellerin önce biraz bulanık göründüğünü ve bir an sonra netleştiğini fark edebilirsiniz. Bu, mağazanızın yükleme hızını ve kullanıcı deneyimini iyileştirmeye yardımcı olan, beklenen bir davranıştır.

Shopify temaları, geç yükleme adı verilen bir teknik kullanır. Bu teknikte, tam çözünürlüklü görsel arka planda yüklenirken önce görselin daha küçük bir sürümü yüklenir. Bu, müşterilerin büyük görsellerin tamamen yüklenmesini beklemek yerine içeriği hemen incelemelerine olanak tanır. İşlem genellikle bir saniyeden kısa sürede tamamlanır ancak mağazanızın daha hızlı yüklendiği algısını yaratır.

Bu teknik, ilk sayfa yükleme sürelerini önemli ölçüde iyileştirdiği ve müşterilere anında görsel geri bildirim sağladığı için özellikle çok sayıda görsel içeren mağazalar için faydalıdır.

Görsel sorunlarını giderme