Resim Optimizasyonu – Web Site Hızı Nasıl Arttırılır

Resim Optimizasyonu

Web sitenizin hızını artırma yolları arasında en önemli kurallardan biri de resim optimizasyonudur. Özellikle Google ve diğer arama motorları son düzenlemelerinden sonra site hızı seo da önemli bir kriter olarak açıkladı. Resim optimizasyonu yapmak için birkaç yol bulunur. Sıkıştırarak dosya boyutunu küçültme, küçük resim oluşturma ve Photoshop gibi programları kullanarak web için kaydetme ama bu yazıda farklı birşeyden bahsedeceğim.

Data URI ile resim optimizasyonu

Bu yöntem hız konusunda ciddi bir fark yaratır. Fakat sayfaya eklenen bütün resimler de kullanmak pekte mantıklı değil. Zira sayfa kaynağınız ciddi oranda büyür ve bu durum içerik kod oranını etkiler. Bunun yerine sayfa içinde zemine eklediğiniz büyük bir arkaplan resmi için kullanmanız çok uygun olacaktır.

Şimdi nasıl çalıştığına bakalım;

Örnek dosyamız aşağıda standart olarak jpg formatında bir dosya

Resim Optimizasyonu

<img src="http://omererkan.com/wp-content/uploads/2015/12/Google.jpg" alt="Google">

Html içinde örnek kullanımda yukarıdaki gibi standart img etiketi

Bu dosyayı Data URI ile siteye eklemek istersek ilk olarak dosyayı koda dönüştürmeliyiz.

bunun için birkaç yöntem bulunmakta bunlardan ilki online bir çevirici kullanmak;

Coveloping

WebSemantics

dopiaza

Bir diğer yol ise sitenin içinde php ile halletmek

function getDataURI($image, $mime = '') {
	return 'data: '.(function_exists('mime_content_type') ? mime_content_type($image) : $mime).';base64,'.base64_encode(file_get_contents($image));
}

/* Düzenleme 04/02/2016 */

Yukarda verdiğim örnek resim dosyasının Data URI ile dönüştürülmüş şekli

Diğer resim ile farkı sayfa kaynağına ve yükleme hızlarına bakarak görebilirsiniz.

Html kullanımı
04/02/2016 tarihinde buradaki html içerik kaldrıldı. Kaldırılan içeriğe ulaşmak için tıklayınız.

CSS Kullanımı
04/02/2016 tarihinde buradaki css içerik kaldrıldı. Kaldırılan içeriğe ulaşmak için tıklayınız.

/* Düzenleme sonu 04/02/2016 */

Düzenleme Açıklaması
Yukarıdaki düzenlemeyi neden yaptım. Çünkü Data URI için kullanım örnekleri text tabanlı olduğu için imajın kendisi, html örneği ve css örneği sayfadaki text oranı ciddi şekilde arttırdı ve kod içinde geçen kelime tekrarları (verdiğim linklerde yadwtfgrvuq ve jydvfsad2s kelimelerini aratırsanız çok sayıda tekrar edildiğini görürsünüz.) google’da anlamsız kelimeler ile anahtar kelime ilişkilendirildiğimi fark edince kodları codepen sitesine taşıdım.

Düzenleme Sonrası Ek

Data URI ile resim optimizasyonu yaparken kesinlikle html içinde img etiketi ile kullanmayın. Data URI imaj dosyalarını kodlarken kelime tekrarı yaptığından sitenizde geçen ortak kelime sayısına göre bu sayı fazla olduğu için ters etki yaratıp site açısından olumsuz olacaktır. Seo açısından en doğru kullanım şekli css ile olacaktır.

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir