WordPress sitenizde ilgi çekici, net ve hızlı yüklenen resimlere sahip olmak, bir kullanıcıyı/müşteriyi çekmenin en etkili yollarından biridir. Araba bayilerinin yeni modellerin lekesiz ve ışıltılı olduğundan emin olmak için bu kadar çok zaman harcamasının bir nedeni var. Bir ürünün görsel etkisi, genellikle başarı ve başarısızlık arasındaki karar verme veya kırma kararı olabilir. Çevrimiçi sergi salonları farklı değildir, ayrıca bir görüntünün yükleme hızınızı nasıl etkileyebileceği konusunda ek bir karmaşıklık vardır. Bir kullanıcının yüklenmesi 3 saniyeden uzun sürerse bir web sitesinden ayrılacağı iyi kullanılan ve ünlü bir ölçümdür. Bir web sitesinin yüklenmesi 3 saniyeden fazla sürüyorsa, sitenizdeki resimlerin bu nedenin bir parçası olma olasılığı yüksektir.

Peki bir WordPress site sahibi olarak sitenizde bulunan görsellerin hem kullanıcılara hitap etmesi hem de sitenizin hızlı yüklenmesini sağlamak için neler yapabilirsiniz. İlk içgüdünüz, görüntüyü 1800×1400 boyutundaki bir görüntüden 300×200 boyutundaki bir görüntüye küçültmek olabilir. Görüntü dosya boyutunuz artık çok daha küçük olabileceğinden, bunun sonucunda görüntü kalitesi ve kullanıcı deneyimi düşeceğinden, bu yanlış bir işlem olacaktır. Örneğin bir araba galerisi satış web siteniz varsa, müşteriler arabaya gerçekten iyi bakmak ve tüm özellikleri ve detayları görebilmek isteyeceklerdir. Görüntüyü çok daha küçülterek, otomobilin ayrıntılı bir şekilde incelenmesi artık imkansız hale geldi ve potansiyel müşteriyi hayal kırıklığına uğrattı ve başka bir yere bakmasına neden oldu.

Öyleyse seçeneklerin neler? Neyse ki, yüksek kaliteli, ancak büyük dosya boyutundaki BMP, denenmiş ve test edilmiş JPEG'den yeni ve yaygın olarak bilinmeyen WebP formatına kadar seçebileceğiniz düzinelerce farklı görüntü dosyası seçeneği vardır. Doğru biçimi seçmenin yanı sıra, hangi biçimi seçerseniz seçin, WP-Optimize aracılığıyla “sıkıştırma” olarak bilinen bir işlem uygulayarak görüntü dosyasının boyutunu ek olarak küçültebileceğinizi de unutmamak önemlidir.

Site hızı, web sitenizi tarayan Google botlarının sitenizi arama sonuçlarında sıralarken gözlemledikleri en önemli 10 faktörden biridir. Yükleme hızının düşük olması sitenizin sıralamasını kötü etkileyebilir ve sitenizi kolayca ilk sayfadan Google tarafından dizine eklenememesine neden olabilir. Google, siteleri arama algoritmalarında nasıl sıraladıkları konusunda çok katıdır ve sitenin yavaş yükleme süreleri nedeniyle kötü bir kullanıcı deneyimi sunduğunu görürlerse, siteyi tarama ve Google arama yoluyla keşfedilebilir hale getirme zahmetine bile girmeyebilirler. .

Hangi görüntü formatını seçmelisiniz?

Herhangi bir modern WordPress web sitesi için yüksek kaliteli görüntüler çok önemli olduğundan, hangi formatı kullanacağınızı, sitenizin performansını nasıl etkilediğini ve dosya seçiminizden en iyi şekilde nasıl yararlanacağınızı bilmeniz gerekir.

Web siteleri için en popüler iki resim dosyası formatı PNG ve JPEG/JPG'dir. w3techs'e göre , tüm web sitelerinin %70'inden fazlası bu dosya türlerini kullanıyor. Sitelerin yaklaşık %30'u SVG ve %22'si GIF kullanıyor.

Resimlerinizi yüklemek için kullandığınız dosya türü önemli bir rol oynadığından, resim dosyası türlerinin devreye gireceği yer burasıdır. Pek çok farklı dosya türü olduğundan, aşağıda en popüler olanları ve bunların artılarını ve eksilerini inceleyeceğiz:

Dosya türüne geçmeden önce, raster ve bitmap görüntüsünün ne olduğu gibi bazı kavramları anlamamız gerekir. Sıkıştırma nedir? Kayıplı ve kayıpsız sıkıştırma arasındaki fark nedir?

Sıkıştırma – Kayıplı ve Kayıpsız

Her iki sıkıştırma türü de dosya boyutunu küçültmeyi amaçlar, ancak asıl önemli olan neleri kaldırdıklarıdır. Kayıplı sıkıştırmada; görüntünün kalitesiyle ilgili önemli veriler kaldırılır. Bilgisayarınız görüntüyü yeniden yapılandırmada sorun yaşayabileceğinden, bu, bazı durumlarda pikselleştirilen görüntüye yansıyabilir.

