Shopify Görsel Boyutları ve Ürün Medyası Nasıl Optimize Edilir?
Shopify'a bir ürün görseli yüklediğinizde, o dosya tam olarak yüklediğiniz biçimde ziyaretçiye ulaşmaz. Platform, görseli kendi CDN altyapısına alır; tema hangi boyutu talep ederse o boyutu üretir, tarayıcı WebP destekliyorsa otomatik olarak WebP sunar. Siz JPEG yüklemiş olsanız bile çıkıştaki URL farklı görünür. Bu sessiz ama sistematik dönüşüm zincirini anlamadan boyut kararları vermek, gereksiz dosya ağırlığı taşımak ya da zoom kalitesini yanlış ayarlamak kaçınılmaz olur.
Çoğu Shopify mağazasında görsel sorunları iki uçtan birinde yığılır: ya çok küçük yüklenen görseller ürün zoom'unu kullanılamaz kılar, ya da gereksiz yere 10–15 MB arasında orijinal dosyalar yüklenip depolama alanı ve yönetim karmaşası yaratır. Her iki durumda da asıl soru aynı: Shopify ne istiyor, siz ne vermelisiniz, CDN arasında ne oluyor?
Bu yazı Shopify'ın görsel sistemini pipeline mantığıyla açıklıyor — yükleme anından ziyaretçinin ekranına ulaşana kadar görsele ne olduğunu, tema dosyalarının bu süreçte nasıl bir rol üstlendiğini ve varyant ile alt görsel yönetimini kapsıyor. E-ticaret ürün görseli boyut kararları genel çerçeveyi ele alıyorsa, burada odak tamamen Shopify'a özgü mekanizmalar.
Shopify'ın görsel pipeline'ı: yüklenen ile sunulan arasındaki fark
Shopify'a yüklenen bir görsel, platformun CDN'ine (Fastly altyapısı üzerinde çalışır) kopyalanır ve orijinal dosya orada saklanır. Tema bir görseli talep ettiğinde — örneğin ürün kartında 400×400'lük bir thumbnail için — Shopify orijinalden o boyutu türetir ve bu boyutu önbelleğe alır. Bir sonraki istek aynı boyutu talep ettiğinde CDN'den gelir, origin'e dokunulmaz.
Bu mekanizmanın önemli sonucu şu: siz orijinal dosyayı yönetirsiniz, Shopify türevleri yönetir. 2000×2000 piksellik bir JPEG yüklediniz; tema bunu 600×600, 1200×1200 ve 100×100 boyutlarında talep edebilir — her biri ayrı bir CDN girdisi olarak üretilir. Siz bu türevlere müdahale edemezsiniz, temanın hangi boyutları istediğini de doğrudan kontrol edemezsiniz; ama yüklediğiniz orijinalin kalitesi tüm türevlerin tavanını belirler.
WebP tarafında Shopify, tarayıcı Accept: image/webp başlığı gönderdiğinde otomatik olarak WebP formatında yanıt verir. URL'de hâlâ .jpg yazan bir görsel, modern tarayıcılara WebP olarak ulaşır. Bu dönüşüm sizin herhangi bir şey yapmanızı gerektirmiyor; sadece bunu bilmek, "neden WebP yüklemeliyim?" sorusunu çözüyor — çoğu durumda yüklemenize gerek yok, platform hallediyor.
Ürün görseli boyutu: 2048px sınırı ve zoom davranışı
Shopify'ın ürün görselleri için belgelediği maksimum boyut 4472×4472 piksel ve 20 MB olarak tanımlanmış. Ama pratik üst sınır genellikle 2048×2048 piksel civarında tutulur; bunun üzerindeki boyutlar Shopify tarafından 2048px'e indirgenir. Yani 4000×4000 piksellik bir dosya yüklediğinizde platform bunu 2048×2048'e ölçekler ve bu ölçeklenmiş versiyonu orijinal olarak saklar.
Zoom desteği bu sınırla doğrudan ilişkili. Shopify'ın varsayılan ürün zoom'u, orijinal görseli tam boyutuyla gösterir. Eğer ürün görseli 800×800 piksellik bir thumbnail olarak yüklendiyse, zoom açıldığında aynı 800×800 görsel büyütülür ve bulanık çıkar. Zoom'un gerçek anlamda çalışabilmesi için yüklenen orijinalin görüntüleme boyutundan en az 2× büyük olması gerekir. Çoğu tema için 1600×1600 ile 2048×2048 arası iyi bir hedef; bu aralık hem zoom kalitesini karşılar hem de Shopify'ın yeniden ölçekleme sınırının altında kalır.
Dosya boyutu açısından pratik üst sınır 1–3 MB arası. 20 MB sınırı teknik bir tavan; operasyonel olarak bu noktaya yaklaşmak hem yükleme süresini hem de depolama yönetimini zorlaştırır. Yükleme öncesinde sıkıştırma yaparak 2048×2048 bir görseli JPEG'de 500–900 KB aralığına çekmek mümkün; bu aralık zoom kalitesini korurken dosya yönetimini kolaylaştırır.
Tema dosyalarında image_url filtresi ve boyut parametreleri
Shopify temaları Liquid şablon diliyle yazılır ve görseller image_url filtresiyle çağrılır. Bu filtreye boyut parametresi geçilebilir: {{ product.featured_image | image_url: width: 800 }} ifadesi, orijinal görselin 800 piksel genişliğindeki versiyonunun URL'ini üretir. Tema bu URL'i <img> etiketinin src değeri olarak kullanır.
Responsive görsel desteği için srcset üretimi de mümkün. Dawn gibi Shopify'ın modern tema şablonlarında görsel bileşenleri zaten birden fazla boyut için srcset tanımlar: 375, 550, 750, 1100, 1500 piksel gibi. Bu boyutlar tema tarafından belirlenir; siz mağaza sahibi olarak bu değerleri değiştirmek için tema kodunu düzenlemeniz gerekir. srcset'in nasıl çalıştığını anlamak, tema özelleştirmelerinde hangi boyutları ekleyip çıkaracağınıza karar vermeyi kolaylaştırır.
Önemli bir detay: image_url filtresi yalnızca Shopify CDN'inde depolanan görseller için çalışır. Harici URL'lerle kullanılamaz. Ayrıca filtre bir genişlik değeri aldığında en-boy oranını otomatik korur; hem genişlik hem yükseklik verildiğinde kırpma davranışı devreye girer ve crop parametresiyle yön belirlenebilir. Temanızda ürün kartları kare görünüyorsa, bu büyük olasılıkla image_url filtresine crop: 'center' parametresi eklenmiş olmasından kaynaklanıyordur.
Alt görseller ve varyant medyası nasıl organize edilmeli
Shopify ürün başına birden fazla görsel yüklemeye izin verir ve bu görseller sırayla listelenir. İlk görsel varsayılan olarak featured image olarak atanır; tema bu görseli ürün kartlarında, arama sonuçlarında ve sosyal paylaşım meta etiketlerinde kullanır. Bu sıralamayı admin panelinden sürükle-bırak ile değiştirebilirsiniz ve bu değişiklik tema davranışını doğrudan etkiler.
Varyant medyası daha spesifik bir özellik: belirli bir görseli belirli bir varyantla ilişkilendirebilirsiniz. Kırmızı ve mavi versiyonu olan bir ürünse, kırmızı görseli kırmızı varyantla eşleştirdiğinizde ziyaretçi renk seçimi yaptığında galeri otomatik olarak o görsele geçer. Bu ilişkilendirme admin'deki ürün düzenleme ekranında, görselin yanındaki varyant seçiciyle yapılır. Varyant başına birden fazla görsel atanabilir; bu özellik özellikle kıyafet, mobilya ve renk çeşitliliği yüksek ürünlerde galeri deneyimini önemli ölçüde iyileştirir.
Dosya adlandırma bu noktada SEO açısından devreye girer. Shopify yüklenen dosya adını CDN URL'inde korur; urun-adi-kirmizi-renk.jpg gibi açıklayıcı bir ad, IMG_4821.jpg'ye kıyasla görsel arama sinyali taşır. Görsel SEO'da dosya adı ve alt metin sinyallerinin nasıl çalıştığı bu ilişkiyi daha geniş çerçevede ele alıyor. Shopify'ın yönetim ekranında alt metin de ürün görseli başına ayrı ayrı girilebilir; bu alanı boş bırakmamak erişilebilirlik ve SEO açısından önemli.
Shopify CDN'i ve format dönüşümü: .webp eki ne anlama gelir
Shopify'ın CDN'inden gelen görsel URL'leri zaman zaman orijinal dosya adına .webp eki eklenmiş bir yapıda görünür: urun-gorseli.jpg.webp. Bu garip görünen uzantı, Shopify'ın tarayıcı müzakeresi yaparak WebP sunduğunun işaretidir. Tarayıcı WebP desteklemiyorsa aynı görsel .jpg olarak gelir; URL değişir ama içerik aynıdır.
Bu davranış önemli bir pratik sonuç doğuruyor: Shopify mağazanıza WebP formatında görsel yüklemenize gerek yoktur. JPEG veya PNG yükleyin, CDN modern tarayıcılara WebP sunmayı kendisi halleder. WebP yüklemenin zararı yok ama ekstra avantajı da sınırlı — platform zaten bu dönüşümü yapıyor. Enerjiyi dosya boyutunu ve çözünürlüğü doğru ayarlamaya harcamak daha verimli.
PNG görsellerde dikkat edilmesi gereken bir nokta var: şeffaf arka planlı ürün görselleri PNG olarak yüklendiğinde Shopify bu görselleri WebP'ye dönüştürürken şeffaflığı korur. Ama bazı eski tema bileşenleri şeffaf görselleri beyaz arka plan varsayımıyla işleyebilir; bu durumda beyaz kenarlıklar veya beyaz kutu görünümü oluşabilir. PNG ve JPEG arasındaki format seçimini belirlerken şeffaflık ihtiyacı Shopify bağlamında da belirleyici kriter olmaya devam eder.
Video ve 3D model desteği de Shopify'ın medya sistemine dahil. Ürün sayfasına MP4 video veya .glb formatında 3D model yüklenebilir; bunlar görseller gibi aynı medya galerisinde görünür. Video dosyaları Shopify'ın sunucularında barındırılır, harici bir video platformu gerekmez. Bu medya türleri görsel optimizasyon tartışmasının dışında kalır ama ürün deneyimini önemli ölçüde zenginleştirebilir; özellikle karmaşık veya fiziksel ağırlığı önemli olan ürünlerde 3D görünüm dönüşüm oranına doğrudan etki edebilir.
Shopify'ın görsel sistemi çoğu durumda sizi korur: CDN hızlandırır, WebP dönüşümünü otomatik yapar, tema boyutlandırmayı yönetir. Sizin kontrolünüzde kalan şeyler daha az ama daha kritik: yüklediğiniz orijinalin çözünürlüğü zoom kalitesini belirler, dosya ağırlığı yönetim pratiğini etkiler, varyant eşleştirmesi galeri deneyimini şekillendirir.
Çoğu mağaza için pratik başlangıç noktası şu: ürün görselleri için 1600–2048px arası kare, JPEG formatında ve 1 MB altında yükleyin. Şeffaflık gerektiren ürünler için PNG kullanın. Varyant görselleri için dosya adlandırmaya dikkat edin ve alt metin alanlarını boş bırakmayın. Bu adımlar Shopify'ın pipeline'ına gereksiz yük bindirmeden kaliteli görsel deneyimi sağlamak için yeterli bir temel oluşturur.