WordPress için en iyi resim optimal
Görüntü optimizasyonu ne anlama geliyor? Sitenin geliştirilmesi ve bakımı bağlamında görüntü optimizasyonu terimini sık sık duyuyoruz, ancak tam olarak ne anlama geliyor? Görüntü optimizasyonu, boyutlarını değiştirmeden (genişlik ve yükseklik) görüntü dosyasının boyutunun (tartım) sıkıştırılmasıdır. Bazı optimizasyon, “kayıplı” sıkıştırma olarak adlandırılan görüntü kalitesini azaltır ve bazıları kalitenin sağlam kalmasına izin verir ve buna kayıpsız sıkıştırma denir. Bu makale size ne öğretecek? Bu makale, site görüntüsünüzü optimize etmek için kullanmanız gereken eklentileri WordPress sitemizde neden optimize etmek istediğimizi tartışacak ve sorunun üstesinden gelen temel özelliklerle bitireceğiz.
Aramam WordPress’te en iyi görüntüyü bulmak ve üç ana ücretsiz eklentiyi test etmeye çalışıyorum:
Smush – Tembel Yük Görüntüleri, Optimize Et ve Sıkıştırma Görüntüsü
Optimal Görüntü EWWW
Tinypng – Görüntü JPEG & PNG sıkıştırma
Üçünü seçtim, çünkü tamamen optimizasyona odaklanan en ünlü eklentilerdi ve tüm siteleri optimize eden diğer eklentilere aykırı olan başka bir şey yoktu ve görüntülerin optimizasyonu işlevlerinin sadece bir parçası oldu. Neden görüntüleri optimize etmek istiyoruz? Görüntüyü optimize etmek için görüntü dosyasının boyutunu azaltmak iki avantajı vardır:
Birincisi, site hızını artırmaktır, çünkü daha küçük dosya boyutları daha hızlı yüklenir.
İkinci fayda disk alanından tasarruf etmektir ve bu nedenle barındırma fiyat paketiniz disk alanına dayanıyorsa, aslında paradan tasarruf edebilirsiniz.
WordPress’i hızlandırın: WPSOT’da site performansını nasıl optimize ediyorum
Artık motivasyonu anladığımıza göre, WordPress eklenti deposu tarafından bize serbestçe sunulan çeşitli seçeneklere dalalım. Eklentiyi nasıl test ederim, eklentiyi test etmek için, üç siteden görüntüler indiriyorum: Pixabay, Freepik ve Fllash. Boyut mevcut olmadığında, paint.net kullanarak indirilen görüntünün boyutunu değiştirdim. Pixabay görüntüsü
Florian Pircher tarafından Pixabay 640 × 426 pikselden Orijinal Görüntü Boyutu: 30.4 Kb. Tasarruf)
td>
>
büyük (850 × 567)
> medium_large (768 × 512)
Orta (600 × 400)
Küçük görüntüler (350 × 350)
)
Freepikdes Tasarım Vektörleri Hikayeler tarafından yapılan - www.freepik.com Freepik genişliği seçmenize izin vermez. Bunun yerine, büyük boyutlara sahip görüntüler içeren zip dosyalarını ve diğer görüntü formatlarını (özellikle Adobe Photoshop ve/veya Illustrator) indirmenize izin verir. Bu nedenle, boyutunu 640 piksel genişliğe değiştirmek için paint.net kullanıyorum.
640 × 640 piksel görüntü boyutu: 58.6 kb. /td>
13.1 KB (% 26.79)
Küçük görüntüler (350 × 350)
1.2 kb (1.2 kb ( %5.5)
(%5.5)
Toplam
3 boyut 3.6 kb azaldı. Toplam Tasarruf%4.2. Toplam tasarruf%7.9. Tasarruf miktarı%23. > 0 (Tasarruf Yok)
% 11.0 (28.2 KB) Azaldı
131.8 KB (% 51.32)
medium_large (768 × 512)
4.0 kb (%6)
4.0 kb (%6)
21.8 kb (%29.95)
orta (600 × 400)
2.7 kb (%5.7)
2.7 kb (%5.7)
13.7 KB (26,%10)
küçük görüntüler (350 × 350)
1.2 kb (%5.6)
1 , 2 kb (%5.6)
0 (Tasarruf Yok)
Toplam
7 boyutu 29.4 kb azaldı. Tasarruf miktarı%6,4'tür. Toplam tasarruf%8.3. Toplam Tasarruf%40.
Smush ewww görüntüsünün boyutu küçük png
full
0 (tasarruf yok)
0.4 azaltılmış %(213 b)
15.1 KB 28.49%
Orta (600 × 400)
982.0 b (%2.5)
982.0 B (%2.5)
7.6 KB%18.14
350 × 350)
643.0 b (%2.9)
td>
393.4 kb Smush ewww png png boyutu
Orta (600 × 400)
350 × 350 azaltılmıştır. )
748.0 B (% 3.2)
% 3.2 (748 b) azaltılmış
0 (tasarruf yok)
Toplam
7 boyutu 14.1 kb azaldı. Toplam tasarruf%3,0. Toplam tasarruf%1.7.
7 boyutu azaldı. Tasarruf miktarı%36. Yapabilirim. Bununla birlikte, ayda sadece 500 fotoğrafı optimize etmede bir zayıflığı vardır, sayı orijinal görüntüden WordPress tarafından yapılan çeşitli boyutları içerir. Bu nedenle, birçok boyutunuz olduğunu biliyorsanız - oldukça fazla boyutta bir galeri eklentisi kullandım - o zaman bu eklenti çalışmayabilir. Başka bir dezavantaj, tinpng.com adresinde bir hesap açma ihtiyacıdır. Bu ücretsizdir, ancak sürecin kendisi can sıkıcıdır, bu nedenle bir eklenti yüklerken o zamanı dikkate almanız gerekir. Zaman için basıldıysanız, bu sizin için bir eklenti olmayabilir.
Ancak, zaten birçok resmi olan mevcut bir siteye bir optimizasyon eklentisi yüklersem, diğer ikisinden birini kullanabilirim. Gördüğünüz gibi, hem Smush hem de EWWW, görüntünün boyutunu azaltmada aynı sonuçları verir. Peki aralarında nasıl seçim yapabilirsiniz? Eklentiler arasında karar vermek için kullandığım bazı pratik kurallarım var. Bir sonraki bölümde onu tanımlayacağım ve bundan sonra üç eklentinin ek özelliklerini keşfedeceğiz. Genel olarak eklentiler arasında nasıl seçim yaparım, az ya da çok aynı şeyleri yapan birkaç eklenti olduğunda ve birini seçmem gerektiğinde, bu düşündüğüm bir parametredir: Aktif kurulum: Eklentinin popülaritesi büyük bir husus. Doğru sayı gerekli değil ama iki görüyorum: büyüklük ve görelilik sırası - yüzlerce nedir? Bin? Yüz bin? Tüm eklenti indirmeleri aynı boyuttaysa, en çok indirilenlere yaslanacağım. İndirme sayısının nedenleri aşağıdaki ana hususlardır:
Pratik bir kural olarak, eklentinin ne kadar çok indirmesiyle, müşteri memnuniyeti daha fazla gösterilir. Eklentiyi indiren herkes onunla mutlu olmasa da, miktar daha büyükse, bu kitle memnuniyeti anlamına gelir.
Daha fazla denetçi ve test etmek ortam daha fazla ve daha fazla kişi eklentiler, gittikçe daha fazla kullanım vakası kullanıyor ve bu insanlar tarafından daha fazla hata bulunuyor ve umarım yazar tarafından geliştirilecek. Yeni eklentiler veya küçük bir indirme eklentileri, uzun süredir dolaşan ve honlanmış ve geliştirilmiş eklentilerin aksine hala kaba olabilir. Yazar: Eklentileri kimin geliştirdiği sorular da eklentinin kalitesinin bir göstergesidir. Bu eklenti Automattic tarafından geliştirildi mi? Genellikle uzak yürümeye güvenilebilecek istikrarlı bir eklentiyi ima eder. Geliştirici bir bireyse, WordPress'te başka ne yaptı? Geliştiricinin adı, WordPress Core koduna katkıda bulunsun ve WordPress.org'daki tüm etkinlikleri olsun, geliştirdikleri eklentilerin ve/veya diğer temaların bir listesini görebileceğiniz profil sayfalarına her zaman bir bağlantı olmuştur. Kural olarak, bilgili ve deneyimli bir geliştirici bir eklentiye katıldığında, iyi yazılmış ve iyi bakılan eklentinin iyi bir göstergesidir.
Sıralama: Yıldız sayısı ve kaç incelemenin temel olduğu, eklentileri kullanıp kullanmayacağınıza karar vermenize de yardımcı olabilir. Ancak, incelemenin sahte bulunduğu durumlar vardır, bu yüzden bu ana parametreniz olamazdı. Sıralama için başka bir kullanım düşük bir yıldızdır: Eklentilerin eksikliğinin ne olduğunu öğrenmek güzel - kullanımı için temel mi yoksa marjinal mi? Kullanım durumunuz için geçerli mi? Önceden neye dikkat eteceğinizi biliyorsanız, hala kullanmaya karar verirseniz, eklentinin zayıf yönlerinin üstesinden gelmeye daha iyi hazırlanırsınız. Bunun kullanmak istediğiniz eklentide olup olmadığını anlamanın birkaç yolu vardır:
Çözülen problemlerin sayısı, eklenti bakım tutumlarının iyi bir göstergesidir. Çözülen vakaların yüksek yüzdesi, eklenti geliştiricilerinin müşterilerine adanmış olduğunu ve eklentinin hala korunduğunu göstermektedir. Bu, son güncellenen tarih ve tarih ve sürümün ne kadar uzun süresi, eklenti o kadar güncel olduğu sürüme kadar test edilen sürümle birleştirilebilir. Bununla birlikte, eklenti üreticisinin kitle problemini çözüldüğü gibi işaretlemediğini kontrol etmek istiyorsunuz.
Aktif eklentiler için başka bir gösterge birçok destek problemidir ve birçoğu çözülmüştür. Aktif yazılımın bir hatası var - bir çeşit verildi. Bir eklentinin küçük bir sorunu varsa, eklentinin çok fazla kullanıcısı olmadığı anlamına gelebilir.
Smush ewww görüntüsünün boyutu küçük png
yazar
wpmu dev
+ Bunu yazarken
derecelendirme
5440 incelemeye dayanan 5 yıldız
956 incelemelere dayanan 4.5 yıldız
138 incelemeye dayanan 4.5 yıldız
Destekleme
Son iki ayda çözülen 47 problemden 34'ü
11 Son iki ayda 16 problem çözülür
5 üzerinden son iki ay içinde çözülür
Gördüğünüz gibi, Smush ve ewww Tüm parametrelere çok yakın, bu nedenle, tinypng'in sunduğu ek özelliklere daha derinlemesine kazalım. veya Google sayfanız. Smush, görünür kalite olmadan görüntüleri sıkıştırır. Eklentiler hakkında
Yazar: WPMU Dev
Aktif Kurulum: Bu yazma döneminde 1+ milyon
Sıralama: 5440 incelemesine dayanan 5 yıldız
Destek: Son iki ayda çözülen 47 problemden 34'ü
Bu ek eklenti özelliği, temel optimizasyon işleminde bir artış sunar. Bazılarını düşürdüm, ama bu tam bir liste değildi.
Kütleyi optimize et Yüklenen görüntüleri optimize etmenin yanı sıra, Smush, yüklemeden önce yüklenen tüm görüntüleri optimize etmenizi sağlar. Buradaki tek zayıflık, 50 kişilik bir koleksiyonda optimize edilmesidir, bu nedenle optimizasyonun sonuna kadar "Devam" düğmesini tıklamaya devam etmelisiniz. Seçici optimizasyon, hangi boyutta küçük resim boyutunun optimize edilebileceğini seçmenizi sağlar. Meta veri fotoğrafları genellikle kamera ayarlarını dosyalarda, yani odak uzunluğu, tarih, saat ve konum olarak saklar. Bu verilerin silinmesi dosya boyutunu azaltacaktır. Bu silme nedeniyle görüntüye verilen hasardan endişe ediyorsanız, Smush şunları yazan bir not ekledi: "Bu veriler görüntünün boyutunu artırır. Bu bilgiler fotoğrafçılar için önemli olsa da, çoğu kullanıcı için gerekli değildir ve güvenlidir ". Görüntünün boyutunu değiştirmek, boyutunu azaltmak ve yükleme süresini azaltmak için sayfanızda gerekli olmayan büyük bir görüntü algılar. WordPress 5.3'te, büyük görüntülerin yüklenmesi belirtilen maksimum genişlik ve yüksekliğe dönüştürülür. 2560 pikselden büyük görüntülere ihtiyacınız varsa, bu ayarı burada değiştirebilirsiniz. Not: Eki yüklediğinizde görüntünün boyutunun değiştirilmesi otomatik olarak gerçekleşir. Retina cihazını desteklemek için görüntü boyutunuzun 2x boyutlarını kullanmalısınız. Animasyon GIF boyut olarak değiştirilmeyecek, çünkü animasyon kaybedilecek, lütfen boyutu değiştirmek için http://gifgifs.com/resizer/ gibi bir araç kullanın ve ardından yeniden oluşturun. Pro sürümü Yalnızca ücretsiz eklentileri tartıştığım için, yalnızca Pro Sürüm özelliği hakkında kısaca açıklayacağım. Bunlar şunları içerir:
Tüm görüntülerin tek bir tıklamada kütle optimizasyonu, kayıplı sıkıştırma kullanarak optimize edin, görüntülerinizi CDN ile soymak, otomatik görüntü boyutunu ve WebP desteğini etkinleştirin, orijinal tam boyutlu görüntüyü optimize edin, JPEG'ye (kayıplı) otomatik PNG dönüşümünü ve daha fazlasını. Eklenti Nasıl Kullanılır Eklentileri nasıl kullanacağınızı öğrenmek istiyorsanız, Smush IT'yi kullanarak görüntüleri optimize etmek için harika bir kılavuzumuz var: WordPress için görüntüleri nasıl optimize edersiniz Smush It Image Sıkıştırma Kullanarak
EWWW eklentisinin görüntüleri ewww io ile mevcut tüm görüntüleri herhangi bir eklentiden optimize edebilir ve ardından EWWW IO'nun yeni görüntü yüklemelerini otomatik olarak halletmesine izin verebilirsiniz. Eklentiler hakkında
Yazar: Doğru www
Aktif Kurulum: Bu yazma döneminde 800.000+
Sıralama: 956 incelemeye dayanan 4,5 yıldız
Destek: Son iki ayda çözülen 16 problemin 11'i
Bu ek eklenti özelliği, temel optimizasyon işleminde bir artış sunar. Bazılarını düşürdüm, ama bu tam bir liste değildi. JPG'den PNG'ye PNG'ye JPG dönüşümüne izin verir. Ayrıca orijinal belgelerin kaldırılmasına izin verir. Optimize edilmiş görüntüleri gösteren tüm optimize edilmiş görüntülerin ve değiştirilen sürümlerin bir listesini görüntüler. Orijinali silin WordPress büyük görüntünün boyutunu azalttığında, orijinal görüntü küçük resim yapmak için diskte kalır. EWWW, disk alanını kaydetmek için silmenizi sağlar. Kütleyi optimize et Yüklenen görüntüleri optimize etmenin yanı sıra, EWWW, yüklemeden önce yüklenen tüm görüntüleri optimize etmenizi sağlar. Ardından, 2 ek özellik sunuyor:
Muhtemelen Yeniden Optimizasyonu zorlamak için - daha önce optimize edilen resim varsayılan olarak iletilecektir, ancak taramadan önce kutuyu kontrol ederseniz, EWWW tekrar optimizasyonu gerçekleştirecektir. Eklenti EWWW ayrıca çok sayıda görüntü olacak bir açıklama sunar. Optimize edilmiş keşfedildi: Neden bu kadar çok resim var?
EWWW'nin kapsamlı kapsamı, yalnızca WordPress Media kütüphanesi değil, sitenizdeki her şeyi optimize etmenizi sağlar. Pro sürümü Yalnızca ücretsiz eklentileri tartıştığım için, yalnızca Pro Sürüm özelliği hakkında kısaca açıklayacağım. Dahil: Otomatik webp, tembel yük, otomatik ölçek, JS/CSS optimize, CDN ve daha fazlası. Tinypng - JPEG ve PNG Resim Açıklama Eklentisi Sıkıştırma JPEG ve PNG görüntülerinizi optimize ederek web sitenizi daha hızlı hale getirin. Bu eklenti, popüler görüntü sıkıştırma hizmetleri Tinyjpg ve Tinypng ile entegre ederek tüm görüntülerinizi otomatik olarak optimize eder. Not: Bir eklenti kullanmak, bir yangın anahtarı almak için bir hesap oluşturma gerektirir. Bu ücretsizdir ve ödeme ayrıntıları istemez, ancak eklenti yüklemek için başka adımlar eklemektir, çünkü eklentiyi onsuz çalıştıramazsınız. Diğer not: Bu eklentinin ücretsiz sürümü, ayda 500'e kadar optimize edilen görüntü sayısını sınırlar. Yani, görüntü varyasyonlarını hesaplarken ve görüntü başına ortalama 5 varyasyon varsayılırken, ayda yalnızca 100 görüntü yüklendi. Medya kütüphanenizde çok fazla resim olmadan önce bir eklenti kullanmaya başlarsanız bu iyidir, ancak yüzlerce veya binlerce görüntünüz var sonra yüklediyseniz, her şeyi optimize etmek için aylara ihtiyacınız olabilir. Eklentiler hakkında
Yazar: Tinypng
Aktif Kurulum: Bu yazma döneminde 200.000+
Sıralama: 138 incelemeye dayanan 4,5 yıldız
Destek: Son iki ayda çözülen 5 sorundan 0
Bu ek eklenti özelliği, temel optimizasyon işleminde bir artış sunar. Bazılarını düşürdüm, ama bu tam bir liste değildi. Kütle optimizasyonu, bu eklentinin kurulumundan önce yüklenen kütle görüntülerini optimize etmeyi mümkün kılar. Eklenti ayda 500 resim ile sınırlı olduğundan, bu eklenti size sitenizdeki geri kalan görüntüyü değiştirmenin maliyetini gösterir. Tinypng arka plan optimizasyonu, yeni bir görüntünün ne zaman sıkıştırılması gerektiğine karar vermenizi sağlar: arka planda veya yüklendiğinde. Seçici optimizasyon, hangi boyutta küçük resim boyutunun optimize edilebileceğini seçmenizi sağlar. Meta veri silme meta verilerinin orijinal görüntüsünü varsayılan olarak optimize etmenizi sağlar ve üretim tarihini ve saatini, telif hakkı bilgilerini ve GPS konumunu korumayı mümkün kılar. Eklentimizin kısa bir incelemesi, bu eklentiyi birkaç yıl önce araç kategorimizde görüntüler:
Tinypng eklentileri ile WordPress görüntüleri için otomatik kayıpsız sıkıştırma
Hangi eklenti daha önce gördüğümüz gibi seçilmelidir, en iyi optimal tinypng'dir, ancak 2 zayıflığı vardır: ayda sadece 500 fotoğrafı optimize etmek ve kayıt gereksinimleri. Sizin için uygunsa, Tinypng kullanmalısınız. Ancak, eksiklikler bir sorun haline gelirse, bence bir sonraki en iyi eklenti EWWW. Metrik smush'tan biraz daha düşük olmasına rağmen, hala aynı ortalamada ve ek özellikler Smush: JPG'den PNG'ye optimize edilmiş görüntüler görüntüleme, orijinal kaldırmaya izin veriyor ve kütle optimizasyonunun parazitsiz çalışmasına izin veriyor. Bununla birlikte, Smush hangi görüntünün optimize edileceğini seçmenize izin verme ve çok büyük görüntüleri algılama ve boyutlarını değiştirme avantajına sahiptir. Genel olarak, farklı zamanlarda çeşitli sitelerde üç eklenti yaşadım ve her birinin başkaları tarafından sunulmayan ek avantajları ve özellikleri var. Büyük Görüntü Çekirdeğinin İşlenmesi Bu bölüm geliştiriciler için tasarlanmıştır, çünkü temel özellikleri ve bunları nasıl devre dışı bırakacağını veya bunlara nasıl ulaşılacağını açıklar. WordPress 5.3, büyük görüntüleri tespit ederek ve onlardan "Web tarafından optimum maksimum boyutu" üreterek bu görüntüleri yönetmenin yeni bir yolunu sunar. Yeni bir resim yüklendiğinde, WordPress bunun "büyük" bir resim olup olmadığını tespit eder
