2022'de WordPress'te WebP Görselleri İçin Bir Eklentiye İhtiyacınız Yok

Hafif WebP görüntüleri sunmak, hem sıralama faktörü hem de kullanıcı deneyiminin bir parçası olarak kritik olan site hızınızı artırmanıza yardımcı olabilir. Çok uzun zaman önce, WordPress'in WebP görüntülerini tanımasını sağlamak için bir eklentiye ihtiyacınız vardı. WordPress 5.8'in piyasaya sürülmesi ve WebP görüntü formatına desteği o günleri sona erdirdi.

Mevcut resimlerinizi WebP formatına dönüştürmek söz konusu olduğunda eklentilerin hala bir yeri var. EWWW Image Optimizer, WebP dosyaları oluşturma desteğine sahiptir ve en sevdiğimiz görüntü optimizasyon eklentilerimizden biridir. EWWW, WP Offload Media eklentimizle de çok iyi çalışır.

Bu makalede, Google'ın cwebp yardımcı programı, Squoosh uygulaması ve EWWW dahil olmak üzere mevcut görüntüleri WebP'ye dönüştürmenin birkaç farklı yolunu inceleyeceğiz. Ayrıca, WebP görüntü dosyalarınızı bir bulut depolama sağlayıcısına boşaltmak ve sunucu kaynaklarını boşaltmak için EWWW ve WP Aktarım Ortamını birlikte nasıl kullanacağınızı göstereceğiz. Son olarak, ciddi bir hız kazanabilmemiz için her şeyi bir CDN aracılığıyla sunacak şekilde ayarlayacağız. Başka bir deyişle…

1. WebP Görüntü Formatının Avantajları
2. WordPress 5.8 ve Çoğu Tarayıcı WebP'yi Destekler
3. WordPress Filtreleriyle WebP Küçük Resimleri Sunma
4. PNG'leri ve JPEG'leri WebP Görüntü Formatına Dönüştürmenin 3 Yolu
5. WebP Görüntü Formatına Dönüştürmek için Cwebp'yi Kullanma
6. Squoosh ve Squoosh CLI ile Görüntü Formatlarını Değiştirme
7. EWWW Image Optimizer Plugin ile WebP Görüntüleri Sunma
8. WebP'yi Desteklemek için WP Aktarma Medya Eklentisini Ayarlama
9. CDN ile WordPress Site Hızını Artırma
10. Bir Görüntü İyileştiricinin Faydalarını İncelemek

WebP Görüntü Formatının Avantajları

Google, JPEG'ler ve PNG'ler tarafından sunulan sıkıştırmayı iyileştirmek için 2010 yılında WebP görüntü biçimini geliştirdi. Biçim ayrıca animasyonlu ve şeffaf görüntüleri de destekler. Google'a göre, WebP…

Web'deki görüntüler için üstün kayıpsız ve kayıplı sıkıştırma sağlayan modern bir görüntü formatı.

PNG gibi kayıpsız bir görüntü formatı, daha büyük dosya boyutları pahasına mükemmel çoğaltma sunar. JPEG gibi kayıplı bir biçim, bazı verileri atarak ve görüntüyü yeniden oluşturmak için bir algoritma kullanarak, geri alınamayan sıkıştırma kullanır. Bu, daha küçük medya dosyalarıyla sonuçlanır. GIF'ler bir tür tuhaf orta zemini işgal eder. Teknik olarak kayıpsız olsalar da 8 bitlik imajlardır. 24 bit JPEG veya PNG'yi 8 bit GIF'e dönüştürmek ve tekrar geri dönüştürmek kaçınılmaz olarak veri kaybına neden olur.

Google'dan Jyrki Alakuijala ve Vincent Rabaud tarafından yürütülen araştırmalar, WebP dosyalarının kayıpsız sürümünün PNG dosyalarından yaklaşık %26 daha küçük olduğunu gösteriyor. Aynı yazarlar tarafından yapılan bir araştırmaya göre, kayıplı WebP dosyaları da genellikle JPEG'lerden %25 ila %34 daha küçüktür.

JPEG veya PNG resim dosyaları yerine WebP sunmak, özellikle WordPress sitelerinizde çok fazla resim varsa, iyi bir bant genişliği tasarrufu sağlayabilir. Daha kompakt görüntü dosyaları, siteyi daha hızlı sunarak ziyaretçi deneyimini geliştirir. Bu, hemen çıkma oranlarını düşürmeye ve sıralamaları iyileştirmeye yardımcı olur.

WordPress 5.8 ve Çoğu Tarayıcı WebP'yi Destekler

