Online mağazanız için ürün görselleri nasıl optimize edilir?

Alışveriş yapanların ihtiyaç duyduğu ürün bilgileriyle başlayın

Bir ürün görselinin görevi sadece bir dikdörtgeni doldurmaktan ibaret değildir. Birinin satın aldığı şeyin şeklini, yüzeyini, rengini ve özelliklerini değerlendirmesine yardımcı olmalıdır. Dikişleri kaldıran, yazıları okunması zor hale getiren veya bir yüzeyin görünümünü değiştiren bir dışa aktarma, dosya boyutu etkileyici görünse bile, çok agresif bir şekilde sıkıştırılmıştır.

Düzenlemeden önce az sayıda kullanışlı görünüm seçin. Net bir ana fotoğraf, başka bir açı ve önemli bir özelliğin yakın çekimi, genellikle birbirine çok benzeyen birkaç resimden daha fazla soruyu yanıtlar. Ürünü açıklamaya yardımcı olduğunda bir yaşam tarzı görünümü veya ölçek referansı ekleyin. Gerekli bir sayı yoktur: düz bir kupa ve teknik bir ceket farklı bilgiler gerektirir.

Orijinal fotoğraflarınızı ayrı bir klasörde saklayın. Ürünü ve görünümü tanımlayan adlarla yayınlanacak kopyalar hazırlayın. Orijinal görüntü odak dışıysa, kötü aydınlatılmışsa veya çok küçükse, sıkıştırma bunu düzeltemez. Dışa aktarma ayarlarına zaman harcamadan önce zayıf fotoğrafı değiştirin.

Kırpma ve arka planları tutarlı hale getirin

Bir koleksiyon sayfası açın ve birkaç ürüne birlikte bakın. Farklı miktarda boş alan, benzer ürünlerin alakasız görünmesine veya boyut olarak belirgin şekilde farklı görünmesine neden olabilir. Temanıza uygun bir en boy oranı seçin, ardından nesnenin konumunu ve çevresindeki alanı ana resimlerde makul ölçüde tutarlı tutun.

Kare bir kırpma, kare bir ürün ızgarası için iyi sonuç verebilir, ancak evrensel bir kural değildir. Uzun bir giysi veya uzun bir ekipman farklı bir sunum gerektirebilir. Kırpmayı kabul etmeden önce, kulplar ve aksesuarlar dahil olmak üzere nesnenin tamamını kontrol edin. Bir şablona uyması için fotoğrafı germeyin.

Bir fotoğraf serisi hazırlamak için Pixilo’nun ürün görseli optimizasyon aracını kullanın. Ortak tuval boyutlarını, en az kenar boşluğunu ve arka planı seçin; ardından her fotoğrafı ayrı ayrı kırpıp konumlandırın. İndirmeden önce Tüm görseller görünümünde seriyi inceleyin. Büyüt ile ayrıntıları ve dışa aktarma kalitesi ayarının etkisini kontrol edin.

En az kenar boşluğu, otomatik algılanan üründen değil, kırpılmış görselin kenarlarından ölçülür. Kaynaktaki boş alanlar ve opak arka planlar, kırparak kaldırmadığınız sürece korunur. Dolayısıyla aynı tuval tüm ürünleri otomatik olarak aynı büyüklükte göstermez. Mağaza temanız da görselleri kırpabileceğinden yayımlanan ürün ızgarasını ayrıca kontrol edin.

Beyaz veya nötr bir arka plan, kataloğun tutarlı görünmesini sağlayabilirken, şeffaflık farklı arka planlara ürün yerleştiren bir tasarıma uygun olabilir. Eğer bir PNG veya WebP dosyasında zaten şeffaf alanlar varsa, arka plan rengi aracı bu alanları seçtiğiniz renkle doldurup JPG oluşturabilir. Normal bir fotoğrafın mevcut arka planını kaldırmaz.

Şeffaf kenarları açık ve koyu arka planlarda kontrol edin. Beyazda kaybolan soluk bir çizgi, koyu bir sayfada belirginleşebilir. Çizgi orijinal görselde zaten varsa dosya biçimini değiştirmek onu kaldırmaz. Ayrıntılar için şeffaf görsellerde beklenmedik arka planlar rehberine bakın.

