Resimlerinizi WordPress İçin Nasıl Optimize Edebilirsiniz?

WordPress içeriğinize resimler eklemenizin (ve eklemenizin) birçok nedeni vardır. Resimler, okuyucularınızın etkileşimde kalmasına yardımcı olur. Ayrıca, uzun içerik parçalarını ayırmanın ve Arama Motoru Optimizasyonu'nu (SEO) iyileştirmenin bir yoludur. Ancak, web sitenizi de yavaşlatabilirler.

Neyse ki, resimlerinizi optimize etmenize yardımcı olabilecek pek çok kaynak var. Bu, web sitenizin genel başarısına zarar verebilecek yavaş sayfa hızlarının üstesinden gelme olasılığınızın daha yüksek olacağı anlamına gelir.

Bu makalede, büyük resimlerin sitenizi neden aşağı çektiğine bakacağız. Ardından, sitenizin SEO'sunu iyileştirebilecek bazı temel görüntü optimizasyon ipuçlarıyla birlikte medya dosyalarınızı etkili bir şekilde nasıl sıkıştıracağınızı keşfedeceğiz.

Neden Resimlerinizi WordPress İçin Optimize Etmelisiniz?

Görüntüler, herhangi bir içerik stratejisinin değerli ve önemli bir parçasıdır. Ancak, yavaş sayfa yükleme sürelerinin ana nedenlerinden biri de olabilirler.

Yavaş bir web sitesi bir sorundur çünkü kullanıcıları uzaklaştırabilir. Aslında, yüklenmesi beş saniye veya daha uzun süren sayfaların, kullanıcının sayfadan hemen çıkma (yalnızca tek bir sayfayı görüntüledikten sonra ayrılma) olasılığında ortalama olarak yüzde 90'lık bir artış olduğunu görüyoruz.

Sitenizi yavaşlatabilecek birçok faktör olsa da, resimler ve medya dosyaları modern web sitelerinde bant genişliğinin yüzde 63'ünü kaplıyor. Sonuç olarak, sitenize yüklediğiniz resimleri optimize etmek önemlidir.

Site hızının bir Google sıralama faktörü olduğunu da belirtmekte fayda var. Bu, sayfanızın ne kadar hızlı veya yavaş yüklendiğinin, bir dereceye kadar, arama sonuçlarında ne kadar iyi sıralandığını belirleyeceği anlamına gelir. PageRank'inizi etkileyen birçok faktör vardır ve resimler "Web sayfalarının kullanılabilirliği" kategorisine girer.

Görüntü optimizasyonu gerçekten iki şeyi iyileştirmekle ilgilidir:

• Her görüntü pikselini kodlamak için kullanılan bayt sayısı
• Kullanılan toplam piksel sayısı.

Başka bir deyişle, optimize etmek, en az piksel ve bayttan alabileceğiniz en iyi kaliteyi elde ettiğiniz anlamına gelir. Bu, medya dosyalarınızın boyutlarını azaltır ve genel olarak sitenizin hızı üzerinde önemli bir etkiye sahip olabilir.

WordPress'e Yüklemeden Önce Resimlerinizi Optimize Edin

Sonuç olarak, web siteniz için en iyi senaryo, resimlerinizi yüklemeden önce optimize etmenizdir. Bu, bir görüntünün kopyaları veya birden çok sürümüyle karşılaşmamanız için yapılır. Bu, görüntü optimizasyonu yoluyla web sitenizin yükünü hafifletme amacını ortadan kaldırır.

Bunu göz önünde bulundurarak, sitenizin medyasını nasıl optimize edeceğinize karar verirken göz önünde bulundurmanız gereken bazı hususlara bir göz atalım.

Görüntü Dosyası Biçimleri

Başlamak için, var olan çeşitli görüntü formatlarına bir göz atalım. Her birinin nasıl farklı olduğunu ve bunları kullanmanın en iyi olduğu zamanı anlamak, görüntüleri daha düzenli bir şekilde kullanmanıza yardımcı olabilir.

