Shopify görsellerini optimize etme: boyutlar, biçimler ve sıkıştırma

Örnek: ürünün ana fotoğrafını hazırlayın

Net bir 3600 × 2400 piksel fotoğrafınız ve kare ana görseller kullanan mağazanız olduğunu düşünün. Adımlar bir iş akışını gösterir; ölçülmüş sıkıştırma sonucu veya indirme boyutu vaadi değildir.

1. Kırpmayı seçin. Ürünün tamamını gösteren 2400 × 2400 kare deneyin. Sığmıyorsa önemli bölümünü kesmek yerine kompozisyonu değiştirin.
2. Tutarlılığı kontrol edin. İki mevcut ürün kartıyla karşılaştırın. Ürünün benzer ölçekte görünmesi için çevresindeki boşluğu ayarlayın.
3. Uygun bir kaynak hazırlayın. 2048 × 2048 kopyayı tam boy kırpmayla karşılaştırın. Ürün görünümü ve yakınlaştırma için yeterli ayrıntıyı koruyun. Küçük özgün dosyayı yalnızca bu sayıya ulaşmak için büyütmeyin.
4. Biçimi seçin. Düz arka planlı fotoğraf için net JPG, şeffaflık gerekiyorsa PNG kullanın. Sıkıştırma denemelerini kaliteli özgün dosyadan oluşturun.
5. Yükleyip inceleyin. Ürün, koleksiyon ve telefon görünümünü kontrol edin. Önemli kenarlar kesilmemeli, yakınlaştırma yararlı ayrıntıları göstermelidir.
6. Sunulan sürümü kontrol edin. Fotoğraf bulanık veya sayfa yavaşsa yeniden dışa aktarmadan önce temanın yüklediği sürümü inceleyin.

Küçük örnek grubunda işe yarayınca aynı hazırlığı benzer ürünlere uygulayın. İstisnaları ayrı değerlendirin. Parlak takı ile sade karton kutu aynı ölçü ve kompozisyonda bile farklı kalite kararları gerektirebilir.

Shopify neleri otomatik yapar?

Yüklediğiniz dosya ile müşterinin tarayıcısının indirdiği sürüm farklı olabilir. Yüklemeyi 4 MB'tan 1 MB'a düşürmek, müşterinin indirdiği dosyayı aynı oranda küçültmeyebilir.

Shopify farklı görsel boyutları oluşturur ve tarayıcı destekliyorsa WebP veya AVIF sunabilir. Tema görselleri kılavuzuna göre yükleme öncesi elle sıkıştırma gerekmez. Yönetim panelinde özgün kalite korunurken mağazada optimize edilmiş bir sürüm gösterilebilir.

Bu nedenle net ve iyi düzenlenmiş bir özgün fotoğraf, ne pahasına olursa olsun küçültülmüş dosyadan daha yararlıdır. Shopify aşırı sıkıştırmanın sildiği ayrıntıları geri getiremez. Tema net bir fotoğrafın çok küçük sürümünü büyütüyorsa sorun özgün dosyada değildir.

Görünen sorundan başlayın. Ürün yanlış kırpılıyorsa kompozisyonu veya temanın kırpma ayarını düzeltin. Özgün fotoğraf bulanıksa daha iyi bir fotoğraf kullanın. Net bir görsel yavaş yükleniyorsa müşteriye sunulan sürümü inceleyin. Yeniden sıkıştırmak bu üç durumda da doğru ilk adım değildir.

Boyutları kullanım yerine göre seçin

Ölçüleri küçük ürün kartına değil, görselin en büyük yararlı görünümüne göre belirleyin. Net bir küçük resim galeri veya yakınlaştırma için yetersiz olabilir. Piksel ölçüleri genişlik ve yüksekliği; KB veya MB cinsinden dosya boyutu ise veri miktarını belirtir.

Shopify ürün ve koleksiyon görsellerinde 5000 × 5000 piksele veya 25 milyon piksele kadar, 20 MB'tan küçük dosyaları kabul eder. Kare fotoğraflar için 2048 × 2048 önerir; bu her mağaza için zorunlu değildir. Büyük bir grup hazırlamadan önce ürün medyası gereksinimlerini kontrol edin.

Sınırlar yükleme yerine göre değişebilir. Shopify'ın Dosyalar bölümü belgeleri görseller için 20 MB ve 25 milyon piksel belirtirken tema kılavuzu diğer görsel yüklemeleri için 20 milyon pikselden söz eder. Yönetim panelinin tamamında tek sınır varsaymak yerine kullandığınız alanın yönergelerine ve hata mesajına uyun.

