Çevrimiçi mağazanızı hızlandırmak için resimleri nasıl optimize edersiniz?
Hızlı siteler gibi insanlar; Hızlı siteler gibi arama motorları. İnternetteki herkes hızlı yükleme sitelerini sever. Web’i nasıl kullandığınızı düşünün: Özellikle bir şey satın almak istiyorsanız, sayfaları yüklemek için 10 saniye bile beklemek çok sinirli olabilir. Bir e -ticaret sitesi sahibi olarak, çevrimiçi mağazanızın hızını nasıl kolayca artırabilirsiniz? Web için tüm resimlerinizi optimize ederek. Bu neden önemli? Nasıl başlıyorsunuz ve ne yapmalısınız? Tüm bu soruların cevaplarını aşağıda bulacaksınız.
Sitenin hızı çevrimiçi mağazanız açısından neden önemlidir? KissMetrics’e göre, web sitesinin performansıyla ilgili sorunları olan web alıcılarının% 79’u tekrar satın almak için siteye geri dönmeyeceklerini söylüyor. Bu büyük bir yüzde. Arama motorları, yavaşça içeren çevrimiçi mağazaları cezalandırır – ancak daha da önemlisi kullanıcılar. Siteyi satın almadan terk ettiler, asla geri dönmediler. Siteniz mümkün olan en kısa sürede yüklenmezse, satışları kaybedebilirsiniz. Siteniz ne kadar hızlı? En kısa sürede. Kulağa belirsiz gelebilir, ancak bu istatistikleri düşünün:
İnsanların% 47’si web sayfalarının iki saniye veya daha kısa sürede yüklenmesini bekliyor.
Ziyaretçilerin% 40’ı yüklenmesi üç saniye veya daha fazla süren bir sayfadan ayrılacak.
Daha fazlasını söylemeliyim? Web sitesi ziyaretçileri sayfaları yüklemek için uzun süre beklemez veya gerekli olması gerekir. Web sitenizin hızını nasıl bulabilirsiniz? Çevrimiçi olarak, sitenizi tarayacak ve size bir hız puanı verecek birkaç ücretsiz araç vardır, en büyük sorundan ve nasıl düzeltileceğinden adım adım ayrıntılarla birlikte. Site masaüstüne ve mobil cihazlara yüklenir.
Pingdom Sayfa Hızı, sayfanızın boyutunu ve açık süreyi açıklar.
GTMetrix, hız sorunlarına yardımcı olan ve öncelik veren görseller içerir.
Peki çevrimiçi mağazanızı nasıl hızlandırıyorsunuz? Başlamak için en iyi yerlerden biri, web için resminizi optimize etmektir.
Fark ne? Kısacası, PNG daha iyi kaliteye sahiptir ve şeffaflığa izin verir, ancak görüntü dosyasının boyutu daha büyüktür. JPEG kalite kadar iyi değil, ancak görüntü dosyasının boyutu genellikle çok daha küçüktür. PNG de loksian değildir, yani düzinelerce kez düzenleyebilir ve saklayabilirsiniz ve kalite azalmayacaktır. Öte yandan JPEG, her tekrar sakladığınızda kayıp ve kaliteyi azaltır. Her formatı ne zaman kullanmalıyım? JPEG birçok durumda en iyi bahis olacaktır, çünkü görüntü kalitesi ve dosya boyutu arasında iyi bir uzlaşmadır. İyi bir pratik kural olarak, her biçimi ne zaman kullanacağınız ayrıntılar.
PNG ne zaman kullanılır:
Şeffaf arka plana sahip görüntüler için
Opaklıklı görüntüler için
Logolar veya simgeler gibi daha küçük görüntüler için
Üstünde metin bulunan görüntüler için
Çok farklı renk kullanmayan ekran görüntüleri veya görüntüler için
Ayrıntılı görüntü kalitesini ve dosya boyutunu korumak istediğinizde önemli değil
JPEG ne zaman kullanılır:
Fotoğraflar ve gerçekçi görüntüler gibi birçok farklı renkte görüntüler için
Ürün görüntüleri ve arka plan için
Adım 2: Görüntünüzün boyutunu değiştirme Ürün sayfasına 3.000 piksel genişliğe sahip görüntüler yüklerken tarayıcının iki kat daha yüksek sesle çalışmasını sağlarsınız.
Tarayıcı önce orijinal 3.000 piksel görüntüyü yüklemeli, ardından görüntünün yüklendiği alana uyacak şekilde daha küçük boyutlu görüntüyü yeniden yüklemelidir. Örneğin: Web sitesi içerik genişliğiniz 800 piksel ise, ziyaretçi tarayıcınız 3.000 piksel görüntü artı 800 piksel görüntü yüklemelidir. İşlemi tek bir web sayfasında sahip olduğunuz resim sayısıyla çarpın. Nasıl hızlı bir şekilde oldukça korkunç bir soruna dönüşebileceğini görüyor musunuz? Web sitenize herhangi bir resim yüklemeden önce, önce ihtiyacınız olan boyutu kontrol edin. Bu WooCommerce web sitesinde, örneğin, ürün görüntüleri 460px x 460px’de görüntülenir. Önemli: Görüntü dosyası boyutu ve görüntü boyutu iki farklı şeydir. Görüntünün boyutu (460px x 460px) yukarıdaki ekran görüntüsünde gösterilmiştir. Görüntü dosyasının boyutu gerçek dosyanın ne kadar büyük (92.461 kb gibi). Bu, görüntüleri sunucunuzda saklamak için gereken alan miktarıdır. Dosya boyutu ne kadar büyük olursa, görüntüyü yüklemek için gereken süre o kadar uzun olur.
Web sitenizdeki çoğu görüntünün 150 kb’den daha büyük olmadığından emin olmak istiyorsunuz, ancak görüntüsünün amacına bağlı olarak 100 kb’den az olmalıdır.
Google Chrome kullanıyorsanız, resminiz için alanın boyutunu bulmanıza yardımcı olmak için bir müfettiş kullanabilirsiniz. Sitenize gidin ve genişliği araştırmak istediğiniz alanda sağa tıklayın. Ardından “Kontrol Et” i tıklayın. Altta bir araç çubuğu görünecektir. Web sitenizin HTML bölümünü sıralayabilir, imleci üste yönlendirebilir ve bölümün genişliğini görebilirsiniz. Örneğin, blog yayınınıza resim eklemek istiyorsanız, bu boyutta veya daha küçük olan görüntüleri yükleyebilmeniz için içerik alanınızın maksimum genişliğini bilmeniz gerekir. Görüntünüzün alanı belirlemek için Müfettiş aracını açın. . Aşağıdaki örnekte, görüntünüz tarafından işgal edilecek alanın boyutu 1.080 pikseldir. Şimdi biliyorsunuz, web tarayıcısının farklı boyutlarda (yukarıda belirtildiği gibi) iki görüntü içermesini önlemek için, görüntünün boyutunu 1.080 piksel veya daha küçük bir genişliğe değiştirmeniz gerektiğini biliyorsunuz. Adım 3: Görüntünüzü Web için Kaydet Çoğu resim düzenleme yazılımı, görüntü dosyasının boyutunu ayarlamaya yardımcı olan “Web için Kaydet” seçeneğine sahiptir. Photoshop’ta “Web için Kaydet” ü, Dosyayı Aç> Dışa Aktar> Ekranınızın üst kısmındaki menü çubuğundan web için kaydedin.
Yazılımınız genellikle dosya boyutu ve görüntü kalitesi arasında hoş bir ortam bulmak için görüntü kalitesi çubuğunu etkinleştirmenize olanak tanır.Photoshop’ta, görüntünüzü orijinal görüntünün solda olduğu ekranda yan yana ve sağda saklanan yeni bir resim önizlemesi görebilirsiniz.Aşağıdaki ekran görüntülerinde görüntü kalitesi anahtarlarını vurguladım.Görüntü kalitesini izlerken görüntüyü mümkün olan en düşük dosya boyutuna ayarlamak isteyeceksiniz.Kalite ne kadar düşük olursa, dosya boyutu o kadar küçük olduğunu unutmayın.Ayrıca lekeler ve lekeler istemediğinizi unutmayın.Bu nedenle, resminizi kaydetmeden önce sağ taraftaki önizlemeyi gözden geçirmek önemlidir.Bu seçeneğe sahip diğer resimleri düzenleme araçları:
Eskiz: https://www.sketch.com/
Pixlr: https://pixlr.com/
Tamamlandı!Görüntü hızlandırma özellikleri mevcut görüntüler ve yeni görüntüler için geçerlidir, böylece hız artışlarını hemen görmeye başlayacaksınız.Ayrıca jetpack tembel görüntü özelliklerinden yararlanmak isteyebilirsiniz.Tembel görüntüler yalnızca site ziyaretçileri tarafından sayfada görülen görüntüleri içerir ve kullanıcı aşağı kaydırıncaya kadar ekran dışındaki görüntüleri geciktirir.Bu, bant genişliğinin endişe kaynağı olduğu mobil cihazlar için çok yararlıdır.Etkinleştirme: Jetpack’i Aç> Ayarlar> Performans.
Performans ve Hız bölümüne gidin.
Resim için tembel yükleme.
Sonuç olarak, çevrimiçi mağazaların görüntü boyutlarına özel dikkat etmeleri gerekmektedir, çünkü bu resim ürünlerini satmak için çok önemlidir.Kaliteden ödün vermeden görüntü dosyanızın boyutunu mümkün olduğunca küçük tutmayı unutmayın.Bu, mağazanızın hızını artırmanın ve daha fazla trafiği satışlara dönüştürmenize yardımcı olmanın en kolay yollarından biridir.
