Muhtemelen siz de bunu yaşamışsınızdır. Bir ürün sayfası Shopify'da kusursuz görünür, fotoğraflar düzenleyicide net olur, ancak mobil ziyaretçiler sayfadan hemen çıkmaya başlar ve PageSpeed puanınız altmışlarda kalır. Sorun genellikle "kötü tasarım" değildir. Sorun, resim dosyalarının boyutlarının sayfa düzeni için çok büyük olması ve alışveriş yapan kişinin ürünü, fiyatı veya sepete ekle düğmesini görmeden önce her ekstra baytın taşınması gerekliliğidir.

Bu nedenle, bir mağazanın ön yüzündeki görsellerle ilgili kararlar asla sadece tasarım kararları değildir. Sayfa hızını , görsel kalitesini ve Google'ın sayfanın ne kadarını tarayıp hızlı bir şekilde işleyebileceğini etkilerler. Tahmin yürütmeden yeniden boyutlandırma için pratik bir kısayol istiyorsanız, Yassine Malti'nin görsel yeniden boyutlandırma kılavuzu faydalı bir yardımcıdır, çünkü bir sonraki yüklemeden önce mekaniği anlamanıza yardımcı olur.

İçindekiler

Shopify Mağazasında Resim Dosya Boyutlarının Önemi

Bir satıcı, Shopify yönetim panelindeki kusursuz bir ürün sayfasına bakabilir ancak altta yatan sorunu yine de gözden kaçırabilir. Sayfa, Wi-Fi üzerinden bir dizüstü bilgisayarda sorunsuz çalışabilir, ancak mobil cihazlarda yavaşlayabilir, ana görsel geç yüklenebilir ve alışveriş yapan kişi sayfa hazır olmadan önce sayfayı aşağı kaydırabilir. İyi görünen bir sayfa ile hızlı yüklenen bir sayfa arasındaki bu fark , resim dosya boyutlarının bir ziyaretin gelir mi yoksa sorun mu yaratacağına karar verdiği noktadır.

Her sayfada gizli rekabet

Bir mağaza vitrinindeki her görsel, metin, komut dosyaları, şema ve müşterinin sabrı ile rekabet eder. Eğer ana fotoğraf çok büyükse, sadece bant genişliğini tüketmekle kalmaz, ziyaretçinin teklifi değerlendirebileceği anı da yavaşlatır. Görsel ağırlığı, aynı anda hem dönüşüm sorunu hem de temel web ölçütleri sorunudur.

Shopify satıcıları bunu genellikle ilk olarak ürün sayfalarında ve koleksiyon sayfalarında hissederler. Birkaç büyük fotoğraf, özellikle mobil ağlarda, tüm düzeni ağır gösterebilir ve bu ağırlık en önemli yerlerde, yani ana görselde, koleksiyon ızgarasında, ürün yakınlaştırmasında ve küçük resimlerde kendini gösterir. Ana görselin görevi küçük resimden farklıdır, bu nedenle aynı dosya boyutu yükünü taşımamalıdır. Aynı durum koleksiyon ızgaraları için de geçerlidir; burada tekrarlanan görseller hızla birikir ve her kaydırmayı zorlaştırır.

Resim dosya boyutu, sayfanın ne kadar hızlı kullanılabilir hale geldiğini de etkiler; bu nedenle sayfa düzeni planlamasıyla aynı bağlamda ele alınmalıdır. Ham resim boyutları önemlidir, ancak tarayıcının alıp çözmesi gereken asıl boyut, teslim edilebilir dosya boyutudur. Yassine Malti'nin resim boyutlandırma kılavuzunda açıklandığı gibi, daha küçük bir dışa aktarma, gereksiz ağırlığı ortadan kaldırırken resmin görsel rolünü koruyabilir.

Pratik getirisi