Kayıpsız sıkıştırmada, görüntüde bulunan alakasız veriler (meta veriler gibi) küçültülür, bu da dosya boyutunun küçülmesine yardımcı olur. Bu süreçte görüntü kalitesi hiç etkilenmez.

Raster Vs Vektör

En yaygın olarak kullanılan görüntü dosyası türleri tipik olarak tarama tabanlıdır. Bu, her pikselle ilişkilendirilmiş sabit bir RGB renk değerine sahip oldukları ve tüm bu piksellerin birleştirilip bütün bir görüntü oluşturmak için kullanıldığı anlamına gelir.

Bu tür dosya biçimlerine örnek olarak jpg, png ve gif verilebilir.

Alternatif olarak, bir vektör görüntüsü, hiç pikselleştirilmeden sonsuza kadar ölçeklenebilen şekiller ve çizgiler kullanılarak oluşturulur. Vektörler, görüntünün kalitesini etkilemeden kullanıcıların değerleri değiştirmesine izin veren matematiksel formüller kullanılarak oluşturulur.

Artık görüntülerin temellerini gözden geçirdiğimize göre, artık farklı dosya türlerinin ayrıntılarına bakabiliriz.

JPEG:

Bu, sıkıştırılmış görüntü verilerini içeren bir dijital görüntü formatıdır. 10:1 sıkıştırma oranıyla JPEG görüntüler çok kompakt oldukları için kullanılır. JPEG formatı, önemli resim ayrıntılarını içerir ve internette fotoğraf ve diğer resimleri paylaşmak için en popüler resim formatıdır. JPEG görüntülerinin küçük dosya boyutu, kullanıcıların sitenizde fazladan depolama alanına ihtiyaç duymadan binlerce görüntüyü (örneğin bir sanat sitesinde) depolamasına da olanak tanır.

JPEG, fotoğraflar için iyi çalışan kayıplı bir sıkıştırma dosyası türüdür, ancak grafiklerle çalışırken PNG gibi başka bir format kullanmanız önerilir.

Bir JPEG resim dosyası örneği. Yükleme sırasında ayrıntı ve kalitenin korunduğunu görebilirsiniz.

PNG:

PNG, popüler bir bitmap görüntü formatıdır ve “Taşınabilir Grafik Formatı”nın kısaltmasıdır. Bu biçim, Grafik Değişim Biçimi'ne (GIF) alternatif olarak oluşturulmuştur. PNG, 24 bit RGB renk paletleri, gri tonlamalı görüntüler ve şeffaf arka planlar görüntüleme gibi bazı harika özelliklere sahiptir. PNG görüntülerinde yüksek kaliteli görüntüler veya grafikler üzerinde çalışırken kayıpsız bir veri sıkıştırma yöntemi de kullanılır. PNG görüntüleri, kullanıcıya geleneksel JPEG formatına göre görüntü üzerinde daha fazla kontrol ve seçenek verebildiklerinden, Görüntü düzenlemede de sıklıkla kullanılır.

PNG ayrıca kayıpsız bir sıkıştırma algoritması kullanır; bu, bu formatın JPG'den daha fazla veri tutabileceği anlamına gelir. Bir PNG resim dosyası kullanırken, kullanıcılar bu resimleri şeffaf bir arka planla da kaydedebilir. Kullanıcılar, bu formatı kullanarak, net bir arka plan gösterebilen katmanlı görüntülerle çalışma seçeneğine sahiptir (örneğin, arka plan duvarını değil, yalnızca aşağıdaki resimdeki çiçekler), kullanıcıların görüntüyü başka görüntülere ihtiyaç duymadan eklemesine olanak tanır. bir JPEG görüntüsünde yapmanız gerektiği gibi, onu kesip mevcut arka planı kaldırmak için. Bu, diyagramlar ve illüstrasyonlar gibi grafikler için tercih edilen seçim olmasının ana nedenlerinden biridir. PNG'lerin, standart fotoğraflar yüklemek yerine grafiklerle çalışan kullanıcılar için daha popüler olduğu bilinmektedir.

PNG görüntüsü yüksek kaliteyi korurken görüntü üzerinde daha fazla kontrole sahip olmanızı sağlar.

GIF:

Muhtemelen "GIF" terimini en iyi mesajlaşma uygulamalarında gönderdiğiniz sayısız kısa klipten biliyorsunuzdur. GIF, "Grafik Değişim Biçimi" anlamına gelir ve çoğunlukla ses olmadan animasyonu desteklemek için kullanılır.