Izgara, ürün sayfası ve yakınlaştırma için boyutları seçin

Görselin düzeninizde gerçekte ne kadar geniş göründüğünü ölçün. Bir koleksiyon kartı 360 CSS pikseli kaplayabilirken, ana ürün görseli 800 piksel kaplayabilir. Bunlar görüntüleme genişlikleridir, yüklenen dosya için otomatik gereksinimler değildir.

CSS pikseli, sayfa düzenindeki görünür boyutu ölçer. Yoğun pikselli ekranlarda bir CSS pikseli birden çok fiziksel ekran pikseli kullanabilir. Bu yüzden net bir görsel, görünen genişliğinden daha fazla görsel pikseline ihtiyaç duyabilir.

Yüksek çözünürlüklü bir ekran için, görüntülenen genişliğin yaklaşık iki katı olan bir sürüm test etmek için kullanışlı bir adaydır. Bu nedenle, 360 piksellik bir kart 720 piksellik bir dışa aktarma kullanabilirken, 800 piksellik bir ürün görüntüsü 1600 piksellik bir dışa aktarma kullanabilir. Daha küçük sürümleri de hazır bulundurun. Bu rakamlar planlama örnekleridir, platform önerileri veya bir tarayıcının hangi dosyayı seçeceğine dair garantiler değildir.

Yakınlaştırma görünümünü ayrıca planlayın. Müşterilerin bir kumaş dokusunu, bağlantı parçasını veya gravürünü incelemesi gerekiyorsa, yeterince ayrıntılı bir orijinal görüntüyü saklayın veya ayrı bir yakın çekim sağlayın. Ürün listesi için hazırlanmış küçük bir görsel sürümü, zoom görüntüleyicisinin erişebileceği tek dosya olmamalıdır. Tersine, ızgara her ziyaretçinin tam çözünürlüklü bir zoom görüntüsü indirmesine neden olmamalıdır.

Platformunuz bu varyantları otomatik olarak oluşturabilir. Görsellerin ziyaretçilere sunulmasını kendiniz yönetiyorsanız, tarayıcının uygun bir sürüm isteyebilmesi için duyarlı görüntüler kullanın. Duyarlı görseller rehberi boyutların, srcset ve sizes özelliklerinin nasıl birlikte çalıştığını açıklar. Büyük bir görseli CSS ile küçük göstermek, indirilen dosyayı küçültmez.

Gerçek bir örnek: kare ürün kartı için fotoğrafı kırpma

Bu fotoğraf 1920 × 1076 pikseldir. Kavanoz, geniş kompozisyonun küçük bir bölümünü kaplıyor. Kare bir ürün kartı için ürünü esnetmeden veya fotoğrafın arka planını kaldırmadan daha yakın bir kadraj seçebiliriz.

1. Kırpmayı seçin. Ürün görseli aracında kavanozun kapağını ve tabanını 630 × 630 piksellik alanın içinde tutun. Kaide çerçevenin dışına taşabilir; ürünün kendisi tamamen görünmelidir.
2. Çıktıyı ayarlayın. 600 × 600 piksellik tuval ve %0 kenar boşluğu kullanın. Büyütmeyi kapalı bırakın: kırpılmış kaynak çıktıdan biraz daha büyük olduğundan piksel eklenmeden küçültülebilir.
3. Dışa aktarın ve inceleyin. Kalite 90 ile 16,4 kB boyutunda bir JPG indirdik. Sonucu kullanmadan önce kapak kenarını, hafif gölgeyi ve pürüzsüz beyaz yüzeyi kontrol edin.

600 piksellik kare, ürün kartı için bir örnektir; genel bir yükleme boyutu önerisi değildir. Daha büyük bir galeri veya yakınlaştırma görünümü daha fazla piksel gerektirebilir. Dosyanın küçülmesi kırpma, boyutlandırma ve JPG dışa aktarımının ortak sonucudur; yalnızca sıkıştırmayı ölçmez. Orijinal arka plan ve kaidenin bir kısmı fotoğrafta kalır.

Görselinize uygun ve yayın sisteminizin desteklediği bir biçim seçin