Bunun önemi oldukça basit. Temel piksel sayısı başlangıç noktasını belirlerken, sıkıştırma ve format nihai dosya boyutunu belirliyor. 24 bit RGB'de 24 megapiksel bir görüntü yaklaşık 72 milyon bayt ham piksel verisi içerirken, aynı görüntü %100 kalitede JPEG olarak yaklaşık 423,41 KB veya %90 kalitede JPEG olarak yaklaşık 211,7 KB boyutunda olabilir ( Scantips ). Bu fark, iki mağazanın neredeyse aynı görünen görüntüleri kullanmasına rağmen çok farklı hız sonuçları elde etmesinin nedenidir.

Pratik kural: Eğer bir görsel dekorasyondan çok satış için önemliyse, yüklemeden önce dosya boyutu hedefi belirleyin.

Bu, satıcıların kullanması gereken standarttır. Her mağaza alanı için bir bütçe belirleyin, ardından dosyayı işe uygun hale getirin. Bir ana banner, küçük bir önizleme resminden daha fazla ağırlık taşıyabilir, ancak ikisi de sayfanın geri kalanının fazladan yük taşımasına neden olmamalıdır. Bu alışkanlık yerleştikten sonra, ürün sayfalarını yönetmek daha kolay hale gelir ve her yeni yükleme, gizli bir yük olmak yerine, yerleşebileceği bir alana sahip olur.

Görüntü Boyutu ve Dosya Boyutu Arasındaki Fark ve İkisinin Önemi

Satıcılar genellikle bu terimleri aynı anlama geliyormuş gibi kullanırlar, sonra da bir resmin yönetim panelinde sorunsuz görünmesine rağmen mağaza ön yüzünü yavaşlatmasının nedenini merak ederler. Resim boyutu , piksel boyutlarıdır, genişlik x yükseklik. Dosya boyutu ise dışa aktarılan dosyanın disk üzerindeki bayt cinsinden ağırlığıdır, genellikle KB veya MB cinsindendir ve sıkıştırma, format ve bit derinliğine göre değişir. İki resim aynı boyutlara sahip olabilir ve yine de çok farklı yükleme maliyetleri oluşturabilir.

Dijital fotoğrafçılık ve grafikler için piksel cinsinden görüntü boyutunu bayt cinsinden dosya boyutuyla karşılaştıran bir diyagram.

Pikseller tavanı belirliyor.

Pikseller, dosyanın ne kadar görsel ayrıntı içerebileceğini tanımlar. 24 bit RGB'de 24 megapiksellik bir görüntü, yaklaşık 72 milyon bayt ham piksel verisi içerir çünkü 24 milyon piksel × piksel başına 3 bayt = 72.000.000 bayt . Bu ham sayı, dışa aktarma için başlangıç noktasıdır, tarayıcının aldığı nihai ağırlık değildir.

Dışa aktarma seçenekleri sonucu hızla değiştirir. Aynı kaynak fotoğraf, %100 kalitede JPEG olarak yaklaşık 423,41 KB , %90 kalitede ise yaklaşık 211,7 KB boyutunda olabilir. Pikseller aynı kalırken, dışa aktarma işlemi orijinal detayın az ya da çok bir kısmını korur.

Sıkıştırma ve format sonucu belirler.

Birçok Shopify denetimi burada yanlış yola sapıyor. Satıcılar büyük bir resmin web için çok ağır olduğunu varsayıyor, ancak boyutlar ve dosya ağırlığı ayrı kararlar. Büyük boyutlu bir resim, iyi bir şekilde dışa aktarılırsa yine de makul bir dosya olabilir. Orta büyüklükte görünen bir grafik, yanlış formatta veya yanlış kalitede kaydedilirse şişkin hale gelebilir.

Bu fark, mağaza vitrinindeki rol açısından önem taşır. Bir ana banner, küçük bir önizleme resminden daha fazla görsel ağırlık taşıyabilir, ancak bir koleksiyon ızgarası görüntüsünün sayfanın sorunsuz yüklenmesi için yeterince hafif kalması gerekir. Ürün yakın çekim fotoğraflarının yakından bakıldığında yeterli piksel detayına sahip olması gerekirken, önizleme resimleri genellikle dışa aktarma işlemi düzenin gösterebileceğinden çok daha fazla ayrıntı içeriyorsa bant genişliğini boşa harcar.

