Görsel Optimizasyonu Nedir? Site Hızını 2 Kat Arttırılmasının Yolları

Görsel optimizasyonu, web sitemizde yer alan görsellerin kalitesinin bozulmadan dosya boyutunun küçültülerek web sitemizin daha hızlı yüklenmesini sağlamak amacıyla yapılan bir çeşit teknik SEO çalışmasıdır.

Görsel optimizasyonu web sitemize ciddi hız avantajı sağladığı gibi kullanıcı deneyimi açısından da önemli avantajları vardır. Web sitemizde yapacağımız teknik SEO çalışmasının sadece küçük bir parçası olmakla beraber yeterli ve kapsamlı bir görsel optimizasyonu yapılmaksızın web sitemizin SEO uyumluluğundan söz etmek mümkün değildir. Görsel optimizasyonu ve önemi hakkında kısaca bilgi verdikten sonra dilerseniz konuyu daha fazla uzatmadan bu önemli SEO çalışmasının nasıl yapılacağına geçelim.

Web Sitesi Görsel Optimizasyonu Nasıl Yapılır?

Aşağıda sıralamış olduğumuz adımları kullanarak SEO açısından oldukça önemli olan görsel optimizasyonunu web siteniz için uygulayabilirsiniz.

Gereksiz Görsel Kullanımından Kaçının

Görsellerin web sitemize estetik açıdan önemli katkılarının olduğu tartışmasızdır. Ancak burada unutmamamız gereken bir husus vardı ki her bir görselin web sitemizin hızını doğrudan etkilediğidir. Bu nedenle sadece web sitemize sadece estetik kazandırmak adına diğer bir deyimi ile gereksiz resimlerin eklenmemesi gerekir. Ekleyeceğimiz görselin içeriğimizdeki anlatıma katkıda bulunmasına özen göstermemiz gerekir.

Yerel SEO Nedir? Yerel İşletmeler İçin SEO Rehberi

×

Web sitemizde yayınlayacağımız bir takım içeriklerde anlatmak istediğimiz konuyu yazınsal olarak anlatmamız zor veya imkansız olması halinde görsellere başvurmamız gerekir. Özellikle WordPress SEO eklentileri, içeriğimizin SEO puanlamasını yaparken sıklıkla görsel bulunmayan içeriği SEO açısından eksi puan olarak göstermektedir. Bu SEO eklentileri içeriğimizde görsel kullanmamıza gerek bulunup bulunmadığı yönünde bir karar verecek yetkinliğe ulaşmamıştır.

Görsel Optimizasyonunda Doğru Format Seçimi

JPEG

JPEG, kayıplı sıkıştırma kullanması nedeniyle resim kalitesinde kısmen bozulmalar yaşanabilir. Resim kalitesindeki bu kayıp web sitelerindeki görsellerin kalitesinin gözle görülür şekilde fark edilmesine imkan tanıyacak kadar fazla değildir. Bu gün halen web sitelerinde yer alan görsellerin büyük çoğunluğunu JPEG formatındaki resimler oluşturmaktadır.

PNG

PNG ise JPEG görsel formatının aksine kayıpsız sıkıştırma tekniği kullanır. Bu teknik sayesinde görselin kalitesi korunmakla beraber diğer görsel formatlarına göre çok daha fazla dosya boyutuna sahiptir. Bu dosya boyutu da web sayfamızın açılış hızına etki eder. Web sitesi logosu veya ikon gibi detay isteyen küçük görsellerde ideal olmasına karşın içeriğimizde yer alan görsellerin PNG formatında yer almasını tavsiye etmeyiz.

WebP

Gerek görsel kalitesi ve web sitesinin hızı için en ideal formatın WebP olduğunu söyleyebiliriz. JPEG ve özellikle PNG formatlarından aldığımız görüntü kalitesini çok daha düşük dosya boyutu ile WebP formatından alabilme şansına sahip oluruz.

İlk olarak kullanıma başlandığında bütün tarayıcılar tarafından görüntülenme şansına sahip olmamasına karşın günümüzde artık bu dezavantajı tamamen ortadan kalkmıştır. Artık WebP formatı tüm tarayıcılarda sorunsuz şekilde görüntülenebilmektedir. Web tasarım uzmanı ve SEO uzmanı olarak bizde içeriklerimizde kullanacağımız görselin WebP formatında olması gerektiğini düşünüyoruz.

AVIF

WebP formatına göre dosya boyutunda çok fazla azalma görünmese de özellikle PNG formatına göre ciddi farklar görülür. Yeni nesil bir sıkıştırma tekniği kullanması nedeniyle görsel kalitesinde bozulma olmaksızın görsel boyutu düşürülür. Ancak “Encode” süresinin uzunluğu ve eski tarayıcılarda hala görüntülenememesi sorunlarının yaşanması nedeniyle bu formatı tavsiye etmiyoruz.

