SEO ve Resim Dosyaları

SEO ve Resim Dosyaları

Bir WEB sayfasında en çok band genişliği harcayan öğeler resimlerdir. web sayfası tamamen html5 ile bile hazırlanmış olsa sayfa toplam büyüklüğünün neredeyse %80 ini resim dosyaları oluşturmaktadır. bu sebeple en problemli ve webmasterlerin en çok dikkat etmeleri gereken konular sayfaya yürklenen resim dosyalarıdır.

HTML 5 ve yeni gelişen teknolojiler ile bu sorununda çözüm önerileri getirilmekle birlikte Mobil sayfaların işlenişini kolaylaştırmak amacı ile bazı yeni html tagları ve geliştirilmektedir.

Resim dosyalarının yüklenişi ve işlenişi ile ilgili olarak aşağıdaki kurallara dikkat edilmelidir.

  • resimler çok yüksek çöznürlükte olmamalı ve optimize edilmiş olmaldır.
  • bulunduğu bölgeye göre html ile değiş, fiziksel olarak resize edilmiş olmaldır
  • her ekran çöznürlüğü için ayrı resim kullanılmaldır.
  • resimler mümkünse headerless bir domainden veya cdn den yüklenmelidir.
  • tüm resimler için aynı domain kullnılmaldır.
  • yeni geliştirilen <picture> tagı ile resimler yüklenmelidir.
  • img tagı ile dosya yüklemeleri lazy-load yapılmalı ve sayfa açıldıktan sonra ihtiyaç halinde yüklenmelidir.
  • resimler alt tagları ile birlikte kullanılmalıdır.
  • <img> tagı ile resim yüklemlerinde resim boyutlarıda verilemlidir.
  • image site map hazırlanmaldır.

Bu kurallara uyulduğu takdirde resimleriniz sayfalarınız için yük olmaktan çıkıp sayfanızın yükselmesi ve ziyaretçi çekmesi için önemli öğeler halini alcaktır.

<picture> Tagı

picture tgı yeni geliştirilen ve responsive sayfaların yüklenişlerini hızlandırmk amacı kullanılan bir tagdır. ancak henüz tüm tarayıcılar tarafından desteklenmemektedir.

<picture>
<source media="(min-width: 64em)" src="high-res.jpg">
<source media="(min-width: 37.5em)" src="med-res.jpg">
<source src="low-res.jpg">
<img src="fallback.jpg" alt="desteklemeyen browserlar için resim .">
<p>Yazı.</p>
</picture>

Şeklinde bir yapısı bulunmaktadır

source, resmin özellikleri ve yolunun verilemsinde kullnılmaktadır. media bölümüne hangi çözünürlükte kullanılacağı src bölümünde ise dosya yolu bulunmaktadır

picture kodu içeriisindeki img tagı destekleyen browserlarda görüntülenmez ancak desteklemeyen browserlar diğer öğeleri görüntülemeyip onun yerime img tagını görüntüler ancak istenirse aynı işlem img tagı içerisinde de yapılabilmektedir.

Lazy-load işleminde ise tüm resimler tek bir yer tutucu dosya ile çağrılmaktadır ve dosya açılıp resim ekranda görüntülenmek istediği anda ise resim bir script yardımı ile ilgili canvas içerisinde gösterilmektedir. Bu günlerde bu yöntemi özellikle gazete siteleri çokça kullanmaktadır.

<script src="jquery.js" type="text/javascript"></script>  
<script src="jquery.lazyload.js" type="text/javascript"></script>
<script>
$(function() {
      $("img.lazy").lazyload();  
});
</script>
<img class="lazy" data-original="img/example.jpg" width="640" height="480">

şeklinde bir kodlama ile kolaylıkla yapılabilmektedir. burada resimler doğrudan src parametresi ile değil im tagına ek bir parametre ile data-original parametresi ile bildirilmektedir.

SEOinforobot

Yorumlar

Yorumda Görünecektir
Yorumda Görünecektir
50062
Sayıları Kutuya Yazınız