Çevrimiçi olarak kullanılan en yaygın iki resim formatı JPEG'ler ve PNG'lerdir. Bu biçimlerin her ikisi de piksellerden oluşur. Bir görüntünün boyutunu değiştirdiğinizde pikseller uzar, bu da bazen görüntüyü bulanıklaştırabilir. Ancak, bu görüntü türlerinin farklı güçlü ve zayıf yönleri vardır.

JPEG'ler Ne Zaman Kullanılır?

JPEG dosyaları hem baskı hem de web içeriği için iyi bir seçimdir. Bu tür bir görüntü dosyası, 'kayıplı' biçim olarak adlandırılan biçimi kullanır. Daha büyük bir görüntü JPEG'e dönüştürüldüğünde, dosyasında bulunan bilgilerin bir kısmı kaybolur.

Bu bilgi, yalnızca görüntüyü görüntülemek için gerekli değildir. Ancak bunun anlamı, bir JPEG'e dönüştürmenin daha küçük bir dosya boyutuyla sonuçlanmasıdır, ancak genel görüntü kalitesinde bir miktar fedakarlık olabilir. Neyse ki kalitedeki düşüş, özellikle daha küçük resimler için çok belirgin değil.

PNG'ler Ne Zaman Kullanılır?

PNG dosyaları, tıpkı JPEG'ler gibi, ancak farklı bir şekilde web içeriği için de kullanışlıdır. Örneğin, PNG'lerin şeffaf arka planları olabileceğinden, web grafikleri tasarlamak için daha çok yönlü ve kullanışlıdırlar.

PNG'ler 'kayıpsız' bir dosya formatı kullanır. Bu, dosya sıkıştırıldığında görüntü hakkındaki tüm bilgilerin saklandığı anlamına gelir. Sonuç olarak, daha yüksek kalitede olma eğilimindedirler, ancak dosya boyutlarında ve sayfa hızlarında daha küçük bir gelişme sunarlar. Grafikler ve simgeler ve çok yüksek kaliteli görüntüler için iyi bir seçenektir.

Görüntü boyutu

Şişkinliği kesmenin zamanı geldi. Ölçekli görüntüler sunmak, görüntülerinizi optimize etmenin en basit ve en etkili yollarından biridir. Neden bu kadar etkili? Görüntü ölçeklendirme, varlığı tarayıcıda amaçlanan boyutunda görüntülemek için gerekenden daha fazla piksel göndermemenizi sağlar.

Birçok site büyük, ölçeklenmemiş resimler sunmaya çalışır ve bunları yeniden boyutlandırmak için tarayıcıya güvenir, bu da ekstra kaynakların kullanılmasına ve site hızının düşmesine neden olur. Resmin doğal boyutu 820×820 piksel ise ve tarayıcı tarafından 400×400 piksel olarak gösteriliyorsa… bu 32.400 gereksiz piksel demektir!

Bir sayfanın yüklenme hızı ve netliği, görüntünün görüntülendiği cihazla (mobil, masaüstü vb.) çok ilgilidir. Örneğin, 27 inç monitörünüzde 4k bir görüntü güzel görünebilir.

Ancak, bir ziyaretçi bu görüntünün bulunduğu bir sayfayı yüklediğinde, tarayıcı dosyayı önce tam çözünürlüğünde işler ve ardından ekranına sığması için küçültür. 400 pikselden daha büyük bir boyuta sahip olmayan bir mobil cihaz kullanıyorlarsa, muhtemelen içeriğinizi kaçıracaklar.

Bunu göz önünde bulundurarak, resimlerinizi dışa aktarırken en iyi uygulamalardan bazıları şunlardır:

• Görüntünüzün dosya boyutlarını 'web için optimize edilmiş' JPEG'ler veya PNG'ler olarak kaydederek birkaç yüz kilobaytın altında tutun.
• Görüntüler için web standardı inç başına 72 noktadır (dpi), bu, görüntüleri yukarıda belirtilen biçimde kaydederek elde edilebilir.