WebP için yerel WordPress desteği 20 Temmuz 2021'de geldi. Büyük masaüstü ve mobil tarayıcıların çoğu bu noktada WebP görüntü biçimini zaten destekliyordu. En azından Big Sur'a yükseltme yapmamış Mac kullanıcıları, WebP görüntülerini görüntüleyemez. Kullanıcıların Catalina veya daha eski bir işletim sistemi kurulu olması durumunda Safari'nin WebP formatı desteği çalışmaz.

Bu, WebP görüntülerini kullanamayacağınız anlamına gelmez. Bu, WebP desteği olmayan kullanıcılar için yine de diğer görüntü dosyalarına geri dönmeniz gerekeceği anlamına gelir. Bunu yapmanın birkaç farklı yolu vardır. Bir görüntü optimizasyon eklentisi kullanıyorsanız, bunu sizin için yapabilir. En sevdiğimiz EWWW Image Optimizer, bu yeteneğe sahiptir. Aşağıda EWWW'yi kurarken hangi ayarların kullanılacağını göstereceğiz.

.htaccess dosyanızda da değişiklikler yapabilirsiniz, ancak bu dosyayı düzenleme konusunda çok rahat değilseniz, bunu yapmanızı tam olarak öneremeyiz. .htaccess dosyanız üst düzey bir sunucu yapılandırma dosyasıdır. Tek bir hata sunucu yapılandırma sorunlarına neden olabilir ve sitenizi bozabilir. Bu yoldan gitmeye karar verirseniz, devam etmeden önce lütfen orijinal dosyanın yedeğini alın. Bu GitHub deposu, tarayıcılara dayalı görüntüler sunmak için .htaccess'i değiştirmek için talimatlar ve kod içerir, ancak yazar bile bunun gerçekten "sorumlu" bir yol olmadığını not eder.

Bunun yerine, yalnızca HTML picture öğesini kullanabilirsiniz ve WebP desteği olmayan kullanıcıların azınlığına diğer görüntü biçimlerini sunarken, onu destekleyen tarayıcıların çoğuna WebP görüntüleri sunmalıdır.

 <picture> <source type="image/webp"> <img src="/path/to/image.jpg" alt=""> </picture>

WordPress ile WebP görüntülerini kullanırken aklınızda bulundurmanız gereken birkaç şey daha var:

• Web sunucunuzun görüntü işleme kitaplığı WebP biçimini desteklemelidir. Sunucunuz WebP'yi desteklemiyorsa, WordPress Medya Kitaplığına yüklerken bir hata mesajı alırsınız.
• Web sunucularındaki en yaygın görüntü işleme kitaplıklarından ikisi olan GD Grafik Kitaplığı ve ImageMagick, WebP'yi destekler, ancak GD henüz kayıpsız destek eklememiştir.
• Animasyonlu veya alfa biçimli bir resim yüklemek, bunlar henüz yeniden boyutlandırılmış resimler için desteklenmediğinden kayıpsız bir resim yerine kayıplı bir resimle sonuçlanacaktır.

WordPress 5.8 ve sonraki sürümleri, WebP formatındaki görüntüleri geçerli MIME türleri olarak tanır, böylece WordPress sitelerinizdeki WebP dosyalarının sıkıştırma kalitesini ayarlamak için wp_editor_set_quality filtresini kullanabilirsiniz. WordPress'in varsayılan olarak, yüklenen formatla eşleşen alt boyutlu dosyalar oluşturduğunu unutmayın. wp_editor_set_quality içinde wp_editor_set_quality dosyaları için sıkıştırma kalitesini ayarladıktan sonra bile, JPEG'leri yüklerseniz, WebP dosyaları yerine alt boyutlu JPEG'ler alırsınız. Tüm küçük resimlerinizi WebP'ye dönüştürmek için lütfen WordPress filtreleriyle WebP küçük resimleri sunma bölümüne bakın. Alternatif olarak, EWWW Image Optimizer ile WebP görüntülerinin sunulmasına ilişkin bölüm, WebP ile uyumlu olmayan tarayıcılar için orijinal görüntü biçimlerini korurken WebP görüntülerini sunmaya yönelik bir yöntem içerir.

Çoklu site, siteyi ilk oluşturduğunuzda tanınabilir dosya türlerini ayarladığından, WordPress çoklu site kullanıcılarının başka bir zorluğu olabilir. Trac biletinin belirttiği gibi,

Şu anda çok siteli upload_filetypes site seçeneği, get_allowed_mime_types içinde izin verilen mime / ext ile büyük ölçüde güncel değil.