700 piksel genişliğinde gösterilen bir fotoğraf, her görüntüleme pikseli için iki görsel pikseli kullanan ekranda 1400 piksel genişliğindeki sürümden yararlanabilir. Bu bir planlama örneğidir; tüm yüklemeleri ikiye katlama kuralı değildir. Yakınlaştırma daha fazla ayrıntı gerektirebilir, küçük kartlar yine küçük sürümler almalıdır.

Kare kartlar yaygın diye bütün fotoğrafları kare yapmayın. Uzun bir şişe, giysi ve manzara farklı kompozisyonlar gerektirebilir. Ürünleri karşılaştırmayı kolaylaştıran gruplarda şekli tutarlı tutun.

1200 × 600 piksel bannerın en-boy oranı 2:1'dir. 2400 × 1200 dosya aynı şekli korur ve yüksek çözünürlüklü ekranlarda daha çok ayrıntı sağlar. Bunlar örnek ölçülerdir, Shopify banner zorunlulukları değildir. Dar ve uzun mobil alan yanlardan çok şey kesebilir. Tema destekliyorsa ayrı mobil görsel yardımcı olur.

İçeriğe göre JPG veya PNG seçin

Şeffaflık gerektirmeyen normal fotoğraflarda JPG deneyin. Şeffaf arka planlarda veya JPG'de bozulan net yazı ve ince çizgiler içeren grafiklerde PNG deneyin. Tüm katalog için tek biçim varsaymak yerine dosyaları karşılaştırın.

PNG fotoğraf JPG'den çok büyük olabilir, ancak dönüşüm yalnızca ürün doğru görünüyorsa yararlıdır. Kumaşları, takıları, ahşap damarlarını ve küçük yazıları inceleyin. Bu ayrıntıları saklayan küçük dosya iyi bir ürün görseli değildir.

WebP yüklemek bir seçenektir, modern görsel sunumunun ön koşulu değildir. Shopify sunulan biçimi yüklenen biçimden bağımsız seçebilir. Tarayıcıda AVIF görmek de AVIF yüklemeniz gerektiği anlamına gelmez. İlgili alanın kabul ettiği biçimleri kontrol edin.

Beyaz arka plan şeffaflık değildir: ürünün arkasındaki mevcut beyaz dikdörtgen PNG kaydıyla kaybolmaz. Şeffaf görselleri sayfanın gerçek arka planında, özellikle açık kenarlar ve gölgelerde kontrol edin. Görsel biçimleri kılavuzumuz hangi biçimin ne zaman yararlı olduğunu açıklar.

Ayrıntıları kesmeden tutarlı ürün fotoğrafları hazırlayın

En-boy oranı, genişliğin yüksekliğe oranıdır. 2000 × 2000 ve 1000 × 1000 fotoğrafların ikisi de karedir ama ayrıntı miktarları farklıdır. Aynı şekil tek başına yetmez: ürün her ana fotoğrafta benzer alan kaplamalıdır.

Koleksiyon kartlarının bir sırasını karşılaştırın. Bir ayakkabı çerçeveyi doldururken diğerinin çevresi geniş beyaz boşluksa aynı ölçülere rağmen sıra düzensiz görünür. Karşılaştırmayı kolaylaştırmak için kompozisyonu ayarlayın ve ürünün bütün kenarlarını gösterecek boşluk bırakın.

Kırpma görselin bir bölümünü çıkarır; yeniden boyutlandırma ölçüleri değiştirir; esnetme oranları bozar. Kompozisyon için görsel kırpma aracını, oranları koruyarak küçültmek için yeniden boyutlandırma aracını kullanın. Şişeyi kareye esnetmek müşteriye şekli hakkında yanlış fikir verir.

Bir seriyi ürün görseli aracıyla hazırlayın: ortak tuval ve kenar boşluklarını seçin, her fotoğrafı kırpın veya konumlandırın, ardından Tüm görseller görünümünde karşılaştırın. Benzer ürünlerin çerçevede benzer miktarda yer kapladığını kontrol edin. Ortak bir tuval, kaynaklardaki farklı kadrajları otomatik olarak düzeltmez. Net bir JPG veya saydamlık gerekiyorsa PNG dışa aktarın ve temanızda inceleyin. Araç dosyaları hazırlar; bunların sunulmasını Shopify, nasıl görüntüleneceğini ise tema yönetmeye devam eder.