Web Sitesinde Hangi Görsel Formatı Kullanılır?

Yukarıda yapmış olduğumuz bilgilendirmelerden sonra sizde görsel optimizasyonu ve teknik SEO açısından en ideal formatın WebP olduğunu anlamışınızdır. Ancak SEO uzmanı olarak bu konuda küçük bir uyarıda da göz ardı etmememiz gerektiğini düşünüyoruz.

PNG görsel formatı aşağıdaki örneklerde de görüldüğü gibi diğer formatlara göre dosya boyutu açısından kat kat fazladır. Ancak detayların önemli olduğu ve logo, ikon veya favicon gibi web sitemizde yer alan görsellerin PNG formatı ile hazırlanması adeta bir zorunluluktur. Çünkü bu derece detay ve fiziksel olarak küçük boyuttaki görsellerin diğer formatlarda hazırlanması resim kalitesini gözle görülebilir bir hale getirebilmektedir.

Aynı pxcell boyutlarında olan anacak farklı formatlarda hazırlanmış farklı görsellerin boyutlarına ilişkin tablo yukarıda gösterilmiştir. Görüldüğü gibi PNG formatında boyut oldukça yüksek isen AVIF formatında boyut oldukça düşüktür. En düşük dosya formatı AVIF olmasına karşın sık kullanılmaması nedeniyle ve WebP formatı ile aralarında çok fazla fark olmaması nedeniyle web sitesi görsel optimizasyonu için WebP formatını tercih ediyoruz.

Görüldüğü gibi farklı formatlarda hazırlanmış resimler yukarıda sergilenmiştir. Her bir görselde, kullanıcı gözü ile fark edilebilir bir görüntü bozulması olmamasına karşın boyut açısından ciddi farklar vardır.

Sıkıştırma İle Görsel Optimizasyonu

Web sitesi görsel optimizasyonu sırasında kullanabileceğimiz bir başka teknik görsel sıkıştırmasıdır. Web sitemizde kullanacağımız görsel formatları kendi özellikleri itibariyle bu görselleri belirli oranlarda sıkıştırmaktadır. Kayıplı / kayıpsız bu sıkıştırma işleminden sonra ilave olarak kedimiz ayrıca bu görselleri sıkıştırma imkanına sahibiz.

Burada ise dikkat etmemiz gereken en önemli husus görseldeki kalitenin daha fazla bozulmadan sıkıştırılması gerektiğidir. Bu sıkıştırma işlemi manuel olarak harici uygulama ve web siteleri aracılığı ile yapılabileceği gibi WordPress tabanlı web sitelerimizde kullanacağımız eklentiler sayesinde otomatik bir şekilde yapılması mümkündür.

WordPress tabanlı web sitelerde görsel optimizasyonu için kullanacağımız eklentiler seçeneklere göre görsel formatını da istediğimiz formata çevirme imkanı tanır. Örneğin PNG formatında yüklemiş olduğumuz bir görsel bu eklentiler sayesinde WebP formatına otomatik olarak dönüştürülür. Bu konuda eklentiler başarılı sonuçlar vermiş olsa da; doğrudan WebP formatında yüklenmesi gerektiğini düşünüyoruz.

Bu konuda tavsiye edebileceğimiz en ideal eklenti WordPress siteler için “Imagify” eklentisidir.

ÖNEMLİ NOT: Özellikle WordPress sitelerinde kullanacağımız her eklenti sunucumuzun veri tabanında yer kaplar. Bu da web sitemizin hızına etki eder. Bu eklentiler görsel optimizasyonu açısından önemli avantajlar sağlamış olmasına karşın veri tabanımızda yer kaplayan eklentilerdir.

SEO uzmanı olarak günde 1 veya 2 içerik veya haftada birkaç içerik gibi yoğun bir içerik girişi olmaması görsel formatının WebP olması koşulu ile tüm bu işlemlerin manuel olarak yapılmasını tavsiye ederiz. Özellikle e-ticaret sitesi veya ilan sitelerinde bu eklentiler yoğun içerik ve görsel girişi olması nedeniyle adeta zorunlu olmasına karşın içerik girişinin az ve görsellerin nadir kullanıldığı web sitelerinde eklenti olmaksızın manuel olarak bu işlemlerin yapılmasını tavsiye ederiz.

Görsel Optimizasyonu İçin Lazy Load

SEO uzmanı olarak web sitesi görsel optimizasyonu yaparken mutlaka uygulamamız gereken bir başka tekniğin “lazy load” olduğunu söyleyebiliriz. Özellikle yoğun görsel kullanımlarında lazy load ciddi hız avantajı sağlar.

