Ürün resimleri, müşteriler web sitenizi ziyaret ettiğinde anlaşmanın imzalanmasına yardımcı olur. İlgilerini korumak için hızlı yüklenen çekici fotoğraflarınız olmalıdır. Başka bir deyişle, ürün görsellerinizi optimize etmeniz gerekiyor.
En uygun görüntü boyutunu nasıl bulacağınızı, görüntüleri nasıl sıkıştıracağınızı ve kaliteyi kaybetmeden görüntüleri nasıl optimize edeceğinizi merak ediyor olabilirsiniz.
Seni koruduk. Bu yazımızda konuya giriyoruz
Neden Görüntüleri Optimize Etmeniz Gerekiyor?
Görseller her web sitesinin önemli bir parçasıdır. Bu özellikle bir e-ticaret sitesi için geçerlidir. Resimler, bir şey satın almayı düşündüklerinde müşterileri etkiler. Web sayfasının genel tasarımına katkıda bulunur, müşterilerin bir ürün seçmesine yardımcı olur ve sitenizin SEO'sunu geliştirir.
Örneğin, büyük dosyaları yüklemekten kaçınmak istiyorsunuz. Arama motoru sıralamanızı etkileyen ve potansiyel müşterileri uzaklaştıran sayfanızı yavaşlatabilirler. Kimse çevrimiçi alışveriş yaparken bir sayfanın yüklenmesini beklemek istemez. Bu yüzden ürün görsellerinizi optimize etmelisiniz.
Görüntü Boyutlarını ve Oranlarını Anlama
Resimlerinizi optimize ederken nelere dikkat etmeniz gerektiğini öğrenelim.
Bir görüntünün boyutu ve boyutları gerçekten önemlidir. Bu parametreler dosya boyutunu ve görüntünün farklı cihazlarda görünümünü etkiler.
Beden
Artık çağdır
Ancak, resimler çok büyük olduğunda İnternet için uygun değildir. Özellikle telefonda yükleme hızını yavaşlatırlar. Ziyaretçilerinizin sabırsızlanıp mağazanızdan ayrılmasını istemiyorsanız fotoğraflarınızın boyutunu küçültmelisiniz.
Bir görüntünün iki boyutu vardır:
- Görüntü boyutu grafiğin ekranda kapladığı alandır. Bu boyut, ekranı oluşturan ayrı noktalar olan piksel (px) cinsinden ölçülür. Ecwid mağazasına herhangi bir boyuttaki resimleri yükleyebilirsiniz. Daha sonra tarayıcı penceresinin genişliğine uyacak şekilde optimize edilirler. Yine de, ürün resimlerinizi yaklaşık 1000 x 1000 piksele küçültmek en iyisidir. Bu boyut, ürünü sergilemek için yeterince büyük ve hızlı bir şekilde yüklemek için yeterince küçüktür.
- Dosya büyüklüğü görüntünün kapladığı hafıza alanıdır. Bu boyut bayt cinsinden ölçülür, tipik olarak
Kilo- (KB),Mega- (Mb) ve Gigabayt (Gb). Görüntünün dosya boyutu ne kadar büyük olursa, o kadar fazla depolama alanı gerektirir.
Bu ürün görselinin boyutu 1920×1920 ve dosya boyutu 272 kB'dir.
Daha büyük dosyaların yüklenmesi daha uzun sürer. Bu sorunla mücadele etmek için dosya sıkıştırma yazılımı geliştirilmiştir. Bir resim tipik olarak renk verileri optimize edilerek sıkıştırılır.
Ancak, güçlü sıkıştırma, görüntülerin "kalitesini" düşürür. Gürültüye veya ani bir renk geçişine neden olur.
Yaklaşık 1000 piksellik bir dosya boyutu için, iyi bir sıkıştırma yaklaşık 200 kB alacaktır.
Şimdi resimleriniz için doğru oranları nasıl seçeceğiniz hakkında daha fazla bilgi edelim.
Oranları
Bir görüntünün oranları,
Bazı oranlar göze diğerlerinden daha hoş gelir. Standart oranlar seti her zaman güzel görünür. Bunlar 1:1, 4:3, 3:2 ve 16:9'dur.
Sitenizin görünümünü tanımlamaya yardımcı oldukları için oranlar önemlidir. Vitrininize yapılandırılmış ve profesyonel bir görünüm kazandırmak için tüm ürün görsellerinizde aynı orantıları sağlamaya çalışın.
Görüntü Formatı Nasıl Seçilir
Optimum görüntüleme için akılda tutulması gereken bir diğer şey de görüntü formatıdır. Bir görüntünün kaydedildiği dosya türüdür.
Birçok görüntü formatı türü vardır. Her birinin kalite, sıkıştırma ve destek açısından avantajları ve dezavantajları vardır. En küçük boyutta en yüksek kaliteyi sağlayan formatı seçmelisiniz.
Web'deki en yaygın üç biçim JPEG, PNG ve GIF'dir. Her biri belirli bir şekilde kullanılmalıdır.
Formatları ayıralım:
- GIF (Grafik Değişim Biçimi), sıkıştırılmış verileri en fazla 256 renk kullanarak kalite kaybı olmadan depolayabilir. Biçim genellikle animasyonları destekler. Uzun bir süre boyunca, GIF'ler İnternetteki en yaygın formattı… PNG ortaya çıkana kadar.
- PNG (Taşınabilir Ağ Grafikleri) kayıpsız sıkıştırma kullanır ve sınırsız sayıda renk depolar.
- JPEG (Geliştiricinin adı olan Ortak Fotoğraf Uzmanları Grubu), fotoğrafları ve diğer görüntüleri depolamak için en tipik biçimdir. JPEG algoritması hem kayıplı hem de kayıpsız sıkıştırmayı kullanabilir (daha sonra anlatacağız.) Dosya boyutu ne kadar büyükse kayıp o kadar küçüktür.
Hangi formatı seçmelisiniz? Animasyonlu bir resminiz varsa, bu
JPEG ve PNG dosyaları benzerdir, ancak önemli farklılıkları da vardır. JPEG'ler, bazı verileri kaldıran bir sıkıştırma işlemi kullandıkları için boyut olarak daha küçüktür. PNG'ler ise şeffaf arka planları destekler ve grafik tasarım için daha iyidir.
Genel kural, şeffaf arka planı olmayan fotoğraflar ve görüntüler için JPG kullanmaktır. PNG'ye gelince, bunları grafikler, şeffaf arka plana sahip dosyalar ve netlik ve renk canlılığının önemli olduğu diğer resimler için kullanmak daha iyidir. Bu nedenle, ürün fotoğrafları için JPEG yerine PNG'yi tercih etmek mantıklıdır.
Bu ürün fotoğrafı JPEG formatındadır.
Kaliteyi Kaybetmeden Görüntüleri Sıkıştırmak
Sıkıştırma, bir görüntünün boyutunu küçültmeye yardımcı olur. Kalite ne kadar düşükse, sıkıştırma o kadar yüksek ve dosya boyutu o kadar küçük olur.
İki tür sıkıştırma vardır:
- Kayıplı sıkıştırma gereksiz verileri kaldırarak bir dosyanın boyutunu küçültür. Ancak bir dosyayı bu şekilde sıkıştırdığınızda görüntü kalitesi önemli ölçüde düşebilir.
- Kayıpsız sıkıştırma bir dosyanın kalitesini yüksek tutan bir tekniktir. Ancak dosya boyutunu kayıplı sıkıştırma kadar azaltmaz. Kaliteyi belirgin bir şekilde etkilemeden dosya boyutunu azaltmanız gerekiyorsa, kayıpsız sıkıştırmayı seçmek daha iyidir.
Bir görüntüyü kalite kaybı olmadan sıkıştırmak için kullanabileceğiniz çevrimiçi araçlar hakkında bilgi edinmek için okumaya devam edin.
Web için Görseller Nasıl Optimize Edilir: Araçlara Genel Bakış
Bir web sitesi için görüntüleri nasıl optimize edeceğinizi öğrenmek ister misiniz? Şansınıza, Photoshop eğitimlerini izleyerek saatler harcamadan görüntülerinizi otomatik olarak optimize etmek için çevrimiçi araçları kullanıyorsunuz.
Aşağıdaki siteler sizin için optimizasyonu otomatikleştirebilir:
Görüntü Boyutu Nasıl Optimize Edilir: 4 Basit Araç
Bir dosya boyutu küçültücü arıyorsanız, aşağıdaki hizmetlerden birine göz atın. Ya ücretsizdirler ya da ücretsiz denemeleri vardır:
- TinyJPG: JPEG görüntülerinin dosya boyutunu küçültür. Sitelerine göre, %70'den fazla azaltabilir!
- TinyPNG: aynı resim sıkıştırıcı ama PNG dosyaları için.
- Squoosh: çeşitli biçimler aracılığıyla görüntü boyutlarını küçülten bir görüntü sıkıştırıcı web uygulaması.
- jpegmini: JPEG dosyaları için bir fotoğraf sıkıştırıcı. Fotoğrafları doğrudan Lightroom ve Photoshop'tan dışa aktarma da dahil olmak üzere, fotoğrafçılar için yararlı olan daha gelişmiş özelliklere sahiptir.
- ImageOptim: Mac cihazları için bir görüntü iyileştirici. Kullanmak için indirmeniz gerekiyor.
JPEGmini ile görüntüleri optimize etme
Bir Ecwid mağazası işletiyorsanız, SEO hızı ve görüntü iyileştirici Ecwid App Market'ten uygulama. Uygulama şunları sağlar:
WordPress için Görüntüler Nasıl Optimize Edilir
Bir WordPress web siteniz varsa, bir görüntü iyileştirici ve sıkıştırma eklentileri kullanabilirsiniz. WordPress sitelerindeki görüntüleri otomatik olarak optimize etmenize yardımcı olarak daha iyi hız ve performans sağlar.
Bu arada, WordPress web siteniz için bir e-ticaret eklentisi arıyorsanız, buna göz atın Lightspeed eklentisi ile Ecwid. WordPress sitenize kolayca bir çevrimiçi mağaza eklemenizi sağlar. Eklenti yüklendikten sonra otomatik olarak müşterilerinizin web sitenizden alışveriş yapabileceği bir Mağaza sayfası oluşturur.
EWWW Image Optimizer
EWWW Image Optimizer web sitenizdeki fotoğrafları sıkıştırmak ve görselleri optimize etmek için en iyi WordPress eklentilerinden biridir. Görüntüleri optimize etme sürecinin tamamı otomatiktir. Buna, görüntülerin sıkıştırılması ve doğru boyuttaki sayfaya ve cihaza sığacak şekilde ölçeklendirilmesi de dahildir. Eklenti
JPEG ve PNG'yi sıkıştır
JPEG ve PNG'yi sıkıştır halihazırda sunduğumuz hizmetlerin arkasındaki ekip tarafından oluşturulan bir eklentidir
reSmush.it
reSmush.it 5 MB'a kadar olan dosyalar için ücretsiz bir WordPress görüntü sıkıştırma eklentisidir. Yükleme sırasında resimleri otomatik olarak optimize edebilir, eski resimleri toplu olarak optimize edebilir ve bazı resimleri optimize ediciden hariç tutabilirsiniz.
Daha Otomatik Görüntü Optimizasyon Araçları
Peki ya bir WordPress web siteniz yoksa? Çok sayıda fotoğrafı manuel olarak optimize etmek kesinlikle
ImageRecycle
ImageRecycle JPEG, PNG, GIF ve hatta PDF dosyaları gibi çeşitli görüntü formatlarını destekler.
Araç, web sitenizdeki hangi resimlerin, resim boyutuna ve boyutuna göre optimize edilmesi gerektiğini belirleyebilir. Sadece web sitenizin adresini girin ve ImageRecycle size e-posta yoluyla ücretsiz bir rapor gönderecektir. Optimizasyon araçlarını çalışırken görebilmeniz için ücretsiz denemeleri de var.
ImageKit.io
ImageKit.io normal bir görüntü sıkıştırıcı değil, bir görüntü CDN'sidir (içerik dağıtım ağı). Küresel sunucu ağı aracılığıyla görüntüleri optimize eder, yeniden boyutlandırır ve gönderir. Sonsuza kadar ücretsiz bir plana kaydolabilirsiniz.
Ürün Resimlerini Düzenleme Araçları
Resimleri kendiniz düzenlemekten çekinmiyorsanız ve küçük bir DIY'den korkmuyorsanız, fotoğraf düzenleme araçlarını faydalı bulabilirsiniz. Bunlardan bazıları:
Photoshop
Photoshop ücretsiz sunuyor çevrimiçi editör temel görüntü işleme için (görüntüleri kırpma veya yeniden boyutlandırma gibi). Ayrıca, resimlerden arka planı kaldırmanıza ve kontrast, parlaklık, doygunluk, sıcaklık veya keskinleştirme gibi farklı ayarlarla fotoğraflarınıza ince ayar yapmanıza olanak tanır.
Çevrimiçi Photoshop düzenleyicide kullanabileceğiniz tasarım şablonları bulunur
GIMP
GIMP Windows, Mac ve Linux için uygun ücretsiz bir programdır. Katmanlar ve maskeler, renk düzeltme, rötuş ve boyama araçları da dahil olmak üzere profesyonel grafikler ve fotoğraflar için ihtiyacınız olan her şeyi sunar. GIMP, tüm büyük resim dosyası formatlarını destekler.
PicMonkey
PicMonkey basit bir arayüze ve kırpma, döndürme, keskinlik kontrolü, renklerle çalışma ve çözünürlüklü fotoğrafları seçme gibi tüm temel işlevlere sahip çevrimiçi bir düzenleyicidir. Reklamlar, sosyal paylaşımlar, logolar, infografikler ve daha fazlası için görseller oluşturmaya yönelik şablonlar sağlar. Bir
Pixlr
Pixlr Yeni başlayanlar ve profesyoneller için ücretsiz bir çevrimiçi düzenleyici ve tasarım kaynakları sunar. Renk, çizim ve fotoğraf düzenleme araçlarına sahiptir. Pixlr'da katmanlarla çalışır, farklı efektler ve filtreler kullanırsınız. Eğer ilgileniyorsanız, yapabilirsiniz
Görüntü Optimizasyonu hakkında daha fazla bilgi
Büyük resimler web sitenizi yavaşlatabilir, bu nedenle bunları web için optimize etmek önemlidir. Yeniden boyutlandırarak ve sıkıştırarak resimleriniz için doğru resim biçimini bulmak, web sitenizin hızlı yüklenmesi için harikalar yaratabilir.
Ve şimdi iyi haberi biliyorsunuz: optimizasyonu yapmak çok kolay! Ayrıca, ihtiyaç duyduğunuzda geri dönüp bu makaleye başvurabilirsiniz.
Daha ileri düzey bir kullanıcıysanız ve SEO için görsellerin nasıl optimize edileceği hakkında daha fazla bilgi edinmek istiyorsanız, Google'ın bu videosunu izlemenizi öneririz. Bir web sitesi için resimlerinizi optimize etmeye yönelik bazı gelişmiş ipuçlarından geçer. Buradan izleyin:
Bir e-ticaret sahibi olarak ne kadar deneyimli olursanız olun, görsel optimizasyonunu asla unutmayın. En basit araçlar bile resimlerinizi web için uygun hale getirebilir. Resimlerinizi optimize ederek müşterilerinizin alışveriş deneyimini büyük ölçüde etkileyebilirsiniz. Ürün resimlerinizin hem güzel hem de hızlı yüklendiğinden emin olun!
E-ticaret yolculuğunuzun henüz başındaysanız ve bir çevrimiçi mağaza oluşturmanız gerekiyorsa, kontrol edin Lightspeed tarafından Ecwid. Kendiniz ücretsiz bir çevrimiçi mağaza kurmanıza olanak tanır, kodlama veya tasarım becerileri gerekmez. Mümkün olan en kısa sürede çevrimiçi satış yapmaya başlamanız gerekiyorsa mükemmel!
- Ürün Kategorisi Resimleri Nasıl Tasarlanır?
- Ürün Resimleri İçin Sinemagraflar Nasıl Oluşturulur?
- Ürün Görselleri Nasıl Optimize Edilir?
- Bir Görüntü Nasıl Yeniden Boyutlandırılır
- Görüntü Yeniden Boyutlandırıcılara Genel Bakış