WebP Görselleri ve WordPress: Neden ve Nasıl Kullanılır?

WordPress web sitenizi hızlandırmak istiyorsanız, WebP görüntü formatını kullanmak iyidir. Web sitenizin içeriğinin yavaş yüklenmesinin ana sorunu, web sitenizdeki büyük fotoğraflardan kaynaklanmaktadır.

Ancak görüntü sıkıştırıcı, kullanıcılarınızı görüntü dosyasının megabaytlarını yüklemeye zorlayabilir ve bağlantılarının taranmasını geciktirebilir. Bununla birlikte, kompresörler nedeniyle web sitenizin görüntüleri bulanık olabilir.

Ancak görüntüleri hiçbir şeye sıkıştıran ancak görüntülerinizin kalitesini etkileyen bazı dosya biçimleri bile var. Kayıplı JPEG sıkıştırmasının işleyişinden hoşlanmıyorsanız ve görüntülerinizin zar zor görünmesine neden oluyorsa, WebP kullanmayı seçmelisiniz.

WebP görselleri ve WordPress ile neyi kastediyorsunuz ve ne zaman kullanacaksınız ve WordPress tabanlı web sitenize WebP'yi nasıl ekleyebilirsiniz?

Tüm bu soruların cevaplarını bu blogda bulacaksınız. Ayrıca, sayfa yükleme sürenizi etkilemeden ve daha hızlı yüklenmesini sağlamadan resim boyutlarını en aza indirecek bir çözüm bulacaksınız.

WebP: Bu ne anlama geliyor?

Kullandığımız en popüler resim formatı, www'nin başlangıcından beri yaygın olarak kullanılmaktadır. Ve evet, JPEG, PNG ve GIF gibi popüler görüntü formatları görevlerini en iyi şekilde yerine getirir. Peki ne ve neden biraz daha fazla görüntü formatına ihtiyacınız var?

Diğer görüntü formatı yöntemlerini aramanın asıl sorunu, bu formatların görüntüleri en iyi şekilde sıkıştıramamasıdır.

İnternetin kullanımı her geçen gün artıyor. Bu nedenle, giderek daha fazla insan, teknolojinin küçük parçaları olan mobil cihazları aracılığıyla herhangi bir bilgiyi aramayı tercih ediyor, yani masaüstü bilgisayarlara kıyasla daha az güç paketi.

Tüm dünyada mobil bağlantılar mevcuttur, bu nedenle geleneksel kablolu internetten daha yavaşlayabilir.

2010 yılında, uzun süredir devam eden bir soruna alternatif bir seçenekle gelen WebP görüntüleri ve WordPress duyuruldu. Mükemmel sıkıştırma ve önceki görüntü biçimlerini kullanarak elde edebileceğinizden daha kaliteli görüntüler sunar.

WebM ile benzer hedeflere sahiptir. WebM, ses ve videoyu web için optimize ederken sıkıştırmak anlamına gelir.

WebP, hem kayıpsız hem de kayıplı sıkıştırmayı kullanır. Bununla birlikte meta verileri, renk profillerini, şeffaflığı, animasyonları ve daha fazlasını da destekler. Böylece tüm büyük tarayıcılarla da uyumludur.

Ancak internet explorer, KaiOS ve diğer safari sürümleriyle daha iyi çalışmaz. Ama yine de eski safari sürümü de dahil olmak üzere bu tarayıcıları kullanan çok fazla kullanıcı var.

WebP neden gerekli kabul edilir?

WebP görselleri ve WordPress üzerinde Google çok fazla araştırma yaptı. Ancak her seferinde bir algoritmanın kayıplı görüntülerde %25-34 daha küçük, kayıpsız görüntülerde ise %26 daha küçük sıkıştırabileceğini buldular.

Bu açıkça, WebP'nin tutarlılık sağlamaya dayandığından sıkıştırmayı daha iyi yaptığı anlamına gelir. Bununla birlikte PNG gibi kayıpsız bir algoritma ile karşılaştırıldığında bile resimlerinizin kalitesinden asla bir şey kaybetmezsiniz.

Bu, WebP kullanmanın avantajıdır, ancak görüntüleri sıkıştırmak için hala eski teknikleri kullanan çok sayıda kullanıcı var.

Ancak, WebP özelliklerini kullanan web sitelerinin yalnızca %0,3'ü vardır. Trend WebP ile artıyor ama yine de insanlar daha az kullanılan teknolojiye bağlı kalıyor.

WebP'nin faydaları hakkında konuştuğumuzda bu çok şaşırtıcı.

