Ürün Görseli Optimizasyonu Nasıl Yapılır? E-Ticarette Boyut, Format (WebP), Dosya Adı ve Alt Metin Uygulamalı Rehber

E-ticarette müşteri ürünü eline alamaz; ürünü yalnız görselden değerlendirir. Bu yüzden ürün görselleri hem satışın en güçlü aracı hem de sayfanın en ağır yüküdür: iyi çekilmiş ama optimize edilmemiş bir görsel sayfayı yavaşlatır, mobil veriyi tüketir ve müşteriyi sayfa açılmadan kaybettirir. Ürün görseli optimizasyonu, görselin kalitesinden ödün vermeden onu daha hızlı yüklenir, daha iyi anlaşılır ve daha kolay bulunur hale getirmektir.

Bu yazı bir ders gibi kurgulandı. Görsel optimizasyonunun hangi katmanlardan oluştuğunu, doğru boyutun ve formatın nasıl seçileceğini, dosya adı ile alt metnin nasıl yazılacağını, yükleme tekniklerini, toplu bir iş akışını ve en sık yapılan hataları adım adım öğreneceksiniz. Yazının içindeki araç, kendi ürününüz için hedef boyutu, dosya adını ve alt metni hemen üretir.

Ürün Görseli Optimizasyonu Nedir?

Ürün görseli optimizasyonu, ürün fotoğrafının görsel kalitesi korunarak dosya boyutunun, formatının, adının, alt metninin ve yüklenme biçiminin sayfa hızı, erişilebilirlik ve arama motoru açısından en uygun hale getirilmesidir. Fotoğrafı çekmek işin yarısıdır; yayına hazırlamak diğer yarısıdır.

Optimizasyon, görseli "bozmak" ya da bulanıklaştırmak değildir. Amaç, gözün ayırt edemeyeceği kalite kaybıyla çok daha küçük bir dosya elde etmek ve görseli, kullanıldığı yerin ihtiyacına uygun boyutta sunmaktır.

Okumanızı öneririzÜrün Fotoğrafı Nasıl Çekilir? Telefonla E-Ticaret Ürün Fotoğrafı Rehberi

Görsel Optimizasyonu E-Ticarette Neden Bu Kadar Önemlidir?

Ürün sayfalarında görseller genellikle sayfanın toplam ağırlığının en büyük bölümünü oluşturur; bu yüzden görsel optimizasyonu, sayfa hızını iyileştirmenin en etkili ve en az riskli yoludur. Hız ise dönüşüm, mobil deneyim ve arama görünürlüğüyle doğrudan ilişkilidir.

• Sayfa hızı: Küçük görseller daha hızlı iner; sayfa daha çabuk kullanılabilir hale gelir.
• Mobil deneyim: Mobil veride ve yavaş bağlantıda büyük görsel, sayfanın hiç açılmamasına yol açabilir.
• Dönüşüm: Sayfa beklemeden açıldığında müşteri ürüne odaklanır, vazgeçme azalır.
• Arama görünürlüğü: Anlamlı dosya adı ve alt metin, görselin arama motorlarında ve görsel aramada anlaşılmasına yardımcı olur.
• Erişilebilirlik: Alt metin, ekran okuyucu kullanan müşterinin ürünü anlamasını sağlar.
• Altyapı maliyeti: Daha küçük dosyalar, daha az trafik ve depolama demektir.

Okumanızı öneririzE-Ticarette Site Hızı Neden Önemlidir?

Ürün Görseli Optimizasyonunun 6 Katmanı

Görsel optimizasyonu altı katmandan oluşur: boyut (piksel), ağırlık (kilobayt), format, dosya adı, alt metin ve yükleme biçimi. Her katman ayrı bir sorunu çözer ve biri eksik kaldığında diğerlerinin kazancı azalır.

Hangi Görsel Formatı Ne Zaman Kullanılmalı?

Fotoğraflar için en uygun seçenek genellikle WebP ya da JPEG, şeffaflık gereken grafikler için PNG ya da WebP, logo ve ikonlar için SVG'dir. Format seçimi, aynı görselin dosya boyutunu doğrudan değiştirir.