Diğer bir deyişle, tüm çok siteli alt sitelerinizin WebP görüntülerini kullanmasını istiyorsanız site_option_upload_filetypes filtrenizde bazı manuel ayarlamalar yapmanız gerekecektir. Filtreyi bir ağ mu-eklentisine eklediğinizden emin olun, böylece tüm alt siteleriniz tarafından kullanılabilir. Bunu WordPress çekirdeğinde düzeltmek için açık bir PR var. Bu bağlantı ayrıca PR kabul edilene kadar mu-plugin'inize eklemeniz gerekenlerin ayrıntılarını da içerir.

Çoklu site sorunları bir yana, eski bir WordPress sürümünü çalıştıran tüm siteler için yine de üçüncü taraf bir eklentiye ihtiyacınız olacak. Eklenti, mevcut dosyalarınızdan WebP dosyaları oluşturmalı ve bunları WebP'yi destekleyen tarayıcılara iletmelidir.

Bir sonraki bölümde, mevcut görüntü dosyalarınızı WebP formatına dönüştürmenin üç yolunu inceleyeceğiz: Google'ın cwebp yardımcı programı, Squoosh uygulaması ve WordPress için EWWW Image Optimizer eklentisi.

WordPress Filtreleriyle WebP Küçük Resimleri Sunma

Resimlerinizi nasıl dönüştürebileceğinize dalmadan önce, yalnızca küçük resimleri WebP olarak sunmakla ilgileniyorsanız, WebP'yi desteklemeyen tarayıcılar için yedek resim biçimlerine sahip olmaktan endişe duymuyorsanız daha da basit bir yol var. WordPress 5.8 veya sonraki bir sürümünü yeniden kullanın. Bu işlem orijinal görüntü dosyalarını dönüştürmez, ancak küçük resimleri WebP olarak görüntüler. Bu, küçük resim ağırlıklı sayfalarınız varsa sitenizin yükleme süresini azaltmak için yararlı olabilir.

Anahtar, WordPress image_editor_output_format filtresini kullanıyor. Bunu, WordPress'in küçük resim dosyalarınızı kaydetmek için kullandığı MIME türünü ayarlamak için kullanabilirsiniz. MIME türleri genellikle kaynak görüntüyle eşleştiğinden, image_editor_output_format filtresine iletilen eşleme dizisi varsayılan olarak boştur. Bir MIME türü (JPEG'ler veya PNG'ler gibi) farklı bir MIME türüyle (WebP gibi) eşlenecek şekilde filtredeki bir görüntünün eşlemesini değiştirirseniz, oluşturulan küçük resim görüntüsü farklı türde olacaktır. Bu, kaynak görüntü orijinal biçiminde bırakılırken WebP görüntülerinin küçük resimler olarak sunulmasına neden olur.

Tüm JPEG ve PNG kaynak dosyalarınız için küçük resimleri WebP'ye dönüştürmek için aşağıdaki kodu sitenize ekleyebilirsiniz:

 add_filter( 'image_editor_output_format', function( $formats ) { $formats['image/jpeg'] = 'image/webp'; $formats['image/png'] = 'image/webp'; return $formats; } );

Bunun, web sunucunuzun görüntü işleme kitaplığının WebP biçimini desteklemesini gerektirdiğini unutmamalıyız. Yukarıda belirtildiği gibi, GD Graphics Library henüz kayıpsız görüntüler için destek eklemedi.

Bu, yeni yüklenen tüm görseller için webp küçük resimleri oluşturacaktır, peki ya Medya Kitaplığınızdaki mevcut görseller? webp küçük resimlerinden memnunsanız, mevcut resimler için küçük resimleri yeniden oluşturmanız gerekecektir. Bunu yapacak eklentiler var, ancak erişiminiz varsa WP-CLI'yi de kullanabilirsiniz. wp media regenerate komutu, filtre aracılığıyla ayarlanan yeni WebP biçimini kullanarak tüm küçük resimlerinizi yeniden oluşturacaktır:

 wp media regenerate --yes --skip-delete

--skip-delete seçeneğinin kullanılması, orijinal küçük resimlerin sunucuda kalmasını sağlar. Ancak, ekin meta verileri artık bunlara başvuruda bulunmayacağından bunlar artık sahipsiz kalacaktır. Bunu manuel olarak düzeltebilirsiniz, ancak eski küçük resme başvuran tüm içeriği güncellemek ve bunun yerine WebP uzantısını kullanmak için değiştirmek için WP Migrate DB Pro'nun Bul ve Değiştir aracı gibi bir şey kullanmak daha kolaydır.

Bu işlem, kaynak görüntüleri dönüştürmek zorunda kalmadan WebP görüntülerinin küçük resimler olarak sunulmasıyla sonuçlanmalıdır. Ancak, WebP'yi desteklendiğinde sunulacak ek bir dosya olarak eklemek için EWWW Image Optimizer eklentisini kullanmak daha zarif bir çözümdür.