Genel kural: Piksel sayısı, görüntünün ne kadar görsel ayrıntı gösterebileceğini belirler. Dosya boyutu ise müşterinizin ne kadar dosya indirmesi gerektiğini belirler.

Bu iki sayıyı ayrı tutarsanız, görsel planlaması kolaylaşır. Dar bir küçük resim alanı, aşırı büyük boyutlardan fayda sağlamaz. Bir ürün sayfası yakınlaştırma görüntüsünün keskin görünmesi için yeterli piksele ihtiyacı vardır, ancak dışa aktarılan dosya yine de Temel Web Ölçütleri ve etrafında yüklenmesi gereken sayfanın geri kalanı için makul kalmalıdır.

JPEG, PNG, WebP ve AVIF Karşılaştırması

Her görsel formatı, Shopify mağazasında farklı bir amaca hizmet eder. Bir ürün fotoğrafı, bir logo ve bir ekran görüntüsü, aynı temada yer alsalar bile farklı bir şekilde ele alınmalıdır. Formatı, alışkanlığa göre değil, görselin sayfada yapması gereken işe göre seçin.

JPEG, PNG, WebP ve AVIF görüntü formatlarını özelliklerini ve kullanım alanlarını açıklayan bir infografik.

JPEG ve PNG hala önemlerini koruyor.

JPEG, fotoğraflar için standart tercih olmaya devam ediyor. İyi sıkıştırılıyor, neredeyse her yerde çalışıyor ve genellikle ürün görsellerini web için yeterince hafif tutuyor. PNG ise keskin kenarlar, düz renkler, şeffaflık veya metin gerektiren görseller için uygundur; bu nedenle logolar ve kullanıcı arayüzü grafikleri genellikle daha ağır olsalar bile bu formatta yer alırlar.

Shopify'da bu ayrım önemlidir çünkü mağazalar genellikle her iki tür varlığı da karıştırır. PNG olarak kaydedilen bir yaşam tarzı fotoğrafı genellikle mağazanın taşıması gereken ağırlıktan daha fazladır. JPEG olarak kaydedilen bir logo ise kaba görünebilir veya şeffaflığını kaybedebilir, bu da daha sonra gereksiz temizlik işlemlerine yol açar. Biçim, alışkanlığa değil, işe uygun olmalıdır.

Bir koleksiyon kartı iyi bir örnektir. Görsel temiz bir ürün fotoğrafıysa, JPEG genellikle alışveriş yapanların gördüğü görüntüyü bozmadan dosya boyutunu düşük tutar. Eğer görsel renkli bir arka plan üzerinde bulunan bir rozet, simge veya logo ise, PNG kenarları daha iyi korur ve çirkin haleleri önler.

WebP ve AVIF formatları dosya boyutlarını küçültüyor.

Modern formatlar genellikle dosya boyutunu daha da küçültür. Karşılaştırılabilir kalitede bir örnek görüntü için, %75 kayıplı JPEG yaklaşık 1,25–1,53 MB , kayıplı WebP yaklaşık 0,72–0,88 MB , AVIF yaklaşık 0,57–0,69 MB ve JPEG XL yaklaşık 0,55–0,67 MB'tır ( W3Techs ). Bu, eski dışa aktarma alışkanlıklarına göre önemli bir düşüştür ve birçok mağazanın fotoğrafların bulanık görünmesine neden olmadan boyutu azaltabilmesinin nedenini açıklar.

