WordPress resminizde neden ve nasıl kayıplı sıkıştırma kullanılır
HTTP arşivine göre, Aralık 2018’de, görüntü masaüstü ve mobil cihazlardaki web sitesi sayfalarının ortalama ağırlığının% 40’ından fazlasını oluşturuyor. Bu çok büyük! Yeni mobil ilk indeksine ve performansa gelirken, görüntü optimizasyonu WordPress sitenizin ne kadar hızlı yüklenebileceği konusunda önemli bir rol oynar. Görüntü sıkıştırma, uygulayabileceğiniz en kolay optimizasyonlardan biridir, sırayla en büyük etkiye sahip olacaktır. Temel olarak, bu iki popüler sıkıştırma formu kullanarak görüntü dosyası boyutunuzda bir azalma gerektirir: kayıp ve kayıpsız. WebP her iki sıkıştırma yöntemini de destekler!
Ücretsiz demoyu deneyin
Bugün bu görüntülerin iki tür sıkıştırılmasına dalacağız ve hangilerini kullanmanızı önerdiğimizi tartışacağız. Bu, işlettiğiniz iş türüne göre değişebilir.
Kayıp sıkıştırma
Kayıpsız sıkıştırma
Hangi sıkıştırma yöntemi daha iyidir?
WordPress’te Kayıplı Sıkıştırma Nasıl Kullanılır
İlk sıkıştırma formunun kayıp sıkıştırması kayıplıdır. Kayıplı sıkıştırma, görüntünüzdeki bazı verilerin ortadan kaldırılmasını içerir. Bu nedenle, bu bozulmayı görebileceğiniz anlamına gelir (kalite azalması veya bazı kişilerin piksel olarak adlandırıldığı). Bu nedenle, görüntünüzü ne kadar azalttığınıza dikkat etmelisiniz. Sadece kalite nedeniyle değil, aynı zamanda süreci çeviremeyeceğiniz için. Tabii ki, kayıplı sıkıştırmanın en büyük faydalarından biri ve bunun neden en popüler sıkıştırma yöntemlerinden biri olduğunu, dosya boyutunu çok büyük miktarlarda azaltabilmenizdir.
JPEG ve GIF her ikisi de kayıp görüntü formatlarıdır.
JPEG, kaliteli ve dosya boyutu dengesi için kalite seviyesini ayarlayabileceğiniz için hızlı yükleme süresi gerektiren siteler için çok iyidir. (Önerilen okuma: JPG vs. JPEG: En yaygın görüntü dosyası biçimini anlamak) WordPress, görüntüyü otomatik olarak sıkıştırır. Medya kitaplığına yüklerken JPEG’nizi otomatik olarak sıkıştırır mısınız? Varsayılan olarak, WordPress, orijinal boyutunun% 90’ına kadar otomatik olarak görüntüleri sıkıştırır. Bununla birlikte, WordPress 4.5’te, tüm panolardaki performansı daha da artırmak için bunu% 82’ye çıkarırlar. Görüntünüzün neden yeni WordPress kurulumunda küçük bir piksel göründüğünü merak ediyorsanız, bunun nedeni budur.
Otomatik sıkıştırma çok iyi olsa da, genellikle% 82’sinin sitenizin performansı üzerinde gerçekten bir etkisi olacak kadar uzak olmadığını görüyoruz. Bu nedenle, aşağıdaki filtreyi işlevlerinize eklemek istiyorsanız, bu seçeneği devre dışı bırakabilirsiniz. Unutmayın, sitenizi düzenlemeden önce her zaman bir yedek alın. add_filter (‘jpeg_quality’, create_function (”, ‘dönüş 100;’)); WordPress’in otomatik sıkıştırma oranını artırmak istiyorsanız, filtreler ekleyebilir ve aşağıdaki örnekte% 70 gibi orijinal dosyaların yüzdesini azaltabilirsiniz.
add_filter (‘jpeg_quality’, create_function (”, ‘dönüş 70;’)); Unutmayın, bu yüklenen görüntüyü etkilemez. Mevcut medya kütüphanesine uygulamak için Regenerate küçük resimler gibi bir eklenti kullanmalısınız. Ya da daha da iyisi, yalnızca kendi temanızı terk etmenizi ve sadece yüklemeden önce görüntüyü optimize eden (aşağıya daha fazla yönlendireceğiz) veya resimlerinizi daha da sıkıştırmayı WordPress eklentisini kullanmanızı öneririz. Görüntüleri Web için Kaydet (Yazılım) ile sıkıştırın (yazılım) Adobe Photoshop, Affinity fotoğrafı, afinite tasarımcısı veya görüntü kalitesi ayarlarını ayarlamak için diğer görüntü editörleri (aşağıda gösterildiği gibi) kullanabilirsiniz. Çoğu araçta, bu “Web’e Kaydet” veya “Dışa Aktarma Ayarları” altında. Fotoğrafın kalitesini değiştirin
Kayıplı sıkıştırma seviyelerinin küçük bir karşılaştırmasını yaparsak,% 50’sinin harika göründüğünü görebiliriz. % 33’ü bazı arka plan ayrıntılarında (ancak çok gösterişli değil) biraz bulanık başlıyor ve% 5’i açıkça kabul edilemez. Bu sadece WordPress’te otomatik olarak% 82’nin yeterli olmadığı bir örnektir. Dosya boyutunu daha da azaltmak için çok daha yüksek bir hızda sıkıştırılabilir ve sıkıştırmalısınız.
Kayıplı sıkıştırılmış-1.JPG: 227 KB (2.000 piksel kat 1463 px) Azaltma% 91.95
Kayıpksiyonlu sıkıştırılmış-2.jpg: 185 kb (2.000 px kat 1463 px) azaltma% 93.44
Kayıpkalı sıkıştırılmış -3.jpg: 5 kb (2.000 px kat 1463 px) azaltma% 99.82
Kayıplı sıkıştırmanın karşılaştırılması
Sıkıştırılmış%50 kullanmayı seçtiğinizi varsayalım. Dosya boyutu, orijinal 2+ MB dosyasından kesinlikle çok daha küçük olan 227 KB’dir. Ancak, bu sayfadaki diğer 15+ görüntüden sadece biri olması hala iyi değil. Genel olarak, en iyisi mümkünse 100 KB altında tüm görüntülerinizi saklamaktır. Benim durumumda, çok daha küçük olabilmelisin. Yani görüntünüzün boyutunu değiştirmenin de önemli olduğu yer burasıdır. Şekil% 50 boyut olarak değişti, ilk olarak 1251 px kat 916 px sadece 95 kb. Ancak unutmayın, görüntünüzün boyutunu azaltmak istemeyebilirsiniz, çünkü WordPress 4.4’te şimdi duyarlı görüntüler için desteğe sahiptir (CSS tarafından azaltılmaz). WordPress otomatik olarak medya kütüphanesine yüklenen her bir görüntünün birkaç boyutunu yapar. SRCSET özniteliğine sunulan görüntünün boyutunu girerek tarayıcı artık en uygun boyutu indirmeyi ve diğerlerini yok saymayı seçebilir. Kodunuzun gerçekte ne olduğu örneğine bakın. Koddaki SRCSET’e duyarlı görüntülere örnekler
Google PagePeed Insights, uyarıyı ortadan kaldırmak istiyorsanız, görüntü uyarılarını optimize eder, en kolay yollardan biri Google’ı sakinleştirmek için kayıplı sıkıştırma kullanmaktır. Kayıpsız sıkıştırma, kayıpsız ikinci sıkıştırma formuna dalma zamanıdır. Kayıpsız sıkıştırma, kayıptan farklı olarak, görüntü kalitesini azaltmaz. Bu nasıl mümkün olabilir? Bu genellikle gereksiz meta verilerin kaldırılmasıyla yapılır (sonuçta ortaya çıkan veriler, görüntüleri yakalayan cihaz tarafından otomatik olarak oluşturulan veriler). Bununla birlikte, bu yöntemin en büyük zayıflığı, dosya boyutunda önemli bir azalma görmeyeceğinizdir. Başka bir deyişle, bu zaman zaman çok fazla disk alanı alacaktır.
Photoshop, FileOptimizer veya ImageOptim gibi araçları kullanarak masaüstünüzde kayıpsız sıkıştırma yapabilirsiniz.
Kayıplı sıkıştırma seviyelerinin küçük bir karşılaştırmasını yaparsak, kayıpsız sıkıştırma kullanırken herhangi bir kaliteyi kaybetmediğinizi görebiliriz. Ancak, görüntü dosyasının boyutu sadece%10,84 azaldı. Bu, kayıplı sıkıştırma kullanılırken% 90’dan fazla ile karşılaştırılır.
orijinal.jpg: 227 kb (2.000 piksel 1463 piksel)
Kayıpsız işgal edilen.jpg: 203 kb (2.000 px kat 1463 px)
Kayıpsız sıkıştırmanın karşılaştırılması
Hangi sıkıştırma yöntemi daha iyidir? Bunun cevabı aslında size kalmış. Çoğu kullanıcı için, kayıplı sıkıştırma kullanmalısınız, çünkü çok fazla kalite kaybı olmadan görüntüleri% 70’den (bazen% 90’dan fazla!) Kolayca sıkıştırabilirsiniz. Bunu sayfadaki 15 resim ile çarpın ve sitenizin açılış süresini azaltmada önemli bir rol oynar. Sadece bu değil, kayıplı sıkıştırma disk alanını mümkün olduğunca az kullandığınızdan emin olacaktır. Bu da barındırma için paradan tasarruf edebileceğiniz anlamına gelir. Bültenlere kaydolun
Trafiğimizi%1000’den fazla nasıl artırdığımızı bilmek ister misiniz? Haftalık bültenimizi içerideki WordPress insanlar hakkında ipuçlarıyla alan 20.000’den fazla insana katılın!
Şimdi abone olun
Hayal edin (kayıplı ve kayıpsız)
WP Smush (Kayıplı ve Kayıpsız)
Ewww bulut (kayıp ve kayıpsız)
Shortpixel (Kayıplı ve Kayıpsız)
Not: Yukarıda listelenen her şey, görüntüleri sıkıştırmak için kendi üçüncü taraf sunucusunu kullanır. Performans nedenleriyle her zaman site dışındaki toplu olarak görüntüleri sıkıştırmalısınız. Imafy’yi Kinsta blogunda kullanıyoruz ve nasıl çalıştığını göstereceğiz. Ücretsiz paketleri var, ancak profesyonel paketleri bile çok doğal olarak değerleniyor. Bazı resimleri optimize ediyoruz ve “Lite” (ayda 1 GB) paketini iyi kullanıyoruz. Her yıl ödeme yapın ve ayda 4,25 dolardan az. Imafy’nin üç farklı optimizasyon seviyesi vardır: Normal: Bu mod kayıpsız sıkıştırma kullanır, yani görüntünüz herhangi bir kaliteyi kaybetmeyecektir, ancak boyutu fazla azalmayacaktır.
Agresif: Bu mod, kayıplı sıkıştırma kullanır ve başlangıç ağırlığında, görüntü kalitesinde biraz azalma ile sert tasarruf sağlar. Çoğu zaman görünmez.
Ultra: Bu mod kayıplı sıkıştırma kullanır ve maksimum görüntü sıkıştırma için mevcut tüm optimizasyonu uygular. Bu, başlangıç ağırlığına büyük tasarruf sağlayacaktır, ancak büyük olasılıkla bazı görüntü bozulması göreceksiniz.
Ayarları hayal edin
Kinsta’da agresif mod kullanıyoruz ve genellikle resme bağlı olarak tasarruf% 60-70 görüyoruz. Not: Resimlerimizin çoğunun fotoğraf değil, simgeler ve illüstrasyonlar olması nedeniyle JPEG’den daha fazla PNG kullanıyoruz.
Kesinti ve WordPress problemi ile kavga mı ediyorsunuz? Kinsta, zamanınızı korumak için tasarlanmış bir barındırma çözümüdür! Özelliklerimizi görün
Görüntü sıkıştırma dosyalarının tasarrufu
Görüntü optimizasyonunu yüklendiğinde otomatik olarak etkinleştirebilirsiniz (ki unutmamayı öneririz) veya medya kitaplığında optimal bir kitle görüntüsü kullanabilirsiniz. Orijinal görüntüyü de yedekleyebilirsiniz. Bu, görüntülerinizi başka bir zamanda başka bir optimizasyon seviyesine tamamen dönüştürmenizi veya hatta orijinal görüntünüzü geri yüklemenizi sağlar. Bu özelliği kullanmazsanız, disk alanını kaydetmek için kapatmanızı öneririz. Genellikle önceki görüntünüzün boyutunu değiştirmeniz gerekir, ancak unutursanız veya zamanınız yoksa Imagify, daha büyük bir görüntü değiştirme özelliğine sahiptir. Kayıplı sıkıştırmanın yanı sıra, bu başka bir büyük dosya boyutu koruyucu! Görüntünün boyutunu değiştirdiğinizi hayal edin
Aslında WordPress Medya Kütüphanesi boyunca bir kitle görüntü optimizasyonu özelliği kullandık. Gördüğünüz gibi, 700 MB’den fazla kesiyor! Bu, ön uç performansı açısından çok büyük.
Hız Testi küçük bir test yapalım! Kullanıcıların sürekli olarak tam çözünürlüklü görüntüleri sıkıştırmadan yüklediklerini gördüğümüz için, sitenizin performansını bir bütün olarak etkileyen küçük bir karşılaştırma yapacağız. Test 1 – Orijinal Sıkıştırılmamış İlk önce sıkıştırılmayan 10 görüntü yükleriz. Daha sonra pingdom’da 5 test yaptık ve ortalamayı alıyoruz. Toplam açılış süresinin toplam sayfa boyutu 28.4 MB olduğunu görebiliriz.
Sıkıştırılmış-1.JPG (2,82 MB)
Sıkıştırılmış -3.jpg (2,82 MB)
Sıkıştırılmış değil 5.jpg (2,82 MB)
Sıkıştırılmış-7.jpg (2,82 MB) Sıkıştırılmış-8.jpg (2,82 MB)
Sıkıştırılmamış -9.jpg (2,82 MB)
Sıkıştırılmış-10.jpg (2,82 MB)
Hız testi sıkıştırılmamış (pingdom)
Test 2 – Sıkıştırılmış daha sonra aynı resmi yükliyoruz, ancak bu sefer Imagify eklentisinde “otomatik optimizasyon” etkinleştiriyoruz. Daha sonra Pingdom’da 5 test daha yapıyoruz ve ortalama alıyoruz.
Sıkıştırılmış-1.JPG (69.3 kb)
Sıkıştırılmış-2.jpg (69.3 kb)
Sıkıştırılmış -3.jpg (69.3 kb)
Sıkıştırılmış-4.jpg (69.3 kb)
Sıkıştırılmış-5.jpg (69.3 kb)
Sıkıştırılmış-6.jpg (69.3 kb)
Sıkıştırılmış-8.jpg (69.3 kb)
Sıkıştırılmış -9.jpg (69.3 kb)
Sıkıştırılmış-10.jpg (69.3 kb)
Toplam açık süreyi şu anda 522 ms, toplam sayfa boyutu 901.4 kb olarak görebiliriz. Böylece sıkıştırılmış kayıp görüntüsümüz sayfa açık süresini%82.83 azaltır! Toplam sayfa boyutu da%96,83 azaltıldı. Ve Imagify sayesinde resimlerimiz hala yüksek kaliteli görünüyor.
Sıkıştırılmış Hız Testi (Pingdom)
Özet Sitenizde ihtiyacınız olan görüntü kalitesini belirledikten sonra, kayıplı veya kayıpsız sıkıştırma kullanmak isteyip istemediğinizi seçebilirsiniz. Bir kez daha, hızla daha fazla ilgilenen ve kalite ile çok ilgilenmeyenler için, kayıplı sıkıştırma kullanmanızı öneririz. Unutmayın, doğru dengeyi bulursanız Lossy’nin sıkıştırılmış görüntüleri güzel görünebilir. Mükemmel pikselli görüntülere ihtiyacınız varsa, her zaman kayıpsız sıkıştırma kullanmalısınız. Ne düşünüyorsun? İster WordPress sitenizde kayıplı veya kayıpsız sıkıştırma kullanın. Yorumlarda bize aşağıya söyleyin.