Temaya bağlı olarak Shopify'da kırpma sırasında önemli alanı görünür tutan bir odak noktası belirleyebilirsiniz. Bu, bannerdaki yüzü veya ürünü korumaya yardımcı olur; geniş kompozisyonun tamamının dar ekrana sığmasını garanti etmez. İki ekran boyutunu da kontrol edin.

Kampanya başlıklarını ve düğmeleri mümkünse temanın metin alanlarına ekleyin. Bannera gömülü yazı telefonda küçülebilir veya kesilebilir. Gerçek sayfa metni satırlara ayrılıp seçilebilir; gerçek düğme yalnızca bir resim olmak yerine bağlantı olarak çalışır.

Yüklemeden önce sıkıştırma ne zaman yararlıdır?

Özgün dosya gereksiz büyükse, yüklemesi yavaşsa veya sınırı aşıyorsa sıkıştırma yardımcı olur. Dosya zaten net ve yönetilebilirken Shopify uygun sürümü sunuyorsa faydası daha azdır. Her fotoğrafı 100 KB gibi keyfî bir hedefe indirmek için kaliteyi düşürmeyin.

Dokunulmamış bir kopya saklayın. Ölçüler kullanım için fazlaysa önce kopyayı küçültün, sonra sıkıştırmayı deneyin. Küçük içerik alanlarında bu, dev fotoğrafı tekrar tekrar sıkıştırmaktan daha çok tasarruf sağlayabilir. Ürün yakınlaştırması daha fazla ayrıntıyı gerektirebilir.

Sıkıştırılmış kopyayı karşılaştırmak için Pixilo'nun görsel sıkıştırıcısını kullanın. Aynı anda en fazla 20 JPG, PNG veya WebP kabul eder; dosya başına sınır 25 MB'dir, biçim ve ölçüler korunur. Sınırları Shopify'dan farklıdır. Birkaç temsilî görselle başlayıp geri kalanını işlemeden sonuçları inceleyin.

Burada PNG sıkıştırması kayıpsızdır: pikseller değişmez. Önceden iyi sıkıştırılmış PNG çok az küçülebilir. JPG ve WebP ince ayrıntıları değiştirebilir; indirilen kopyayı kontrol edin. Daha küçük dosya elde edilmezse Pixilo özgün dosyayı korur.

Fotoğrafları müşterinin göreceği boyutta ve varsa yakınlaştırmada karşılaştırın. İnce dokuları, küçük etiketleri, düz arka planları ve şeffaf kenarları kontrol edin. Yararlı ayrıntılar kayboluyorsa özgün dosyaya dönün. Ürün görsellerini optimize etme kılavuzumuz kalite kontrollerini daha ayrıntılı anlatır.

Yararlı alternatif metin ve açık dosya adları yazın

Görsel SEO, ürünü anlamaya yardımcı olan fotoğrafla başlar. Yüklemeden önce açıklayıcı ad verin; örneğin zeytin-yesili-kanvas-sirt-cantasi-on.jpg. Uzun anahtar kelime listelerinden kaçının. Ad, bu fotoğrafı yan görünümden veya ayrıntı çekiminden ayırmalıdır.

Alternatif metin görselin yazılı karşılığıdır. Anlamlı ürün fotoğrafında ilgili görünümü anlatın: “İki dış cepli zeytin yeşili kanvas sırt çantası, önden görünüm.” Ayrıntı fotoğrafında ana açıklamayı tekrarlamak yerine ayrıntıyı anlatın. Görselin açıklamadığı fiyat, indirim veya anahtar kelime eklemeyin.

Google'ın görsel SEO yönergeleri açıklayıcı adlar ve anahtar kelime yığılmadan yararlı alternatif metin önerir. Yakındaki sayfa metni de bağlam sağlar. Dosya adı küçük bir ipucudur, yararlı ürün sayfasının yerine geçmez.

Shopify ürün fotoğrafına alternatif metin ekleyin

1. Shopify yönetiminde Ürünler bölümünü açıp ürünü seçin.
2. Önizlemeyi açmak için medya bölümündeki görsele tıklayın.
3. Önce Alternatif metin ekle seçeneğine tıklayın, kısa açıklamayı yazıp Alternatif metni kaydet seçeneğini kullanın.
4. Diğer yararlı görünümler için de her birinin ne gösterdiğini anlatın.

Bu adımlar Shopify'ın ürün medyası alternatif metin talimatlarına dayanır. Tema bannerlarının ayrı ayarları vardır. Önerilen açıklamayı kabul etmeden fotoğrafla karşılaştırın: renk, malzeme ve ürün ayrıntıları doğru olmalıdır.

