Shopify'a Yüklenen Görseller Gerçekte Nasıl İşleniyor?

Sunucu rafında küçülen fotoğraf kâğıdı kopyaları

Shopify'a bir ürün görseli yüklediğinizde, platform arka planda sessizce bir dizi işlem başlatır. Siz sadece bir dosya seçip "Yükle" tuşuna basarsınız; ancak o andan itibaren Shopify'ın kendi sistemleri devreye girer ve yüklediğiniz dosya hiç tahmin etmediğiniz biçimde değiştirilir, yeniden boyutlandırılır, farklı formatlara dönüştürülür ve küresel bir içerik dağıtım ağına (CDN) yerleştirilir.

Bu sürecin büyük bölümü satıcıların erişemeyeceği altyapı katmanlarında gerçekleşir. Yükleme arayüzündeki önizlemenin gerçek bir temsil olmadığını, mağazanızda müşterilere sunulan görselin farklı bir boyuttan, hatta farklı bir formattan geldiğini çoğu satıcı fark etmez. Fark edene dek görsel kalitesiyle ilgili şikayetler birikmeye başlar.

Süreci bir bütün olarak anlamak, sorun çıkmadan önce doğru kararlar vermenizi sağlar. Hangi dönüşümlerin otomatik yapıldığını, hangilerinin tarayıcıya bırakıldığını bilmek; yüklemeden önce ne yapabileceğinizi, yükledikten sonra neyin elinizden çıktığını netleştirir.

Yükleme anında başlayan işlemler

Dosya sunucuya ulaşır ulaşmaz Shopify onu doğrular. Kabul edilen formatlar JPEG, PNG, GIF ve WebP'dir; SVG ise yalnızca tema dosyaları için geçerlidir, ürün görseli olarak yüklenemez. Dosya boyutu üst sınırı 20 MB olmakla birlikte, platform 4472 x 4472 pikselin üzerindeki görselleri reddeder. Bu piksel sınırı çoğu zaman göz ardı edilir; stüdyo çıkışı yüksek çözünürlüklü fotoğraflarda tam bu noktada hata alınır.

Doğrulama geçilince Shopify görseli kendi depolama altyapısına kopyalar. Yüklediğiniz orijinal dosya bu aşamada erişilebilir kalır ve yönetim panelinden indirilebilir; ancak mağazanızın vitrininde kullandığı görsel orijinal değil, sistemin ürettiği varyantlardan biridir. Orijinal bir arşiv gibi saklanır. Vitrin başka bir kaynaktan beslenir.

Orijinal ile vitrin arasındaki bu ayrım, görsel sorunlarının kaynağını bulmayı güçleştirir. Yönetim panelinden indirdiğiniz dosya mükemmel görünür; asıl sorun, müşteriye sunulan varyantın farklı koşullarda nasıl işlendiğindedir. İki kaynağı aynı anda karşılaştırmadan kesin bir yargıya varmak güçtür.

Shopify'ın ürettiği görsel varyantları

Platform, her yüklenen görsel için sabit bir isim şemasına göre birden fazla boyut varyantı oluşturur: _small, _medium, _large, _grande, _1024x1024, _2048x2048 ve benzeri. Her birinin bir piksel genişliği karşılığı vardır; _small 100 piksel, _grande ise 600 piksel genişliğindedir. Tema hangi varyantı talep ederse, CDN o varyantı sunar.

Burada gözden kaçan bir ayrıntı var. Tema şablonunuz _grande varyantını istiyorsa ve siz 300 x 300 piksel bir görsel yüklediyseniz, sistem 600 piksel genişliğinde bir görsel üretmeye çalışır. Piksel eklenmez, sadece mevcut piksel sayısı yayılır. Piksel yayılır, görsel bulanıklaşır. Platform sizi bu konuda uyarmaz; işlem tamamlanır ve mağazanızda yayına girer.

Varyant üretimi tema tarafından değil, platform tarafından merkezi olarak yönetilir. Farklı temalar aynı varyant isimlerini kullanır; sadece hangi varyantı çağırdıkları değişir. Temayı değiştirdiğinizde görselleri yeniden yüklemenize gerek kalmaz; yeni tema mevcut stoktaki başka bir varyantı çağırmaya başlar.

