ShortPixel İncelemesi: Görüntü Sıkıştırma Yoluyla Web Sitenizin Performansını Nasıl Optimize Edersiniz

2014'ten beri yarım milyondan fazla kullanıcı ShortPixel'in mükemmel görüntü optimizasyonunu denedi. Web hızı optimizasyonunun gelecekte ne kadar önemli olacağını öngören Romanya merkezli şirket, GTmetrix veya Google PageSpeed ​​Insights'ın birkaç tıklamayla bildirdiği resimlerle ilgili tüm uyarıları çözen, kullanımı son derece kolay bir eklenti olan ShortPixel Adaptive Images'ı piyasaya sürdü. Bu, SEO'nuzu ve web sitenizin yükleme hızını artırır.

Peki eklenti tüm bunları nasıl yapıyor? Kısa Piksel Uyarlanabilir Görüntülerin (kısaca SPAI ) bu ayrıntılı incelemesinde öğrenelim.

ShortPixel Uyarlanabilir Görüntüler Ne Yapar?

İşte ShortPixel'in yaptığı 4 ana şey:

• Bir CDN'den görüntüleri sunar : ShortPixel Uyarlanabilir Görüntüler, bir web sitesinin ziyaretçileri tarafından görüntülenen tüm görüntüleri alır ve bunları ShortPixel'in CDN'sinden sunar. CDN nedir? Bir İçerik Dağıtım Ağıdır. Basit bir deyişle, belirli bir web sitesinin kopyalarını içeren dünya çapında dağıtılmış bir sunucu grubudur. Böylece, hangi ülkede veya bölgede bulunursa bulunsun, herhangi bir kullanıcı iyi yükleme sürelerine sahip olacaktır. ShortPixel'in CDN'sinden görüntüleri yükleyerek, yaptığınız şey sayfanın yüklenme hızını artırmaktır (çünkü büyük olasılıkla CDN daha hızlı yüklenir). ortalama bir barındırma sağlayıcısı, dünyanın her yerinde sunuculara sahip olmanın yanı sıra) ve görüntüler oradan istenmeyeceğinden, ShortPixel'in CDN'sinden talep edileceğinden, sunucudan bazı kaynakları kaydetme.
• Görüntüleri sıkıştırır : ShortPixel CDN'den sunulan görüntüler, ShortPixel'in Kayıplı, Parlak ve Kayıpsız olmak üzere 3 optimizasyon seviyesi sunan güçlü optimizasyon algoritması kullanılarak optimize edilir. Daha sonra.
• Uyarlanabilir görüntüler sunar : Eklentinin adı buradan gelir. Bir resim yüklediğinizi ve onu tam boyutlu sürümünde bir sayfaya eklediğinizi varsayalım. Sayfayı akıllı telefondan ziyaret eden kullanıcının, dizüstü bilgisayar kullanan bir kullanıcıyla aynı boyutta görseli görmesi gerekmeyecek. Eklenti, görüntüleri tam olarak cihazın istediği boyutta sunarak bununla ilgilenir. Hiç GTmetrix kullanıp "Doğru boyutta resimler" hatası aldınız mı? Tam da bundan şikayet ediyor. ShortPixel Uyarlanabilir Görüntüler, birkaç tıklamayla bu mesajdan kurtulur!

• Görüntülerle ilgili ihtiyaç duyabileceğiniz tüm sorunları çözer : görüntüleri sıkıştırmanın ve doğru boyutta sunmanın yanı sıra, görüntüler birçok yönden daha da geliştirilebilir. ShortPixel Uyarlanabilir Görüntüler bununla da ilgilenir ve birkaç tıklamayla aşağıdakileri yapabilirsiniz:
  • EXIF bilgilerini kaldırın
  • Görüntüleri WebP formatında sunun
  • Tembel yüklenen resimler
  • Görüntüleri akıllıca kırpın
  • Resimleri tembel yüklemeden hariç tut (bir resmi önceden yüklemek için kullanışlıdır)

ShortPixel Uyarlanabilir Görüntüler nasıl çalışır?

Açıkladığımız gibi, bir web sitesinin sayfalarından biri her ziyaret edildiğinde, ShortPixel Uyarlanabilir Görüntüler (SPAI) kodunu analiz eder ve optimize edilmemiş her orijinal görüntüyü doğru boyutta ve optimize edilmiş görüntüyle değiştirir. Değiştirilen her görüntü ShortPixel CDN'den sunulur.