Bilgisayarın dosya özelliklerindeki açıklamanın otomatik alternatif metin olacağını varsaymayın. Tema aynı görseli farklı kullanabilir. Dekoratif görseller boş metin alternatifi gerektirebilir; bağlantılı görsel ise bağlantının hedefini anlaşılır kılmalıdır.

Bu durumları örneklerle açıklayan alternatif metin ve dosya adları kılavuzumuz erişilebilirlik ve anlaşılabilirlik konusunda yardımcı olur. Açıklamalar arama sıralamasını garanti etmez veya eksik ürün bilgilerinin yerini tutmaz.

Yayındaki mağazayı telefon ve bilgisayarda kontrol edin

Yönetim panelindeki önizleme yeterli değildir. Yayındaki mağazada bu kontrollerle başlayın; geliştirici araçları gerekmez.

• Telefonda bir ürün açın. Ürün bütünüyle görünüyor mu? Önemli yazılar okunuyor ve malzeme seçilebiliyor mu?
• Koleksiyondaki bir sırayı kontrol edin. Ana görsellerin şekli ve boşlukları tutarlı mı?
• Galeri ve yakınlaştırmayı deneyin. Ek fotoğraflar yararlı ayrıntı sunuyor mu? Seçilen renk veya varyant doğru ürünü gösteriyor mu?
• Sayfayı yenileyin. Ana fotoğraf hızla görünüyor, metin ve düğmeler yüklenirken yerinde kalıyor mu?
• Büyük ekranda tekrarlayın. Yalnızca dar önizlemeye güvenmeden geniş bannerları ve büyük ürün görünümlerini inceleyin.

Bulanık veya yavaş görselin nedenini araştırın

Bulanıklık sürüyorsa temanın küçük sürümü büyütüp büyütmediğine bakın. Küçük kart büyük bir görsel indiriyorsa daha küçük sürümlerin sunulmasını kontrol edin. Duyarlı görseller tarayıcının ekran ve düzene uygun boyutu seçmesini sağlar.

Shopify'ın image_tag belgeleri tema kodunda boyut seçeneklerini açıklar. Düzeltme gerekiyorsa geliştiriciden istenen ölçüleri ve srcset ile sizes özniteliklerini kontrol etmesini isteyin. Kod sorununu çözmek için her küçük resim boyutunu ayrı yüklemeniz gerekmez.

Geliştirici araçlarına aşinaysanız Ağ paneli gerçek indirmeleri gösterir. Sayfayı ve görseli tema geliştiricisine de gönderebilirsiniz.

1. Ürün sayfasını ve geliştirici araçlarını açıp Ağ (Network) panelini seçin.
2. Panel açıkken test için tarayıcı önbelleğini devre dışı bırakıp yenileyin. Böylece kayıtlı kopya yerine yeni indirmeyi incelersiniz.
3. Görselleri filtreleyip ana ürün fotoğrafını bulun. Galeri küçük resmiyle karıştırmamak için isteğin önizlemesini kontrol edin.
4. Aktarılan boyutu, görsel ölçülerini ve yanıttaki Content-Type başlığını inceleyin. JPG gibi görünen adres WebP veya AVIF sunabilir.
5. Telefon düzeni genişliğinde yenileyerek tekrarlayın. Küçük görünümün gereksiz yere en büyük sürümü indirmediğini kontrol edin.

Sunumu yalnızca dosya boyutuyla değerlendirmeyin. Yüksek çözünürlüklü ekran veya yakınlaştırma büyük sürümü haklı kılabilir. Galerinin tamamına esnetilen küçük resim veya her küçük karta indirilen tam çözünürlüklü özgün dosya gibi açık uyumsuzlukları arayın.

Üstteki ana fotoğraf hızla hazır olmalıdır. Aşağıdaki görseller genellikle ziyaretçi yaklaşana kadar bekleyebilir. Shopify, kaydırmadan görünen görsellerde geç yüklemeyi önermez. İlk fotoğraf geç geliyorsa temanın yükleme davranışını kontrol ettirin; tüm galeriyi hemen yüklemek başka sorun yaratabilir.

Yükleme hızı ve sayfa hareketini ayrı kontrol edin

Ana fotoğraf en büyük görünür öğeyse şu ölçütü etkileyebilir: Largest Contentful Paint (LCP). Bu ölçüt, en büyük görünür görsel veya metin bloğunun ne zaman belirdiğini gösterir. Küçük dosya yalnızca indirme gecikmeye katkıda bulunuyorsa yardımcı olur. Geç başlayan istek sıkıştırmadan sonra da yavaş kalabilir. Google'ın LCP kılavuzu bu farkı açıklar.