Hangi varyantın kaç piksel olduğunu önceden bilmek, yükleme boyutunu planlamayı kolaylaştırır. Mağazanızın kullandığı temanın kaynak kodunu inceleyerek hangi varyant adının çağrıldığını görebilirsiniz; bu bilgiyle yüklemeniz gereken minimum orijinal boyutu doğru hesaplayabilirsiniz. Küçük bir ön araştırma, ileride ortaya çıkabilecek bulanıklık sorunlarını baştan önler.

Format dönüşümü ve tarayıcı müzakeresi

Shopify, 2020 sonrasında tarayıcı uyumluluğuna göre otomatik WebP sunmaya başladı. Siz JPEG yüklersiniz; Chrome veya Edge kullanan bir ziyaretçi sayfayı açtığında tarayıcı sunucuya Accept: image/webp başlığını gönderir ve CDN bu başlığa karşılık WebP formatında yanıt verir. Ziyaretçi WebP alır, siz JPEG yüklemiş olsanız da.

Bu dönüşüm, görsel başına ekstra varyant üretilerek değil, CDN katmanında gerçek zamanlı içerik müzakeresiyle (content negotiation) yapılır. Yönetim panelinde hala JPEG görüyorsanız bu normaldir; müşterinin tarayıcısına giden dosya farklı bir formattadır. Mağaza ön yüzünden gerçek URL alarak o dosyayı ayrıca incelemeden hangi formatın sunulduğunu bilemezsiniz.

AVIF desteği henüz tüm Shopify planlarında varsayılan olarak açık değildir ve tema bazlı ek yapılandırma gerektirebilir. WebP kadar geniş kapsamlı bir otomatik dönüşüm değildir; ancak ilerleyen dönemde yaygınlaşması beklenmektedir. Bu bilgi, yükleme öncesi format tercihlerini planlarken hangi dönüşümün sisteme, hangisinin size ait olduğunu netleştirir.

Otomatik WebP dönüşümü, orijinal kaynağın kalitesini değiştirmez; yalnızca formatını dönüştürür. Başlangıçta aşırı sıkıştırılmış bir JPEG'den türetilen WebP, temiz bir kaynaktan üretilene kıyasla belirgin biçimde daha kötü çıkar. Format dönüşümünün getirisi ne olursa olsun, kaynak kalitesi her zaman tavan görevi görür.

CDN katmanı ve önbellek davranışı

Shopify'ın CDN altyapısı, görselleri global olarak dağıtılmış uç noktalara önbelleğe alır. Bir ziyaretçi Türkiye'den sayfanızı açtığında görsel muhtemelen Avrupa'daki bir uç noktadan gelir; platformun kaynak sunucusundan değil. Bu yapı yükleme hızı açısından önemli bir avantaj sağlar ve satıcı tarafından herhangi bir yapılandırma gerektirmez.

Ancak bir görseli güncellediğinizde önbellek temizlenmesi zaman alabilir. Görsel sürümlemede dosya adını değiştirmek bu yüzden önemlidir: aynı ada yüklenen yeni dosya, CDN önbelleğini hemen geçersiz kılmaz ve ziyaretçilerin bir kısmı birkaç saat boyunca eski görseli görmeye devam edebilir.

CDN aynı zamanda HTTP yanıt başlıklarını da yönetir. Cache-Control ve ETag başlıkları platform tarafından belirlenir; satıcı bunlara doğrudan müdahale edemez. Shopify Plus katmanında bile bu başlıkları özelleştirmek için sınırlı araçlar mevcuttur.

Satıcının kontrolü dışında kalanlar

Sıkıştırma oranı satıcı tarafından ayarlanamaz. Shopify kendi belirlediği kalite parametresiyle sıkıştırma uygular ve bu değer kamuya açık değildir. Yüklediğiniz görselin başlangıç kalitesi yüksek olsa da sistem kendi işlemini üstüne ekler. Sonuç görsel kalitesini ölçmek için mağaza ön yüzünden URL alarak o dosyayı ayrıca analiz etmeniz gerekir; yönetim panelindeki önizleme yeterli bir referans değildir.

Varyant boyutları sabit şemaya bağlıdır. Özel bir kırılma noktası (breakpoint) eklemek mümkün değildir; tema yalnızca mevcut varyantlardan birini seçer. Alışılmışın dışında bir oran kullanıyorsanız, en yakın standart varyant seçilir ve o varyant için tasarlanmamış bir oran yayılır. Sonuç doğrudan ürün görüntüsünü etkiler.