Bu, WebP'nin şeffaflık, animasyonlar vb. ve bazı yaygın tarayıcılarla uyumsuzluk içeren bazı destek özelliklerini sağlayamaması nedeniyle bir sorun olabilir.

Ayrıca PNG gibi diğer görüntü biçimlerinden WebP'ye geçiş yapmak kolay değildir. WebP görsellerini bilgisayarınıza kaydederek web sitenize görsel yükleyemezsiniz. Bununla birlikte, ilgilenmeniz gereken birkaç adım daha bulunmaktadır.

Ancak, web sitenizin içeriğinin hızlı bir şekilde yüklenmesini gerçekten istiyorsanız, biraz daha çaba sarf etmeye değer.

WebP ve diğer görüntü dosyası biçimi türleri

Çok fazla görüntü dosyası formatı var. Hepsi, belirli bir görevi gerçekleştirmek için harika özellikler sunar. Bazı dosya biçimleri görüntüleri iyi sıkıştırmak için kullanışlıdır, bazıları ise animasyonları destekler.

Saydam bir arka plan sunacak başka biçimler de bulacaksınız. WebP'nin her alternatif için en iyi seçim olduğunu söylemiyoruz ama evet, çeşitli durumlar için kullanılabilecek bazı özellikler sunuyor.

Küresel olarak kullanılan bazı yaygın görüntü dosyası biçimlerini görelim

• PNG: PNG, en yaygın dosya biçimi olarak kabul edilebilir. Bu dosya biçimi, kayıpsız sıkıştırma için daha popülerdir ve en iyi çizim ve fotoğrafın çevrimiçi olarak görüntülenmesidir.
• TIFF: Başka bir dosya biçimi, sıkıştırması olmayan TIFF'dir. Bu görüntü tüm övgüleriyle sergileniyor. TIFF olarak kaydedilen dosyaların çoğunun büyük dosya boyutuna sahip olmasının nedeni budur. Web için bu en iyi seçenek değil.
• GIF: Animasyonlarla desteklenen bir diğer format GIF'tir. Ancak 250'den fazla rengi de destekleyen en eski dosya formatı olduğunu söyleyebiliriz. GIF formatında kaydedilen resimler düşük kaliteli ve çirkin görünecektir. Animasyon arıyorsanız GIF formatını seçmelisiniz.
• EPS ve SVG dosyaları: Bu ikisi kendi dernekleridir. Bu, piksellerden oluşturulmadıkları için ölçeklenebilir ve net olan vektör görüntülerini kaydedecek ve gösterecektir.
• WebP: WebP'nin görüntü kalitesi, dosya boyutu daha küçük olan PNG veya JPG ile aynıdır. Ayrıca, animasyonları ve şeffaflığı destekler.

Daha küçük görüntüler karşılığında bir tür görüntü kalitesini kaybetme konusunda rahatsanız, WebP sizin için ideal bir seçimdir.

Portföy web sitesi gibi görüntü kalitesinin önemli bir rol oynadığı bir proje üzerinde çalışmıyorsanız, o zaman ödün vermek iyidir. Hayır ise PNG iyi bir seçenektir. Bunun yerine TIFF görüntülerini kullanan çok az kişi vardır, aksi takdirde WebP işiniz için ideal bir seçenektir.

WordPress'inize WebP görüntülerini nasıl yükleyebilirsiniz?

WebP görsellerini ve WordPress'i yüklemenize yardımcı olacak iki farklı yolla karşılaşacaksınız.

• 1. yöntem, WebP görüntülerini web sitenize manuel olarak yüklemektir.
• 2. yöntem, WebP görüntülerini eklentilerle web sitesine yüklemektir.

WebP görüntülerini web sitenize almak için bir eklenti kullanmanızı öneririz çünkü bu, kodlama işleriyle uğraşmanız gerekmediğinden ve eklentilerle çalışırken çok az kurulum gerektiğinden en kolay yoldur.

Ancak WebP görüntülerini manuel olarak almayı seçerseniz, önce WebP görüntülerini almanız gerekir. WebP olarak görüntüleri veya bilgisayarınıza kaydedemezsiniz, uzantıyı değiştiremezsiniz, özel bir dönüştürücüye ihtiyacınız olacaktır.

Bunun için Google'ın WebPShop olarak bilinen Photoshop eklentisinden yararlanabilirsiniz. Veya ayrıca bir Çevrimiçi WebP dönüştürücü kullanabilir ve görüntüleri bilgisayarınıza yükleyebilirsiniz.

