Shopify Görsel Boyutları ve 500 KB Sınırı

Shopify ana görseliniz olarak 2048 x 2048 piksel kullanın ve sunulan her dosyayı 500 KB altında tutun. Shopify 20 MB'a ve 4472 piksel kareye kadar görsellere izin verir, ancak bu sayılar hızlı bir mağazanın neye ihtiyaç duyduğundan ziyade platformun neye tolerans gösterdiğini açıklar.

20 MB rakamı çoğu rehberin belirttiği sayıdır ve tasarımı etrafında şekillendirmek için yanlış bir değerdir. Shopify'ın izin verdiği şey ile ödüllendirdiği şey farklıdır. Her biri 3 MB olan 8 görsel içeren bir ürün sayfası 24 MB büyüklüğündedir ve mobil alışveriş yapanlar sayfa yüklenmeden ayrılır.

Yerleşime göre Shopify görsel boyutları

Ürün görselleri 2048 pikselde kare olmalıdır; afişler, koleksiyon kapakları ve logoların ise her birinin kendi boyutlarına ihtiyacı vardır. Her yerde tek bir boyut kullanmak esnetilmiş afişlere ve kırpılmış koleksiyon görsellerine yol açar.

Temalar görselleri farklı şekilde kırpar ve masaüstü önizlemesinde doğru görünen bir afiş, telefonda genellikle ortadan kesilir. Afişin önemli kısmını orta yüzde 60'lık alanda tutun, böylece hiçbir tema onu kırpamaz.

500 KB neden önemli olan sayıdır

Sayfa ağırlığı bir mağazanın ne kadar hızlı yükleneceğini belirler ve tipik bir ürün sayfasında bu ağırlığın çoğunu görseller oluşturur. Toplamda 2 MB altındaki bir sayfa mobil veride rahatça yüklenirken, 24 MB'lık bir sayfa yüklenemez.

Telefonlardan alışveriş yapanlar çoğu mağaza için trafiğin çoğunluğunu oluşturur ve mobil bağlantılar ofis geniş bandına göre çok daha fazla değişkenlik gösterir. Yükleme süresinin her saniyesi dönüşümlere mal olur; bu da görsel ağırlığını teknik bir sorundan ziyade bir gelir konusu haline getirir. 8 ürün görselini 3 MB'tan 300 KB'a düşürmek sayfadan 21 MB kaldırır ve alışveriş yapan birinin görebileceği hiçbir şeyi değiştirmez.

Shopify görselleri sizin için sıkıştırır mı

Shopify, içerik dağıtım ağı (CDN) aracılığıyla yeniden boyutlandırılmış türevler sunar ve destekleyen tarayıcılar için otomatik olarak WebP'ye dönüştürür. Platform makul bir iş çıkarır ve yüklediğiniz her şey üzerinden çalışır.

Bu son nokta kısıtlamadır. Shopify orijinalinizden daha küçük türevler üretir, bu nedenle kötü sıkıştırılmış 5 MB'lık bir yükleme, iyi hazırlanmış 400 KB'lık bir yüklemeye göre daha büyük türevler üretir. Yüklemeden önce sıkıştırmak, kendi depolama kullanımınızı da azaltır ve toplu içe aktarmaları çok daha hızlı hale getirir; çünkü 500 ürünlük bir içe aktarma 2.5 GB yerine 200 MB taşır.

Görseller Shopify için nasıl hazırlanır

Hızlı bir ürün sayfası oluşturmak için bu 6 adımı izleyin.

1. Fotoğraf düzenleyicinizden 2048 x 2048 piksel boyutunda kare bir ana dosya dışa aktarın.
2. Herhangi bir afiş veya yaşam tarzı görselini gerçek görüntüleme genişliğine yeniden boyutlandırın, yüksek yoğunluklu ekranlar için bunu iki katına çıkarın.
3. Fotoğrafları WebP'ye dönüştürün veya iş akışınız buna bağlıysa JPG olarak tutun, çünkü Shopify her iki şekilde de dönüştürür.
4. Ürün fotoğrafları için 300 KB ve afişler için 400 KB kullanarak hedef boyuta sıkıştırın.
5. Toplu bir CSV içe aktarmasının görselleri doğru ürünlerle eşleştirmesi için dosyaları ürün koduna ve görünüme göre adlandırın.
6. Yalnızca masaüstü önizlemesinde değil, bir telefonda da ürün sayfasını yükleyin ve kontrol edin.

Shopify'da WebP

Shopify yıllardır WebP'yi yerel olarak sunmaktadır ve yüklenen JPG ve PNG dosyalarını bunu destekleyen tarayıcılar için otomatik olarak dönüştürür. Doğrudan WebP yüklemek kabul edilir ve platforma bırakmak yerine sıkıştırma üzerinde denetim sağlar.

WebP, JPG ile aynı görsel kaliteye yüzde 25 ila 35 daha küçük dosya boyutlarında ulaşır; bu da 8 fotoğraf taşıyan bir sayfada sahip olmaya değerdir. Kaçınılması gereken tek durum, dosyanın daha sonra bir tedarikçi tarafından indirileceği veya bir baskı merkezine gönderileceği yerlerde WebP yüklemektir, çünkü bu yerler halen JPG bekler.

Yavaş bir ürün sayfasını düzeltme

Sayfadaki en büyük görselle başlayın, çünkü en büyük tek dosya genellikle gecikmenin çoğundan sorumludur. Bir Shopify mağazasında bu normalde ana sayfa afişi veya ilk ürün fotoğrafıdır.

