WordPress için En İyi 5 Image Optimizer Eklentisi

Yayınlanan: 2022-09-14

WordPress için en iyi görüntü iyileştirici eklentilerini mi arıyorsunuz? Daha uzağa bakma. Piyasadaki en iyi araçları karşılaştırdık.

Optimize edilmemiş görseller genellikle bir web sitesini yavaşlatmaktan sorumludur. Lighthouse aracılığıyla bir performans denetimi gerçekleştirirseniz, görüntüyle ilgili şu sorunlardan biriyle karşılaşabilirsiniz:

Web siteniz için resimleri optimize etmek için Google önerisi - Kaynak: PageSpeed ​​Insights
Web siteniz için görüntüleri optimize etmek için Google önerisi – Kaynak: PageSpeed ​​Insights

Bu durumda, muhtemelen bir görüntü iyileştirici eklentisine ihtiyacınız var!

Bir sonraki projeniz için en iyi görüntü iyileştirici eklentisini seçmenize yardımcı olmak için sahip olunması gereken özellikleri listeledik ve karşılaştırmalı performans testleri gerçekleştirdik.

Hadi dalalım!

Görüntü Optimizasyonu Performans için Ne İfade Eder?

Bir görüntüyü performans için optimize etmek, dosya boyutunu olabildiğince küçük tutarken doğru boyutta, biçimde ve çözünürlükte yüksek kaliteli görüntüler sunmak anlamına gelir. Sıkıştırma, yeniden boyutlandırma, önbelleğe alma, yeni nesil bir formata dönüştürme ve hatta gecikmeli yükleme gibi çeşitli mekanizmalar sayesinde görüntüleri optimize edebilirsiniz.

İşte sıkıştırılmış bir görüntü örneği. Boyut daha küçük olsa da, kalite insan gözüne aynı görünüyor. Bunun nedeni, bir görüntüyü optimize ederken kaliteden ödün vermeden boyutunu küçültüyor olmanızdır.

Orijinal JPG sıkıştırılmış JPEG
813 KB 309 KB Kaliteye etkisi: Yok

Optimize edilmemiş görüntüler sitenizi yavaşlatır ve Önemli Web Verileriniz gibi önemli performans ölçümlerini etkiler. Bir görüntü En Büyük İçerikli Boyama öğesi olduğunda, iyi bir LCP puanı elde etmek için bu görüntüyü verimli bir şekilde optimize etmek çok önemlidir. En Büyük İçerikli Boyama, tüm bir web sitesinin algılanan hızını ölçer ve sanırım ziyaretçileriniz üzerinde iyi bir izlenim bırakmak istiyorsunuz. Optimizasyon yolculuğunuzda size yardımcı olması için her zaman bir görüntü iyileştirici WordPress eklentisi seçin.

Doğru Image Optimizer Eklentisi Nasıl Seçilir

WordPress sitenizin tüm resimlerini takip edebileceğiniz bir resim optimizasyonu kontrol listesi hazırladık.

Bir Görüntü İyileştirici Eklentisi İçin Olması Gereken 14 Özellik