Lazy load kelime anlamı ile “tembel yükleme” olarak bilinir. Web sitemizde veya herhangi bir içeriğimizde tıklama alındığında normal şartlar tüm sayfa aynı anda yüklenir. Ancak lazy load tekniği kullanıldığında sadece içeriğimiz kullanıcıya görüntülenen kısmı yüklenmektedir. Kullanıcı sayfayı kaydırması ile beraber sayfanın devamında yer alan diğer öğelerde yüklenmeye devam eder. Bu teknik de ciddi şekilde web sitimizin hızını arttırır.

Görsel Optimizasyonunda Boyutlar

Görsel optimizasyonu yaparken üzerinde durmamız gereken bir başka konu görsel boyutlarıdır. Ancak buradaki boyut yukarıda detaylarını belirtmiş olduğumuz KB / MB cinsinden bir boyut değildir. Daha çok genişlik ve yükseklik açısından görelin fiziki boyutudur.

Web siteleri çoğunlukla 600px / 800px resim boyutlarına göre tasarlanmaktadır. Dosya yöneticisine yükleyeceğimiz görseldeki boyutlar; 3000px, 4000px veya çok daha fazla 5000px gibi olması halinde bu görseller web tarayıcısı tarafından orijinal boyutu dikkate alınarak çağırılır.

Örneğin 4000px boyutunda yüklenen bir görsel yine web sayfası tıklama aldığında bu boyut üzerinden işlem yapılır. Oysa ki web sitemizin gösterilebilir dosya boyutu çok daha küçük olmasına rağmen daha fazla boyut algılanarak web sitemizin / web sayfamızın yavaşlamasına neden olur.

Web sitesi türlerine ve görselin kullanım amaçlarına göre genel olarak kullanılan görsel boyutlarını aşağıdaki gibi sıralayabiliriz.

• Blogat içeriklerinde bulunan görseller; 600px – 1200px
• Bannerler; 1200px – 1920px
• Küçük görseller; 150px – 400px

Mobil Uyumluluk

Mobil uyumluluk en temel SEO kriteri arasında yer alır. Şöyle ki web sitimizin mobil uyumlu olmaması %100 SEO uyumlu içerik yayınlamamıza rağmen sıralama almamızı önler. Şöyle ki; Bu gün herhangi bir web sitesinin almış olduğu ziyaretçilerin %70’i mobil cihazlardan yani cep telefonlarından elde edilmektedir. Bu nedenle görsel optimizasyonu mobil uyumlulukta kat kat daha önem taşır hale gelir.

Web sitesi tasarım işlemi veya kodlanması sırasında görsel optimizasyonlarının da buna uygun şekilde yapılması gerekir. Mobil uyumlu olarak tasarlanan web sitelerinde gerekli kodlama işlemi genellikle bu husus dikkate alınarak yapılır. Ancak buna rağmen bu hususun takip edilerek önemle üzerinde durulması gerekir.

Görsel Optimizasyonunda Cache Kullanımı

Cache sadece görsel optimizasyonunda kullanılan bir yöntem olmayıp, genel olarak web sitemizin hızını önemli ölçüde arttıran bir sistemdir. Cache, web sitemizde yer alan herhangi bir görselin ziyaretçi tarafından yeniden sayfanın ziyaret edilmesi halinde tarayıcı ön belleğinde saklanmasını ve ziyaretçinin ikinci girişinde doğrudan bu ön bellek üzerinden açılmasına sağlar.

Bunun yanında CDN kullanımı da cache sistemini güçlendirir. Görseller farklı coğrafi sunucularda tutulduğu için kullanıcıya en yakın noktadan yüklenir ve bu da özellikle mobil cihazlarda ciddi hız kazancı sağlar. WordPress tarafında ise cache işlemleri genellikle eklentiler üzerinden yapılır ve bu eklentiler hem tarayıcı cache’ini hem de sunucu optimizasyonunu otomatik olarak yönetebilir.

Genel olarak cache, tek başına bir görsel optimizasyonu değildir.  Diğer tüm optimizasyon tekniklerini de içerisinde barındıran bir tekniktir. Doğru kullanıldığında sayfa yüklenme süresini düşürür, kullanıcı deneyimini artırır ve SEO performansına dolaylı olarak güçlü katkı sağlar.

Görsel Optimizasyonunda Dosya ve İçerik Uyumluluğu

Hem görsel optimizasyonu hem de seo uyumlu içerik için önemli olduğunu düşündüğümüz bir başka hususa değinmek istiyoruz. Yayınlamış olduğumuz içerik ile görsel birbiri ile uyumlu olması gerekir. Örneğin web tasarım ile ilgili bir içeriğimiz bulunması halinde görselimiz de buna uygun olması gerekir. Ayrıca görselimizin adı ve alt etiketleri arama motorlarında sıralama almayı hedeflediğimiz anahtar kelimeleri içermelidir.