Fotoğraf belirdiğinde fiyatı veya satın alma düğmesini aşağı itiyorsa tema yeterli alan ayırmamış olabilir. Bu durum şu ölçüte katkıda bulunur: Cumulative Layout Shift (CLS). Beklenmedik sayfa hareketini ölçer. Daha fazla sıkıştırmak yerine düzende görsele yer ayırın. Google'ın düzen kayması kılavuzuna ve görseller ile Core Web Vitals kılavuzumuza bakın.

Aynı sayfayı benzer koşullarda önce ve sonra karşılaştırıp tek seferde bir şeyi değiştirin. PageSpeed'in simülasyonunu varsa gerçek ziyaretçi verilerinden ayırın. Puanlar değişebilir ve gerçek veriler düzenleme sonrası hemen yenilenmez. Tek yüksek puana güvenmek yerine düzeltilen sorunu kaydedin.

Bütün görselleri değiştirmeden nedeni bulun

Shopify'ın mağaza performansı kılavuzu tema, uygulama ve eklenen kodu da etkileyen unsurlar arasında sayar. Raporlar gerçek ziyaretçi verilerini kullanır. Görseller verimli sunuluyorsa yeni uygulama veya daha güçlü katalog sıkıştırması yerine kalan darboğazı çözün.

Önce hangi görseller düzeltilmeli?

Çok ziyaret edilen ürünün ana fotoğrafı ve koleksiyon kartıyla başlayıp önemli anasayfa bannerına geçin. Okunmayan etiket, kesilmiş ürün veya geç fotoğraf gibi görünür sorunu önceliklendirin. Az ziyaret edilen galerinin beşinci fotoğrafı, müşterinin devam etmeye karar verdiği ana görselden genellikle daha az önemlidir.

Sayfayı, özgün ölçüleri, kırpmayı, biçimi ve iyileşmeyi kaydedin. Kötü sonucu geri almak için özgün dosyayı saklayın. Başarılı yöntemi benzer ürünlere uygulayıp istisnaları ayrı kontrol edin; tüm kataloğu bir anda değiştirmeyin.

Sık sorulan sorular

Shopify ürün fotoğrafları için en iyi boyut nedir?

Her düzene uyan tek boyut yoktur. Kare fotoğraflarda 2048 × 2048 iyi başlangıçtır; tema, kompozisyon ve yakınlaştırma ihtiyacı belirler. Sınırlar içinde net özgün dosya kullanıp yayınlanan sayfayı kontrol edin. Küçük fotoğrafı yalnızca 2048 piksele ulaşmak için büyütmeyin.

Shopify görselleri otomatik sıkıştırır mı?

Shopify sunumu optimize eder ve farklı boyut ile biçimler gönderebilir. Bu, yönetimdeki özgün dosyanın ağır sıkıştırılmış kopyayla değişmesi demek değildir. Yüklemeden kırpma ve büyük ölçüleri düzeltebilirsiniz; her görseli elle sıkıştırmak gerekmez.

Tüm ürün fotoğrafları 200 KB altında mı olmalı?

Hayır. Keyfî hedef, özellikle yakınlaştırmada yararlı ayrıntıları silebilir. Müşterinin indirdiği sürümün boyutunu ve kalitesini kontrol edin. Küçük kart ile büyük ayrıntı fotoğrafının ihtiyaçları farklıdır.

Shopify için PNG mi JPG mi daha iyi?

Şeffaf olmayan fotoğraflarda JPG, şeffaf görsellerde veya JPG'de bozulan yazılarda PNG deneyin. Ürünün ince ayrıntılarını kontrol edin. Shopify yüklediğinizden farklı biçim sunabilir.

Görsel optimizasyon uygulaması gerekli mi?

Yalnızca Shopify'ın otomatik sunumu için değil. Büyük arşiv yönetimi veya belirli işte yardımcı olabilir. Önce mevcut araçların ve temanın yapmadığı işi belirleyin. Mağaza genelinde kullanmadan tek sayfada gerçek etkisini test edin.

Her ekran için ayrı görsel gerekir mi?

Normal ürün fotoğraflarında genellikle gerekmez: iyi tema aynı yüklemeden farklı boyutlar ister. Masaüstü bannerı telefonda ana konuyu kesiyorsa ayrı mobil kompozisyon yardımcı olur. Bu düzen kararıdır, her fotoğrafı çoğaltma gerekçesi değildir.