PNG'leri ve JPEG'leri WebP Görüntü Formatına Dönüştürmenin 3 Yolu

WebP Görüntü Formatına Dönüştürmek için Cwebp'yi Kullanma

Google, siz yüklemeden önce JPEG'leri, PNG'leri ve TIFF'leri WebP görüntülerine dönüştürmek için önceden derlenmiş yardımcı programlara sahiptir. Kullandığınız işletim sistemi, bu yardımcı programları nasıl yükleyeceğinizi belirleyecektir.

MacOS'ta, aşağıdaki komutu kullanarak yükleyebileceğiniz bir homebrew paketi mevcuttur:

 brew install webp

Çoğu popüler Linux dağıtımları, yazılım paketi yöneticilerinde bulunan yardımcı programların bir sürümüne sahiptir. Örneğin, Debian/Ubuntu'da apt aracılığıyla yükleyebilirsiniz:

 sudo apt-get install webp

Windows kullanıyorsanız veya yukarıdaki seçeneklerden birini kullanamıyorsanız, işletim sisteminiz için paketlenmiş yardımcı programların arşivini indirebilirsiniz. Lütfen bu yardımcı programların komut satırında çalıştırıldığını unutmayın.

Yukarıdaki bağlantılardan bir sürüm kurarsanız, ilk adım indirilen arşivi çıkarmaktır. Çıkarma işlemi tamamlandıktan sonra, cwebp yürütülebilir dosyasını ayıklanan dosyaların bin dizininde bulabilirsiniz. Yardımcı programı ne sıklıkla çalıştırmayı planladığınıza bağlı olarak, bu dizini sistem yolunuza eklemek isteyebilirsiniz. Aksi takdirde, her çalıştırdığınızda komut satırınıza tam yolu eklemeniz gerekir. İşlemin kendisi basittir, ancak işletim sisteminize bağlı olarak değişir. Windows'ta sistem yolunuzu nasıl düzenleyeceğiniz hakkında bilgi için bu kılavuza bakın. Mac kullanıcıları için, sistem yolunuza eklemeler yapmak için Terminal'i kullanabilirsiniz. Linux kullanıcıları bu kılavuzda PATH değişkenini nasıl değiştireceklerini öğrenebilirler.

Dosyalarınızı dönüştürmeye hazır olduğunuzda komut satırı arayüzünüzü açın. PNG dosyasını WebP'ye dönüştürmek için temel komut aşağıda gösterilmiştir.

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

Bu komutun öğelerini parçalayalım ve cwebp'nin PNG'lerimizi ve JPEG'lerimizi dönüştürmesine izin verecek kendi komut dizilerimizi nasıl oluşturabileceğimizi görelim.

cwebp : Bin klasörünü sistem yoluna eklemediyseniz, dosyanın tam yolunu komut satırınıza eklemeniz gerekir. Windows'ta bu şuna benzer: “C:\Users\Mike\Downloads\WebP\libwebp-1.2.1-windows-x64\bin\cwebp.exe” .

-q : Sıkıştırma faktörünü ayarlamak için bunu 1'den 100'e kadar bir sayı takip etmelidir. Kullandığınız sayı ne kadar düşükse dosyanın kalitesi o kadar düşük olur. Kayıplı sıkıştırma, cwebp için varsayılandır. Kayıpsız sıkıştırmayı etkinleştirmek için -lossless ve -exact seçeneklerini kullanın.

image.png : Bunu, WebP'ye dönüştürmek istediğiniz dosyanın adıyla değiştirin. Doğru dosya uzantısını eklediğinizden emin olun. Ayrıca tam yolu eklemeniz gerekeceğini veya cwebp'nin onu nerede bulacağını bilemeyeceğini unutmayın. Resminizin tam komut dosyası şöyle görünmelidir: “C:\Users\Mike\Pictures\JPEGs\Mountains Test.jpg” .

-o : Bu komut, yeni WebP dosyanızın adını ve nerede saklanmasını istediğinizi belirtir. Yine, komuttan sonra tam yolu eklemeniz gerekecek. Yukarıdaki örneklerimizi izleyerek, -o “C:\Users\Mike\Pictures\WebPs\Mountains Test.webp” .

Hepsini bir araya getirdiğimizde, şu komut satırı dizesini elde ederiz:

 "C:\Users\Mike\Downloads\WebP\libwebp-1.2.1-windows-x64\bin\cwebp.exe" "C:\Users\Mike\Pictures\JPEGs\Mountains Test.jpg" -q 80 -o "C:\Users\Mike\Pictures\WebPs\Mountains Test.webp"

Eğer cwebp yardımcı programını yukarıda ana hatlarıyla belirttiğimiz gibi bir paket yöneticisi kullanarak kurabildiyseniz, muhtemelen cwebp yürütülebilir dosyasının tam yolunu eklemeniz gerekmez.