Pratik bir kural: ürün fotoğraflarını WebP (ya da yedeğiyle JPEG) olarak yayınlayın, şeffaflık gereken ürün görsellerinde WebP ya da PNG kullanın, logo ve ikonları SVG yapın.

Ürün Görseli Hangi Boyutta Olmalı?

Görselin kaynak boyutu, sayfada gösterildiği boyutun yaklaşık iki katı olmalıdır: bu, yüksek çözünürlüklü (retina) ekranlarda keskin görüntü sağlar ve gereksiz büyük dosyadan kaçınır. Yakınlaştırma (zoom) özelliği varsa kaynak biraz daha büyük olabilir.

• Gösterilen genişliği öğrenin: Ürün sayfasında ana görselin ekranda kaç piksel genişlikte gösterildiğine bakın.
• İki ile çarpın: Yoğun ekranlar için kaynak, gösterilen genişliğin yaklaşık iki katı olsun.
• Zoom varsa artırın: Yakınlaştırma sunuyorsanız kaynağı üç katına kadar çıkarabilirsiniz; aksi halde zoom bulanık görünür.
• Oranı sabit tutun: Tüm ürün görsellerinde aynı en-boy oranını (örneğin 1:1 ya da 4:5) kullanın; liste sayfaları düzenli görünür.
• Gereksiz büyük görselden kaçının: Telefondan gelen 4000 piksellik bir fotoğraf, 600 piksellik bir alanda gösterilecekse küçültülmelidir.

Ürün Görseli Boyut, Dosya Adı ve Alt Metin Aracı

Aşağıdaki araç, ürününüz için kaynak görselin hedef boyutunu, SEO dostu dosya adını ve önerilen alt metni üretir. Araç yalnız öneri verir; alt metni ürününüzü en iyi sizin anlatacağınızı unutmadan düzenleyin.

Ürün Görselinin Dosya Adı Nasıl Olmalı?

Görsel dosya adı, görseli anlatan kısa ve anlamlı bir ifade olmalı; küçük harfle, Türkçe karakter ve boşluk kullanmadan, kelimeler tireyle ayrılarak yazılmalıdır. Telefon ya da fotoğraf makinesinin verdiği "IMG_2034.jpg" gibi adlar görsel hakkında hiçbir bilgi taşımaz.

Çok sayıda ürünü toplu yüklerken dosya adının eşleştirme amacıyla kullanıldığı sistemler de vardır: görseller ürünün barkoduna ya da stok koduna göre adlandırılır ve yüklemede ürünle eşleşir. Bu durumda eşleştirme düzenini bozmayın; SEO için önemli olan alt metin ve ürün adı gibi alanları ayrıca doldurun.

Alt Metin Nasıl Yazılır?

Alt metin, görseli göremeyen birine görseli anlatan kısa bir cümledir; ürünün ne olduğunu ve ayırt edici özelliğini söyler. Ekran okuyucular bunu sesli okur, arama motorları görselin içeriğini anlamak için kullanır ve görsel yüklenemediğinde yerine görünür.

• Ürünü ve özelliğini söyleyin: "Keten gömlek, beyaz, ön görünüm" gibi kısa ve anlamlı bir cümle yazın.
• "Görsel" ya da "resim" demeyin: Ekran okuyucu zaten bir görsel olduğunu söyler.
• Anahtar kelime doldurmayın: "gömlek erkek gömlek keten gömlek ucuz gömlek" biçimindeki alt metin hem erişilebilirliğe hem aramaya zarar verir.
• Her görsele farklı yazın: Aynı ürünün ön, arka ve detay görselleri farklı alt metin taşımalı.
• Süs görselleri boş bırakın: Yalnız dekoratif olan görselde alt metin boş olmalıdır.
• Kısa tutun: Genellikle bir iki kısa cümle yeterlidir.

Okumanızı öneririzYapılandırılmış Veri (Schema) Nedir? Ürün Şeması Nasıl Eklenir?

Görseller Sayfada Nasıl Yüklenmeli?

Görselin kendisi kadar nasıl yüklendiği de önemlidir: ekranda ilk görünen ana ürün görseli hemen yüklenmeli, ekranın altındaki görseller ise kullanıcı o noktaya yaklaştığında yüklenmelidir. Aksi halde sayfa gereksiz yere ağırlaşır ya da önemli görsel geç gelir.