Yüklediğiniz formatı, ziyaretçilerin aldığı formattan ayırın. Mağazanız JPG veya PNG formatında orijinal bir görseli kabul edip WebP veya AVIF formatında otomatik olarak teslim edebilir. Bu durumda, modern formatta birkaç yüklemeyi kendiniz hazırlamak, sonucu iyileştirmeden iş yükünü artırabilir.

• JPG: Özellikle platformunuz veya başka bir hedef JPEG gerektiriyorsa, opak arka plana sahip fotoğraflar için pratik bir başlangıç noktasıdır. Sıkıştırmadan sonra küçük yazıları ve ince dokuyu inceleyin.
• PNG: Şeffaflığa ihtiyacınız olduğunda veya başka bir kayıplı dışa aktarma yapmadan keskin grafik öğelerini korumak istediğinizde kullanışlıdır. Büyük bir fotoğrafik PNG, uygun bir alternatife göre çok daha ağır olabilir.
• WebP: Yayın kurulumunuz kabul ediyorsa, fotoğraflar ve şeffaf ürün grafikleri için karşılaştırmaya değer. Biçim farklı sıkıştırma modlarını destekler, ancak Pixilo'nun PNG/JPG'den WebP'ye dönüştürücüleri, özel bir kayıpsız mod yerine bir kalite ayarı kullanır.
• AVIF: Tüm yayın iş akışınız destekliyorsa başka bir adaydır. Dışa aktarılan resmi ve yayınlanan sayfayı test edin; daha küçük bir dosya tek başına görüntünün uygun göründüğünü kanıtlamaz.

Daha geniş bir karşılaştırma için web sitesi görüntü biçimi kılavuzunu kullanın. Tüm kataloğu değiştirmeden önce, sıradan bir fotoğraf ve ince bir desen veya şeffaf bir kesim gibi zor bir görüntü deneyin. Yüklemelerin, küçük resimlerin, galerilerin ve yakınlaştırmanın düzgün çalıştığını doğrulayın.

Ayrıntıdan ödün vermeden kullanışlı bir dosya boyutu hedefi belirleyin

Her ürün fotoğrafı için tek bir doğru dosya boyutu yoktur. Düz bir arka plana sahip basit bir nesne ve detaylı dokuma bir giysi, aynı boyutlarda farklı ayarlara ihtiyaç duyabilir. Birçok resim içeren bir koleksiyon sayfası da, tek bir büyük resim gösteren bir galeriden farklı yükleme gereksinimlerine sahiptir.

Doğrudan sunmayı düşündüğünüz bir resim için, başlangıç bütçesi olarak 200 KB'lık bir aday deneyebilir ve ardından kullanılabilir olup olmadığına karar verebilirsiniz. Bu bir örnektir, bir gereklilik değildir. Etiketler veya malzeme ayrıntıları belirsiz hale gelirse, daha az agresif bir ayar, daha verimli bir format veya farklı bir görüntüleme boyutu deneyin. Sadece keyfi bir sayıya ulaşmak için kaliteyi düşürmeye devam etmeyin.

Alışveriş yapanların normalde göreceği boyutta karşılaştırın, ardından önemli alanları tam boyutta veya yakınlaştırma görüntüleyicisinde inceleyin. Kırık harf kenarları, gölgelerdeki bloklar, bulanık doku ve düz arka planlarda düzensiz geçişler arayın. En iyi seçim, aracınızın üretebileceği en küçük dışa aktarma değil, o yerleşim için kabul edilebilir en küçük sürümdür.

Yalnızca sıkıştırmayı ölçen ayrı bir test için kırpılmamış orijinale döndük ve 1920 × 1076 pikselin tamamını koruyarak kalite 20 ile JPG dışa aktardık. Sonuç 28,0 kB, yani orijinalden yaklaşık %62 daha küçük. Kapak kenarını, duvarı ve yumuşak gölgeyi ayırıcıyla ve Ayrıntıyı incele seçeneğiyle karşılaştırın. Kalite 20, bu test için bilerek düşük tutulmuştur; önerilen bir varsayılan ayar değildir. Fotoğrafı kullanılacağı görüntü boyutunda da kontrol edin.

Orijinal JPGJPG · Kalite 20