Google, görüntü dosyalarınızı WebP biçimine dönüştürmek için kullanabileceğiniz eksiksiz bir cwebp komutları listesine sahiptir. Çoğuna ihtiyaç duyacağınız yalnızca birkaç durum vardır.

Oluşturduğumuz komut dizisi, bir seferde yalnızca bir görüntüyü dönüştürecektir. Tüm resimlerinizi bu şekilde dönüştürebilirsiniz, ancak hepimiz biliyoruz ki aynı dizindeki her resmi dönüştüren bir komut dosyası yazmanın daha uygun bir çözüm olacağını biliyoruz.

Git Bash'i Windows'ta kullandım, ancak hızlı bir arama, Powershell, JavaScript ve Windows toplu iş dosyalarını kullanan çözümler buldu.

Git Bash'i açtım ve test resimlerimin depolandığı dizine gittim. Sonra bu betiği çalıştırdım:

 for file in *.jpg do cwebp -q 80 "$file" -o "${file%.jpg}.webp" done

Bu, bunu yapmanın oldukça basit bir yoludur. Sadece 20 görüntüyü dönüştürdüm ve süreç hızlıydı. WebP görüntü dönüşümünüzü hızlandırmak için bunu paralel işleme ile nasıl çalıştıracağınıza bakmak isteyebilirsiniz. Ayrıca kullandığım komut dosyası yeni WebP dosyalarını JPEG'lerle aynı dizine yerleştiriyor. WebP formatındaki görüntüleri diğerlerinden ayırmak oldukça kolaydır, ancak bu, istediğiniz yerde olmayabilir. Smashing Magazine'deki bu makale, bu dönüşümlerin nasıl daha verimli çalıştırılacağına ilişkin ayrıntılar verir.

Squoosh ve Squoosh CLI ile Görüntü Formatlarını Değiştirme

WebP formatına dönüştürmek için çok fazla görseliniz yoksa Squoosh'u kullanabilirsiniz. Çevrimiçi uygulama, WebP dahil olmak üzere hemen hemen her görüntü biçimini diğerine dönüştürebilir. Squoosh uygulaması, bir seferde bir görüntüyü işlemekle sınırlıdır. Toplu işleme yalnızca deneysel bir komut satırı yardımcı programı olan Squoosh CLI aracılığıyla kullanılabilir. Çevrimiçi Squoosh uygulamasının nasıl kullanılacağını gözden geçireceğiz ve daha maceraperestler için Squoosh CLI'nin nasıl kullanılacağına dair bazı bağlantılar sağlayacağız.

Squoosh'u kullanmaya başlamak için, ya bir görüntüyü ekranınızın belirtilen alanına sürükleyip bırakın ya da dönüştürmek istediğiniz görüntüyü makinenizde aramak için tıklayın. Bir seferde yalnızca bir görüntüyü işleyebileceğini unutmayın. Aynı anda birden fazla görüntüyü üzerine sürükleyebilirsiniz, ancak yalnızca sonuncuyu satırda açacaktır.

Üzerine bir görüntü sürüklediğinizde Squoosh düzenleme ekranı otomatik olarak açılır. Arayüz düzenli ve sezgiseldir, ancak mevcut ayarları ve seçenekleri gözden geçirmek için biraz zaman ayıralım.

Düzenleme: Ekranınızın sağ tarafında bulunan bu panelde Paleti Yeniden Boyutlandır ve Küçült için geçiş anahtarları bulunur. Her iki seçenek de varsayılan olarak kapalıdır. Birini değiştirmek, çıktınızı kontrol etmenizi sağlayan yeni bir menüyü genişletecektir. Görüntünüzü WebP'ye dönüştürmek için ikisi de gerekli olmadığından, bunları kapalı bırakacağız. Aşağıdaki resimde mevcut seçenekleri görebilirsiniz.

Sıkıştır: Ekranın hem sol hem de sağ kısımlarında sıkıştırma ayarlarını seçmek için menüler bulunur. Hangisini tercih ettiğinizi görmek için tek bir görüntüyü iki farklı biçime sıkıştırmak için bu özelliği kullanabilirsiniz. İki oklu bir çubuk, ekranınızdaki görüntüyü ikiye böler. Sıkıştırılmış görüntünün nasıl görüneceğini daha fazla göstermek için bu çubuğu bir tarafa veya diğerine taşıyabilirsiniz. Tek yaptığınız WebP'ye dönüştürmekse, sol taraftaki Sıkıştır menüsünü yalnız bırakmanızı öneririz. Bu, orijinal görüntüyü WebP sürümüyle kolayca karşılaştırmanıza olanak tanır.