Görüntü boyutunu yaklaşık 1.500 piksele veya genişliğe düşürmek için Photoshop, Lightroom veya benzer bir düzenleyici kullanabilirsiniz. Photoshop'ta, görüntünüzün boyutlarını ve çözünürlüğünü manuel olarak ayarlamak için Görüntü > Görüntü Boyutu'na gitmeniz yeterlidir. Resimlerinizi web yüklemesi için optimize etmek üzere Dosya > Dışa Aktar > Web için Kaydet'e de gidebilirsiniz :

Keskin ve canlı fotoğrafları daha büyük bir monitörde görüntülemeyi amaçlamıyorsanız, görüntünün boyutunu daha da küçültebilirsiniz.

Lightroom ile çalışıyorsanız, dışa aktardıktan sonra görüntü boyutunu manuel olarak ayarlamak için Dosya > Dışa Aktar'a gidin:

Görüntü boyutu ve çözünürlüğü yapbozun sadece bir parçasıdır. Görüntülerinizi optimize etmeye gelince, ayrıca sıkıştırmayı anlamak ve etkili bir şekilde kullanmak isteyeceksiniz.

Görüntü Sıkıştırma

Özetle, görüntü sıkıştırma, görüntünün kalitesini kabul edilemez bir düzeye düşürmeden bir grafik dosyasının boyutunu (bayt cinsinden) en aza indirmenin bir yoludur. Bahsettiğimiz gibi, dosya boyutunda gereksiz yere büyük olan yüksek çözünürlüklü görüntüler, sayfa hızını önemli ölçüde etkileyebilir.

Öte yandan, optimize edilmiş görüntüler, optimize edilmemiş görüntülere göre ortalama yüzde 40 daha hafiftir. Genel bir kural olarak, web sitenize yüklediğiniz tüm görselleri ve diğer ortamları, yükleme işlemi öncesinde veya sırasında optimize etmek isteyeceksiniz.

Kayıplı ve Kayıpsız Sıkıştırma

Daha önce de belirttiğimiz gibi, JPEG'ler ve PNG'ler iki farklı görüntü sıkıştırma türü kullanır. Kayıpsız sıkıştırma, kaliteden ödün vermeden orijinal dosyadaki tüm verileri korur.

Kayıpsız sıkıştırma ile, genellikle bir dosyayı iletim veya depolama için 'daha küçük' bir forma ayırırsınız. Daha sonra bilgi diğer uçta tekrar bir araya getirilir, böylece tekrar kullanılabilir.

Öte yandan, kayıplı sıkıştırma, görüntü dosyasında bulunan verilerin bir kısmını kaldırır. Bu, kalitede daha büyük bir düşüşe neden olabilir, ancak aynı zamanda sayfa hızlarında daha önemli bir iyileşmeye neden olabilir. Kalite ve performans arasında bir denge sağlamak için sıkıştırma miktarını bile özelleştirebilirsiniz.

Görüntü Sıkıştırma Eklentileri

Hızlı yüklenen resimler, daha hızlı bir site ve daha iyi SEO anlamına gelir. Burada, görüntü sıkıştırmada size yardımcı olacak bazı çeşitli görüntü optimizasyon eklentileri bulunmaktadır.

Smush Görüntü Sıkıştırma ve Optimizasyon

Smush'un resim sıkıştırma eklentisi, web için tüm resimlerinizi yeniden boyutlandırmak, optimize etmek ve sıkıştırmak için çalışır, böylece eskisinden daha hızlı yüklenirler. Siteniz fotoğraf açısından zenginse, bu eklenti olmazsa olmazınızdır.

ShortPixel Görüntü Optimize Edici

ShortPixel'in Image Optimizer eklentisi, medya kitaplığınıza yüklenen geçmiş ve gelecekteki tüm görüntüleri ve PDF'leri sıkıştırır. Eklenti, çoğu dosya türü için hem kayıplı hem de kayıpsız sıkıştırma sağlar. Bir fotoğrafçıysanız, yüksek kaliteli kayıplı bir optimizasyon algoritması kullanan parlak JPEG sıkıştırmasını tercih edebilirsiniz.