• Sıkıştırmadan önce yeniden boyutlandırın. 1920 piksellik bir alandaki 4000 piksellik bir afiş, verisinin yüzde 75'ini boşa harcar.
• Ekranın üst kısmındaki (above the fold) görsellerin sayısını azaltın. Aynı anda yüklenen 12 görsellik bir galeri diğer her şeyi geciktirir.
• Çoğu modern temanın varsayılan olarak işlediği ekran altındaki görseller için tembel yüklemenin (lazy loading) açık olduğunu kontrol edin.
• Kısa bir GIF sıklıkla sayfanın geri kalanının tamamından daha ağır olduğundan hareketli GIF dosyalarını video ile değiştirin.
• Uygulamaları denetleyin. Değerlendirme araçları, açılır pencereler ve güven rozetleri genellikle kendi görsellerini ve betiklerini yükler.

Alt metin ve görsel dosya adları

Ekran okuyucuları kullanan müşteriler için ürünü açıklayan alt metin yazın ve dosyaları kamera adı yerine ürünün adına göre adlandırın. IMG_4821.jpg adlı bir dosya arama motorlarına ve müşterilere hiçbir şey söylemez.

Toplu içe aktarmada okunabilir kalan, bir klasörde öngörülebilir şekilde sıralanan ve arama sonuçlarında görseli tanımlayan navy-linen-shirt-front.jpg gibi bir kalıp kullanın. Alt metin, ürün başlığını kelimesi kelimesine tekrarlamadan renk, malzeme ve görünüm dahil olmak üzere fotoğrafın ne gösterdiğini belirtmelidir. Her iki alan da ürün başına saniyeler alır ve bir mağazanın görsel aramasında nasıl göründüğünü iyileştirir.

Değişiklikleri yayına almadan önce test etme

Tüm kataloğu çalıştırmadan önce ilk olarak 5 ürünü işleyin, yayınlayın ve sayfaları gerçek bir telefonda kontrol edin. 500 ürüne uygulanan bir ayar hatasını geri almak, önlemekten çok daha fazla zamana mal olur.

Test ürünlerinde 3 şeyi kontrol edin. Müşteriler giyim ve takılarda yakınlaştırmayı yoğun bir şekilde kullandığından, tam yakınlaştırmada görsellerin net göründüğünü doğrulayın. Koleksiyon ızgarasının tutarlı kırpmalar gösterdiğini doğrulayın. Sayfanın ofis geniş bandı yerine mobil veride hızlı yüklendiğini doğrulayın. Ancak bundan sonra aynı ayarları diğer her şeye uygulayın.

Görsel uygulamaları ve yüklemeden önce yapmak

Sıkıştırma uygulamaları, yüklemeden önce bir kez çözebileceğiniz bir sorunu çözmek için aylık ücret alır. Uygulamalar, bir mağaza birçok kişiden sürekli yeni görseller aldığında ve kimse neyin yüklendiğini denetlemediğinde yararlıdır.

Kararlı bir kataloğa ve görselleri yöneten tek bir kişiye sahip bir mağazanın yinelenen bir ücrete ihtiyacı yoktur. Kitaplığı bir kez sıkıştırmak ve yeni fotoğrafları geldikçe sıkıştırmak aynı sonucu verir. Kataloğunuz el ile işleyebileceğinizin ötesinde büyüdüğünde veya birkaç personel bir şartnameye uymadan görsel yüklediğinde durumu yeniden değerlendirin.

Yaygın Shopify görsel hataları

Doğrudan kameradan yükleme yapmak en maliyetli hatadır, çünkü 24 megapiksellik bir fotoğraf, bir mağazanın görüntüleyebileceği verinin 10 katını taşır. Platform dosyayı kabul eder ve sayfa bunun bedelini öder.

Diğer iki hata düzenli olarak görünür. Bir koleksiyondaki görsel şekillerini karıştırmak düzensiz bir ızgara üretir, çünkü temalar kare şeklinde kırpar ve dikey bir fotoğraf üstünü ve altını kaybeder. Ürün fotoğrafları için PNG kullanmak, gözle görülür bir fayda sağlamadan dosya boyutlarını 3 ila 5 kat artırır, çünkü PNG her pikseli tam olarak saklar ve bir fotoğrafın yararlanılacak düz alanları yoktur.

Tutarlı bir katalog tutmak

Tüm kataloğu tek bir grupta işleyin, böylece her ürün fotoğrafı aynı boyutları, sıkıştırmayı ve çerçevelemeyi paylaşır. Ürünleri karşılaştıran müşteriler, adlandıramadıklarında bile tutarsızlığı fark ederler.

Tutarlılık, eşleşen şekil ve parlaklıktaki görsellerin bir araya getirilmiş bir sayfa yerine tasarlanmış bir sayfa olarak okunduğu koleksiyon ızgarasına da yardımcı olur. Boyutları ve boyut hedefini bir kez ayarlayın, ardından her ürünü ayrı ayrı ayarlamak yerine bunları her dosyaya uygulayın.

Bir kataloğu tek geçişte işleme

Aynı anda 500'e kadar görseli bırakın veya doğrudan fotoğrafçınızdan bir ZIP arşivini sürükleyin; her dosya aynı şartnameye göre yeniden boyutlandırılmış ve sıkıştırılmış olarak geri gelir. Masaüstü yazılımında bir öğleden sonra süren bir katalog birkaç dakika içinde biter.

Her şey kendi işlemcinizde tarayıcınızın içinde çalışır, böylece yayınlanmamış ürünler, sezonluk kampanya çekimleri ve tedarikçi fotoğrafları asla bir sunucuya ulaşmaz. Ambargo altında bir lansman hazırlayan bir mağaza için dosyaları yerel tutmak, kontrollü bir duyuru ile sızıntı arasındaki farktır ve ekstra hiçbir maliyeti yoktur.