WebP dönüşümü de doğrudan kontrol dışındadır. Tarayıcı uyumluluğuna göre format seçimi platforma bırakılmıştır. Safari'nin eski sürümleri WebP'yi desteklemiyordu ve bu durum Shopify'ın WebP sunmaya başladığı dönemde önemli bir kullanıcı kitlesini etkiliyordu; 2022 itibarıyla Safari de WebP desteği ekledi ve bu sorun büyük ölçüde geçerliliğini yitirdi.

Alt metin (alt text) ve dosya adı da platforma devredilemeyen alanlardır. Shopify bunları otomatik oluşturmaz; yönetim panelinde her görsel için ayrı ayrı girilmesi gerekir. SEO açısından bu iki alan, otomatik işlem hattının kapsamı dışında kaldığı için tamamen satıcının sorumluluğundadır; atlandığında hem arama motorlarına hem de ekran okuyucu kullanan ziyaretçilere karşı görünmez bir eksiklik bırakır.

Yükleme öncesinde yapılabilecekler

Platforma devredilecek görsel ne kadar temizse, çıktı o kadar iyi olur. Shopify'ın üstüne ekleyeceği sıkıştırma her koşulda gerçekleşir; başlangıç noktasını iyi tutmak bu kaybı sınırlar. Varyant boyutları önceden planlanırken mağazanızın en büyük varyantını referans almanız yeterlidir; çoğu tema için bu 2048 piksel genişliktir.

JPEG formatında yüklemek hala yaygın bir tercih olmakla birlikte, zaten WebP olarak hazırladığınız görselleri WebP olarak da yükleyebilirsiniz; platform bunu da kendi işlem hattından geçirir, ancak kaynak kaliteyi siz belirlemiş olursunuz. Çok sayıda ürün görselini hazırlarken toplu dönüştürme akışı kurmak bu aşamayı tekrarlanabilir ve tutarlı hale getirir.

Renk profili de yükleme öncesinde ele alınması gereken bir alandır. Adobe RGB veya Display P3 profiliyle hazırlanmış görseller, Shopify'ın işlem hattında beklenmedik renk kaymalarına yol açabilir. Yüklemeden önce sRGB'ye dönüştürmek, farklı ekranlardaki tutarsızlıkları baştan engeller; bu dönüşümü Shopify yapmaz, kaynak dosyada yapılması beklenir.

EXIF verisini temizlemek küçük bir adım gibi görünse de dosya boyutunu hafifçe düşürür ve GPS konumu gibi istenmeyen meta verileri kaldırır. Shopify bu veriyi otomatik olarak silmez. Toplu işlem akışlarına bir EXIF temizleme adımı eklemek, hem boyut hem de gizlilik açısından faydalıdır ve alışkanlık kazandıktan sonra ekstra zaman almaz.

Platformlar arası beklenti farkı

Shopify'ın bu yaklaşımı diğer e-ticaret platformlarına kıyasla oldukça otomatiktir. Trendyol'un görsel gereksinimleri veya Hepsiburada'nın teknik kuralları katı ve açıkça tanımlanmıştır; sistem görseli reddeder ya da belirli bir şablona uymayan içeriği işaretler. Shopify'da platform görseli kabul eder, kendi hattından geçirir ve satıcı kontrol etmezse sonuçtan habersiz kalır.

Bu esneklik avantaj gibi görünür; ancak bir dezavantajı da beraberinde taşır: satıcının görsel kalitesini denetleme sorumluluğu artar. Platform otomatik kabul ettiği için hata görünmez, fakat müşterinin ekranında o hata fazlasıyla dikkat çekiyor olabilir.

Sonucu doğrulama yöntemi basittir. Mağaza ön yüzünden bir ürün sayfası açın, tarayıcının geliştirici araçlarıyla görselin URL'ini kopyalayın, o URL'i ayrı bir sekmede açın ve gerçek boyutu ile formatı inceleyin. Yönetim panelinin önizlemesiyle karşılaştırdığınızda fark hemen görünür hale gelir.

Shopify'ın görsel işleme hattı, yükleme anından CDN'e kadar büyük ölçüde satıcının erişiminin dışındadır. Bunu bir engel olarak değil, sistemle uyumlu çalışmayı gerektiren bir yapı olarak okumak daha işlevsel bir başlangıç noktasıdır. Kaynak görseli doğru hazırlamak, boyutlandırmayı planlamak ve yükleme sonrası ön yüzden doğrulama yapmak; otomatik işlem hattıyla birlikte çalışmayı sağlayan ve satıcı tarafında her zaman mümkün olan adımlardır.