Yükleme formunda gerçek bir dosya sınırı varsa hedef dosya boyutuna sıkıştırma aracınıkullanın. Önce piksel boyutlarını koruyun ve orantılı küçültmeye yalnızca görselin kullanımına uygunsa izin verin. Katı bir sınır görünür ödünler gerektirebilir. Bazen yeni bir kırpma veya ayrı bir detay fotoğrafı daha fazla sıkıştırmadan yararlıdır.

Son sıkıştırılmış kopyadan tekrar tekrar dışa aktarmaktan kaçının. Başka bir kalite ayarı denerken orijinaline geri dönün. Kalite numaraları formatlar veya kodlayıcılar arasında değiştirilemez, bu nedenle 80'de bir JPG ve 80'de bir AVIF otomatik olarak aynı görünüme sahip olmaz.

Shopify, WordPress veya mağazanızın halihazırda neleri ele aldığını kontrol edin

Shopify’ın görsel yükleme belgeleri mağazanın otomatik optimizasyonunu açıklar ve zorunlu elle ön sıkıştırma yerine kaliteli orijinaller yüklemeyi önerir. Ziyaretçiye sunulan biçim, yüklediğiniz biçimden farklı olabilir. Ürün medyasının ve temanın gereksinimlerini kontrol edin. Ziyaretçiye gönderilen dosya için belirlenen küçük bir boyut hedefini her orijinal yüklemeye uygulamak gerekmez.

Bir WordPress mağazası için, temanızın oluşturduğu resim boyutlarını ve kullanılan herhangi bir optimizasyon eklentisini veya resim hizmetini inceleyin. Koleksiyon kartının, ürün galerisinin ve yakınlaştırmanın uygun sürümleri alıp almadığını kontrol edin. WordPress görsel optimizasyonu rehberi bu iş akışını açıklar.

Bir resmi değiştirirseniz, yeni bir sayfa yüklemesi açın ve yeni sürümün sunulduğunu doğrulayın. Önbelleğe alınmış küçük resimler veya oluşturulan varyantlar, eski bir dışa aktarımın yeni sonuç gibi görünmesine neden olabilir. Mevcut işlem hattını kontrol etmeden önce başka bir sıkıştırma eklentisi eklemek, sorunu çözmek yerine daha fazla karışıklık yaratabilir.

Pixilo dosyaları tarayıcınızda yerel olarak işler. Mağazanıza bağlanmaz, kataloğu güncellemez veya görsellerin sunulma biçimini yapılandırmaz. JPG’den WebP’ye, PNG’den WebP’ye, WebP’den JPG’ye ve PNG’den JPG’ye araçları, genişliği veya yüksekliği 4000 pikseli aşan görselleri oranlarını koruyarak küçültür. Yeniden boyutlandırma aracı her kenarda en fazla 8000 pikseli ve toplam 32 milyon pikseli destekler. Yakınlaştırma için büyük bir görsel hazırlarken indirdiğiniz dosyanın boyutlarını kontrol edin.

Arama motorlarının ürün resimlerini anlamasına yardımcı olur

Görünümü doğru bir şekilde tanımlayın. blue-ceramic-mug-side-view.jpg gibi bir dosya adı, IMG_4837.jpg. 'dan daha kolay yönetilebilir. Alternatif metin için, resmin neyi gösterdiğine dair yararlı bir açıklama yazın, örneğin: “Yan taraftan bakıldığında kavisli saplı mavi seramik kupa.” Başka bir fotoğraf, aynı metni tekrarlamak yerine kendi görünümünü tanımlamalıdır.

Resmi ilgili ürün bilgilerine yakın tutun ve dosya adlarını veya alternatif metni tekrarlanan arama terimleriyle doldurmaktan kaçının. Google'ın resim SEO kılavuzu açıklayıcı metin ve resim keşfini açıklıyor. Bu uygulamalar, resmin neyi temsil ettiğini iletmeye yardımcı olur; sıralamaları garanti etmezler.

Ürün sayfasını da kontrol edin. Seçilen renk veya varyantın doğru bir görüntüsü, yanlış ürünü gösteren mükemmel optimize edilmiş bir dosyadan daha faydalıdır. Resim optimizasyonu, eksik ürün bilgilerini telafi etmek yerine doğru bir listelemeyi desteklemelidir.

