Müşterilerin her şeye hızla ulaşmayı beklediği bir dönemde, hızlı yüklenen bir e-ticaret sitesi kritik önemdedir. Duyarlı görseller, hem yüklenme sürelerini kısaltır hem de dönüşümleri destekler.
Görsel kalitesi, yüksek dönüşüm oranları için kritiktir. Ancak çevrimiçi mağazanızda kullanıcı deneyimi ve SEO açısından asıl belirleyici unsur görsel optimizasyonudur. Görselleri nasıl optimize edeceğinizi öğrenmek, markanızı güçlendirmekten, Google Görseller'de ürün arayan kullanıcıları sitenize çekmeye kadar ciddi faydalar sağlar.
Görsel optimizasyonu nedir?
Görsel optimizasyonu, görsellerinizin masaüstünde ve mobil cihazlarda iyi görünmesini sağlarken web performansını da olumsuz etkilememesine yardımcı olur. Bu süreçte kalite korunur, görsel formatı, boyutu ve çözünürlüğü kullanılan cihaza göre düzenlenir.
Burada üç temel unsur öne çıkar:
- Görsel dosya formatı
- Görsel boyutları (yükseklik ve genişlik)
- Ekran çözünürlüğü
Arama motorlarının görselleri daha kolay bulabilmesi ve indeksleyebilmesi için web sitenizdeki görselleri optimize edebilirsiniz. Bu durum doğrudan sayfa performansını etkiler. Görsel, sayfadaki en büyük görünür öğe olduğunda, yüklenme süresi Google'ın arama görünürlüğünü etkileyen Core Web Vitals (Temel Web Verileri) metriklerinden biri olan LCP (Largest Contentful Paint) değerini etkiler.
Standart HTML görsel ögeleri (<img> etiketleri), Google'ın dosyayı bulmasını, Google Arama ve Google Görseller için indekslemesini sağlar.
Görseller neden optimize edilir?
İyi bir çevrimiçi alışveriş deneyimi için görseller vazgeçilmezdir. Müşteri ürünü net biçimde göremiyorsa satın alma ihtimali düşer. HTTP Archive verilerine göre, optimize edilmemiş görseller mobilde bir web sayfasının toplam ağırlığının ortalama olarak yaklaşık %38'ini oluşturur.
Görsel optimizasyonu, sayfa ağırlığını azaltır. Aynı zamanda iyi bir e-ticaret web tasarımı yaklaşımının temel parçalarından biridir. Bunun başlıca faydaları şunlardır:
Hız ve kalite arasında denge
Web ve mobil için görsel optimizasyonunun amacı, hız ile kalite arasında doğru dengeyi kurmaktır. E-ticarette iyi görünen görseller kullanmak önemlidir. Bu yaklaşım, ziyaretçilere daha iyi bir gezinme deneyimi sunar.
Google, site hızının sayfaları sıralarken algoritmasında kullandığı sinyallerden biri olduğunu belirtiyor. Yavaş yüklenen sayfalar, arama motorlarının tarama bütçesini (crawl budget) verimsiz kullanmasına ve daha az sayfanızı taramasına yol açar. Bu durum da sitenizin indekslenme (dizine eklenme) performansını olumsuz etkileyebilir.
Daha güçlü arama performansı
Görsel SEO optimizasyonu, arama motorlarına her bir görsel hakkında daha fazla veri sunarak görsellerinizin ilgili arama sorgularıyla eşleşmesini sağlar.
MozCast'in canlı SERP (Arama Motoru Sonuç Sayfası) takip verileri, incelediği Google sonuçlarının yaklaşık %19'unda görsellerin yer aldığını göstermektedir. Bu sıralamalar, kullanıcıların standart arama sonuçlarındaki "görsel paketleri" (arama sayfasında çıkan küçük görsel blokları) veya doğrudan Google Görseller üzerinden ürün sayfalarınıza ulaşması için ek bir trafik kanalı oluşturur.
Web için görsel optimizasyonu nasıl yapılır?
Görsel dosya boyutlarını küçültmek ve hem alışveriş yapanlara hem de arama motorlarına her bir görsel hakkında net bilgiler sunmak için şu sekiz adımı uygulayın:
- Görsel adları kısa ve net olsun
- Alt etiketlerinizi (Alt metin) özenle optimize edin
- Görsel boyutlarını ve ürün açılarını stratejik olarak seçin
- Görsellerinizi yeniden boyutlandırın
- Doğru görsel formatını seçin
- Görsel site haritaları kullanın
- Güçlü bir görsel içerik dağıtım ağı (CDN) kullanın
- Görsellerinizi test edin
1. Görsel adları kısa ve net olsun
Görselleri sitenize yükleyip kameranın atadığı varsayılan dosya adlarını olduğu gibi bırakmak çok kolaydır. Ancak görsel SEO optimizasyonu söz konusu olduğunda, sayfanızın arama motorlarında daha iyi sıralanmasına yardımcı olacak ilgili anahtar kelimeleri kullanmak gerekir.
Açıklayıcı, anahtar kelime içeren dosya adları oluşturmak görsel optimizasyonunun önemli bir parçasıdır. Arama motorları (örn. Google) yalnızca sayfanızdaki metni değil, görsel dosya adlarını da tarar.
Örneğin şu görsele bakalım:
Görsel için kameranın verdiği jenerik adı kullanabilirsiniz (örneğin DCMIMAGE10.jpg). Ancak dosyayı 2012-Ford-Mustang-LX-Kirmizi.jpg şeklinde adlandırmak sizin için çok daha faydalı olur.
Müşterilerinizin sitenizde ürün ararken nasıl arama yaptığını düşünün. Hangi sözcük gruplarını kullanıyorlar? Mesela yukarıdaki örnekte yer alan otomobil için arama yapan kullanıcılar şu tür aramalar yapabilir:
- 2012 Kırmızı Ford Mustang LX
- Ford Mustang LX Kırmızı 2012
- Kırmızı Ford Mustang LX 2012
Müşterilerinizin sizi bulmak için hangi anahtar kelimeleri kullandığını görmek adına site analizlerinize bakın. En yaygın sözcük gruplarını belirleyin, ardından aynı mantığı görsel dosyası adlandırma sürecinize uygulayın.
Veriye dayalı ilerlemeyi düşünmüyorsanız bile, görselleri adlandırırken ilgili ve faydalı anahtar kelimeler kullanın, yani mümkün olduğunca açıklayıcı olun. Bu yaklaşım, sayfa içi SEO performansınızı gerçekten iyileştirebilir. Ayrıca sayfalarınızın ve görsellerinizin arama motoru sonuç sayfalarında daha üst sıralarda görünmesine yardımcı olabilir.
2. Alt etiketlerinizi (Alt metin) özenle optimize edin
Alt metin (alternatif metin), ekran okuyucu kullanan erişilebilirlik kullanıcılarının görsel içeriğini anlamasını sağlayan kısa açıklamadır. Aynı zamanda Google'ın görselde ne olduğunu kavramasına yardımcı olarak görselinizin arama sonuçlarındaki görünürlüğünü arttırır.
İyi bir uygulama olarak, bilgi içeren her ürün görseli için sade ve anlaşılır bir açıklama yazın. Ürünü doğrudan tanımlıyorsa model veya seri numarasını da alt metne ekleyin.
Açıklamayı doğrudan ilgili görsele göre özelleştirin:
<img src="2012-ford-mustang-lx-red.jpg" alt="Red 2012 Ford Mustang LX">
💡 İpucu: Yalnızca tasarım/dekorasyon amaçlı kullanılan (bilgi taşımayan) görseller için boş bir alt özniteliği (alt=" ") kullanın. Bu sayede ekran okuyucular gereksiz öğeleri atlayarak kullanıcı deneyimini iyileştirir.
3. Görsel boyutlarını ve ürün açılarını stratejik olarak seçin
Görsellerinizin boyutlarını, sitenizde görüntülenecekleri en büyük alana uygun olacak şekilde ayarlayın. Ardından, potansiyel alıcıların aklındaki farklı sorulara yanıt verecek çeşitli ürün açılarına ait görseller tercih edin.
Örneğin, bir araç ilanında faydalı açı kombinasyonları şunları içerebilir:
- Dış görünüm
- İç kabin
- Arka kısım
- Motor bölümü
Her açı ve görsel için benzersiz bir dosya adı ve alt metin tanımlayın:
Dosya Adı: 2012-ford-mustang-lx-kirmizi-ic-doseme.jpg
Alt Metin: Kırmızı 2012 Ford Mustang LX deri kaplama iç kabini
4. Görsellerinizi yeniden boyutlandırın
Görsellerinizi sitenizde kaplayacakları en büyük alanın boyutlarına göre ölçeklendirin ve daha dar ekranlar için bu görsellerin daha küçük versiyonlarını sunun. Örneğin, 200x200 piksellik bir görsel alanı için yüksek piksel yoğunluklu (2x Retina) ekranlarda netlik sağlamak adına 400x400 piksellik bir kaynak görsel kullanabilirsiniz. Web siteniz, ziyaretçinin ekran boyutuna göre otomatik olarak en uygun görsel versiyonunu seçecektir.
Günümüz tüketicilerinin büyük bir kısmı mobil cihazları tercih ediyor. Nitekim Similarweb'in 2025 Küresel E-ticaret Raporu, e-ticaret uygulamalarındaki oturumların yıldan yıla %13 arttığını gösteriyor. Bu nedenle görselleri doğru boyutlarda sunmak hayati önem taşıyor, çünkü bu sayede görsel kalitesinden ödün vermeden sayfanın çok daha hızlı yüklenmesi sağlanabiliyor.
Genel bir kural olarak, web sitenizde yayınlayacağınız nihai görsellerin dosya boyutunu 200 kilobayt (KB) veya altında tutmaya özen gösterin. Shopify'ın ürün fotoğrafçılığı kılavuzu da 200 KB'ı ideal bir hedef olarak tanımlıyor ve sıkıştırılmış dosyalarda bulanıklık veya pürüz oluşup oluşmadığının kontrol edilmesini öneriyor.
💡 İpucu: Shopify kullanıyorsanız sisteme elinizdeki en yüksek kaliteli kaynak görseli yükleyin. Shopify'ın CDN (İçerik Dağıtım Ağı) altyapısı, farklı cihazlar ve tarayıcılar için optimize edilmiş görsel versiyonlarını otomatik olarak oluşturup ziyaretçilerinize sunar.
5. Doğru görsel formatını seçin
Seçeceğiniz görsel formatını içeriğin türüne ve şeffaflık ihtiyacınıza göre belirleyin. Aşağıdaki tablo, yaygın web görsel formatlarını karşılaştırmaktadır:
| Format | Sıkıştırma | Şeffaflık | En Uygun Kullanım Alanı | Bağıl Dosya Boyutu |
|---|---|---|---|---|
| JPEG | Kayıplı | Yok | Ürün fotoğrafları | Orta |
| PNG | Kayıpsız | Var | Şeffaf arka planlı grafikler | Büyük |
| WebP | Kayıplı veya Kayıpsız | Var | Fotoğraflar ve grafikler | Küçük |
| AVIF | Kayıplı veya Kayıpsız | Var | Detaylı fotoğraflar | En Küçük |
| SVG | Vektörel | Var | Logolar ve simgeler | Basit grafikler için çok küçük |
Seçtiğiniz dosya formatı doğrudan görsel kalitesini, dosya boyutunu ve sayfa hızını etkiler. Bu nedenle, özel ihtiyaçlarınıza en uygun olanı seçmek kritik önem taşır.
Her görsel formatı farklı bir sıkıştırma türü kullanır. JPEG, WebP ve AVIF dosyaları için, görsel kalitesinde gözle görülür bir düşüş fark edene kadar kalite ayarlarını düşürün ve ardından ideal seviyeye geri getirin. Bu işlemi yaparken görseli gösterileceği tüm ekran boyutlarında incelediğinizden emin olun. PNG sıkıştırması renk paletini azaltırken SVG sıkıştırması ise kullanılmayan meta verileri ve kodları temizler.
Görselleri kendiniz sıkıştırıyorsanız her format için özel olarak tasarlanmış şu araçları kullanabilirsiniz:
Farklı formatları yöneten web siteleri, JPEG veya PNG gibi yedek (fallback) görseller sunmak için <picture> HTML etiketini kullanabilir.
Shopify'ın CDN altyapısı, ziyaretçinin tarayıcı yeteneklerini otomatik olarak algılar ve WebP veya AVIF dahil olmak üzere uyumlu en iyi görsel formatını sunar. Bu sayede, manuel olarak farklı format versiyonları oluşturmanıza gerek kalmaz.
6. Görsel site haritaları kullanın
Görsel site haritaları, Google'ın JavaScript aracılığıyla yüklenenler gibi aksi takdirde bulunması zor olabilecek görselleri bulmasına yardımcı olur.
Görselleriniz Google Arama'da veya Google Görseller'de görünmüyorsa mevcut bir XML site haritasına görsel etiketleri ekleyin veya ayrı bir görsel site haritası oluşturun, ardından dosyayı Google Search Console üzerinden gönderin. Konumunu robots.txt dosyasında da bildirebilirsiniz:
Sitemap: https://example.com/sitemap.xml
Shopify otomatik olarak bir sitemap.xml dosyası oluşturur ve günceller. Bu dosya ürünleri, koleksiyonları, sayfaları ve blog gönderilerini kapsar. Ayrıca her ürünün birincil görselini de içerir. Dosyayı Search Console üzerinden magazaniz.com/sitemap.xml adresinden gönderebilirsiniz.
7. Güçlü bir görsel içerik dağıtım ağı (CDN) kullanın
Görsel CDN'leri, dosyaları sunuculardan oluşan geniş bir ağ üzerinde depolar ve her ziyaretçiye kendi konumuna en yakın sunucudan ulaştırır. CDN, görselleri farklı ekranlara göre yeniden boyutlandırabilir ve alıcının tarayıcısının desteklediği en uygun formatı otomatik olarak seçebilir.
Shopify mağazaları için her zaman elinizdeki en yüksek kaliteli kaynak görseli yükleyin. Shopify CDN'si mağazanızda görüntülenecek versiyonu optimize eder ve uyumlu bir format seçer. Destekleyen tarayıcılara WebP veya AVIF dosyaları sunulur.
Shopify satıcıları ayrıca web sitesi hızını, dönüşüm oranını ve arama motoru optimizasyonunu geliştirmeye yardımcı olabilecek profesyonel hizmetlere de erişebilir.
8. Görsellerinizi test edin
Görsel testlerini her defasında tek bir değişkeni hedefleyecek şekilde yürütün. Yapılan her değişikliğin tam etkisini ölçmek için dönüşüm oranını ve sayfa hızını birlikte değerlendirin:
- Sayfa başına düşen ürün görseli sayısını test edin. Yüklenme süreleri, barındırma hizmetini kendisi sağlayan bazı e-ticaret siteleri için sorun teşkil ettiğinden, bir sayfadaki görsel sayısını azaltmanın tıklama oranlarını ve satışları arttırdığını görebilirsiniz.
- Müşterilerinizin hangi açıları tercih ettiğini test edin. Müşterilerinize anket yapmak ve onlarla doğrudan iletişim kurmak edinilmesi gereken harika bir alışkanlıktır. Görsel açılarını seçerken müşteri geri bildirimlerinden yararlanın ve ardından bu görselleri test edin.
- Kategori sayfalarında kaç adet ürün listelemeniz gerektiğini test edin. İdeal sayı 10 mu, 20 mi yoksa 100 ürün mü? Müşterilerinizin tercihlerini öğrenmek adına, kategori sayfalarında listelediğiniz ürün sayısını test edin.
Görsel optimizasyon araçları
E-ticaret siteniz için kullanabileceğiniz en iyi görsel optimizasyon araçları ve eklentileri şöyle:
Squoosh
Squoosh, görselleri doğrudan tarayıcı içinde sıkıştırır ve dönüştürür. Bir görsel açın, çıktı ayarlarını yapın ve kaydetmeden önce optimize edilmiş önizlemeyi orijinaliyle karşılaştırın. İşlem tamamen kendi cihazınızda gerçekleşir.
TinyPNG
TinyPNG, AVIF, WebP, JPEG, PNG ve APNG dosyalarını tarayıcı tabanlı bir yükleyici aracılığıyla sıkıştırır. Tinify API'si sıkıştırma ve yeniden boyutlandırma işlemlerini otomatikleştirir. Resmî WordPress eklentisi ise görselleri yükleme sırasında işler.
SVGOMG
SVGOMG, SVGO altyapısıyla çalışan görsel bir arayüz üzerinden SVG kodlarını küçültür (minify eder). Bir dosya yükleyin veya kodunu yapıştırın, ardından daha küçük boyutlu SVG'yi indirmeden önce optimizasyon ayarlarını gözden geçirin.
Tiny SEO Speed Image Optimizer
Tiny SEO Speed Image Optimizer, mağaza görsellerini toplu olarak sıkıştırır ve yeniden boyutlandırır. Aynı iş akışı alt metinleri ve dosya adlarını da güncelleyebilir. Uygulama, optimize edilen görsellerin yedeklerini saklar.
Crush: Speed & Image Optimizer
Crush, ürün ve tema görselleri için manuel ve otomatik sıkıştırma işlemlerini yönetir. Sıkıştırma ve görsel SEO kurallarını bir kez ayarlarsınız, uygulama bunları yeni yüklenen görsellere otomatik olarak uygular.
Hextom: Bulk Image Edit & SEO
Hextom, toplu sıkıştırmayı yeniden boyutlandırma, kırpma ve filigran ekleme özellikleri ile birleştirir. Görsel düzenleyicisi alt metinleri ve dosya adlarını güncelleyebilir, ayrıca satıcıların düzenlenen görselleri geri yüklemesine olanak tanıyan yedekleme araçlarına sahiptir.
Görsel optimizasyonuyla fotoğrafları işlevsel tutun
Görsellerinizi optimize etmek, başarılı bir çevrimiçi işletme yürütmenin temel öğelerinden biridir. Bu süreç ürünlerinizin görünümünü iyileştirir, akıcı bir alışveriş deneyimi yaratır ve internette kolayca bulunmanıza yardımcı olur.
Shopify'ın CDN altyapısı, her tarayıcı için uyumlu bir görsel formatını otomatik olarak seçer. Sidekick ise metin istemlerinden veya referans fotoğraflardan manşet görselleri, pazarlama materyalleri ve blog illüstrasyonları oluşturur. Mağazalar, üretilen görselleri takip eden talimatlarla detaylandırabilir ve seçilen dosyaları doğrudan mağazanın medya kitaplığına kaydedebilir.
Görsel optimizasyonu nedir?, SSS
Bir görsel kalite kaybetmeden nasıl optimize edilir?
Görseli kaliteden ödün vermeden optimize etmenin en iyi yolu, duruma uygun doğru görsel boyutunu ve formatını sunmaktır. Dosyalarınızı oluşturmak ve tarayıcının bunları doğru şekilde sunması için gerekli HTML kodlarını yazmak adına bu makalede listelenen manuel araçları kullanabilirsiniz. Ya da her cihazda üstün kaliteli görselleri otomatik olarak dönüştürüp teslim etmek için Shopify'daki gibi özel bir görsel CDN'i tercih edebilirsiniz.
En iyi görsel optimizasyon aracı hangisidir?
Squoosh ve TinyPNG, kullanılabilecek en iyi görsel optimizasyon araçları arasında yer alır. İkisi de web tabanlıdır, JPG ve PNG gibi formatlar için çeşitli seçenekler sunar. Daha karmaşık bir SVG dosyanız varsa boyutunu küçültmek için SVGOMG aracını kullanabilirsiniz.
Shopify'da görsellerimi optimize etmem gerekir mi?
Görselleri Shopify'a yüklemeden önce optimize etmeniz gerekmez. Hatta bunu yapmanız, zaman zaman görsel kalitesinin düşmesine, bu da dönüşüm oranlarının azalmasına ve iadelerin artmasına neden olabilir. Shopify'ın CDN altyapısı, e-ticaret için en ideal kalite ayarında görselleri otomatik olarak sıkıştırır. Tema kodunuzun, duyarlı (responsive) görsel özelliklerinden otomatik olarak yararlanabilmesi için Liquid image_url ve image_tag filtreleri kullanılarak yazılmış olması gerekir.
Görsel dosya boyutu nasıl küçültülür?
Görseli görüntüleneceği maksimum boyutlara göre yeniden boyutlandırın, uygun bir format seçin ve sıkıştırma uygulayın. Fotoğraflar için JPEG, WebP veya AVIF, şeffaf grafikler için ise PNG kullanın. Nihai dosyayı 200 kilobayt (KB) veya altında tutun ve ardından görüntüleneceği boyutta kalite kontrolü yapın.
SEO'da görsel optimizasyonu nedir?
SEO'da görsel optimizasyonu, görselleri hızlı yükleme ve arama motorları tarafından keşfedilme süreçlerine hazır hale getirir. Tanımlayıcı dosya adları ve doğru alt metinler her bir görseli arama motorlarına açıklar. Sıkıştırma, duyarlı boyutlandırma, verimli formatlar ve görsel site haritaları ise görselin sunumunu ve indekslenmesini iyileştirir.