JPEG ve PNG resimlerini sıkıştırın

Yalnızca JPEG'leri ve PNG'leri optimize etmek mi istiyorsunuz? Bu eklenti, görüntü sıkıştırmada size yardımcı olmak için görüntü sıkıştırma hizmetleri TinyJPG ve TinyPNG'yi kullanır. Ortalama olarak, JPEG resimler yüzde 40-60 oranında ve PNG resimler yüzde 50-80 oranında sıkıştırılır ve gözle görülür bir kalite kaybı olmaz.

EWWW Görüntü Doktoru

EWWW Image Optimizer çift görev yapar. Hem sitenizdeki mevcut resimleri optimize eder hem de yüklediğiniz yeni resimlerle ilgilenir. Ek olarak, resimlerinizin nasıl (ve ne kadar) sıkıştırıldığı konusunda size birçok kontrol sağlar.

Kraken.io Görüntü Doktoru

Son olarak, Kraken.io Image Optimizer, hem yeni hem de mevcut medyayı optimize etmek için kullanışlıdır. Kayıpsız ve 'akıllı' kayıplı sıkıştırmayı destekleyerek daha düşük dosya boyutlarıyla yüksek kaliteli görüntüler elde etmeyi kolaylaştırır.

Özellikli resim

Öne çıkan resim, bir WordPress gönderisinin gövdesine eklenmez, ancak temanız boyunca yapısal olarak kullanılır. Örneğin, gönderi başlığının yanında küçük resim olarak veya belirli bir gönderiyi görüntülerken başlıkta görünebilir.

Çoğu tema ve widget, öne çıkan görsellere dayanır, bu yüzden atlamak isteyeceğiniz bir şey değildir. Öne çıkan görseller, daha fazla özelleştirmeye izin verir; belirli gönderiler ve sayfalar için benzersiz özel başlık resimleri görüntüleme veya temanızın özel özellikleri için küçük resimler ayarlama olanağına sahip olacaksınız.

Öne çıkan görselinizin boyutunu istediğinize karar verdiğinizde, bu boyut gelecekteki öne çıkan tüm görseller için ayarlı kalacaktır. Seçmeniz gereken boyut, WordPress sitenizin temasına ve yazılarınızın düzenine bağlıdır.

Öne çıkan görseller, genellikle 500 ile 900 piksel arasında değişen, yüksek olandan daha geniştir. Ayrıca, pikselli değil, yüksek çözünürlüklü bir resim seçmek en iyisidir.

Profesyonel ipucu: Facebook veya Twitter'da bir gönderi veya sayfa paylaşıldığında görüntülenen medyayı kontrol etmek için Yoast SEO eklentisini yükleyin. Yalnızca başlığı ve açıklamayı özelleştirmekle kalmayacak, aynı zamanda her sosyal kanal için doğru resim boyutlarını da yükleyebileceksiniz.

WordPress'e Yükledikten Sonra Resimlerinizi Optimize Edin

Resimlerinizi yüklemeden önce optimize etmenizi öneririz. Ancak, bu mümkün değilse veya zaten sitenizde bulunan görselleri optimize etmek istiyorsanız, bunu yine de yapabilirsiniz. Canlı içeriğinizi optimize etmenize yardımcı olabilecek birkaç yöntem vardır.

Tembel Yükleme Resimleri

Normalde birisi bir web sayfasını ziyaret ettiğinde içeriğinin tamamı yüklenmeye başlar. Bu, içeriğin yoğun olduğu bir sayfada her şeyin ortaya çıkmasının biraz zaman alabileceği anlamına gelir.