Tüm kataloğu değiştirmeden önce yayınlanan sonucu kontrol edin

• Koleksiyon görünümü: Ürün görünür, kırpmalar tutarlı ve ızgara gereksiz yere büyük dosyalar indirmiyor.
• Ürün galerisi: Ana görüntü net, ek açılar bilgi katıyor ve doğru varyant gösteriliyor.
• Yakınlaştırma: Önemli etiketler, doku ve aksesuarlar, amaçlanan büyütmede okunabilir kalıyor.
• Telefon düzeni: Dar bir ekran, konuyu kırpmıyor veya büyük, yalnızca masaüstü için olan bir görüntüyü küçük bir yuvaya zorlamıyor.
• Arka Planlar: Şeffaf kenarlar ve düz dolgular, gerçek sayfa renklerine karşı doğru görünür.
• Yükleme: Yeni bir ziyarette dosya isteklerini inceleyin. Diğer galeri resimleri daha sonra yüklenebileceği için ana görünür ürün resminin gecikmesinden kaçının.
• Düzen: Fotoğraflar göründüğünde metin ve düğmelerin atlamaması için doğru resim oranlarını koruyun.
• Kaynak Dosyalar: Orijinalleri ve yayın için kullanılan ayarların kısa bir kaydını saklayın.

İnce detaylı bir görsel de dahil olmak üzere birkaç temsili ürünle başlayın. Benzer koşullar altında öncesi ve sonrasını karşılaştırın. Hem görünüm hem de teslimat başarılı olduktan sonra, işlemi kataloğun geri kalanına uygulayın. Yükleme sorunlarının daha derinlemesine teşhisi için okuyun: Web sitesi görselleri neden yavaş yükleniyor?

Sıkça sorulan sorular

Çevrimiçi mağaza için en iyi görsel boyutu nedir?

Bu, temanın görüntüleme boyutlarına ve yakınlaştırma davranışına bağlıdır. Izgarayı ve galeriyi ölçün, büyütme için yeterli orijinal görsel detayını koruyun ve oluşturulan dosyaları kontrol edin. Her ürün veya platforma uygun evrensel bir kare boyut yoktur.

Her ürün görseli 200 KB'nin altında mı olmalı?

Hayır. Bazı doğrudan sunulan görseller için bir test bütçesi olabilir, ancak evrensel bir yükleme kuralı değildir. Yakınlaştırma görünümü için kullanılacak orijinal görselin daha fazla ayrıntı içermesi gerekebilir ve otomatik olarak optimize eden bir platform, yüksek kaliteli bir yüklemeyle daha iyi çalışabilir.

Ürün fotoğrafları için JPG mi yoksa PNG mi daha iyidir?

JPG, opak arka plana sahip sıradan fotoğraflar için kullanışlı bir başlangıç noktasıdır. PNG, şeffaflık ve keskin grafikler için kullanışlıdır, ancak fotoğraflar için büyük olabilir. Seçim yapmadan önce platformunuzun görselleri yükleme ve ziyaretçilere sunma sürecini kontrol edin; alışveriş yapanların aldığı format farklı olabilir.

Yüklemeden sonra ürün görselim neden bulanık görünüyor?

Orijinali, dışa aktardığınız dosyayı ve mağaza tarafından teslim edilen görüntüyü karşılaştırın. Yaygın nedenler arasında yetersiz boyutlu orijinal görüntü, agresif sıkıştırma, büyük bir galeride kullanılan küçük bir oluşturulmuş küçük resim veya aynı küçük dosyayı büyüten bir yakınlaştırma görünümü yer alır. Ayarları değiştirmeden önce bulanıklığa neden olan adımı belirleyin.

Pixilo bir ürün fotoğrafının arka planını kaldırabilir mi?

Hayır. Ürün görseli aracı, eklenen tuval alanını ve zaten saydam olan bölgeleri seçtiğiniz arka plan rengiyle doldurur. Ürünü algılamaz ve fotoğrafın opak arka planını kaldırmaz. Ayrı arka plan rengi aracı da ürünün arkasındaki rengi değiştirmek için arka planı önceden saydamlaştırılmış bir görsel gerektirir.