Her iki taraftaki Sıkıştır menüsü ayrıca orijinal görüntünün boyutunu (solda) ve dönüştürülen görüntünün ne kadar büyük olacağını (sağda) gösterir. Açılır menüden WebP'yi seçin. Ayrıca, WebP görüntü formatının hala deneysel bir halefi olan WebP v2 (kararsız) için bir ayar vardır. Şu anda bunu kullanmanızı önermiyoruz.

Squoosh uygulaması, kayıpsız sıkıştırmayı seçmenize izin veren bir onay kutusuyla varsayılan olarak kayıplı sıkıştırmaya geçer. Bir JPEG'i dönüştürüyoruz, bu yüzden şimdilik bunu işaretlemeden bırakacağız.

Kaydırma çubukları ile Efor ve Kaliteyi ayarlayabilirsiniz. Daha yüksek ayarlar orijinal dosyadan daha büyük bir çıktı dosyasına neden olabileceğinden bunlara dikkat etmek isteyeceksiniz.

Saydam verileri korumak istiyorsanız, Sıkıştır menüsünün altındaki kutuyu işaretlediğinizden emin olun.

Çeşitli ayrıntılarda ince ayar yapmak için Gelişmiş ayarlar'ın yanındaki oku tıklayın. Bunlar, alfa kalitesi, filtre gücü, ön işlem ve keskin RGB'den YUV'ye dönüştürme gibi görüntü optimizasyon özelliklerini içerir. Tüm yapmak istediğiniz dosya biçimini değiştirmekse, genellikle bu ayarları varsayılan değerlerinde bırakabilirsiniz.

Squoosh hızlı, ücretsiz ve kullanımı kolaydır. Uygulamanın tek dezavantajı, aynı anda yalnızca bir görüntüyü işleyebilmenizdir.

Squoosh CLI ile Görüntü Formatlarını Değiştirme

Squoosh CLI, Squoosh codec bileşenlerini aynı anda birçok görüntüye uygulamanıza olanak tanıyan bir komut satırı arabirimidir. CLI'nin hala deneysel aşamada olduğunu belirtmeliyiz. Denemekle ilgileniyorsanız, depoyu ve talimatları burada bulabilirsiniz.

EWWW Image Optimizer Plugin ile WebP Görüntüleri Sunma

EWWW Image Optimizer, resimlerinizi optimize ederek sayfalarınızın daha hızlı yüklenmesine yardımcı olmak için tasarlanmış bir WordPress eklentisidir. Eklenti, Ağustos 2014'ten beri WebP Görüntülerini desteklemektedir. Daha önce de belirttiğim gibi, hız artışını en üst düzeye çıkarmak için WP Offload Media kullanacağız.

WebP dosyalarının bu eklenti kombinasyonuyla sunulmasını test etmek için önce tek bir resim bloğu ve bir galeri bloğu içeren bir gönderi oluşturdum.

Firefox'ta devtools konsolunu açtım ve "Önbelleği devre dışı bırak" onay kutusunu etkin tutarken siteyi birkaç kez yeniledim. Bu bana aktarılan toplam bayt miktarı ve siteye yeni bir ziyaretçinin sayfanın yüklenmesinin ne kadar sürebileceği hakkında kabaca bir fikir verdi.

Aşağıdaki ekran görüntüsünde, bu vesileyle aktarılan toplam baytın, 1,54 saniyelik yükleme süresiyle 1,88 MB'den 1,19 MB olduğunu görebilirsiniz, bu nedenle temel setimiz budur.

WordPress yönetici alanındaki olağan "Eklenti Ekle" sayfasından "ewww" ifadesini aradım ve "EWWW Image Optimizer" için Şimdi Yükle düğmesine basıp normal şekilde etkinleştirdim.

JPEG'leri WebP Görüntü Formatına Dönüştürmek için EWWW Image Optimizer'ı Ayarlama

Daha sonra EWWW ayarları sayfasına gittim. Eklenti size varsayılan bir hedef seçme seçeneği sunar: sitenizi hızlandırmak veya depolama alanından tasarruf etmek. Ayarların geri kalanını görmek istedim, bu yüzden ne yaptığımı biliyorum, beni rahat bırakın!

Bu, mevcut optimizasyon seviyesini ve çeşitli seçenekler için onay kutularını görebileceğiniz başka bir ekran açar. Komik Modu Etkinleştir beni biraz cezbetti, ancak şimdilik WebP Dönüştürme lehine bırakmayı seçtim. Bu kutunun işaretlenmesi, WebP Teslim Yönteminin görünmesine ve iki seçeneğin gösterilmesine neden oldu: “JS WebP Yeniden Yazma” ve “ WebP Yeniden Yazma.” JS WebP Yeniden Yazma seçeneğini kontrol ettim. Bu noktada dosyaları hariç tutabilirsiniz, ancak her şeyi dönüştürmek istedim, bu yüzden boş bıraktım.