WebP görüntüsünü yüklemeye hazır hale getirdiğinizde, WebP görüntüsünü HTML veya CSS'de sergileyebilirsiniz. Desteklenmeyen tarayıcılar için yedek görüntüleri belirlediğinizden emin olmanız gerekir. Ancak bundan ziyade, HTML'deki başka bir resme atıfta bulunmak gibidir.

Bununla bir sorunu var:

WordPress bunu yapmanıza izin vermediği için bir medya yükleyici yardımıyla WebP görüntülerini yükleyemezsiniz. yalnızca bu dosya türünün tarayıcılarınız tarafından desteklenmediğini belirleyerek hatayı gösterecektir.

Sunucunuza WebP görüntülerini manuel olarak yükleyebilir ve web sitesini bunları sergilemek için uygun şekilde yapılandırabilirsiniz, ancak bu çok çaba gerektirir.

İşlemi basitleştirmek için bazı WordPress eklentilerinden yararlanabilirsiniz. Eklentiler, dönüştürme işlemini çok daha kolay gerçekleştirmenize yardımcı olacaktır. Ancak, resim eklemek için kodu düzenlemek için çok fazla bir görev yapmanız gerekmez.

1. Hayal et

Imagify'ın sadece bir WebP dönüştürme olmadığını, yüklediğiniz görselleri ve küçük resimleri optimize etmenize yardımcı olan bir eklenti olduğunu söyleyebilirsiniz.

Imagify'a üç farklı sıkıştırma seviyesi dahildir, yani ultra (maksimum kayıplı sıkıştırma), normal (kayıpsız) ve agresif (kayıplı).

Bulk optimizer, yüklenen tüm resimleri sıkıştırmanıza yardımcı olur. Böylece yedek sürüm kaydedilecektir, bu nedenle görüntüleri sıkıştırmak istemiyorsanız geri alabilirsiniz.

Imagify yardımıyla web sitenize bir resim eklediğiniz anda, farklı bir WebP sürümü ekleyecektir. Bu şekilde web sitenizde optimize edilmiş WebP görsellerini sergileyebilirsiniz.

Imagify yardımıyla her ay 25 MB boyutundaki resimleri ücretsiz olarak sıkıştırabilirsiniz.

2. EWWW Görüntü İyileştirici

En popüler bir diğer WordPress görüntü iyileştirici eklentisi EWWW'dir. Bu eklenti bir WebP dönüştürücü olarak ikiye katlanır. Sınırsız sayıdaki görselleri de ücretsiz olarak sıkıştırabilirsiniz.

Dolayısıyla bu eklentiyle çalışırken aylık veri sınırları hakkında endişelenmenize gerek yok. Ayrıca bir toplu yükleyiciden oluşur. Ancak, medya kitaplığınıza kaydedilmiş olsun ya da olmasın tüm görüntüleri sıkıştırır.

Bu eklenti ile WebP mevcuttur. Tüm süreç otomatiktir. Orijinal görüntüleri değiştirmeden ayrıca sıkıştırma, geç yükleme ve sayfa boyutu ölçeklendirmesi elde edeceksiniz.

3. Kısa Piksel Görüntü İyileştirici

ShortPixels ile görüntüleri sıkıştırmak için çok çeşitli özellikler elde edeceksiniz. Birkaç tıklamayla özelliklerini kullanmaya başlayabilirsiniz.

Böylece çok kolay bir şekilde WebP sürümlerini otomatik olarak oluşturabileceksiniz. İster toplu optimize edici ile ister doğrudan yükleyerek resimleri optimize edebilirsiniz.

Ek olarak, resim dosyası biçimini PNG'den JPG'ye dönüştürmenize, resimleri yeniden boyutlandırmanıza, küçük resimleri optimize etmenize, resimleri optimize etmenize, meta verileri kaldırmanıza ve optimize edilmemiş resimleri sunucunuzda yedeklemenize yardımcı olacaktır.

Bu eklenti aslında bir kredi sistemi temelinde çalışır, yani aylık 100 görsel krediniz olduğunda, o zaman daha fazla sıkıştırmak için ayda 100 görsel sıkıştırabilirsiniz, daha fazla kredi satın almanız gerekecek.

Çözüm:
WordPress tarafından WebP aslında desteklenmemektedir, ancak web sitenizde yine de WebP görüntüsünü kullanabilirsiniz. Doğrudan yüklemeye çalışırsanız çalışmayacaktır. Ancak WebP'yi web sitenize çok kolay bir şekilde eklemek için bir dizi eklenti bulacaksınız.