SPAI, sunucudaki hiçbir dosyaya dokunmaz; SPAI, görüntüleri anında optimize eder , yani orijinal görüntülere dönmek istiyorsanız, bunları devre dışı bırakabilirsiniz. Bu, tüm kullanıcılar için tamamen şeffaf olan ayrıntılı süreçtir:

1. Bir kullanıcı, resimlerin bulunduğu bir sayfayı ziyaret eder.

2. Sayfa yüklenirken, SPAI koddaki herhangi bir resim URL'sini arar, örneğin:

3. Bir resim URL'sini algıladıktan sonra, bu resmi, onu optimize eden ve ShortPixel'in CDN'sinde saklayan ShortPixel sunucularına gönderir. Bu adım, yalnızca belirli bir görüntü boyutu ilk kez istendiğinde yapılır.

4. Ardından, SPAI, URL'yi, optimize edilmiş ve uygun şekilde boyutlandırılmış resmi içeren CDN'ye işaret eden yenisiyle değiştirir:

5. Sayfanın yüklenmesi tamamlanır ve görüntüler ShortPixel'in hızlı CDN'sinden sunulur!

ShortPixel Uyarlanabilir Görüntüleri Yükleme ve Ayarlama

Kurulum

Bu en kolay adımdır, diğer eklentiler gibi yüklenir. Aramanız gereken sayfa bu: ShortPixel Uyarlanabilir Görüntüler – WordPress.org

kurmak

İlk katılım sihirbazı

ShortPixel Uyarlanabilir Görüntüleri ilk kez kullanıyorsanız, şimdi Başlangıç ​​Sihirbazına yönlendirileceksiniz:

Bu 4 adımlı sihirbaz, tüm görüntülerin optimize edilmiş CDN'den sunulması için SPAI'yi doğru şekilde yapılandırmanıza yardımcı olacaktır.

Örneğin, halihazırda SPAI kullanıyorsanız ve yeni sürüme güncellediyseniz, Ayarlar > ShortPixel AI'ye giderek ve sağ üst Yardım menüsünde bulunan "Kurulum Sihirbazı" düğmesine tıklayarak sihirbazı yeniden başlatabilirsiniz:

ShortPixel Uyarlanabilir Görüntülerin çalışmaya başlamak için bir API Anahtarı gerektirmediğini unutmayın (ShortPixel Image Optimizer'ın aksine). ShortPixel kredilerinizin kullanılması için web sitenizi/alan adınızı hesabınızla ilişkilendirmeniz yeterlidir ve bu, Başlangıç ​​Sihirbazı tarafından otomatik olarak yapılır.

Onboarding Wizard'ı tamamladıktan sonra, optimize edilmiş görsellerin görünmesi için sitenizin önbelleğini temizlediğinizden emin olun!

Ayarlar

ShortPixel Adaptive Images'ın kullanımı çok kolaydır, çünkü Onboarding Wizard ile etkinleştirip kurduktan hemen sonra sihrini yapmaya başlar; herhangi bir ON düğmesine veya benzerine tıklamanıza gerek yok. Ancak SPAI, görüntü optimizasyonunu ayarlamak için bazı ayarlar da sağlar. Erişmek için WordPress yönetici alanınıza giriş yapın ve Ayarlar > ShortPixel AI'ye gidin. En önemli ayarların üzerinden geçeceğiz, bu yüzden Sıkıştırma sekmesiyle başlıyoruz.

• Sıkıştırma seviyesi : burada resimlerimizin hangi sıkıştırma seviyesine sahip olmasını istediğimizi seçebiliriz.
  • Kayıplı çoğu kullanıcı için en iyi seçenektir. Kayıplı algoritmalarla işlenen görüntüler, elde edilebilecek en küçük optimize edilmiş görüntülerdir. Bu nedenle, sitenizin hızı çok önemliyse ve optimizasyon ile resim kalitesi arasında en iyi dengeyi istiyorsanız, Kayıplı optimizasyonu kullanmanızı öneririz.
  • GTmetrix veya Google PageSpeed ​​Insights'ı hala önemsiyorsanız, ancak sayfa hızında hafif bir kaybın birinci sınıf görüntü kalitesi için kabul edilebilir bir uzlaşma olduğuna inanıyorsanız, parlak en iyi seçimdir.
  • Kayıpsız ile görüntüler, orijinallerle aynı piksel pikseldir, ancak Kayıplı veya Parlak işlenmiş dosyalara kıyasla daha küçük bir boyut küçültme sunarlar. Resimlerinize dokunulmadan kalmasını istiyorsanız, bu seçeneği seçin.
• WebP desteği : WebP biçimi, Google tarafından oluşturulan ve görüntü kalitesinde çok az kayıpla mükemmel sıkıştırma sonuçları alan bir görüntü biçimidir. WebP'nin nasıl davrandığına dair hızlı bir örnek: İnternetten bir fotoğraf çektik ve rastgele bir çevrimiçi JPG'den WebP'ye dönüştürücü kullanarak 1,05 MiB'den 344 KiB'ye gittik, %67,93'lük bir azalma ve görüntü kalitesi neredeyse aynı! Bu nedenle, “WebP Desteği” seçeneğini işaretleyerek SPAI'ye ShortPixel'in CDN'sinden sunulan görüntünün tarayıcı uyumlu olduğu sürece .webp formatında olması gerektiğini söylüyoruz.

• EXIF'i Kaldır : Eklenti, konum, yazar, kamera modeli vb. gibi görüntünün kendisinde gömülü olan "ekstra" bilgilerin ortadan kaldırılmasını sağlar. Bu bilgiler genellikle gerekli değildir ve kaldırılması görüntünün ağırlığının azaltılmasına yardımcı olur. birazcık. Etkinleştirmeniz önerilir.

Şimdi Davranış sekmesine geçiyoruz. Diğer birçok tweaks arasında aşağıdakileri bulabiliriz:

• Akıllı kırpma : Eklenti, görüntünün tamamının gösterilmediği durumları belirleyecek ve buna göre kırpacaktır.
• Oturum açmış kullanıcılar : Varsayılan olarak, ShortPixel AI, oturum açmış olsanız bile görüntüleri sunar ve optimize eder. Ancak, bazı CDN trafiğini ve kredilerini kaydetmek istiyorsanız, bu seçeneği devre dışı bırakabilirsiniz ve ardından SPAI yalnızca oturum açmış olan kullanıcılar için çalışacaktır. dışarıdaki kullanıcılar (ziyaretçiler).
• LQ görüntü yer tutucuları : LQIP, Düşük Kaliteli Görüntü Yer Tutucuları anlamına gelir. Bunlar, ilk sayfa yüklendiğinde yüklenecek çok düşük kaliteli (ve dolayısıyla çok hafif) görüntülerdir ve sayfa tamamen yüklendikten sonra, tam kaliteli olanlarla değiştirilirler. Bu, algılanan yükleme süresini artırmaya yardımcı olur.

Ardından, Alanlar sekmesinde, SPAI'ye hangi görüntülerin ayrıştırılması ve optimize edilmesi gerektiğini söylemek için her türlü ayarı bulacağız:

• SVG görüntüleri (bunlar optimize edilmez, yalnızca CDN'de saklanır).
• Bu durumda CSS görüntüler, CSS dosyası kendisi de CDN üzerinde depolanacaktır.
• JS bloklarındaki resimler
• JSON verilerindeki resimler

Son olarak, Hariç Tutulanlar sekmesinde, resimleri optimizasyondan hariç tutabileceğimiz birkaç alan buluyoruz:

• Hariç tutulan seçiciler : SPAI'nin optimizasyondan hariç tutmasını istediğimiz CSS seçicilerini buraya yazabiliriz.
  • Bunları “Tembel yükleme” içine yazarsanız, bu tür seçiciler tembel yüklenmeyecek, ancak yine de optimize edilecek ve yeniden boyutlandırılacaktır.
  • Bunları “Yeniden boyutlandırma” olarak yazarsanız, SPAI bu tür görüntüleri optimize eder ancak yeniden boyutlandırmaz.
  • Bunları “Tamamen dışarıda bırak” olarak yazarsanız, SPAI optimizasyon veya yeniden boyutlandırma olmaksızın bunları tamamen yok sayar.
• Hariç tutulan URL'ler : SPAI'nin bazı resimleri URL'ye göre yoksaymasını istiyorsanız, normal ifadeler (örneğin tüm GIF'leri veya tüm PNG'leri hariç tutmak için) veya yollar (örneğin tek bir resmi hariç tutmak için) kullanarak onları burada hariç tutuyoruz. . Eklenti, bu alanın nasıl kullanılacağına dair iyi bir açıklama içerir, kontrol ettiğinizden emin olun!

Tüm ayarlar yapıldıktan sonra , sitenin herhangi bir sayfasındaki optimize edilmiş görüntülerin durumunu kontrol etmek için basit bir araç olan yeni Image Checker aracını kontrol ettiğinizden emin olun. Oturum açmışken sayfalarınızdan herhangi birini ziyaret edin; Araç Çubuğunda ünlü ShortPixel robotunu göreceksiniz:

Bu simgeye tıklayın ve Image Checker'ı açacaksınız. Her resim için bir etiket görünecektir: “CDN” veya “ORIGIN”. “CDN”, görüntünün ShortPixel'in CDN'sinden optimize edilmiş olarak sunulduğu ve sunucudan sunulduğu “ORIGIN” veya başka bir deyişle, ShortPixel Uyarlanabilir Görüntülerin onu işlemediği anlamına gelir.

Ayrıca, imleç çarpı işaretine (⌖) dönüşecek ve bir resme tıkladığımızda ek bilgi ve eylemler alacağız:

Fiyatlar ve Planlar

Fiyatlandırma hakkında konuşmadan önce SPAI'nin anında çalıştığını hatırlamamız gerekiyor. Yalnızca ön uçtan en az bir kez görüntülendiyse görüntüleri işler. Bu gerçekleşene kadar görüntü işlenmeden kalacak ve dolayısıyla herhangi bir kredi harcamayacaktır.

Bir görüntüyü işlemek, akıllı kırpma (seçildiyse), yeniden boyutlandırma ve optimize etme anlamına gelir. Görüntü işlendikten sonra ShortPixel CDN sunucularında saklanır ve satın aldığınız CDN trafik kotasını kullanan herkese sunulabilir. Yeterli CDN trafik kotası olduğu sürece, optimize edilmiş görüntüler ShortPixel'in CDN'sinden sunulacaktır.

ShortPixel, CDN kotasına dönüştürülen krediler sunar. Kural basittir: 5 MB CDN trafiği = 1 kredi . Görüntüleri işlemek için hem bir kerelik hem de aylık krediler kullanılabilir.

Aylık planlar

• Ücretsiz plan = 100 kredi = 500 MB CDN trafiği = ~500 ziyaret/ay
• 4,99 ABD doları /aylık plan = 5.000 kredi/ay = 25 GB CDN trafiği = ~25.000 ziyaret/ay
• Aylık 9,99 ABD doları plan = 16.000 kredi/ay = 80 GB CDN trafiği = ~80.000 ziyaret/ay
• 29,99 $ /aylık plan = 55.000 kredi/ay = 275 GB CDN trafiği = ~275.000 ziyaret/ay
• 99,99 ABD doları /aylık plan = 220.000 kredi/ay = 1 TB CDN trafiği = ~1.100.000 ziyaret/ay

Tek seferlik planlar

• 9,99 ABD doları – 10.000 kredi = 50 GB = ~50.000 ziyaret
• 19,99 – 30.000 kredi = 150 GB = ~150.000 ziyaret
• 29,99 $ – 50.000 kredi = 250 GB = ~250.000 ziyaret
• 99$ – 170.000 kredi = 850 GB = ~850.000 ziyaret
• 249 – 500.000 kredi = 5 TB = ~2.500.000 ziyaret

Örnek: Ayda 10.000 ziyaret alan 5000'den fazla görsel içeren orta ölçekli bir web siteniz olduğunu varsayalım.

Aylık 4,99 ABD doları tutarında bir plan 25 GB CDN trafiğine izin verir ve bu, testlerimize göre ayda yaklaşık 25.000 ziyaret anlamına gelir.

Planlar ve fiyatlandırma hakkında daha fazla bilgiyi buradan edinebilirsiniz.

Buna değer mi?

Bir web sitesinin en ağır kısmının her zaman resimler olduğunu ve web sitesinin yüklemek için harcadığı her ekstra saniyenin kayıp kullanıcı ve dönüşümle sonuçlandığını hesaba katarsak , kesinlikle buna değer . Bu bir yükle ve unut eklentisidir ve orijinal görüntülerinize geri dönmek istemeniz durumunda, onu kaldırabilirsiniz ve bu hile yapacaktır.

Ek olarak, destek ekipleri harika ve düzinelerce kullanıcı wordpress.org'da bunun için kefil olabilir.

Web sitenizin hızını artırmaya yardımcı olan, Google'daki konumunuzu ve ziyaretçi sayınızı artıran, şiddetle tavsiye edilen bir eklentidir. Ve bunu Cloudways gibi kaliteli barındırma ile birleştirirseniz, sonuçlar daha da heyecan verici olacaktır.

ShortPixel Uyarlanabilir Görseller hakkındaki bu incelemenin sitenizi süper hızlı hale getirmenize yardımcı olacağını umuyoruz!