• Ekran altı görselleri geç yükleyin (lazy loading): Liste sayfasında aşağıdaki ürünlerin görselleri, kullanıcı kaydırdıkça yüklenir.
• İlk görseli geciktirmeyin: Sayfa açıldığında görünen ana ürün görseli geç yükleme kapsamına alınmamalı; en önemli içeriktir.
• Genişlik ve yükseklik belirtin: Görsel gelince sayfa kaymasın diye boyut önceden tanımlı olmalı.
• Farklı ekranlara uygun boyut sunun: Telefona küçük, masaüstüne büyük kaynak gönderilebilir.
• Dağıtım ağı kullanın (CDN): Görseller kullanıcıya yakın sunucudan gelirse daha hızlı yüklenir.

Okumanızı öneririzCDN Nedir? Ve Ne İşe Yarar?

Ürün Galerisi Nasıl Kurulmalı?

Müşteri ürünü eline alamadığı için galeri, onun yerine bakar: farklı açılar, detaylar ve kullanım görüntüleri güveni artırır. Galeriyi kurarken görsel sayısı kadar tutarlılık da önemlidir.

• Yeterli sayıda görsel koyun: Ön, arka, yan, detay ve kullanım görüntüsü için en az birkaç görsel hedefleyin.
• İlk görseli en net seçin: Liste sayfasında ve paylaşımlarda ilk görsel görünür; beyaz ya da sade arka planda net bir görsel olsun.
• Arka plan ve oranı tutarlı tutun: Tüm ürünlerde benzer arka plan ve aynı oran, mağazanın düzenli görünmesini sağlar.
• Ölçü ve ölçek gösterin: Boyut hissini veren bir kullanım görseli ya da ölçü tablosu iade oranını düşürür.
• Video ekleyin: Kısa bir ürün videosu, görselin anlatamadığı hareketi ve dokuyu gösterir.

Okumanızı öneririzE-Ticaret Ürün Sayfası Nasıl Olmalı?

Yüzlerce Ürün İçin Görsel Optimizasyonu İş Akışı

Çok ürünlü bir mağazada görselleri tek tek optimize etmek mümkün değildir; bu yüzden sabit bir iş akışı kurmak gerekir. Aşağıdaki sekiz adım, çekimden yayına kadar tekrarlanabilir bir düzen sağlar.

1. Çekin: Sabit ışık ve arka planla, ürün başına aynı açı setini çekin.
2. Seçin: En net ve en tutarlı kareleri ayırın.
3. Kırpın: Tüm ürünler için aynı en-boy oranına getirin.
4. Boyutlandırın: Hedef genişliğe (gösterilen boyutun yaklaşık iki katı) küçültün.
5. Sıkıştırın ve formatı seçin: WebP ya da JPEG; görünür kalite kaybı olmadan.
6. Adlandırın: Anlamlı ya da sisteminizin eşleştirme kuralına uygun adlar verin.
7. Yükleyin: Toplu yükleme varsa kullanın; alt metinleri doldurun.
8. Ölçün: Sayfa hızı aracında görsel uyarılarını kontrol edin.

Okumanızı öneririzE-Ticaret Görsellerinizi Bu Programlarla Düzenleyin

Ürün Görselinde Arka Plan: Beyaz mı, Yaşam Tarzı mı?

İkisi de gereklidir ve farklı işler görür: sade (genellikle beyaz) arka planlı görsel ürünü net gösterir ve liste sayfalarında düzen sağlar; yaşam tarzı görseli ise ürünü kullanım bağlamında gösterip hayal kurdurur. Galerinin ilk görselini ürünü en net anlatan sade görsel yapmak, ardından yaşam tarzı ve detay görsellerine geçmek en güvenli düzendir.

• Liste sayfasında sade görsel: Aynı arka plan ve oran, mağazanın düzenli ve güvenilir görünmesini sağlar.
• Detay sayfasında bağlam: Kullanım görseli, ürünün boyutunu ve ne için kullanıldığını anlatır.
• Detay görselleri: Dikiş, doku, etiket ve bağlantı gibi ayrıntılar karar vermeyi kolaylaştırır.

