WebP Görüntüleri WordPress'te nasıl çalışır?

Web sitemizin yükleme hızının, arama motorlarında iyi bir şekilde konumlandırılması söz konusu olduğunda önemli bir faktör olduğundan daha önce birden fazla kez bahsetmiştik. Ve Google Speed'de zirveye çıkmanız gerekmese de, görüntü optimizasyonu ile ilgili herhangi bir çaba, SEO'yu iyileştirmede özellikle önemlidir.

WordPress topluluğu bunun çok iyi farkındadır ve bu nedenle, en son sürüm 5.8'de WebP görüntü biçimini desteklemek için işlevsellik ekledi.

WebP Görselleri Nedir?

WebP, 2010 yılında Google tarafından PNG ve JPG gibi biçimlere alternatif olarak geliştirilmiş, benzer görüntü kalitelerini korurken çok daha küçük dosya boyutları üreten bir görüntü formatıdır. Diğer formatlardan farklı olarak WebP, şeffaflık ve animasyonun yanı sıra kayıplı ve kayıpsız sıkıştırmayı da destekler.

Bu özelliklerle bile WebP, alternatiflerine göre her zaman daha küçük dosya boyutları sunar. Bu resim biçimlerinin Google karşılaştırmalı çalışmasında, WebP kayıplı resimlerin JPG'lerden ortalama %30 ve PNG'lerden %25 daha küçük olduğu bulundu.

Ayrıca web sitenizin optimizasyon seviyesinin bir değerlendiricisi olan Google PageSpeed ​​Insights, web sitenizin yüklenme hızını artırmak için fırsatlardan biri olarak modern resim biçimlerini kullanmanızı önerir.

WebP'de tüm resimlere sahip olmanız gerekip gerekmediğini düşünürken aklınıza gelebilecek sorulardan biri, farklı tarayıcılar için mevcut destektir. İsteyeceğiniz son şey, okuyucularınızın görüntüleri düzgün bir şekilde görememesidir.

Ve gerçek şu ki, her birinde destek artıyor. Şu anda zaten %95 destekten bahsediyoruz.

Görüntüleri WebP'ye Dönüştürme

Kütüphaneye bir WebP imajı yüklemek için tabi ki ilk elimizde olması gereken şey söz konusu formattaki imajdır. Bir resim bankasından bir resim indirirseniz, onu mutlaka JPEG veya PNG formatında indirirsiniz. Yani ilk göreviniz görüntüyü bu biçime dönüştürmek olacaktır. Hangi alternatiflerimiz var?

Görüntü Tasarım Araçları

Diğerlerinin yanı sıra Sketch, Adobe Photoshop veya Cloudinary gibi bazı görüntü tasarım araçları, herhangi bir görüntüyü WebP formatında kaydetme seçeneğini içerir. Dönüştürmek istediğiniz görüntüyü açıp yeni formatta kaydetmek kadar basit.

Ancak bu sizin durumunuz değilse, endişelenmeyin çünkü aşağıda göreceğimiz gibi ücretsiz alternatifleriniz var.

Resmi Google Aracı

Başka bir seçenek de, herhangi bir PNG veya JPG görüntüsünü WebP'ye dönüştürmek için Linux, Widows veya Mac için bir araç olan cwebp indirmektir. İndirip kurduktan sonra, bilgisayarınızdaki herhangi bir görüntüyü dönüştürmek için talimatları doğrudan uygulayabilirsiniz. Örneğin, bir PNG görüntü dosyasını şu komutla 80 kalite aralığında bir WebP görüntüsüne dönüştürebilirsiniz:

cwebp -q 80 image.png -o image.webp

Aynı anda çok sayıda görüntüyü dönüştürmeniz gerekiyorsa, bu makalede çok sayıda görüntüyü dönüştürebilmeniz için Unix benzeri bir ortamda (macOS veya Ubuntu gibi) yönergeler açıklanmaktadır.

Ve aynı makalede, dönüşümü Node.js ile imagin-webp aracını kullanarak programlamanın alternatifinden de bahsediyorlar.

Çevrimiçi Dönüştürücüler

Tek bir kod satırı yazmak istemiyorsanız başka bir alternatif, çevrimiçi bir görüntü dönüştürücü kullanmaktır. Googling, aşağıdakiler de dahil olmak üzere uzun bir dönüştürücü listesini kolayca getirir:

• Ezgif Webp
• bulut dönüştürme
• Dönüştürme
• Çevrimiçi-Dönüştür
• ÜcretsizDönüştür

Hepsinde sadece görseli yüklemeniz, dönüştürme işlemini gerçekleştirmeniz ve dönüştürülen dosyayı indirmeniz yeterli.

WordPress Eklentileri

Son olarak aşağıda anlatacağım gibi WordPress sitenize yüklediğinizde görüntüleri WebP formatına çeviren eklentiler olduğunu da göreceksiniz.