Bir görüntü iyileştirici eklentisi seçerken aranması gereken özelliklere daha yakından bakalım.

  1. En popüler görüntü dosyası biçimlerini destekler: PNG, JPEG, GIF'ler veya WebP görüntüleri.
  2. Resimlerinizi WebP'ye dönüştürebilir. Google tarafından geliştirilen bu yeni nesil biçim, kaliteyi etkilemeden görüntü dosyasının boyutunu JPEG ve PNG görüntülerinden %35 daha küçük hale getirebilir.
  3. Yalnızca ekranın üst kısmındaki içeriğin önce yüklenmesini sağlamak için resimlerinize ve videonuza Geç yükleme uygular.
  4. Optimizasyondan sonra çok bulanık hale gelen görüntüleri işaretleyen akıllı bir sıkıştırma işlemine sahiptir.
  5. Görüntüleri Lighthouse tarafından önerildiği şekilde verimli bir şekilde optimize etmenize olanak tanır, böylece sayfa hızınız ve genel performansınızla ilgili sonuçları görebilirsiniz.
  6. Dosya boyutu ve kalite arasında mükemmel dengeye ulaşmanıza yardımcı olmak için birkaç sıkıştırma düzeyi sunar. Bir eklentide sıkıştırma seviyesi nasıl kontrol edilir? “Kayıplı veya kayıpsız” özelliklere sahip olmalıdırlar.
  7. Görüntü kalitesini korur – sıkıştırma, bulanık bir görüntü anlamına gelmemelidir! Kalite ve performansı dengeleyen bir eklenti seçin: otomatik, sezgisel ve akıllı bir sıkıştırma.
  8. Resimlerinizi anında yeniden boyutlandırır: WordPress kitaplığına yüklerken belirli bir yükseklik ve genişliği veya en azından bir yüzdeyi sınırlayabildiğinizden emin olun.
  9. Birden fazla resmi sıkıştırmak için toplu optimizasyon sunar: Binlerce resim içeren bir e-ticaret siteniz varsa, tüm bu resimleri elle sıkıştırmak zor olacaktır. Eklentinin aynı anda birden fazla görüntüyü sıkıştırmanıza izin verdiğini doğrulayın.
  10. Sunucularındaki görüntüleri optimize eder: sizin değil, kendi sunucularını kullanan bir eklenti seçin. Bu size bant genişliği ve depolama alanından tasarruf sağlayacaktır.
  11. Sezgisel ve hızlı bir arayüze sahiptir: Net optimizasyon seçenekleri sunan ve tüm süreci anında gerçekleştiren, kullanımı kolay bir eklenti istiyorsunuz.
  12. Gereksiz meta verileri kaldırır – örneğin, mevcut olabilecek Exif verileri.
  13. Orijinal resimlerinizin yedeğini tutar -Sıkıştırılmış (ve orijinal) resimlerinizin eklenti devre dışı bırakıldıktan sonra silinmediğinden emin olun.
  14. Herhangi bir CDN ile uyumludur ve görüntülerinizi dünya çapındaki kullanıcılara daha da hızlı dağıtabilirsiniz.

Artık bir görüntü optimize edici eklentinin sahip olması gereken en iyi özellikleri bildiğinize göre, piyasadaki en iyi eklentilere bakalım.

En İyi 5 Görüntü İyileştirici Eklentisi

Karşılaştıracağımız ve test edeceğimiz en iyi beş görüntü iyileştirici eklentisi:

  1. hayal et
  2. Optimol
  3. Kısa Piksel Görüntü İyileştirici
  4. EWWW Görüntü İyileştirici
  5. JPEG ve PNG resimlerini TinyPNG ile sıkıştırın

Karşılaştırma ne hakkında?

Aşağıda her eklentinin JPG resmini (502 KB) optimize edeceğiz ve kaç KB kaydettiğimizi kontrol edeceğiz. Sonunda, tüm verileri özetleyen bir tablo olacak.

Optimize Edilmemiş JPG Görüntüsü – Kaynak: WordPress Kitaplığı

1. Imagify: Akıllı ve Sezgisel Görüntü İyileştirici Eklentisi

600.000'den fazla aktif kurulum ile piyasadaki en popüler görüntü optimizasyon eklentilerinden biridir!

Ana Özellikler:

  • Imagify'ı diğer görüntü iyileştirici eklentilerinden ayıran şey, yeni Akıllı Sıkıştırma özelliğidir! Resimlerinizi en iyi şekilde optimize eder, böylece ihtiyaçlarınız için hangi sıkıştırma seviyesinin doğru olduğu konusunda endişelenmenize gerek kalmaz.
Yeni Akıllı Sıkıştırma Süreci – Kaynak: Imagify
  • WebP dönüşümü sunar:
WebP dönüştürme özelliği – Kaynak: Imagify

WordPress kitaplığından WebP'nin otomatik olarak oluşturulduğunu görebilirsiniz:

