Shopify Ürün Görseli Boyutları: 2048 x 2048 Kuralı

Shopify ürün görselleri iki yönden birinde çuvallar. Ya çok küçüktürler — müşteri bir dikişi ya da taş montürünü incelemek istediğinde yakınlaştırma görünümü lapaya döner. Ya da makineden çıktığı gibi devasadırlar; sayfa telefonda sürünür, ki trafiğinin büyük kısmı oradan gelir. Yönetim paneli ikisini de uyarı vermeden kabul eder.

Shopify senin için çoğu mağaza sahibinin fark ettiğinden fazlasını yapıyor: her görselin mağazandaki farklı yerlere uygun boyutlarını üretiyor ve CDN'i, tarayıcının desteklediği yerlerde WebP ya da AVIF gibi modern bir biçim seçiyor. Yapmayacağı şeyler ise tutarsız bir en boy oranını düzeltmek, hangi fotoğrafın hangi varyanta ait olduğunu tahmin etmek ve tırtıklı bir kesiti kurtarmak. Senin kontrolündeki kısım şurası.

2048 x 2048'den başla ve orada dur

Shopify'ın kendi tavsiyesi: kare ürün görselleri genellikle en iyi 2048 x 2048 piksel ölçüsünde görüntüleniyor. Sert sınırlar çok daha yukarıda — bir ürün ya da koleksiyon görseli 20 MB'ın altında olmak zorunda ve 5000 x 5000 piksele, yani 25 megapiksele kadar çıkabiliyor.

Ama bu tavanlar hedef değil. Dawn'da satır içi ürün galerisi CDN'den asla 1.946 pikselden geniş bir şey istemiyor; yakınlaştırma lightbox'ı bile 4.096 pikselin üstünde bir ölçü tanımlamıyor. 5.000 piksellik bir ana dosya sana çoğunlukla daha yavaş yüklemeler ve aradaki her adımda daha yavaş düzenlemeler kazandırır. Ana galeri için 2.048 piksellik kareye sadık kal. Desteklenen yükleme biçimleri arasında PNG, JPEG ve WebP var; yani Shopify'a 6 MB'lık bir TIFF yerine sıkıştırılmış bir dosya ver.

Kare mi, dikey mi: bir oran seç ve ondan şaşma

Karışık en boy oranlarının göze battığı yer koleksiyon grid'leridir; Shopify'ın öne çıkan görsellerde tek tip bir oran önermesinin sebebi de bu. Dawn gibi temalar ya çerçeveyi her görsele uydurmana ya da her şeyi sabit bir orana kilitlemene izin verir ve ikisi de tutarsızlığı cezalandırır: uydurmak tırtıklı bir grid verir, kilitlemek bir şişenin tepesinden kırpar ya da bir yüzüğün etrafında ölü boşluk bırakır.

O yüzden kararı bir kere ver. Kare (1:1) en güvenli varsayılan ve dar ekranlarda düzgün akıyor. 4:5 ya da 2:3 gibi dikey oranlar giyime ve uzun şişelere yakışır, mobilde daha fazla dikey alan doldurur. Yapamayacağın şey, ikisini tek bir koleksiyonda birlikte kullanmak.

Bu kuralı, ürünün kesitini alıp çerçeveyi kendin kurarak dayat. Bir fotoğrafı remover.bg adresine yükle, arka planı kaldır ve yerine diğer bütün ilanlardakiyle aynı saf beyazı ya da marka rengini koy. Sonra sonucu, zaten kullandığın dışa aktarma aracında seçtiğin çerçeveye ölçekle; böylece elde tutulan bir kupa ile boydan boya bir palto aynı ölçülere insin. Aynı kesit, Amazon'un beyaz arka plan kuralları gibi daha katı pazaryeri gereksinimlerini de besler; ya da kesiti şeffaflıkta bırakıp sonradan birleştirebilirsin — şeffaf PNG'nin ne zaman doğru çıktı olduğuna göz at.

Shopify'ın CDN'i yeniden boyutlandırır ama kaynağını düzeltemez

Temalar görselleri Liquid'in image_url ve image_tag filtreleri üzerinden ister; bu filtreler bir srcset kurar, böylece CDN her cihaza doğru ölçüde ve doğru biçimde bir dosya sunabilir. İyi kurulmuş bir temanın 2.048 piksellik dosyanı 390 piksellik bir telefona asla yollamamasının sebebi budur.

Bunun kapsamadığı iki şey var. Yüklemedeki biçim tercihi hâlâ önemli: WebP olarak dışa aktarmak dosyaları CDN'e ulaşmadan önce küçük tutar ve Shopify WebP'yi dönüştürmeye zorlamadan kabul eder — tıpkı remover.bg'nin WebP'yi uçtan uca desteklemesi gibi. Bir de yüzlerce SKU için klasör sürükle-bırak kestirmesi yok; o iş, CSV içe aktarmanla birlikte koşan ve arka plan silme API'sine giden bir script'e ait.

Yakınlaştırma ancak piksel varsa işe yarar

Shopify'a göre yakınlaştırmanın düzgün çalışması için görsellerin 800 x 800 pikselden büyük olması gerekiyor. Dawn'da ürün şablonunun yakınlaştırma ayarı üç seçenek sunuyor: tıklama ve üzerine gelme, lightbox açma ya da hiç yakınlaştırma yok.

Satan şey dokuysa yakınlaştırmayı aç: triko, deri dokusu, gravür, değerli taş yüzeyleri, ahşap. Düz grafiklerde ve küçük ikonlarda kapat — orada yakınlaştırma yalnızca sıkıştırma bozulmalarının reklamını yapar. Yakınlaştırma kenarlar konusunda da affetmez: kürk kenarlar, savrulan saçlar ve ince askılar her hatayı gösterir; temiz bir kesitin ekmeğini yediği yer tam olarak burasıdır.

Varyant görselleri ve medya sırası

Her varyant tam olarak tek bir atanmış görseli destekler — yalnızca görsel; video ya da 3D model olmaz — ve müşteri o seçeneği işaretlediğinde önizleme olarak o çıkar.

Varyant başına tek görsel nadiren yettiği için etrafındaki galeriyi kullan. Her kareyi ürün medyasına ekle, ilişkili kareler yan yana dursun diye sırala ve en güçlü görseli en başa koy: ilk medya öğesi hem ürün kartını hem varsayılan görünümü belirliyor.

Alt metin: 512 karakter serbest, 125 fazlasıyla yeter

Shopify alt metni 512 karakterle sınırlıyor ve 125 ya da altını öneriyor. Bu bir okunabilirlik tavsiyesi, ekran okuyucu sınırı değil: uzun alt metni dinlemek yorucudur, çünkü dinleyen kişi metne göz gezdirip geçemez. Kareyi anlat, varyantı da dâhil ederek. "Lacivert keten gömlek, önden, düğmeli" — "gömlek"ten iyidir. "...görseli" kalıbını ve anahtar kelime listelerini geç. Alt metin ürün ürün değil, bir CSV yüklemesiyle toplu olarak da düzenlenebiliyor.

Yüklemeden önce kısa bir kontrol listesi

Bir parti Shopify'a girmeden önce: dikeyi seçmediysen 2048 x 2048 kare dışa aktar, 20 MB tavanının epey altında kal, koleksiyonun tamamında tek bir arka plan işlemi kullan, varyant başına bir görsel ata ve galeriyi onun etrafında sırala, alt metni 125 karakterin altında tut. Hiçbiri gösterişli değil; ama yanlış yaptığın anda hepsi koleksiyon sayfasında görünüyor.