JPEG ve PNG'den farklı olarak, GIF'ler daha niş bir durumda kullanılır ve tipik olarak statik görüntüler için kullanılmaz (bu mümkün olsa da). WordPress sitenizde bir GIF kullanıyorsanız, büyük olasılıkla ziyaretçilerinize basit bir animasyon veya işlem göstermek içindir. GIF'lerin sınırlı bir renk aralığı vardır ve en iyi şekilde basit grafikler için kullanılır. Kayıpsız sıkıştırma kullanırlar ve JPG'lerden daha küçük olma eğilimindedirler. Yükleme sürelerini (dosya boyutuna göre) artırabilecekleri ve 256 renkle sınırlı oldukları için genellikle sitenizde GIF'leri dikkatli kullanmanız önerilir.

Bir GIF görüntüsü örneği. Animasyonu oluşturmak için orijinal görüntünün kalitesi büyük ölçüde düşürülmüştür.

SVG:

Ölçeklenebilir Vektör Grafikleri (SVG), web dostu bir vektör dosya formatıdır. JPEG'ler gibi piksel tabanlı raster görüntü dosyalarının aksine, vektör dosyaları görüntüleri bir ızgara üzerindeki noktalara ve çizgilere dayalı matematiksel formüller aracılığıyla depolar. Bu, SVG gibi vektör dosyalarının kalitelerinden hiçbir şey kaybetmeden önemli ölçüde yeniden boyutlandırılabileceği anlamına gelir; bu da onları logolar ve karmaşık çevrimiçi grafikler için ideal hale getirir.

Vektörler yalnızca basit grafikler, şekiller ve çizimler için en iyisidir. SVG'ler, özellikle logonuzun duyarlı olmasını istiyorsanız ve Chrome, Firefox, Edge ve Opera dahil olmak üzere çoğu tarayıcı tarafından destekleniyorsa, logolar için iyi bir seçimdir.

Bir logo için kullanacağınız SVG formatındaki ayçiçeklerine bir örnek.

BMP:

BITMAP artık eski bir görüntü formatı olarak kabul ediliyor. BMP, görüntüleri kayıpsız bir görüntü biçiminde yükler, bu da sıkıştırma eksikliği nedeniyle büyük dosya boyutlarına neden olabilir. Yükleme hızının önemi ve site yaratıcılarının resim boyutlarını nasıl minimumda tutmak istedikleri (SVG ve JPEG formatlarının popülaritesinden bahsetmiyorum bile) düşünüldüğünde, bu format çevrimiçi resimler için büyük ölçüde kullanılmaz hale geldi.

BMP formatında yüklerken görüntünün orijinal kalitesi korunur, ancak dosya boyutu sitenizi çok yavaşlatır ve önerilmez.

WebP:

Bu resim formatı, 2010 yılında Google tarafından oluşturuldu ve JPEG ve PNG'ye göre daha iyi kayıplı ve kayıpsız sıkıştırma performansı gibi birçok avantajı olduğu için sitelerine çok sayıda resim yükleyen kişiler arasında popüler olmaya başladı.

WebP ayrıca gelişmiş sıkıştırma performansı göz önüne alındığında genellikle JPEG veya PNG formatlarından daha küçük dosya boyutlarında yükleme yapar ve sitenizde daha az yer kaplayarak daha hızlı yüklenmesini sağlar. Tüm tarayıcılar tarafından desteklenmese de, Chrome, Firefox, Edge ve Opera dahil olmak üzere en popüler tarayıcıların tümü tarafından desteklenir.

JPEG ve PNG kadar iyi bilinmese de, WebP gelecekte tercih edilen görüntü formatı olabilir.

Çözüm:

WordPress sitenizde kullanılabilecek birçok görüntü formatı türü vardır ancak görüntünün amacını değerlendirmek önemlidir. Örneğin siteniz bir düğün fotoğrafçısı içinse, yine de hızlı yüklenen ve kullanıcı dostu olan ( JPEG ) yüksek kaliteli görüntüler elde etmek isteyeceksiniz. Ancak, çevrimiçi bir poster mağazasında görsel satıyorsanız, mümkün olduğunca fazla ayrıntı ve görsel bilgisi bulundurmak isteyeceksiniz ( PNG ).

Genel bir kural olarak, yalnızca çevrimiçi mağazanız, blogunuz, portföyünüz, sosyal medyanız veya sosyal medya siteniz için standart görseller yüklüyorsanız, görsellerinizi standart bir JPEG formatında yüklemeniz ve ardından WP-Optimize'ı kullanmanız önerilir. resimlerinizi daha da sıkıştırmak için

Bununla birlikte, resimlerinizi geleceğe hazır hale getirmek ve yükleme hızınızı mümkün olduğunca artırmak istiyorsanız, WebP üstün kayıplı ve kayıpsız sıkıştırma sunarken aynı zamanda yüksek düzeyde ayrıntıları korur. Neye karar verirseniz verin, pazar lideri sıkıştırma için görüntülerinizi her zaman WP-Optimize kullanarak sıkıştırmayı unutmayın.