WordPress'te Görüntüleri Verimli Bir Şekilde Kodlama

Bu ne?

Bu denetim, kilobayt cinsinden potansiyel tasarruflarla, optimize edilmemiş tüm görüntüleri listeler. Listelenen resimleri optimize etmek, sayfanın daha hızlı yüklenmesini ve daha az veri tüketmesini sağlar.

Neden Görüntüleniyor?

Lighthouse, sayfadaki tüm JPEG veya BMP görüntülerini toplar, her görüntünün sıkıştırma düzeyini 85'e ayarlar ve ardından orijinal sürümü sıkıştırılmış sürümle karşılaştırır. Potansiyel tasarruf 4 KB veya daha fazlaysa, Lighthouse görüntüyü optimize edilebilir olarak işaretler.

Nasıl tamir edersin?

Bu denetimi ele almanın birçok yolu vardır. Optimize edilmiş görseller tüm web sitelerinde kullanılmalıdır, çünkü onları sıkıştıramaz/adreslerini alamazsanız, tek bir görsel web sitenize 5-10 saniyelik yükleme süresi ekleyebilir. Yukarıdaki örneğe bakın: optimize edilmiş kitten2.jpg görüntüsü 11 Megabayttır ve sayfa yükleme süresine yaklaşık 20 saniye ekler.

Resimleri optimize ederek Sayfa Hızınızı artırmanın birkaç yolu:

Görüntüleri sıkıştırın.

Sıkıştırılmamış görüntüler, sayfalarınızı gereksiz baytlarla şişirir. Sağdaki fotoğraf, soldakinden %40 daha küçüktür, ancak muhtemelen ortalama bir kullanıcıyla aynı görünecektir.

Görüntü sıkıştırmanın iki yolu vardır: kayıpsız ve kayıplı. PNG kayıpsızken JPEG kayıptır – bu, JPEG dosyalarının sıkıştırılmasının veri kaybına yol açtığı ve geri alınamaz olduğu anlamına gelir. Doğru yapılırsa, bu sıkıştırma hala iyi görünmekle birlikte oldukça büyük dosya küçültmelerine yol açar. Yanlış yapılırsa, görüntü hızla kalitesini kaybeder.

PNG'lerin kullandığı kayıpsız sıkıştırma, görüntünün herhangi bir kalite kaybı olmadan küçültüldüğü yerdir. Bu genellikle meta verileri kaldırarak yapılır. Dosya boyutunda bir azalma göreceksiniz, ancak çok büyük değil (oldukça mantıklı, tüm parçalara karşı birkaç satır veriyi kaldırmayı düşünün).

Bazı durumlarda, sitenizin yüklenme süresini önemli ölçüde değiştirecek şekilde görüntüleri %85'e kadar sıkıştırabilirsiniz.

WordPress ile resimlerinizi otomatik olarak sıkıştırabilen tonlarca eklenti vardır. Smush ve Ewww'yi seviyoruz (deneyimlerimize göre Ewww daha güçlü, ancak Smush'a kıyasla daha karmaşık bir arayüze sahip).

Basitçe bir eklenti kurun ve ardından “görüntüleri toplu olarak optimize et” seçeneğine tıklayın. Eklenti daha sonra web sitenizde yüklü olan tüm görselleri inceleyecek, en iyi görsel sıkıştırma yöntemini seçecek ve ardından görsele uygulayacaktır.

Animasyonlu GIF'leri videoyla değiştirme.

GIF'ler, devasa boyutları nedeniyle yükleme sürenizi bombalar. Hediyeler, temel olarak, bir video benzeri grafik oluşturmak için tarayıcınızın hızlı bir şekilde art arda oynattığı büyük resim koleksiyonlarıdır.

GIF'leri MP4'lere veya WebM videolarına dönüştürmek, boyutlarını ciddi şekilde küçültür, aynı işlevselliğe sahiptir ve web sitenizin çok daha hızlı yüklenmesini sağlar.

Google'ın bu örneğinde, GIF 3,7M'dir ve onu MP4'e dönüştürmek dosya boyutunu yüzde 80 oranında azaltır. Bunu bir WebM videosuna dönüştürmek dosya boyutunu daha da küçültür.

Kutudan çıktığı gibi, video dosyalarında GIF'leri GIF yapan üç temel bileşen eksiktir:

• GIF'ler otomatik olarak oynatılır.
• GIF'ler sürekli döngü halindedir (genellikle, ancak döngüyü önlemek mümkündür).
• GIF'ler sessizdir.

Video öğenize aşağıdaki öznitelikleri eklerseniz, GIF işlevini yeniden oluşturabilirsiniz.

<video otomatik oynatma döngüsü sessiz oynatma satırında ></video>

Hatta WebM videolarını onları destekleyen tarayıcılarda çalıştırmanıza ve desteklemeyen tarayıcılarda MP4 videolarına geri dönmenize izin veren video öğesiyle birden çok kaynak belirtebilirsiniz.