"Geç yükleme", sitenizin içerik yükleme biçimini değiştirmeyi içerir. Sitenize, önce hemen görünür olan metni, resimleri ve diğer öğeleri yüklemeye odaklanması talimatını verir. Ancak bundan sonra, yalnızca sayfayı aşağı kaydırarak erişilebilen içeriği yüklemeye başlayacaktır. Bu, sitenizi hızlandırmanın ve ziyaretçilerinizin deneyimini iyileştirmenin harika bir yoludur.

Sitenize yavaş yükleme eklemenin en kolay yolu, Lazy Load gibi bir eklenti kullanmaktır.

Bu, bir kerede sitenizin web sunucusuna gönderilen isteklerin hacmini azaltmaya yardımcı olan bir WP Rocket aracıdır. Hatta YouTube videolarının yerine yer tutucu resimler koyar, böylece asıl video yalnızca gerektiğinde yüklenir.

Görüntüleri Önbelleğe Al

Sitenizdeki hızı artırmanın başka bir yolu da 'önbelleğe alma'dır. Bu, sitenizin verilerinin bir kısmını ziyaretçinin erişebileceği daha kolay ve hızlı bir yere, genellikle bulundukları yere daha yakın bir üçüncü taraf sunucusuna veya tarayıcılarına kaydetmeyi içerir.

Kodlama, eklentiler ve diğer araçlar aracılığıyla önbelleğe almayı gerçekleştirmenin birçok yolu vardır. WP Engine'de varsayılan olarak tüm sitelerimizde güçlü önbelleğe alma uyguluyoruz. Bu, yalnızca resimlerinizin değil, tüm içeriğinizin sayfa hızları üzerindeki etkisini azaltmak için faydalıdır.

EXIF Verilerini Kaldır

EXIF verileri, bir resim dosyasının parçası olarak saklanır ve bir resmin nerede ve nasıl çekildiği hakkında bilgiler içerir. Kameralar tarafından resimlere otomatik olarak eklenir ve genellikle web dosyalarınız için gerekli değildir.

Bu nedenle, bu verileri resimlerinizden kaldırmak, sayfalarınızı hızlandırabilir, ancak etkisi çok büyük olmayabilir. Maalesef şu anda bunu yapmanıza yardımcı olabilecek güncellenmiş bir eklenti yok. Bu nedenle, sitenizde çok sayıda fotoğraf kullanıyorsanız ve EXIF ​​verileriyle ilgili endişeleriniz varsa, yardım için bir geliştiriciye ulaşmak isteyeceksiniz.

Resim URL Yönlendirmelerinden Kaçının

Son olarak, sayfalarınızı yavaşlatabilecek başka bir unsur, resimlerinizin yönlendirmelere neden olmasıdır. Bu genellikle başka bir yere bağlandıklarında olur.

Bu nedenle, sitenize harici kaynaklardan gelen görselleri yerleştirmekten kaçınmalısınız. Bunun yerine, mümkünse her görüntüyü veya medya parçasını kaydedip doğrudan sitenize yükleyin. Ayrıca resimlerinizin ayrı bir medya sayfası gibi herhangi bir şeye bağlantı vermemesini de sağlayabilirsiniz.

Görselleri Arama Motorları için Optimize Etme

Resim başlıklarını biçimlendirmek, resim optimizasyonunda bir başka önemli adımdır. Bu, görüntü dosyası adının içeriğiyle alakalı olduğu anlamına gelir. Bunu yaptığınızda, arama motorları aracılığıyla ilgili görsel arama sonuçlarında görünmeleri daha olasıdır.

Bu, sitenizin görsellerinin Google Görsel aramalarında daha sık listelenmesini sağlayarak markanızın görünürlüğünü ve erişilebilirliğini artıracağı gibi sitenize gelen trafiği de artıracaktır. Görüntü optimizasyonu çok az zaman alır ve sitenizin trafiğinde büyük bir fark yaratabilir.

Resimlerinizin daha üst sıralarda yer almasına yardımcı olacak birkaç ek ipucu.

Alternatif Metin