Görsel Optimizasyonu Ne Sıklıkta Yapılmalı?

Görsel optimizasyonu bir kez yapılıp bırakılan bir iş değildir; yeni ürün eklendikçe, tasarım değiştikçe ve katalog büyüdükçe tekrarlanır. En sağlıklısı, her yeni ürünün görselini yayına almadan önce aynı iş akışından geçirmek ve eski kataloğu belirli aralıklarla taramaktır.

• Her yeni üründe: İş akışını (boyut, format, ad, alt metin) standart hale getirin.
• Tasarım ya da şablon değiştiğinde: Görsellerin gösterildiği boyut değişmiş olabilir; kaynak boyutunu yeniden kontrol edin.
• Üç ayda bir: En çok trafik alan sayfaları sayfa hızı aracında yeniden ölçün.
• Kampanya öncesi: Yoğun trafik gelmeden önce en çok ziyaret edilen sayfaların görsellerini kontrol edin.

Görsel Optimizasyonu Nasıl Ölçülür?

Optimizasyonun işe yarayıp yaramadığını sayfa hızı ölçümleriyle ve sayfa ağırlığıyla görürsünüz. Ölçümü iki zamanda yapın: değişiklikten önce ve sonra, aynı sayfa ve aynı koşulda.

• Sayfa hızı raporu: "Görselleri uygun boyutlandırın", "Yeni nesil formatlarla sunun" ve "Ekran dışı görselleri erteleyin" gibi uyarılar kalktı mı?
• Toplam sayfa ağırlığı: Ürün sayfasının toplam indirme boyutu azaldı mı?
• En büyük içerik boyama süresi: Ana ürün görselinin göründüğü an erkene çekildi mi?
• Mobil ölçüm: Ölçümü özellikle yavaş mobil bağlantı koşulunda yapın.

Görsel Optimizasyonunda Sık Yapılan 8 Hata

1. Telefondan çıkan görseli olduğu gibi yüklemek: Binlerce piksellik görsel, küçük alanda gösterilmesine rağmen tam indirilir.
2. Her yerde PNG kullanmak: Fotoğrafta PNG çok büyük dosya üretir.
3. Fazla sıkıştırmak: Görünür bozulma ve bulanıklık güveni zedeler.
4. Anlamsız dosya adı bırakmak: "IMG_2034" gibi adlar bilgi taşımaz.
5. Alt metni boş bırakmak ya da anahtar kelime doldurmak: İki uç da erişilebilirliğe ve aramaya zarar verir.
6. Ana görseli geç yüklemek: Ekranın ilk görünen görseli ertelenirse sayfa boş görünür.
7. Görsel boyutunu belirtmemek: Görsel gelince sayfa aşağı kayar.
8. Tutarsız oran ve arka plan kullanmak: Liste sayfası dağınık görünür.

Ürün Görseli Optimizasyonu Kontrol Listesi

Ürün görsellerinizi yayına almadan önce aşağıdaki maddelerin hepsine "evet" diyebiliyor olmalısınız.

• Görsel, gösterildiği boyutun yaklaşık iki katı genişlikte mi?
• Fotoğraflar WebP ya da JPEG olarak, görünür kalite kaybı olmadan sıkıştırıldı mı?
• Logo ve ikonlar SVG ya da küçük boyutlu mu?
• Dosya adları anlamlı, küçük harfli ve Türkçe karaktersiz mi (ya da sistemin eşleştirme kuralına uygun mu)?
• Her görselin kısa ve anlamlı bir alt metni var mı?
• Alt metinlerde anahtar kelime doldurma yok mu?
• Ürün galerisinde yeterli açı, detay ve kullanım görseli var mı?
• Tüm ürün görselleri aynı en-boy oranında ve tutarlı arka planda mı?
• Ekran altı görseller geç yükleniyor, ana görsel ise hemen mi yükleniyor?
• Görsellerin genişlik ve yüksekliği tanımlı mı?
• Değişiklikten sonra sayfa hızı ölçümü yapıldı mı?

Faprika ile Ürün Görseli Yönetimi