WordPress kitaplığı ve WebP oluşturma – Kaynak: Imagify
  • Sezgisel ve doğru arayüz: ayarlar basittir ve tıklanacak son bir düğme vardır ve iş tamamdır!
  • PNG, JPG, GIF, PDF ve WebP gibi birçok görüntü formatını destekleyin .
  • Optimizasyon ve yeniden boyutlandırma , seçtiğiniz yükleme veya mevcut görüntülerde otomatik olarak yapılır.
  • Akıllı Sıkıştırma sayesinde görüntü kalitesini koruyun .
  • Birden fazla görüntüyü aynı anda sıkıştırmak veya öncelikli olarak hangi görüntülerin optimizasyona ihtiyacı olduğunu manuel olarak seçmek için Tekli ve Toplu Optimizasyon mevcuttur.
  • Hangi küçük resim boyutlarının optimize edileceğini seçme imkanı.
  • Gerekirse orijinal görüntüyü yedekleyin (orijinal dosyalarınız silinmez).
  • Optimizasyon sizin değil, Imagify'ın sunucuları kullanılarak yapılır .
  • Web Uygulaması, WordPress kullanıcısı değilseniz kullanılabilir (ücretsiz hesapların dosya boyutu yükleme sınırı 2 MB'dir.)

Fiyatlandırma:

Ayda 20MB değerinde veri için ücretsiz olan plan, 500MB için aylık 4,99$ veya sınırsız optimizasyonlar için aylık 9,99$'dan başlar. Tam fiyatlandırmayı buradan kontrol edin.

Imagify'ın Performans Sonucu:

Imagify, resim dosyamın boyutunu %87,73 oranında azaltmaya yardımcı oldu. Kaliteden ödün vermeden 502 KB'den 53.70 KB'a çıktı.

Akıllı Seviye, KB'nin neredeyse %90'ını kurtarıyor - Kaynak: Imagify
Akıllı Seviye, KB'nin neredeyse %90'ından tasarruf sağlar – Kaynak: Imagify

2. Optimole: Tembel yükleme ve CDN dağıtımı

Optimole, bulut tabanlı bir sistemle tam otomasyon ve bir dizi optimizasyon özelliği ile birlikte gelir. Her tür cihazda kaliteden ödün vermeden daha küçük boyutlarda görüntüler sunar.

Ana Özellikler:

  • İki sekmeli minimalist ve net arayüz: gösterge tablosu ve ayarlar.
WordPress kontrol paneli sekmesi – Kaynak: Optimole
  • Normal ayarlar ve gelişmiş ayarlar:
WordPress ayarları sekmesi – Kaynak: Optimole
  • WebP ve AVIF dönüştürme : Varsayılan olarak, Optimole bu formatı destekleyen her ziyaretçi için görüntüleri WebP formatında sunar.
  • Tembel yükleme: Optimole , seçtiğiniz görüntülerde <link rel=”preload”> özniteliğini kullanarak tembel yükleme uygular.  
  • Makine öğrenimi sıkıştırması : algoritmalar, en küçük boyutta en iyi görünen görüntü için kayıplı veya kayıpsız optimizasyon sağlar
  • Duyarlı ayarlar: ziyaretçinin tarayıcısı ve görünüm alanı için doğru görüntü boyutunu seçmenize olanak tanır.
  • Bulut Kitaplığı desteği: web sitesi görüntülerinizi doğrudan Optimole Cloud'a aktarın (bu, sunucunuzda depolama alanından tasarruf ettiğiniz anlamına gelir)
  • Filigran: Optimole, işiniz için ihtiyacınız olan bir şeyse, tüm resimlerinize bir filigran uygular.
  • CDN dağıtımı: küresel bir CDN'den ücretsiz olarak görüntüler sunar

Fiyatlandırma:

Temel planla, aylık 5K ziyarete kadar sınırsız sayıda görüntüyü optimize edebileceksiniz, ardından aşağıdaki fiyatlandırma planlarına göre yükseltme yapmanız gerekecek:

Temel planla, aylık 5K ziyarete kadar sınırsız sayıda görüntüyü optimize edebileceksiniz, ardından aşağıdaki fiyatlandırma planlarına göre yükseltme yapmanız gerekecek:

Optimole'nin Performans Sonucu:

Optimole, resim dosyamın boyutunu %67 oranında azalttı. 502 KB'den 164 KB'ye çıktı. Bulut üzerinde yapıldığı için optimizasyonu WordPress kitaplığında göremezsiniz: Optimole, optimize edilmiş görüntüleri doğrudan ön uçtaki ziyaretçilere sunar.

Optimole (164KB) ile yeni resim boyutunu kontrol etme - Kaynak: Google Chrome Araçları
Optimole (164KB) ile yeni görüntü boyutunu kontrol etme – Kaynak: Google Chrome Araçları

3. ShortPixel – Şık Bir Arayüz

ShortPixel, tüm resimlerinizi ve PDF belgelerinizi tek bir tıklamayla sıkıştırabilen, kullanımı kolay bir resim optimizasyon eklentisidir.

Ana Özellikler:

  • Sıkıştırma türünü belirlemek, yedeklemek ve büyük görüntüleri yeniden boyutlandırmak için hızlı düğmeler sunan basit arayüz .
Genel ayarlar – Kaynak: Kısa piksel WordPress panosu

"Gelişmiş" bir sekme, görüntüleri WebP veya AVIF'e dönüştürmek için ihtiyacınız olan tüm yeni nesil ayarları sağlar.

Gelişmiş ayarlar – Kaynak: Kısa piksel WordPress panosu
  • 4 adımda çok kullanışlı bir sihirbazla toplu sıkıştırma . 'Toplu', Medya Kitaplığındaki ve NextGen Gallery gibi üçüncü taraf eklentilerdeki mevcut tüm görüntüleri optimize eder .
  • Her türlü görüntüyü destekleyin (PNG, JPEG, vb.).
  • Yükleme sırasında resimlerin otomatik olarak optimize edilmesini devre dışı bırakma seçeneği.
  • %5'ten daha az optimize edilmiş görseller için kredi kullanılmaz.
  • Büyük resimler için kullanışlı olan 2 farklı seçenekle resimleri küçültme seçeneği.
  • Görüntüleri dünya çapında daha hızlı dağıtmak için Cloudflare entegrasyonu (CDN'nizin olması gerekir).

Fiyatlandırma:
ShortPixel, her ay 100 ücretsiz resim kredisi sağlar. Size en uygun olana göre aylık planlar veya nakit krediler mevcuttur. İlk plan, 7.000 görüntü kredisi için 3.99 dolardan başlıyor.

ShortPixel'in Performans Sonucu:

Shortpixel, resim dosyamın boyutunu %66,95 oranında azalttı ve WebP'ye dönüştürdü. 502 KB'den 165 KB'a çıktı.

ShortPixel ile %66,95 tasarruf - Kaynak: ShortPixel WordPress Medya Kitaplığı
ShortPixel ile %66,95 tasarruf – Kaynak: ShortPixel WordPress Medya Kitaplığı

4. EWWW – Ücretsiz WordPress Image Optimizer ve Dosya Boyutu Sınırı Yok

EWWW IO ile mevcut tüm resimlerinizi herhangi bir eklentiden optimize edebilirsiniz! EWWW IO, yeni resim yüklemelerini otomatik olarak halleder. Başka bir şey yapmanıza gerek yok.

Ana Özellikler:

  • Eklentiyi kurmanıza ve web siteniz için ihtiyaç duyduğunuz optimizasyon seçeneklerini seçmenize yardımcı olan sezgisel bir sihirbaz :
EWWW Sihirbazı - Kaynak: EWWW'nin WordPress panosu
EWWW Sihirbazı – Kaynak: EWWW'nin WordPress panosu
  • Görüntüleri WebP'ye dönüştürün .
  • Hız Sınırı Yok ve sınırsız dosya boyutu.
  • Sitenizin performansını artırmak için tembel yükleme uygulayın ve ekranın üst kısmındaki resimleri öncelikli olarak yükleyin.
  • Büyük resimlerin WordPress kitaplığına yüklenmesini önlemek için yükleme sırasında otomatik yeniden boyutlandırma .
  • Eksik boyutu (genişlik/yükseklik) ekleyin.
  • Duyarlı seçenekler: duyarlı işaretleme (srcset) içinde doğru görüntü boyutunu algılar.
EWWW Temel Seçenekler - Kaynak: EWWW'nin WordPress panosu
EWWW Temel Seçenekler – Kaynak: EWWW'nin WordPress panosu

Fiyatlandırma:

Çekirdek eklenti ücretsizdir ve çok iyi bir sıkıştırma seviyesi sunar. Ancak ücretli servislerde sıkıştırma daha iyi oluyor. Fiyatlandırma, bir site için ayda 7 ABD dolarından başlar.

EWWW'nin performans sonuçları:

İmajım 502 KB'den 156.9 KB'a çıktı, bu da %69 tasarruf anlamına geliyor.

EWWW ile daha hafif görüntü - Kaynak: WordPress kitaplığı
EWWW ile daha hafif görüntü – Kaynak: WordPress kitaplığı

5. TinyPNG – Optimizasyon ve Temel Arayüz

Bu eklenti, iki popüler görüntü sıkıştırma hizmeti TinyJPG ve TinyPNG ile entegre olarak görüntüleri otomatik olarak optimize eder.

Ana Özellikler:

  • Temel ayarlara sahip temel arayüz - çok fazla seçenek yok ama eklenti temellere bağlı kalıyor ve işi temiz bir ayar sayfasıyla yapıyor. Seçtiğim ayarları etkinleştirmem ve otomatik optimizasyon sürecini çalıştırmam yalnızca birkaç saniyemi aldı:
Temel seçenekler sayfası - Kaynak: TinyPNG kontrol paneli
Temel seçenekler sayfası – Kaynak: TinyPNG kontrol paneli
  • Arka planda ve/veya yükleme sırasında yeni görüntüler için sıkıştırma.
  • WordPress kitaplığındaki resimleri manuel olarak seçmek isteyip istemediğinize karar verin.
  • Mevcut medya kitaplığınızın kolay toplu optimizasyonu .
  • WebP optimizasyonu.
  • Hangi görüntü boyutunu sıkıştırmak istediğinizi seçin.
  • Yüklenen her resim için bir maksimum genişlik ve yükseklik ayarlayın.

Fiyatlandırma:

Standart bir WordPress kurulumu ile her ay yaklaşık 500 sıkıştırmayı ücretsiz olarak yapabilirsiniz. Daha fazla görüntüyü optimize etmeniz gerekiyorsa yükseltme yapmanız gerekir.

TinyPNG'nin performans sonuçları:

Resim dosyamın boyutu 502 KB'den 160 KB'ye çıktı, bu da toplamda %61 tasarruf anlamına geliyor.

TinyPNG'nin performans sonuçları – Kaynak: WordPress kitaplığı

Teste Son Bakış

Imagify, orijinal resimden %87,73 tasarrufla potansiyel müşterileri . Diğer dört optimize edici eklentiyle ilgili olarak, yarış sıkı! Ortalama olarak, diğer optimize edici eklentileri benzer bir tasarruf sağlar (yaklaşık %65).

OPTIMIZER EKLENTİ ORİJİNAL BOYUT OPTİMİZASYONDAN SONRA DOSYA BOYUTU OPTİMİZASYON YÜZDESİ SIKIŞTIRMA TÜRLERİ
hayal et 502 KB 53,70 KB %87.73 Akıllı (Kayıplı)
Optimol 502 KB 164 KB %67 kayıplı
KısaPiksel 502 KB 165 KB %66.95 kayıplı
EWWW görüntü iyileştirici 502 KB 156,9 KB %69 kayıplı
JPEG ve PNG resimlerini TinyPNG ile sıkıştırın 502 KB 160,2 KB %61 kayıplı

Imagify'ın Performans Üzerindeki Etkisi

Imagify, web sitenizin hızını birkaç tıklamayla tam anlamıyla artırır. Yeni Akıllı Sıkıştırma sayesinde, kaliteden ödün vermeden resimlerinizin dosya boyutunu küçülten en iyi resim sıkıştırma eklentilerinden biridir. Önceki denetimimizde, Imagify dosya boyutumuzu %87,73 oranında azaltmıştı!

Görüntü optimizasyonunun performansı nasıl artırdığını ve Lighthouse denetimini nasıl iyileştirdiğini gösteren bir vaka çalışması yürütüyorum. Optimize edilmemiş JPG resimleriyle bir web sayfası oluşturdum ve Imagify'ı çalıştırmadan önce ve sonra sonuçlarımı karşılaştırdım.

Optimize edilmemiş büyük resimlerle test sitesi

Sonuçları mobilde açıklayalım!

Performans testine başlamadan önce okumamız gereken not: Görüntü optimizasyonu söz konusu olduğunda, Lighthouse'dan izlenecek dört ana KPI vardır:

– Görüntüleri verimli bir şekilde kodlayın (sıkıştırın ve web için uygun şekilde optimize edin)
– Görüntüleri yeni nesil formatlarda sunun (AVIf veya WebP gibi)
– Görüntüleri verimli bir şekilde kodlayın (resimlerinizi web için hazır hale getirin (sıkıştırma ve optimizasyon ile)
– Görüntüleri uygun şekilde boyutlandırın (görüntüleri mobil ve masaüstü için optimize edin).

Imagify Yok – Performans raporu ve öne çıkanlar:

Imagify olmadan Lighthouse, çeşitli iyileştirme alanları ile tüm resimlerimi optimize edilmemiş olarak işaretler:

Imagify içermeyen Fırsatlar/Teşhis bölümleri - Kaynak: PageSpeed ​​Insights
Imagify içermeyen Fırsatlar/Teşhis bölümleri – Kaynak: PageSpeed ​​Insights

Performansın kendisi de o kadar iyi değil. Çoğunlukla görüntü optimizasyonu eksikliğinden kaynaklanan bir 74/100 alıyorum. En Büyük İçerikli Boyama metriği 7,5 s puanla kırmızı renktedir ve İlk İçerikli Boyama turuncu renktedir.

Imagify olmadan performans metrikleri - Kaynak: PageSpeed ​​Insights
Imagify olmadan performans ölçümleri – Kaynak: PageSpeed ​​Insights

Imagify ile – Performans raporu ve öne çıkanlar:

  • Performans puanı 74/100'den neredeyse 90/100'e çıktı!
Imagify'ın Akıllı Sıkıştırma düzeyiyle iyileştirilmiş performans metrikleri - Kaynak: PageSpeed ​​Insights
Imagify'ın Akıllı Sıkıştırma düzeyi ile iyileştirilmiş performans metrikleri – Kaynak: PageSpeed ​​Insights
  • FCP'm şimdi yeşilde ve LCP'm turuncu ve yeşil arasında tam kenarda.
  • Imagify ayrıca "Görüntüleri yeni nesil biçimlerde sun - WebP", "Görüntüleri uygun şekilde boyutlandır" ve "Görüntüyü verimli bir şekilde kodla" gibi birkaç PSI uyarısını da düzeltti.
  • Tüm resimlerim artık optimize edildi!
Imagify ile denetimden geçildi - Kaynak: PageSpeed ​​Insights
Imagify ile denetimden geçildi – Kaynak: PageSpeed ​​Insights
Uzman ipucu : Imagify, PSI tarafından işaretlenen tüm performans sorunlarını çözemez. Ayrıca, diğer şeylerin yanı sıra, kullanılmayan JS veya CSS'yi geciktirmenize ve kaldırmanıza yardımcı olabilecek en iyi önbellekleme eklentilerinden biri olan WP Rocket'e de ihtiyacınız olabilir.

Toplama

Performans karşılaştırma denetimimize göre, Imagify, WordPress sitenizin en akıllı ve en sezgisel optimize edici eklentisidir. JPEG resmimiz 502 KB'den 53KB'ye çıktı (neredeyse %80'lik bir tasarruf).

Yeni Akıllı Sıkıştırma düzeyi sayesinde Imagify, performans testimiz sırasında Lighthouse tarafından işaretlenen görüntüyle ilgili sorunların çoğunun düzeltilmesine de yardımcı oldu:

Fırsatlar/Uyarılar Bölümü – Imagify Yok Geçti Denetim Bölümü – Imagify ile

Imagify image optimizer eklentisi, kaliteden ödün vermeden görüntü dosya boyutlarını küçültür, web sitenizin daha hızlı yüklenmesini sağlar, SEO sıralamanızı iyileştirir ve bant genişliğinden tasarruf etmenizi sağlar. Neden Imagify'ı denemiyorsunuz? Ayda 200 MB'a kadar görsel ücretsizdir ve aldığınız tek risk, ziyaretçilerinize daha hızlı görseller sunarak onları memnun etmektir!