Buradaki püf nokta, format seçiminin yine de içeriğin kendisine bağlı olmasıdır. WebP ve AVIF, ürün fotoğrafları için çok iyi sonuç verebilir, ancak şeffaflık içeren grafikler farklı davranabilir. Dosya çoğunlukla bir fotoğraf ise, bu tür görüntüleri verimli bir şekilde sıkıştıran bir format kullanın. Logo veya şeffaflık içeren bir grafik ise, kenarları temiz tutan bir format kullanın.

Shopify mağazasında bu genellikle ana banner için bir format, logo için başka bir format ve yakın çekim ürün fotoğrafları için başka bir format anlamına gelir. Doğru seçim, modern görünmekten ziyade, sayfanın hızlı çalışmasını sağlarken görüntünün gerçek konumunda net bir şekilde görünmesini sağlamakla ilgilidir.

Karar kuralı: İnsan, ürün veya doku içeren fotoğraflar için JPEG veya WebP seçin. Düz grafikler, logolar veya ekran görüntüleri için PNG seçin. İş akışınız yedeklemeyi destekliyorsa, AVIF veya WebP daha temiz bir canlı depolama seçeneğidir.

Çözünürlük ve Sıkıştırmanın Sayıları Nasıl Değiştirdiği

Bir dosya ekranınızda iyi görünebilir ancak gerekenden çok daha ağır olabilir. Shopify'da satıcıların ilk hissettiği kısım budur, çünkü aynı resim ana banner, koleksiyon ızgara döşemesi, ürün yakınlaştırma görüntüsü veya küçük bir önizleme resmi olarak çok farklı davranabilir. Çözünürlük, tarayıcıdan taşımasını istediğiniz piksel sayısını kontrol eder ve sıkıştırma, sayfa yüklenmeden önce bu ağırlığın ne kadarının azaltılacağını kontrol eder.

Daha fazla piksel, daha fazla veri anlamına gelir.

Daha büyük bir görüntü sadece daha büyük bir tuval anlamına gelmez, aynı zamanda tarayıcının işlemesi gereken daha fazla ham veri demektir. Daha önce de gösterildiği gibi, 24 MP'lik bir görüntü, sıkıştırma başlamadan önce yaklaşık 72 milyon bayt ham veri içerir . Aynı sahneyi, mağazanın ihtiyaç duyduğundan daha yüksek bir piksel sayısıyla dışa aktarırsanız, fotoğraf görüntülendiğinde neredeyse aynı görünse bile dosya daha ağırlaşır.

Bu nedenle, aşırı büyük boyutlu dışa aktarımlar yalnızca depolama karmaşasına neden olmakla kalmaz. Aktarım ağırlığını artırır, tarayıcının daha fazla çalışmasına yol açar ve alışveriş yapanların sayfanın hızlı olmasını beklediği yerde görüntünün yavaşlamasına neden olabilir. Bir koleksiyon ızgara döşemesi, yakınlaştırılabilir bir ürün görüntüsüyle aynı veri yüküne ihtiyaç duymaz ve bir küçük resim, her ikisinden de çok daha azına ihtiyaç duyar.

Sıkıştırma size tasarruf sağlar, ancak ekstra pikselleri ücretsiz hale getirmez.

Sıkıştırma, büyük bir kaynak dosyayı Shopify'ın verimli bir şekilde sunabileceği bir boyuta indirebilir, ancak yerleştirmenin gerektirdiğinden daha fazla piksel kullanmanın maliyetini ortadan kaldırmaz. Bir ürün fotoğrafı yakınlaştırma özellikli bir galeriye yerleştirilecekse, iyi bir ekranda net kalması için yeterli ayrıntıya sahip olmasını istersiniz. Aynı görüntü yalnızca bir koleksiyon kartına yerleştirilecekse, tam boyutlu sürümü göndermek boşa harcanan bir çabadır.

Bunu düşünmenin en basit yolu şu: Pikseller, gereksiz ağırlık yarattığı için israfın tabanını belirler . Kalite ayarı, dışa aktarılan dosyanın ne kadar ayrıntı koruyacağına karar verdiği için tasarrufların tavanını belirler . Biçim ise sıkıştırmanın ne kadar yardımcı olduğunu kontrol eder , çünkü farklı dosya türleri aynı şekilde küçülmez.

Shopify kullanım durumlarına bağlı görsel boyutlandırma kılavuzu için bu Shopify görsel SEO kılavuzu faydalı bir yardımcıdır. Her mağaza görselini aynı işlevi görüyormuş gibi ele almak yerine, dışa aktarma kararını gerçek yerleşime bağlamaya yardımcı olur.

Ana görsel, koleksiyon kutucuğu ve küçük resim, farklı detay seviyeleri gerektirir. Satıcıların genellikle gözden kaçırdığı nokta budur ve bu nedenle çözünürlükteki küçük bir değişiklik, düzenleyicide zararsız gibi görünse de tarayıcıda daha ağır bir mağaza oluşturabilir.

Web Sitesinin Temel Ölçütleri ve Yoğun Görsellerin SEO Maliyeti

Büyük boyutlu görseller SEO'yu doğrudan olumsuz etkiler çünkü Google, yüklemenin ardındaki niyeti değil, deneyimi ölçer. Birçok Shopify sayfasında, en büyük görünür görsel, yükleme deneyimini en çok etkileyen unsurdur. Eğer bu görsel çok büyükse, En Büyük İçerik Boyama (Largest Contentful Paint) yavaşlar ve ziyaretçi sayfanın kullanılabilir hale gelmesi için daha uzun süre bekler.

Görüntü dosyası boyutlarının artmasının Largest Contentful Paint sayfasının yüklenme sürelerini nasıl olumsuz etkilediğini gösteren bir çubuk grafik.

LCP genellikle yanlış şeyden sorumlu tutuluyor.

Satıcılar genellikle ilk olarak uygulamaları, komut dosyalarını veya tema kodunu suçlarlar ve bazen haklıdırlar. Ancak ana görsel genellikle en kolay ve etkili çözümdür. Büyük bir ana fotoğraf, özellikle bağlantı kalitesinin değişken olduğu ve görüntüleme alanının çok büyük öğeler için kolayca fark edilebilecek kadar küçük olduğu mobil cihazlarda, sayfanın anlam kazandığı anı geciktirebilir.

Görsel ağırlığının etkilediği diğer bir ölçüt ise Kümülatif Yerleşim Kaymasıdır . Temanız görseller için yeterli alan ayırmazsa, varlıklar yüklenirken yerleşimde ani değişiklikler olur. Bu durum alışveriş yapanlar için özensiz bir izlenim yaratır ve sayfanın kullanımını zorlaştırır. Shopify temaları genellikle bu işin bir kısmını zaten yapar, ancak bu her zaman satıcıyı kötü bir görsel iş akışından kurtarmaya yetmez.

Boyut hedefleri rastgele değildir.

Web üzerinden içerik sunumu için teknik kılavuzlar genellikle ürün fotoğraflarının 800 ila 1000 piksel ve 80 ila 150 KB , ana görsellerin 200 KB'nin altında ve toplam sayfa görsel bütçesinin 500 KB'nin altında olmasını önerir. Aynı kılavuzlar JPEG'leri genellikle 200 ila 600 KB , WebP'yi 150 ila 450 KB , AVIF'i 80 ila 300 KB ve PNG'yi 500 KB ila 3 MB arasında konumlandırır ( Vizua ). Bu aralıklar, görsel ağırlığı ve sayfa performansının birbirine bağlı olmasından kaynaklanmaktadır.

Bir sayfanın hızlı olması için yapay olarak çok küçük olması gerekmez. Ancak disiplinli olması gerekir. Görsel yükleme süreniz çok uzunsa, tarayıcıya alışveriş yapanın deneyimini iyileştirmeyen işler yaptırıyorsunuz demektir. Bu, teorik bir maliyet değil, doğrudan bir SEO maliyetidir.

Daha geniş kapsamlı denetim sürecine Shopify odaklı bir bakış açısı için, Shopify için hazırlanan bu görsel SEO kılavuzu faydalı bir referans noktasıdır.

Shopify Yerleşimine Göre Hedeflenen Resim Dosya Boyutları

Tahmin yürütmeyi bırakmanın en kolay yolu, mağaza ön yüzündeki her görsel rol için bir dosya boyutu bütçesi belirlemektir. Ana banner, küçük resimden farklı bir işlev görür ve bir koleksiyon ızgarası, yakınlaştırılabilir bir ürün resmiyle aynı ağırlıkta dışa aktarılmamalıdır. Satıcılar, resim dosya boyutlarını gerçek yerleşimlere atadıktan sonra, mağazayı hızlı tutmak ve denetlemek çok daha kolay hale gelir.

Mağaza vitrininin düzeni, dışa aktarma tercihlerinizi belirlesin.

Tam genişlikteki görseller genellikle küçük yerleşim bloklarından daha fazla alana ihtiyaç duyar. Duyarlı görsel kılavuzları genellikle tam genişlikteki görseller için yaklaşık 1600 piksel ve 200 ila 300 KB , daha küçük %25 ila %50 yerleşim görselleri için 800 piksel ve 70 ila 350 KB , yüksek çözünürlüklü ekranlarda bile net görünmeleri için ise yaklaşık 2 kat ekran alanı boyutunda görseller önerir. Pratikte bu, aynı kaynak fotoğrafın genellikle farklı dışa aktarımlara ihtiyaç duyduğu anlamına gelir; biri doldurduğu alan için, diğeri ise yoğun bir ekranın beklediği daha net işleme için.

Shopify Yerleşimine Göre Resim Dosya Boyutu Hedefleri Atama Hedef Genişliği Hedef Dosya Boyutu Önerilen Format
Kahraman afişi Sayfanın başındaki kahraman Yaklaşık 1600 piksel 200 ila 300 KB JPEG veya WebP
Koleksiyon ızgarası küçük resmi Koleksiyon karoları Yaklaşık 400 ila 600 piksel 40 ila 80 KB JPEG veya WebP
Ürün sayfası fotoğrafı Ana ürün galerisi Yaklaşık 800 ila 1200 piksel 100 ila 200 KB JPEG, WebP veya AVIF
Küçük resim veya renk örneği görseli Küçük destek yuvası Yaklaşık 200 ila 400 piksel Mümkün olduğunca hafif tutun. İçeriğe bağlı olarak JPEG veya PNG

Ana görsel, ekran alanının daha büyük bir bölümünü kapladığı için daha fazla etki yaratabilir. Koleksiyon kutucuğu ise bunu yapamaz. Satıcıların Shopify bölümleri için görselleri dışa aktarırken akılda tutması gereken fark budur, çünkü dosya boyutu görselin sayfada kapladığı alanla eşleşmelidir.

Aynı görüntünün neden birden fazla kez dışa aktarılması gerekebilir?

Bir ürün sayfası genellikle duyarlı işaretleme yoluyla aynı dosyanın birkaç sürümünü sunar. Bu normaldir. Tarayıcı, daha küçük ekranlar için daha küçük bir dosya, yalnızca düzenin gerektirdiği yerlerde daha büyük bir dosya almalıdır. Bu kurulum, gereksiz yere her ziyaretçiye büyük dosya göndermeden yakınlaştırma kalitesini korur.

Aynı mantık ürün galerisinin ötesinde de geçerlidir. Bir mağaza vitrini genellikle ana görsel için bir tarz, koleksiyon kartları için başka bir tarz ve yakın çekim detay görselleri için de farklı bir tarz gerektirir. Sosyal medya ve paylaşım öğelerini mağaza vitrini görselleriyle uyumlu tutmak istiyorsanız, bu Shopify sosyal medya görsel kılavuzu, ürün sayfası dışındaki bu ihtiyaçları aynı görsel iş akışına bağlamanıza yardımcı olur.

