WordPress’te resminizi optimize etmek için 9 ipucu
WordPress’te görüntünüzü nasıl optimize edeceğinizden emin değil misiniz? WordPress sitesinde kullandığınız görüntü, sitenizin ne kadar hızlı yüklendiği ve sitenizin arama motorunun (SEO) optimizasyonunda daha küçük bir rol oynar. HTTP arşivine göre, ortalama dosya boyutu web sayfası görüntünün yaklaşık% 50’si ve ortalama sayfa 26 resim kullanıyor! Resimleri optimize etmenin ve küçülmenin yollarını bulmak, sitenizin yükleme süresi için büyük bir temettü ödeyebilir. Ancak bu sadece hız değil, görüntünüzü optimize etmek de daha fazla trafik almanıza yardımcı olabilir. Tüm ABD Web aramalarının% 20’sinden fazlası Google’ın görüntü aramasında gerçekleşir, bu nedenle sıralamayı belirlemek için WordPress site görüntüsünüzü optimize etmek daha fazla kişiye ulaşmanın iyi bir yolu vardır.
Bu yazıda, WordPress görüntülerinin tüm yönlerini nasıl optimize edeceğinizi göstereceğiz. Site görüntüsünüzü performans, SEO, erişilebilirlik ve genel olarak yalnızca kullanıcı deneyimi için optimize etmenize yardımcı olacak dokuz ana ipucu tartışacağız. Hadi kazalım! WordPress’te Görüntüler Nasıl Optimize Edilir: 9 Performans İpuçları Fotoğraflarınızı WordPress’te daha hızlı yüklemeye odaklanan ipuçlarıyla başlayacağız. Ardından, SEO ve erişilebilirliğe daha fazla odaklanan ipuçlarına geçeceğiz. 1. görüntü sıkıştırma dosyası boyutlarını azaltmak için görüntü sıkıştırması, boyutlarını değiştirmeden görüntü dosyası boyutlarını küçültmenize ve sitenizin yükleme süresini hızlandırmayı ve görüntünüzü optimize etmenizi sağlar.
Sıkıştırma için iki seçeneğiniz var:
Kayıpsız – Görüntü kalitesinde değişiklikler olmadan dosya boyutunda küçük bir azalma.
Kayıplı – çok daha büyük bir indirgeme dosya boyutu. Kalitede birkaç değişiklik olabilir, ancak agresif bir kayıplı sıkıştırma algoritması kullanmadığınız sürece genellikle insan gözü tarafından görülemez. Kayıplı ve kayıpsız sıkıştırma hakkında daha fazla bilgi edinin. Çoğu web sitesi ve blog için, kayıplı sıkıştırma en iyi seçimdir. İstisna, görüntü kalitesine öncelik veren bir fotoğrafçı veya diğer görsel sanatçıdır. WordPress sitenizdeki görüntüleri kolayca sıkıştırmak için Free Imagify eklentisini kullanabilirsiniz. Imafy, sitenize yüklediğiniz yeni görüntüleri otomatik olarak sıkıştırır ve bu da mevcut görüntüleri optimize etmenizi sağlar.
Üç sıkıştırma seviyesi – kayıpsız seçenekler ve iki kayıptan seçim yapabilirsiniz:
Fark ne kadar büyük? JPEG’nin 326 KB tarafından sıkıştırılmamış ve optimize etmek için kayıplı Imagify sıkıştırma kullandık. Imagify görüntüyü sıkıştırdıktan sonra, dosya boyutu% 77 düşüşle 74 kb’ye düştü.
PNG – Bu, arayüz ekran görüntüleri gibi birçok renksiz görüntüler için kullanışlıdır. Bu aynı zamanda logolar veya simgeler gibi çeşitli durumda yararlı olabilecek şeffaflığa izin verir. Ancak, dosya boyutları renkli görüntüler için yeterince büyük olabilir, bu nedenle fotoğraflar için PNG kullanmak istemezsiniz. JPEG – Bu format, gün batımı veya diğer fotoğraflar gibi renkli görüntüler için en iyisidir. Kullanım durumları için genellikle PNG’den çok daha küçük dosya boyutları üretir. Bununla birlikte, JPEG PNG gibi şeffaflığı desteklemez, bu nedenle logolar ve icons.svg için kullanmak istemeyebilirsiniz – bir vektör grafiği kullanmak istiyorsanız, bu biçimi kullanmalısınız. Bu, logolar, simgeler ve vektörlerle yapılan diğer grafik türleri için mükemmeldir. Bir logonuz yoksa, ücretsiz Türkolog logo üreticisine bakın. Bu, herhangi bir çözünürlükte harika görünen ve saniyeler içinde ayarlanabilen profesyonel bir sınıf görsel yapmanın kolay bir yoludur. Yeni logonuzdan memnun olmadığınız sürece ödeme yapmayacaksınız.
Kısacası, fotoğraflar veya diğer gerçekçi ve renkli görüntüler için JPEG’yi kullanmak istersiniz, PNG ise ekran görüntüsü arayüzleri, simgeler, metin görüntüleri veya şeffaflığa ihtiyacınız olan diğer görüntüler için iyi bir seçim olabilir. SVG vektör grafikleri için en iyi şekilde çalışır.
Daha küçük dosya boyutları için, WebP gibi modern görüntü dosyası formatlarını da kullanmayı düşünebilirsiniz. WebP, JPEG ve PNG gibi formatlardan daha küçük dosya boyutları sunan, ancak aynı kaliteye sahip olan Google’dan daha yeni bir biçimdir – WebP hakkında daha fazla bilgi edinebilirsiniz. Ortalama olarak, WebP’ye dönüştürmek JPEG görüntüsünün boyutunu% 25-34 ve PNG görüntüsünü% 26 azaltabilir. WebP ayrıca JPEG ve PNG’nin en iyi bölümlerine sahiptir – bunları büyük dosya boyutları olmadan fotoğraflar için kullanabilirsiniz, ancak yine de PNG görüntüleri gibi şeffaflığı destekler.
2021’de, tüm ana tarayıcılar WebP görüntülerini destekler, bu da bu dosya boyutu azaltmayı elde etmek için görüntüleri WebP biçimine güvenli bir şekilde dönüştürebileceğiniz anlamına gelir. WebP’yi WordPress’te kullanmak istiyorsanız, Imagify eklentisi, sitenizdeki tüm yeni ve mevcut görüntüleri WebP biçimine dönüştürmenize yardımcı olabilir ve görüntüyü tarayıcı WebP’yi destekleyen ziyaretçilere sunmanıza yardımcı olabilir: WordPress ayrıca WordPress 5.8’de WebP görüntüleri için temel destek ekleyecektir. Bu, Temmuz 2021’in sonunda piyasaya sürülecek. Bu, WebP resimlerini doğrudan medya kitaplığına yükleyebilir ve bunları PNG veya JPEG Image gibi içeriğinize koyabilirsiniz. WordPress 5.8’den önce, WordPress Medya Kütüphanesi WebP yüklemelerine izin vermedi.
4. Görünür ziyaretçi görünüm alanının (aka “Aşağı Paro”) dışındaki yüklemeyi geciktirmenize izin vererek yavaş yükleme sayfası yükleme süresini artırmak için tembel yüklemeyi kullanın. Başlangıçta, siteniz yalnızca görünür sayfaları oluşturmak için gereken görüntüleri yükler. Ardından, birisi aşağı kaydırmaya başladıktan sonra, sunucunuz her görüntüyü gerektiği gibi yükler. Bazı görüntülerinizin WordPress’teki yüklenmesini geciktirerek, sitenizin ilk sayfasının yükleme süresini hızlandırabilirsiniz. WordPress 5.5 artık orijinal tembel yükleme tarayıcısının özelliklerini destekliyor, bu da görüntünüzün tarayıcıda onu destekleyen tembel yüklemeyi otomatik olarak kullanacağı anlamına geliyor. Ancak, sorunlar var – WebP resimlerinin aksine, tüm ana tarayıcılar bu özniteliği desteklemiyor!
Apple Safari tarayıcısı macOS veya iOS’ta orijinal yavaş yüklemeyi desteklemez.Opera Mobile ve UC tarayıcısı gibi diğer bazı tarayıcılar da daha az destekleyicidir.Şu anda, İnternet kullanıcılarının sadece% 71’inde orijinal tembel yüklemeyi destekleyen tarayıcılara sahiptir.Tüm ziyaretçilerinizin yavaş yüklemeden yararlanabileceğinden emin olmak istiyorsanız, Lazy Load gibi ücretsiz eklentiler kullanabilirsiniz.Veya birçok performans eklentisi, WP roketi gibi tembel yükleme özelliklerini de içerir.5. Yeni Web Vitals Core Google’ın girişimi ile değişen düzenden kaçınmak için görüntünüzün boyutlarını belirleyen Google, Web yöneticisi tarafından önlenmesi gereken bir metrik olarak birikimli bir düzen kayması (CLS) üzerine odaklanır.Temel olarak, CLS, site içeriğiniz “etrafta atladığında” oluşur.
Yüklendiğinde. Bu sorunlu çünkü zayıf kullanıcı deneyimine neden oluyor. Dikkatli değilseniz, bu, sitenizdeki metin içeriğinden sonra yüklenen görüntülerle olabilir. Görüntü yüklendiğinde, CLS’ye neden olan metne basar. Sorunlardan kaçınmanın ve kümülatif düzen kaymasını artırmanın bir yolu, site kodunuzdaki görüntünün boyutlarını belirlemektir. Bu şekilde, ziyaretçinin tarayıcısı, resim yüklenmemiş olsa da, CLS’yi önleyen alanı sipariş etmeyi bilecektir. Neyse ki, WordPress bunu yapmanıza yardımcı olabilir. WordPress Editor aracılığıyla bir görüntü girerseniz, WordPress sizin için doğru görüntü boyutunu otomatik olarak belirler. Aynı şey çoğu sayfa eklentisi için de geçerlidir. Ancak, kod aracılığıyla manuel olarak eklemek gibi başka yerlerde görüntüler kullanıyorsanız, CLS ile ilgili sorunlardan kaçınmak için her zaman görüntü boyutlarını ayarlamanız gerekir. Görüntü boyutlarını doğrudan koddaki belirlemekten rahatsız olursanız, eksik görüntü boyutlarını belirleme gibi ücretsiz bir eklenti kullanabilirsiniz. Veya WP Rocket, bunu Ayarlar Medya sekmesinde yapmanıza yardımcı olacak özellikler de sunar. 6. Tüm siteler için geçerli olmadığı için bir tür bonus noktası olan küresel yükleme süresini hızlandırmak için İçerik Dağıtım Ağını (CDN) kullanın. Ancak küresel bir kitleniz varsa, CDN, site ziyaretçileriniz ile indirmeleri gereken dosyalar arasındaki mesafeyi kısaltarak görüntü yükleme süresini hızlandırabilir. CDN temelde sadece büyük bir küresel sunucu ağıdır. WordPress’i kullanacak şekilde yapılandırırsanız, site görüntüsünüzü ağdaki her sunucuda önbelleğe alabilirsiniz.Ardından, birisi sitenizi ziyaret ettiğinde, tarayıcıları doğrudan sitenizin sunucusundan indirmek yerine en yakın CDN konumundan resim indirebilir.Fiziksel mesafeyi azaltarak, görüntü dosyası daha hızlı yüklenir, bu da genel olarak sitenizi hızlandırır.Bütçeniz sınırlıysa, WordPress.com sunucu ağı tarafından desteklenen JetPack Site Hızlandırıcı özelliği gibi ücretsiz bir resim CDN’i bulabilirsiniz.Veya daha esnek bir seçenek için, Rocketcdn gibi ücretli CDN hizmetlerini kullanabilirsiniz.
Anahtar
Tavşan cdn
Ücretli CDN açısından, CDN Entertler veya WP Roket gibi eklentileri kullanarak WordPress sitenize entegre edebilirsiniz. 7. SEO görüntülerini iyileştirmek için ilgili dosya adını kullanın Şimdi, resminizin gerçek dosya adından başlayarak WordPress görüntülerini optimize etmek için SEO’ya daha fazla odaklanan ipuçlarına geçmeye başlayacağız. Resimleri WordPress’e yüklemeden önce, her görüntünün dosya adının görüntü içeriği ile ilgili olduğundan emin olmalısınız. Örneğin, karlı dağ görüntüleri yüklersiniz. 66FSDFS651.jpeg gibi rastgele dosya adlarını kullanmak yerine, snowy-mountain.jpeg gibi tanımlayıcı dosya adlarını kullanmanız gerekir. İlgili dosya adını kullanarak, Google’ın görüntüleri tanımlamak için ekstra bir bağlamı olduğu için resminize Google görüntülerinde sıralama almak için daha iyi bir fırsat sunacaksınız. 8. SEO ve Alt Metin Erişilebilirliği Görüntüsü’nü geliştirmek için Alt Metin görüntüsünü ayarlayın. Arama motorlarına görüntüler hakkında ek bilgi sağlamaya yardımcı olur. Ayrıca, web sitenizi daha kolay erişilebilir hale getirmek için iyidir, çünkü ekran okuyucuları kullanan ziyaretçilerin görüntüleri anlamalarına yardımcı olur. WordPress düzenleyicisindeki resme alternatif metin eklemek için, resim bloğunu seçebilir ve blok ayarlarında Alt metin alanını kullanabilirsiniz:
Ayrıca, görüntünüze metin tabanlı bağlam eklemenin diğer iki yolu olan başlıkları ve bilgileri kullanmayı da düşünebilirsiniz.9. SEO’yu artırmak için bir XML görüntü sitesi haritası oluşturun Site görüntüsünüzü Google’ın görüntü aramasında sıralamaya odaklanmak istiyorsanız, özel bir XML görüntü sitesi haritası oluşturmayı düşünebilirsiniz.Bu tür site haritası, tüm yayınlarınızı ve sayfalarınızı içeren XML site haritası ile aynıdır, ancak bunun yerine tüm site resimlerinizin bir listesini içerir.Yoast SEO ve Rank Math gibi eklentiler, site haritasına otomatik olarak görüntüler ekleyecektir, bu nedenle WordPress’in sürüm 5.5’te eklenen varsayılan site haritası özelliği yerine XML Site haritası özelliğini kullanmak isteyebilirsiniz.SEO görüntü optimizasyonu hakkında daha fazla bilgi edinmek ister misiniz?