Doğru hazırlanmış görselleri yüzlerce ürün için hızla yayına almak, işin ikinci yarısıdır. Faprika e-ticaret altyapısında bu aşama için şu unsurlar yer alır (hangi özelliğin hangi pakette başladığını e-ticaret paketleri sayfasında görebilirsiniz):

• Sürükle bırak ve çoklu görsel yükleme: Ürün eklerken birden fazla görseli sürükleyip bırakarak ya da dosyadan seçerek yüklersiniz; adımlar Yeni Ürün Ekleme eğitiminde.
• Toplu ürün görseli yükleme: Görselleri ürün kimliğine, stok koduna ya da barkoda göre adlandırıp tek seferde yüklersiniz; sıra ayracı olarak tire, alt çizgi ya da yıldız seçilir. Ayrıntılar Toplu Resim Yükleme eğitiminde; bu özellik paketlere göre değişir.
• Ürün görseli tuval özelliği: Ürün liste ve detay ayarlarında görsel tuvali tanımlanır; tüm paketlerde yer alır.
• Yükleme sırasında logo (lazy logo): Görseller yüklenirken ürün tuvalinin arka planında markanızın logosu görünür; ayrıntılar Lazy Logo Yönetimi eğitiminde.
• Otomatik video: Ürün resimleri bölümünde otomatik video seçeneği yer alır; birden fazla görselle birlikte kullanılması önerilir.
• İçerik dağıtım ağı (CDN): Görsel ve dosya trafiğini hızlandıran CDN, paketlere göre sunulur.

Sıkça Sorulan Sorular

Ürün görseli optimizasyonu nedir?

Ürün görseli optimizasyonu, ürün fotoğrafının kalitesi korunarak dosya boyutunun, formatının, adının, alt metninin ve yüklenme biçiminin sayfa hızı, erişilebilirlik ve arama motoru açısından en uygun hale getirilmesidir. Amaç, görünür kalite kaybı olmadan daha küçük ve daha anlamlı dosyalar sunmaktır.

Ürün görseli hangi boyutta olmalı?

Kaynak görsel, sayfada gösterildiği boyutun yaklaşık iki katı genişlikte olmalıdır; bu, yoğun ekranlarda keskin görüntü sağlar. Yakınlaştırma özelliği varsa kaynak üç katına kadar çıkabilir. Örneğin sayfada 600 piksel genişlikte gösterilen bir görsel için 1200 piksel genişlik uygundur.

WebP nedir ve neden tercih edilir?

WebP, görseller için geliştirilmiş modern bir formattır; genellikle JPEG ve PNG'den daha küçük dosyayla benzer kaliteyi sağlar ve şeffaflığı destekler. Geniş tarayıcı desteği nedeniyle ürün fotoğrafları için yaygın bir seçimdir; eski sistemler için JPEG yedeği düşünülebilir.

Alt metin nasıl yazılır?

Alt metin, görseli göremeyen birine görseli anlatan kısa bir cümle olmalıdır: ürünün ne olduğunu ve ayırt edici özelliğini söyleyin. "Görsel" ya da "resim" demeyin, anahtar kelime doldurmayın ve her görsele farklı bir metin yazın. Süs amaçlı görsellerde alt metin boş bırakılır.

Görsel dosya adı SEO için önemli mi?

Anlamlı bir dosya adı, görselin içeriğini anlamaya yardımcı olan küçük bir ipucudur; alt metin ve ürün adı kadar belirleyici değildir. Dosya adını küçük harf, Türkçe karakter ve boşluk kullanmadan, kelimeleri tireyle ayırarak yazın.

Tüm görselleri lazy loading yapmak doğru mu?

Hayır. Ekranın altındaki görseller geç yüklenmeli, fakat sayfa açıldığında hemen görünen ana ürün görseli geç yükleme kapsamına alınmamalıdır; aksi halde en önemli içerik gecikir ve sayfa boş görünür.

İlginizi Çekebilecek Yazılar

• Bir Web Sitesinin Performansını Yavaşlatan En Önemli Detaylar
• Video İçeriklerle E-ticarette Fark Yaratın
• Kategori Sayfası SEO'su Nasıl Yapılır?
• E-Ticaret Sitesi Güvenlik Sistemleri