Shopify'ın genel kuralı: Dışa aktarmayı alan belirlesin. Ana görsel cömert olabilir. Izgara küçük resmi olamaz.

Bu kural, tek bir büyük resim yükleyip temanın gerisini halledeceğini umma gibi yaygın hatayı önler. Temalar yardımcı olabilir, ancak kötü bir dışa aktarma kararını geri alamazlar.

Mağazaların Yavaş Çalışmasına Neden Olan Yaygın Yanlış Anlamalar

Birçok yavaş Shopify mağazasının yavaş olmasının nedeni, birilerinin yarı doğru bir kurala inanıp bunu tekrar tekrar uygulamasıdır. Bu alışkanlıklar denetimlerde tekrar tekrar ortaya çıkar, genellikle de tavsiyeler ilk başta mantıklı geldiği ve mağazanın yüklenme şekliyle karşılaştırılmadığı için. Alışkanlığı performanstan ayırdığınızda, çözümler genellikle basittir.

Önlenebilir şişkinliğe neden olan beş inanış

  • Daha yüksek çözünürlük her zaman daha iyi kalite anlamına gelir. Ancak görüntü, kapladığı alandan daha büyük olduğunda bu durum geçerliliğini yitirir. Ek pikseller, alışveriş yapanın görüşüne hiçbir fayda sağlamaz, sadece ağırlık katarlar.
  • PNG her zaman JPEG'den daha keskindir. PNG, keskin kenarlı logolar ve grafikler için doğru seçimdir, ancak ürün fotoğrafları genellikle bu kayıpsız ek işleme ihtiyaç duymaz.
  • Shopify her şeyi otomatik olarak optimize eder. Shopify bazı durumlarda yardımcı olur, ancak orijinal yükleme yine de varlığın ne kadar ağır olabileceğine dair üst sınırı belirler.
  • WebP'nin Google tarafından okunamadığı için SEO'ya zarar verdiğine dair inanış artık geçerliliğini yitirmiştir. Arama sistemleri, normal resimler gibi modern formatları işleyebilir.
  • Görüntü boyutu yalnızca masaüstü bilgisayarlarda önemlidir. Mobil alışveriş yapanlar, cihazlarının ve bağlantılarının hata payının daha az olması nedeniyle gereksiz dosya ağırlığını ilk önce hissederler.

Düzeltme işlemi, satıcılar tarafından hemen kullanılabilir.

Çözüm alışkanlıktan değil, rolden başlar. Ana görsel, sayfanın üst kısmını kaplayacak kadar kaliteli olmalıdır. Koleksiyon kutucuğu, ızgaranın düzgün yüklenmesi için hafif kalmalıdır. Yakınlaştırma görseli, farklı bir görevi yerine getirdiği için daha fazla ayrıntı içerebilirken, küçük resim veya renk örneği, düzenin izin verdiği kadar küçük kalmalıdır.

Bu nedenle her görsel için ayrı bir dışa aktarma kuralı sorun yaratır. Eğer görsel bir fotoğraf ise, hız ve gerçekçi renkler için dışa aktarın. Eğer metin veya şeffaflık içeren bir grafik ise, kenarları koruyun ve dosyanın daha büyük olabileceğini kabul edin. Eğer dar bir alana aitse, tam genişlikte görüntülenmek üzere tasarlanmış bir dosyayı yüklemeyin.

Çözünürlük bölümünde de belirtildiği gibi, 24 MP'lik bir görüntü sıkıştırmadan sonra 2 ila 8 MB arasında bir boyuta ulaşabilir; bu da piksel sayısının tek başına bir görüntünün web'e hazır olup olmadığını göstermediğini kanıtlamak için yeterlidir. Asıl soru, dosyanın Shopify'daki yerleşime uygun olup olmadığıdır. Bir ana görsel, bir ızgara kartından daha fazlasını kaldırabilir ve bir yakınlaştırma görüntüsü, bir küçük resimden daha fazlasını kaldırabilir. Dışa aktarılan dosyanın rolüne uygun olması gerekir.

İlgili bir diğer hata ise her varlığın aynı meta veri temizliğine tabi tutulmayı hak ettiğini varsaymaktır. Görsel, öne çıkarılmaya değerse, öncelikle denetlenmesi de önemlidir. İş akışının bu kısmını tutarlı tutmak için Shopify görselleri için alternatif metin oluşturucuyu kullanın, ardından dosya boyutunu dolduracağı alanla karşılaştırın.

Çoğu mağazanın gözden kaçırdığı nokta burası. Dosyanın küçük olmasına gerek yok. Uygun olması yeterli.

Sonraki Görüntü İşleme Seriniz İçin Tekrarlanabilir Bir Kontrol Listesi

En temiz görsel iş akışı, ekibinizin tahmin yürütmeden tekrarlayabileceği akıştır. Aynı kontroller her seferinde aynı sırayla yapıldığında, daha az büyük boyutlu yükleme, daha az düzen sürprizi ve katalogda gizlenen daha az yavaş ürün sayfası elde edersiniz. Yeni bir ürün lansmanı hazırlıyorsanız veya bir temayı yeniliyorsanız, her şey yayına girmeden önce bu rutini uygulayın.

Shopify'a uygun basit bir dışa aktarma rutini.

  1. Yerleştirme için hedef genişlikte dışa aktarın. Kahraman görseli, koleksiyon kartı, ürün yakınlaştırma görseli ve küçük resim gibi öğelerin her birinin farklı görevleri vardır, bu nedenle kaynak görsel izin veriyor diye daha büyük bir dosya yüklemeyin.
  2. Rolüne göre formatı seçin. Fotoğraflar genellikle JPEG, WebP veya AVIF formatlarına uygundur. Logolar ve yoğun metin içeren grafikler, şeffaflık veya keskin kenarların önemli olduğu durumlarda PNG formatına daha iyi uyar.
  3. Gerekirse canlı mağaza sürümünü ve yakınlaştırılmış sürümü kaydedin. Yakınlaştırılmış dosya daha fazla ayrıntı içerebilir, ancak düzen gerçekten gerektirmediği sürece görünür sayfada bu kadar ayrıntı bulunmamalıdır.
  4. Mümkün olduğunca daha hafif ve modern formatları kullanın. Canlı görüntü için WebP veya AVIF kullanın ve uyumluluğun önemli olduğu durumlarda JPEG'i yedek format olarak saklayın.
  5. Yayınlamadan önce görsel meta verilerini ve alternatif metni kontrol edin. Eğer bir içerik öne çıkarılmaya değerse, denetlenmeye de değerdir. İş akışının bu kısmını tutarlı tutmak için RankEngine'in alternatif metin oluşturucusunu kullanın.

https://rankengine.app adresinden alınan ekran görüntüsü

Tutarlılığın size kazandırdıkları

Küçük iyileştirmeler bir katalog genelinde birikerek büyük fark yaratır. Daha açık renkli bir ana görsel tek başına bir mağazayı dönüştürmez, ancak iyi boyutlandırılmış ürün fotoğrafları, koleksiyon görselleri ve küçük resimlerden oluşan bir set, mağazanın daha temiz, daha hızlı ve alışverişi daha kolay hale getirebilir. Müşteriler dosya boyutlarından hiç bahsetmeseler bile bunu fark ederler.

Ekibiniz büyük ölçekte görsel meta verileriyle ilgileniyorsa, RankEngine'in alternatif metin oluşturucusu, her yüklemeyi manuel bir angarya haline getirmeden iş akışının bu bölümünü sorunsuz bir şekilde yürütmenizi sağlayabilir.

Bu yöntemi bir sonraki siparişinizde uygulayın, mağazanız anında daha hızlı yüklenecektir.