WebP Dönüştürme kutusunun işaretlenmesi, WebP desteği olmayan kullanıcılara JPEG ve PNG'leri sunmaya devam ederken, WebP desteği olan kullanıcılara WebP görüntüleri sunulmasını sağlar.

WordPress Sitemiz için Görselleri Optimize Etme

Save Changes'i tıkladıktan sonra ilk ayarlar sayfasına geri döndüm. Bu noktada, yüklenen tüm yeni görüntüler WebP'ye dönüştürülecektir. Önceden yüklenmiş görüntüleri dönüştürmek için EWWW'nin Bulk Optimizer aracının kullanılması gerekir. Örnek gönderimizdeki resimleri dönüştürmek istedim, bu yüzden EWWW ayarları ekranının sağ tarafında Bulk Optimizer'a tıkladım.

"Toplu Optimize Etme" sayfasında çok az kontrol vardır. Sağ taraftaki onay kutuları, daha önce optimize edilmiş görüntülerin atlanmasını geçersiz kılacak olan Yeniden optimize etmeye zorlama seçeneği sunar. WebP Only , sıkıştırmayı tamamen atlar ve her şeyi WebP'ye dönüştürür. Devam ettim ve Medya Kitaplığındaki her şeyi, ayrıca aktif temayı ve yapılandırdığınız tüm klasörleri tarayan Optimize edilmemiş görüntüleri tara'yı tıkladım. Ayrıca, ne kadar alan ve bant genişliği tasarrufu sağlayacağını görmek istediğim için Yalnızca WebP'yi seçtim.

Eklenti optimize edilmeye hazır 200 görsel buldu, bu yüzden Optimize 200 görseli tıkladım ve işini yapmasına izin verdim. Görüntü dosyalarının işlenmesi sadece birkaç dakika sürdü. WebP formatına dönüştürmek, başlangıçta oldukça küçük olan dosyalarda bile yerden tasarruf sağladı. Boyut küçültme genellikle %30 ile %60 arasında olmuştur.

Optimizasyon ve WebP dönüşümünün çalıştığından emin olmak için tarayıcı önbelleğimi temizledim ve ardından blog sayfasını birkaç kez yeniledim. Artık her resim adına .webp eklenmiş bir sürüm kullanıyor ve bunlar tarayıcıma sunulan resimler.

Yükleme süresi orijinal 1.54 saniyeden 1.37 saniyeye düştü, ancak gerçek tasarruf kullanılan bant genişliğinde, orijinal 1.19 MB'ye kıyasla 786 KB, yaklaşık %33'lük bir düşüş. Güzel! Unutmayın, ilk defa bu görüntülerde sıkıştırmayı atladım, böylece sadece WebP dönüştürme ile tasarruflara bakabildik.

EWWW ayarları sayfasına geri döndüm ve toplu iyileştiriciyi tekrar çalıştırdım, bu sefer WebP'ye dönüştürdüklerim de dahil olmak üzere tüm görüntüleri sıkıştıracağından emin olmak için Yeniden optimize etmeye zorla'yı seçtim. Ayrıca bu sefer Yalnızca WebP Dönüştürme seçeneğinin işaretini kaldırmadım. Bu sefer yükleme süresini 1,22 saniyeye düşürmeyi başardık. Artan bir tasarruf, ancak görüntü ağırlıklı bir siteniz varsa eklenebilir.

WebP'yi Desteklemek için WP Aktarma Medya Eklentisini Ayarlama

Şimdi, sunucuda daha fazla kaynak tasarrufuna yardımcı olmak için WP Offload Media'yı kurma ve medyayı S3'e boşaltma zamanıydı. Nihai hedef, dosyaları Amazon CloudFront aracılığıyla sunmaktır, böylece site ziyaretçileri onları mümkün olduğunca hızlı bir şekilde alır.

WP Offload Media'yı kurduktan sonra, wp-config.php dosyasında tanımlanan önerilen AS3CF_SETTINGS sabitini kullanarak AWS erişim anahtarlarımı kullanacak şekilde yapılandırdım ve ardından UI aracılığıyla yeni bir kova oluşturdum.

Daha sonra, Hızlı Başlangıç ​​Kılavuzumuzda açıklanan işlemi kullanarak, mevcut Medya Kitaplığı öğelerini tüm varsayılan ayarlarla yeni kovaya boşalttım.