'Alt metin' veya 'alt etiket' olarak da bilinen alternatif metin, HTML'de bir resme eklenen bir özniteliktir. Alternatif metin, neleri içerdiğini ve amacının ne olduğunu açıklayarak arama motorlarının resminizin ne hakkında olduğunu anlamasına yardımcı olur.

Google, bir görselin ne olduğunu belirlemek için alternatif metne güvenir, çünkü tek 'gördüğü' HTML etiketinde ne olduğudur. Resimleriniz için güçlü, açıklayıcı alternatif metin kullandığınızda, sitenizin arama sonuçlarında uygun şekilde listelendiğini görme olasılığınız daha yüksektir.

WordPress'te, resimlerinize iki şekilde alternatif metin ekleyebilirsiniz. Öncelikle gönderilere konulan görsellere görselin üzerine tıklayıp ekranın sağ tarafında yer alan Resim Ayarları seçeneğini kullanarak ekleyebilirsiniz.

Alternatif olarak, Medya > Kitaplık'ı ziyaret edip istediğiniz görüntüyü seçerek bir görüntüye alternatif metin de ekleyebilirsiniz. Ardından, alternatif metninizi o görüntü için Alternatif Metin alanına eklemeniz yeterlidir.

Başlık Etiketleri

Başlık etiketleri, alt etiketlere benzer, ancak arama motoru botları için değil, insan okuyucular içindir. İyi bir başlık etiketi optimizasyonu, görme engelli kullanıcıların web sitenize erişmesine yardımcı olabilir.

XML Resim Site Haritaları Oluşturun

Resimlerinizin Google tarafından fark edilmesini sağlamanın bir başka yolu da bir site haritası oluşturup göndermektir. Bu, arama motorları tarafından taranamayan resimler için iyi bir seçenektir.

Örneğin, JavaScript tarafından yüklenen resimlerden bahsediyoruz. Site Haritaları, arama motorlarına sitenizde bulunan resimler hakkında daha fazla bilgi verir, böylece içeriğinizi daha doğru bir şekilde anlayabilir ve dizine ekleyebilirler.

WordPress'te, aşağıdaki eklentiler bir site haritası oluşturmanıza yardımcı olabilir:

• Google XML Site Haritaları
• Yoast SEO
• Hepsi Bir Arada SEO Paketi
• Udinra Tüm Resim Site Haritası

WordPress dışı web siteleri için, Screaming Frog, Dynomapper ve daha fazlası dahil olmak üzere site haritası oluşturmaya yardımcı olabilecek araçlar da vardır. Bir site haritası oluşturduktan sonra, bunu Google'ın web yöneticisi araçları aracılığıyla göndermek isteyeceksiniz.

Görüntü Yerleştirme ve Altyazılar

Son olarak, bir blog yazısı veya web sayfasındaki görsellerin yerleşimine bakalım. Resimlerinizi bir gönderiye nereye koyduğunuz, gönderinin Google'daki sıralaması üzerinde önemli bir etkiye sahip olabilir.

Örneğin, anahtar kelime öbeklerinize daha yakın bir resim yerleştirirseniz, muhtemelen daha iyi sıralanır. Ayrıca, resminize anahtar kelime açısından zengin bir resim yazısı eklemenin, arama metni olarak sayılacağını ve daha iyi resim SEO'suna yardımcı olabileceğini unutmayın.

WordPress Web Sitenizi WP Engine ile Optimize Edin

Görüntü optimizasyonu, web sitenizi geliştirmek söz konusu olduğunda çok fazla yol kat eder. Optimizasyon, kullanıcı deneyimlerini yükseltmeye ve yükleme sürelerinizi bu beş saniyenin altında tutmanıza yardımcı olabilir. WP Engine'de, resim optimizasyonunun web sitenize getirdiği değeri anlıyoruz. Bu nedenle, özel olarak yönetilen WordPress barındırma ortamları sunuyoruz. Bu, parmaklarınızın ucunda uzman desteğine ve kapsamlı optimizasyon araçlarına ve kaynaklarına sahip olacağınız anlamına gelir!