Medya Kitaplığına WebP Görüntüsü Nasıl Yüklenir

Görüntüyü bu biçimde elde ettikten sonra, onu her zamanki gibi WordPress medya kitaplığınıza yükleyebilmelisiniz, ancak…

Oops, çalışmıyor! En azından benim için olmadı. Şu anda kullanmakta olduğunuz barındırma sağlayıcısına bağlı olarak aynı sorunla karşılaşabilirsiniz.

WordPress, güvenlik nedeniyle sitenize yükleyebileceğiniz MIME dosya türlerinde yerleşik bir sınırlamaya sahiptir. MIME, Çok Amaçlı İnternet Posta Uzantıları anlamına gelir. MIME türleri, bir sayfayla ilişkili içeriğin türünü belirlemek için tarayıcılar ve diğer İnternet cihazları tarafından kullanılır. Örneğin, bir sayfada bir .png dosyanız ve bir .jpeg dosyanız varsa, tarayıcı MIME türlerinden (dosya uzantılarından değil) her iki dosyayı da video veya diğer dosya türleri yerine resim olarak ele alması gerektiğini anlayacaktır.

Varsayılan olarak, WordPress kayıtlı MIME türlerinin bir listesini wp-includes/functions.php içinde saklar. Ancak, tanınan tüm MIME türleri yüklenemez.

Ve WebP'de olduğu gibi bu önceden tanımlanmış listenin dışında bir uzantıya sahip bir dosya yüklemeye çalışırsanız, yukarıdaki hata mesajını görürsünüz.

Barındırma şirketinizin belgelerinde, bu yeni MIME türünü yüklemenize nasıl izin verileceğini değiştirmek için birkaç alternatif bulacaksınız. Bu genellikle, fazladan dosya türleri ekleyebileceğiniz veya dosyayı doğrudan değiştirebileceğiniz veya aşağıdaki kodla kendi eklentinizi kullanabileceğiniz bir eklenti kullanmaktır:

 function nelio_custom_upload_mimes( $existing_mimes ) { $existing_mimes['webm'] = 'image/webm'; return $existing_mimes; } add_filter( 'mime_types', 'nelio_custom_upload_mimes' );

Veya alternatif olarak, aşağıdaki kod satırını ekleyerek wp-config.php dosyasını değiştirin:

 define( 'ALLOW_UNFILTERED_UPLOADS', true );

Gerekli değişiklikleri yaptıktan sonra, resminizi yükleyebilmelisiniz. Sonraki deneme…

Eh, bu da mümkün olmayacak gibi…

Bu durumda, WordPress forumunda tartışıldığı gibi, bazıları için çözüm, imagick kitaplığının kurulduğundan emin olmak ve sunucuyu yeniden başlatmak olmuştur. Diğerleri için (benim durumumda olduğu gibi), resmi yüklemenin tek yolu, resimleri yükle panelinin altında bulduğunuz tarayıcı-yükleyici bağlantısını kullanmaktı.

Ve işte , WebP resmimi yükledim!

Görüntüleri WebP'ye Dönüştürmek için WordPress Eklentileri

Görüntüleri bu WebP formatında almanın yer ve yük tasarrufundan bahsetmiştim. Ve sorun, sunucumuza yüklemiş olduğumuz tüm görüntüleri nasıl dönüştüreceğimizi düşündüğümüzde ortaya çıkıyor. İyi haber, WordPress'te çoğu zaman olduğu gibi, bu işi yapabilen birkaç eklentimiz var.

Ve sadece bu değil, bazıları, kitaplığınıza herhangi bir resim yüklemeden önce, endişelenmenize gerek kalmadan resmin WebP'ye dönüştürülmesini zorlayabilir. En iyi bilinenlerden bazıları şunlardır:

• EWWW Görüntü İyileştirici
• WebP Ekspres
• KısaPiksel
• hayal et
• Optimol
• Medya için WebPCConverter

Son olarak, ana WordPress barındırma şirketlerinin web sitenizde optimize edilmiş görsellere sahip olmanın öneminin çok farkında olduğunu belirtmek isterim. Bu nedenle, bazıları, kütüphaneye yüklediğiniz görüntülerin her zaman onları destekleyen tarayıcılara sunulması için otomatik olarak WebP'ye oluşturulmasından sorumlu olan sunucularında yerleşik olarak kendi eklentilerini zaten sunuyor. Örneğin, Siteground'ın SG Optimizer eklentisi için durum budur.

Çözüm

WebP hızlı, verimli ve çok fazla ivme kazanıyor. WordPress ve tarayıcılarda kitlesel olarak benimsenmesine kesinlikle düşündüğümüzden daha yakınız. WordPress'in geride kalmamasından ve WebP görüntü formatını destekleyerek web sitelerimizin SEO'sunu optimize edebildiğimiz için mutluyuz.

Unsplash'ta marinanın öne çıkan görüntüsü .