Örneğin web tasarım uzmanı anahtar kelimesine uygun bir şekilde içerik ürettiğimizde bu içerikte kullandığımız görselin alt etiketlerinde mutlaka “web tasarım uzmanı” yer alması gerekir. Diğer bir ifade ile anahtar kelimemiz ve içeriğimiz ile görselimiz aynı doğrultuda sitemizde yer almalıdır.

WordPress Görsel Optimizasyonu Eklentileri

Web sitesi görsel optimizasyonu için yukarıda vermiş olduğumuz önerileri dikkate alarak kullanmanızı tavsiye edebileceğimiz eklentileri ve özelliklerini ise aşağıdaki gibi özetleyebiliriz.

1-    Smush

WordPress tabanlı web sitelerinde sık kullanılan eklentilerden birisidir. En öne çıkan özelliği ise yüklemiş olduğumuz görselleri otomatik olarak ideal boyutlarda sıkıştırmasıdır. Böylelikle minimum kalite kaybı yaşarken maksimum verim elde edebiliriz.

Smush Öne Çıkan Özellikleri

• Kayıpsız sıkıştırma (Lossless)
• Toplu görsel optimizasyonu
• Laz load desteği
• Görselleri yeniden boyutlandırma özelliği
• CDN özelliği (Sadece pro sürümlerinde)

2-    ShortPixel Image Optimizer

Çok daha detaylı sıkıştırma amaçlayan kullanıcılar için idealdir. Daha çok web sitesinde ve içeriklerinde fazla resim kullanılmasını gerektiren e-ticaret siteler ile ilan sitelerinde çok daha fazla verim elde edebileceğimiz bir eklentidir.

ShortPixel Image Optimizer Özellikleri

• Lossy, lossless ve glossy şeklinde sıkıştırma seçenekleri sunar
• WebP ve AVIF destekleri vardır
• PDF dosyalarını görsel açıdan optimize eder
• Toplu görsel optimizasyonu imkanı sağlar

3-    Imagify

Her WordPress tabanlı web sitesinde bulunmasını önemle tavsiye ettiğimiz WP Rocket tarafından geliştirilmiş bir eklentidir. WP Rocket ile koordineli olarak çalışmış olması ayrı bir avantaj sağlar.

Imagify Özellikleri

• Üç farklı sıkıştırma seçeneği sunar (normal, asresif ve ultra)
• Webp Dönüşümüne imkan tanır
• Otomatik yeniden boyutlandırma imkanı sağlar
• Toplu görsel optimizasyonu imkanı tanır

ÖNEMLİ NOT: WP rocket ile birlikte Imagify web tasarımda görsel optimizasyonu açısından bizlere sayısız kolaylıklar sağlar. Bu nedenle web sitemizin WordPress tabanlı olması halinde özellikle WP Rocket eklentisini kullanmanızı tavsiye ederiz.

4-    EWWW Imege Optimizer

Diğer eklentilerden farklı olarak görsel optimizasyonu işlemlerini web sitesinin barındırıldığı kendi sunucu üzerinden yapılmasına imkan tanır.

EWWW Imege Optimizer Özellikleri

• Sınırsız görsel optimizasyonu imkanı tanır
• Görseller doğrudan sunucu tabanında sıkıştırılır
• WebP dönüşümü imkanı tanır
• Tüm bu özellikleri ile beraber lazy load desteği tanır

5-    Optimole

Görselleri sadece sıkıştırmakla kalmamakla beraber kullanıcıya göre görsel optimizasyonu imkanı tanır. Daha çok büyük haber ve ilan siteleri ile e-ticaret siteleri için idealdir.

Optimole Özellikleri

• Gerçek zamanlı görsel optimizasyonu sağlar
• Mobil ve masa üstü ayrı ayrı değerlendirir
• Dahili CDN özelliği vardır
• Lazy load desteği vardır
• WebP Dönüştürme imkanına sahiptir.

Web Sitesi Görsel Optimizasyonu Nasıl Yapılır?

Web sitesi görsel optimizasyonu hakkında yukarıda vermiş olduğumuz bilgileri özetlemek gerekirse;

1. En uygun görsel boyutu seçilmelidir
2. Dosya boyutu azaltılırken kalite kaybının en az gerçeklediği dosya türü seçilmelidir. (En ideal format; WebP formatı olduğunu söylebiliriz.)
3. Gereksiz şekilde büyük dosya boyutu tercih edilmemelidir.
4. Web sitesinde sadece görsel kullanmak amacı ile görsel eklenmemelidir. Görseller içeriğimiz ile aynı amaca hizmet etmelidir.
5. Lazy load kullanılmalıdır

Web Sitesi Görsel Optimizasyonunda Kullanılan Formatlar ve Özellikleri