WordPress ile JPG veya PNG Yerine WebP Görüntüleri Nasıl Sunulur

Google, internet besin zincirinin en üstünde yer alır. Şirket, çevrimiçi olan birçok şeyi etkiler (veya dikte eder). Ve yeni görüntü formatı WebP bu trendi sürdürüyor. Sayfa yükleme hızının giderek daha önemli hale gelmesiyle (öncelikle Google Page Rank nedeniyle), geliştiriciler ve tasarımcılar yükleme sürelerini azaltmanın en kolay yolu olarak görüntü sıkıştırmaya bakıyorlar. Google'ın WebP görüntüleri, tipik JPG veya PNG görüntülerinden ~%30 daha küçük gelir ve eşdeğer kaliteyi korur. Ve hepsinden önemlisi, resimlerinizi manuel olarak WebP'ye dönüştürme konusunda endişelenmenize gerek yok.

Bu makalede, varsayılan olarak henüz desteklenmese de, bu yeni görüntü biçimini WordPress ile nasıl kullanacağınızı göstereceğiz.

Hadi hadi bakalım.

Youtube Kanalımıza Abone Olun

WordPress'te WebP Sunmak için Optimole Kullanma

WebP, bir görüntü formatı olarak WordPress'te varsayılan olarak desteklenmez. Bir .webp görüntüsü yükleyebilirsiniz, ancak bir SVG dosyasına çok benzer şekilde, hata mesajları aldığınızı göreceksiniz. Ve yine, WordPress ile SVG dosyalarını kullanmak gibi, WP sitenizi tam olarak yakınlaştırmak için eklenti aracılığıyla kolay bir geçici çözüm var.

Denediğimiz WebP hizmetlerinden favorimiz Optimole. Minimum ince ayar ile çalışmasını sağlama konusunda en iyi şansımız oldu, bu yüzden onu nasıl kuracağınız konusunda size yol göstermek ve WordPress kurulumunuzun WebP'sini mümkün olduğunca acısız bir şekilde uyumlu hale getirmek istiyoruz.

İlk olarak, açıkçası, eklentinin kendisini indirip kurmak isteyeceksiniz. WP.org deposundadır ve tamamen ücretsizdir. Tıpkı ona güç veren API tabanlı hizmet gibi (bir noktaya kadar). PHP kullanarak geleneksel görüntüleri anında WebP'ye dönüştürmek mümkün olsa da, her web barındırıcısı sunucunuza bu izni vermez. Bu izniniz varsa, WebP Express eklentisine de bakabilirsiniz. Onunla çok fazla kontrol sahibi olursunuz, ancak sorunsuz çalışması için daha fazla ince ayar yapılması gerekir.

Optimole'u WordPress web sitenize yükledikten ve etkinleştirdikten sonra, Media – Optimole'da yeni bir menü seçeneği bulacaksınız .

Optimole API Anahtarınız

Herhangi bir ayar veya konfigürasyona erişmeden önce bir Optimole hesabınızın olması gerekir. Zaten bir tane ayarladıysanız, Zaten Bir API Anahtarım Var düğmesini tıklayabilirsiniz. Değilse, API Anahtarını Kaydedin ve E-postayla Gönderin . Bir API anahtarının temel hesabı ücretsizdir ve bu katmanda yaklaşık 5.000 ziyaret alırsınız. Bundan daha fazlasına ihtiyacınız varsa, mevcut fiyatlandırma katmanları vardır.

Optimole, ziyareti “ sitenizi bir kez ziyaret eden herkes [. . .] Her kullanıcı yalnızca bir kez sayılır. Sitenizde ne yaptıkları, kaç resim indirdikleri veya kaç sayfa ziyaret ettikleri önemli değil; sadece bir kullanıcıdır. Sitenizden ayrılıp aynı gün geri dönerlerse, yine de yalnızca bir kullanıcıdırlar. ”

Ölçülen ziyaretler bittiğinde, yalnızca WebP görüntüleri sunulmayı durdurur. Resimleriniz kendileri değil. API anahtarını en üstteki Optimole kontrol panelinizde bulacaksınız.

Sadece WordPress kontrol panelinize yapıştırın ve WordPress ile WebP görüntüleri sunmaya hazır olacaksınız.

Optimole WordPress Panolarınız

WordPress kontrol panelinizde WebP optimizasyonunuz hakkında bazı temel bilgiler edinirsiniz. Bu, hızlandırmanın gerçekte ne kadar başarılı olduğunu sorun gidermenize ve ölçmenize olanak tanır. Bu şekilde içeri girip çeşitli ayarları değiştirebilirsiniz.

İlk olarak, API'ye eklenmiş hesabı görürsünüz ve ekranın alt kısmında, eklenti en son optimize edilmiş görüntüleri görüntüler. Sunulan WebP görsellerinin WordPress'e yüklediğiniz orijinal görsellerden ne kadar küçük olduğunu görebilirsiniz.

Ardından, en üstte Olası Sorunlar sekmesi var. Hiç kimse sekmenin vurgulanmasını sevmez, ancak hepimizin hangi çakışmaların ortaya çıkabileceğini de görmemiz gerekir.

Karşılaştığımız birincil sorun, diğer görüntü sıkıştırma ve teslim eklentileriyle ilgili. Yukarıdaki resimde görebileceğiniz gibi, Jetpack eklentisi, Photon APIT aracılığıyla Optimole'ye benzer şekilde çalışır, böylece kafaları çarpabilirler. Bizim için bu, ziyaretçiye hiçbir şekilde teslim edilmeyen bir görüntü olarak tezahür etti. TinyPNG veya Smush gibi diğer sıkıştırma servisleriyle hiçbir sorunumuz olmadı.

Gösterge Tablolarını Kullanma

Sitenizin WebP ile nasıl çalıştığı hakkında daha ayrıntılı bilgi istiyorsanız, harici Optimole panosu bu bilgileri sizin için içerir.

Yalnızca 9,5 kat daha küçük yerine, sunulan gerçek dosya boyutlarını görebilirsiniz. 30 günlük bir süre boyunca hangi dosyaların kendilerinin olduğu gibi.

Ayrıca Optimole (veya WP) panosunda Filigranlar ayarlayabilirsiniz, böylece birisine WordPress sitenizden bir WebP sunulduğunda, logonuz otomatik olarak yanar. Bu basit bir işlemdir ve opaklık, konum vb. üzerinde kontrol sizde olur.

Esasen aynı şeyleri her iki panodan da yapabilirsiniz. Ya WordPress'teki Ayarlar sekmesi altında ya da Optimole'deki harici tireyi ziyaret ederek. Tamamen neyle rahat olduğunuza ve herhangi bir zamanda hangi düzeyde veriye ihtiyacınız olduğuna bağlıdır.

Ek olarak, dosya adlarına dayalı olarak sıkıştırma düzeyini, gecikmeli yüklemeyi ve belirli görüntülerin ne zaman/veya ne zaman WebP olarak sunulacağını kontrol edebileceksiniz. Bunların hepsini Media – Optimole'un Ayarlar sekmesinde bulacaksınız .

Toplama

WebP'yi WordPress web siteleri ile kullanmanın en iyi yanı, dosyalarla manuel olarak çalışmak zorunda olmamanızdır. Ekstra yükleme yok, ekstra sıkıştırma süresi yok, hiçbir şey yok. API'lerin çalışma şekli nedeniyle, tüm hesaplama ve işlemler gerçek zamanlı olarak anında çalıştırılır. Google, JPG veya PNG yerine WebP kullanarak interneti gerçekten daha hızlı çalıştırdı. Ancak en büyük fayda, boyutları önemli ölçüde küçültülse bile görüntülerin aynı kaliteyi korumasıdır. Google'ın, sitenizi hızlandırmak için biçimlerini kullanmanızı sağlamak için kendi kendine hizmet ediyor olabilir, böylece sizi daha üst sıralarda bulabilirler, son kullanıcı deneyimi de daha iyidir. Ve sonunda önemli olan da bu.

Web sitenizin ziyaretçilerine WebP görselleri sunma konusunda ne düşünüyorsunuz?

Makale özellikli görsel vladwel / Shutterstock.com