<video otomatik oynatma döngüsü sessiz oynatma satırında>

<source src="my-animation.webm" type="video/webm">

<source src="my-animation.mp4" type="video/mp4">

</video>

WordPress'te yapılacak en iyi şey manuel olarak girip tüm GIF'lerinizi videolara dönüştürmektir. EZGif gibi ücretsiz, çevrimiçi bir araç kullanarak bu GIF'leri videolara dönüştürebilirsiniz.

Tembel yükleme görüntüleri.

Yukarıdaki bölümde bahsettiğimiz gibi, tembel yükleme resimleri, tarayıcınızı gereksiz varlıklar oluşturmaktan kurtarabilir. Ekranın altındaki resimler talep üzerine oluşturulur, yani. ziyaretçiler onlara kaydırdığında. Bu basit çözümü uygulamak, web sitenizin yükleme süresini önemli ölçüde artırabilir.

Görüntüleri doğru boyutlarda sunmak.

Masaüstü boyutundaki görüntülerin mobil cihazlara sunulması, gerekenden 2–4 kat daha fazla veri kullanabilir (Bu aynı zamanda ölçeklendirilmiş görüntülerin sunulması olarak da bilinir). Görüntülere "herkese uyan tek beden" yaklaşımı yerine, farklı cihazlara farklı görüntü boyutları sunun.

Bu düzeltme oldukça hızlı ve kolay bir şekilde uygulanabilir — tek bir görüntünün farklı boyutlarda birden çok sürümünü oluşturmanız yeterlidir. Görüntü alanı boyutuna bağlı olarak, görüntünün en iyi sürümünü sunarsınız. Bunu manuel olarak yapabilirsiniz, ancak EWWW eklentisi bunu sizin için otomatik olarak yapacaktır.

Eklenti herhangi bir nedenle bir resmi yeniden boyutlandıramazsa, Google, Sayfa Hızı raporunu oluştururken hangi resimlere manuel olarak bakmanız gerektiğini belirleyecektir. Ardından çevrimiçi araçları veya PhotoShop'u kullanarak görüntüyü yeniden boyutlandırabilir ve web sitesine yeniden yükleyebilirsiniz.

WebP görüntülerini kullanma.

Google tarafından oluşturulan WebP, çoğu modern tarayıcının resim formatı olarak kabul edeceği başka bir dosya türüdür (PNG/JPEG gibi). Bu eski yöntemlerle karşılaştırıldığında çok büyük avantajlar sunar ve web sitenizi gerçekten hızlandıracaktır.

Biçim, hem kayıpsız hem de kayıplı stiller sunar: seçtiğiniz şey, web sitenizdeki görseli nasıl kullandığınıza bağlı olmalıdır. (Bu sonraki istatistikler doğrudan Google'dan alınmıştır.) WebP kayıpsız görüntülerin boyutu PNG'lere kıyasla %26 daha küçüktür. WebP kayıplı görüntüler, eşdeğer SSIM kalite endeksindeki karşılaştırılabilir JPEG görüntülerden %25-34 daha düşüktür. WebP, gerçek renkli web grafiklerini, XMP meta verilerini, renk profillerini, döşemeyi, animasyonu ve şeffaflığı destekler. Sıradaki benim favori durumum: Kayıplı WebP, PNG'ye kıyasla tipik olarak 3× daha küçük dosya boyutları sağlayan şeffaflığı da destekler. Tarayıcı desteği, Safari dışında modern olan hemen hemen her şeyi içerir.

TLDR; JPEG ve PNG'lerin yapabildiği her şeyi yapar, sadece daha hızlı, daha iyi ve daha küçük… baştan sona daha yüksek görüntü kalitesi İLE.

WordPress'te, mevcut görüntüleri WebP görüntülerine dönüştürmek ve yeni yüklenen görüntüleri otomatik olarak WebP görüntülerine dönüştürmek için en iyi çözüm ücretsiz EWWW eklentisidir. Ajansımızın web sitesinde bazı dosyaları bu formatta %55'e kadar sıkıştırabildik:

Bu biçimi tarayıcılarda uygulamak oldukça basittir. EWWW ayarları sayfasındaki web sayfası sekmesine gitmeniz ve JPG/PNG'den WebP'ye seçeneğini işaretlemeniz yeterlidir. Ardından, web sitenizdeki tüm mevcut görsellerin toplu optimizasyonunu çalıştırırsınız ve hazırsınız.

WebP formatı tarayıcı tarafından desteklenmiyorsa, bu eklenti otomatik olarak JPG veya PNG formatlarına geri dönecektir. Ek olarak, yeni yüklenen resimler otomatik olarak WebP formatına dönüştürülür ve onu destekleyen tarayıcılara sunulur. Görüntüler ve Sayfa Hızı söz konusu olduğunda, bu yeni biçimi uygulamak muhtemelen yapabileceğiniz en etkili şeydir.