İlk başta CloudFront'u kurmadığımı fark edeceksiniz. Bir CDN yapılandırmadan önce varsayılan URL'leri kullanarak kovaya boşaltmanın işe yaradığından emin olmak istedim. ÖPÜŞmeyi severim. 😉

WebP dosyalarının paketten sunulduğundan emin olmak için test sitemizi tekrar kontrol ettim. Başarı!

EWWW ve WP Aktarım Ortamı Desteği WebP

EWWW Image Optimizer'ın WP Offload Media desteğinin asıl mesele olduğu ortaya çıktı. WebP dosyalarının boşaltılması gereken dosyalar listesine eklenmesini sağlamak için as3cf_attachment_file_paths filtresini ve S3'ün bunları reddetmemesi için doğru bir “ContentType” ayarlamak için as3cf_object_meta filtresini uygular. Teşekkürler Shane, sen bir yıldızsın! 🤩

Yükleme istatistiklerine bakıldığında, aktarılan baytlar aşağı yukarı aynıydı, ancak yükleme süremiz 1,37 saniyeden 1,61 saniyeye fırladı. S3 hız için optimize edilmediğinden bunun olmasını bekliyordum. Bu yüzden bir CDN'ye ihtiyacımız var.

Doğal olarak, WP Offload Media, cwebp veya bir görüntü düzenleyici ile yerel olarak dönüştürdüğünüz dosyalar gibi WebP formatındaki görüntülerle de aynı şekilde çalışacaktır. Bu durumda, WebP dosyalarını doğrudan Medya Kitaplığınıza yükleyebilir ve oradan bir S3 kovasına yerleştirebilirsiniz.

CDN ile WordPress Site Hızını Artırma

Artık WebP görüntülerimizi S3 kovamızdan sunduğumuza göre, bir CDN (bu örnekte Amazon CloudFront) kullanarak hızımızı gerçekten artırmanın zamanı geldi. Bir CDN, içeriği en yakın konumdan sunarak sitenizin hızını artırmanın en kolay yollarından biridir.

Amazon S3'e Aktarılan Medya için CloudFront Kurulumu kılavuzumuza göre bir CloudFront dağıtımı oluşturdum.

WP Offload Media ayarlarında “Custom Domain (CNAME)” ayarını açtım ve kullanmak istediğim subdomain'i girdim. Daha iyi SEO için sitenizin alan adının bir alt alan adını burada kullanmanızı şiddetle tavsiye ederiz.

Sitenin ön sayfasındaki birkaç yenileme ve teslimat hızında güzel bir gelişme görmeye başladım.

Beklendiği gibi, aktarılan toplam bayt sayısı, WebP'yi 786 KB'de kullandığımız diğer zamanlarla kabaca aynı kaldı, ancak yükleme süresi 986 ms'ye düştü!

Bir Görüntü İyileştiricinin Faydalarını İncelemek

EWWW Image Optimizer'ı bozup bozamayacağımı görmek için çeşitli daha büyük Medya Kitaplığı öğelerini boşaltarak WP Offload Media'nın “Dosyaları Sunucudan Kaldır” seçeneğiyle de oynadım. Nafile! EWWW Image Optimizer, orijinal dosyaları sıkıştırabildi ve WebP sürümlerini sorunsuz bir şekilde oluşturabildi.

EWWW Image Optimizer, WP Offload Media ile iyi bir şekilde bütünleşir. Bu, medyanın boşaltılmasını ve WebP görüntülerinin sunulmasını nispeten kolaylaştırır.

• EWWW Image Optimizer'ın WebP sekmesindeki tüm seçenekleri açın ve yüklenen medyanın temel URL'sini girin
• Medyanızı toplu olarak optimize edin
• WP Offload Media ile medyanızı boşaltın
• İş bitmiş!

EWWW'nin birleşik görüntü optimizasyon hizmeti ve CDN, Easy IO, gelecekte bakmam gereken bir şey. Diğer birçok özelliğin yanı sıra, sunduğu görüntüler için WebP dosyalarını otomatik olarak oluşturabilir ve değiştirebilir.

Toplama

WebP kullanmanın bazı gerçek kazanımları var gibi görünüyor, bu nedenle büyük bir resim siteniz olup olmadığını araştırmaya değer. WordPress 5.8 artık WebP görüntüleri için yerel destek sunarken, bu, zaten medya kitaplığınızda bulunan görüntüleri dönüştürmenize yardımcı olmaz. EWWW Image Optimizer, JPEG ve PNG'lerinizi indirmek, dönüştürmek ve yeniden yüklemek zorunda kalmadan dönüştürmek için harika bir seçenektir.

Henüz WebP görsellerini kullandınız mı? Eğer öyleyse nasıl gitti? Değilse, neden olmasın? Aşağıdaki yorumlarda bize bildirin.