Google PageSpeed Insights Resim Optimizasyonu
SEO

Google PageSpeed Insights Resim Optimizasyonu

Birçok web sitesi, Google'ın kriterlerini karşılamak, ziyaretçilerine daha kaliteli resimler sunmak adına optimize edilmemiş görüntülere sahiptir. Ancak Google, web sitelerinde kaliteli resimlerin bulunmasını isterken, aynı zamanda web sitelerin hızlı açılmasını ister ve bunun için de resimlerimizi optimize etmemizi ister. Bu yazımızda, web sitemizdeki görüntüleri Google’a doğru şekilde sunmayı anlatacağım. Böylece hem Google'ı hem de ziyaretçilerimizi memnun edeceğiz.

Google Pagespeed Insights Resim Optimizasyon Sorunu

Resim optimizasyon sorunları, Google'ın görüntülerimizin kalitesini kaybetmeden daha az yer kaplayabileceğini düşündüğü durumlarda ortaya çıkar. Her durumda Google'a tamamen katılıyorum, ancak önemli bir görseldeki kaliteyi kaybetmeden depolama alanını düşürmek oldukça zor.

Resim Sıkıştırma Kılavuzu

Bu kılavuzda, size görüntülerinizi optimize etmek için üç somut adım vereceğim. Bu rehber sayesinde, Google Pagespeed Insights resim optimizasyonu testini başarılı bir şekilde geçebilir ve fotoğrafların kalitesini de koruyabilirsiniz.

Google PageSpeed Insights Resim Optimizasyonu

1. Resim Boyutlarını Doğru Şekilde Ayarlayın

Tarayıcının, resimleri sitedeki alanına sığması için o alanın boyutunda resim yüklemeniz çok önemlidir. Eğer resmi ziyaretçilerinize 100px genişliğinde ve 100px yüksekliğinde gösterecekseniz siteye yüklediğiniz resmin de boyutu 100px genişliğe ve 100px yüksekliğe sahip olsun. Bunu yaparsanız, tarayıcınız resmin taramasını yapmadan önce sitenizi ziyaret eden her bir kullanıcı önce tam boyutlu resmi indirmesi gerekecek. Dolayısıyla, resmi ziyaretçilerinize göstereceğiniz alanın genişliğine önem vermelisiniz ve resminizi yüklemeden önce genişik ve yükseklik ayarlarını doğru yaptığınızdan emin olun. Eğer responsive bir web sitesine sahipseniz, hangi ekran görüntülerinin farklı ekran boyutlarında kullanılacağını bildirmek için srcset özniteliğini kullanabilirsiniz.

<img src="kucuk-resim.jpg" srcset="normal-resim.jpg 1000w, buyuk-resim.jpg 2000w" alt="Resim Açıklaması" />

Bu özellik, sınırlı sayıda web tarayıcısı tarafından destekleniyor. Özellikle Microsoft'un Tarayıcılarından (Edge ve Explorer) sadece bazı sürümleri srcset özelliğini destekliyor. Srcset özelliğini hangi internet tarayıcılarının desteklediğini Caniuse.com'dan her zaman kontrol edebilirsiniz. Ayrıca Srcset özelliği şu anda hangi tarayıcıların hangi sürümlerinde destekleniyor aşağıdaki görselden öğrenebilirsiniz.

Srcset Özelliği Hangi Tarayıcılar Tarafından Destekleniyor

2. Resim Kalitesini Ayarlayın

Bir resmi kaydettiğinizde (neredeyse) her zaman kaliteyi ayarlama seçeneğiniz vardır (Özellikle PhotoShop gibi profesyonel resim düzenleme programlarında). Resmi kaydederken, önemli derecede kilobayttan tasarruf edebilmek için resimleri sıkıştırmalısınız. 100'den 75'e indiğimizde resimde kalite konusunda belirgin bir değişiklik görmüyoruz - bu yüzden 100'ü seçmek için her zaman gereksizdir (75'de iyi bir kalite sunuyor). Aşağıda, farklı kalitede resimlerin nasıl göründüğünü görebilirsiniz.

Resim Kaliteleri

Yukarıda gösterilen dört çeşit kalitedeki resim örnekleri arasından, görüntünün amacına bağlı olarak 75 veya 50'yi seçeceğim. Eğer görüntüyü makro fotoğrafçılığıyla ilgili bir web sitemde kullanacaksam, 75 kalitesini seçeceğim, çünkü küçük keskin ayrıntılara sahip olmak makro fotoğrafçılığında önemlidir. Eğer doğayla ilgili bir makale olsaydı, 50'yi seçerdim, çünkü bu çeşitte web sitelerinde küçük ayrıntılar makro fotoğrafçılığındaki kadar önemli olmazdı.

3. Görüntüyü Sıkıştırın

Depolama alanınızdan tasarruf etmek ve ziyaretçilerinizin az boyutta dosya indirerek sitenizi daha hızlı görüntüleyebilmesini sağlamak için web sitenizde kullandığınız görüntüleri sıkıştırmanız gerek.

Web sitenizdeki görüntüleri çeşitli resim sıkıştırma siteleri aracılığıyla otomatik olarak sıkıştırabilirsiniz.

Üç farklı resim sıkıştırma sitelerinin sonucunu test ettim ve her sitede aynı görüntüyü 75 kalitesinde sıkıştırdım.

Görüntünün sıkıştırmadan önceki boyutu 44 KB idi.

Resim Sıkıştırma Siteleri Sonuçları

jpegmini.com: 36 KB

optimizilla.com: 28 KB

tinyjpg.com: 19 KB

Tinyjpg.com en iyi sonucu veriyor olsa da (varsayılan ayarlarla) kendi favorim optimizilla.com'dur. optimizilla.com, görüntüyü sıkıştırmak ve görüntü kalitesini ayarlamak için bazı kolay seçenekler sunuyor.

Resim Optimizasyonlarının Önceliği

Binlerce görüntüye sahip bir web siteniz varsa, web sitenizdeki tüm resimleri sıkıştırmak zor bir görev olabilir. Dolayısıyla, bu görüntülerden ilk olarak hangilerini sıkıştırmanız gerektiği hakkında bazı bilgiler vermek istiyorum:

Önce En Çok Kullanılan Resimleri Sıkıştırın

Tüm sayfalarda yer alan görseller ilk optimize edilecek resimlerdendir. Belki de görüntü başına sadece birkaç kilobayt tasarruf edeceksiniz ancak bu tasarrufu her sayfanızda sağlayacaksınız. Bu resimlere örnek olarak sitenizin üst kısmında bulunan logonuz olabilir.

Önemli SEO Sayfalarındaki Resimler

Önemli SEO Sayfalarından bahsediyorum, arama motorlarında önemli anahtar kelimelerde önemli sıralamaya sahip olan bu sayfalara atıfta bulunuyorum. Bu sayfalardaki tüm resimleri inceleyin ve bunları olabildiğince iyi optimize ettiğinden kesinlikle emin olun.

Son Olarak

İki en iyi resim çeşitlerimiz ile optimizasyon işimiz bittiğinde pes etmemeli, resimleri sıkıştırmaya devam etmeliyiz. Google ayrıca, tüm web sitelerinin genel içeriğine bakar; bu nedenle, web sitemizde bulunan tüm resimlerin optimizasyonları tamam ise bu web sitenizi genel anlamda arama motorlarının arama sonuçlarında üst sıraya çıkaracaktır.