SEO Fiyat Hesaplama SEO ROI
Site Hızlandırma Teknikleri 3 – Resim Optimize

Site Hızlandırma Teknikleri 3 – Resim Optimize

Bir web sitesinin hızlı olması kullanıcılar kadar arama motorları için de önemlidir. Bunu site hızının SEOya etkisi başlıklı yazımızda detaylı olarak anlatmıştık.

Resimlere Boyut Etiketleri

SEO Hocası Blog her hafta e-postanızda. Ücretsiz abone olmak için tıklayın.

Web sitelerinde yer alan resimler, xhtml veya css kaynaklı boyutlandırılırlar. Bunların dışında xhtml kaynaklı resimler için hiçbir ölçü tanımlaması yapılmamış da olabilir. İşte bu gibi resimlerin yüklenmesi, ölçüsü olan resimlere oranla daha yavaş gerçekleşir. Web tarayıcıları hiçbir ölçü bilgisi girilmeyen resimlerde, öncelikle resimi tam boyutta açar, sonra orjinal boyutuna getirir. Bu işlem saniye veya saliselerle ifade edilse de 100 lerce resim barındıran  sitelerde büyük zamanlara denk gelmektedir.

Bu sebeple xhtml kaynaklı kullanılan resimlerde height=”100″ width=”100″ şeklinde resim boyutları belirtilmelidir ki tarayıcılar resimleri ve boyutlarını daha hızlı okuyarak kullanıcıya daha hızlı göstersin.

Resimlerin Sıkıştırılması

Resimlerin kalitesi genellikle baskı ve web olarak belirlenir. Bu kaliteye göre resimlerin boyutları küçültürek çok daha hızlı yüklenmesi sağlanabilir. Öyle ki, sıkıştırılan 10 resim sıkıştırılmamış 1 resime denk düşebilmektedir. Resimleri Photoshop gibi programlarla kalite düzeyi veya çözünürlük düzeyi küçültülerek, boyutları azaltılır ve web ortamında daha hızlı yüklenmesi sağlanır.

Resimlerin sıkıştırılması online olarak çeşitli siteler ile de mümkündür. Bunlardan bir tanesi Dynamic Drive sitesidir.

Resim Boyut Optimizasyonu

Sitelerde kullanılacak resimler genellikle orjinal boyutunda kullanılmazlar. 400×400 pixellik bir resim 100×100 pixellik bir alanda küçültülerek kullanılır. Ancak resimin gerçek kaynağı 400×400 pixellik bir resimdir. Dolayısıyla hangi boyutlarda kullanıldığı önemli olmadan orjinal çözünürlüğüne göre çağırılır. Dolayısıyla Kullanılması gereken yerde daha büyük bir boyutlu resim olmuş olur. Bu sebeple, Resimleri, kullanacağımız gerçek alanın ölçülerine göre boyutlayarak kullanmakta fayda var.

Resim Formatı

Jpg, png ve gif gibi resim formatları amaçlarına göre farklı yerlerde kullanılabilirler. Formatlar farklı sıkıştırma tekniklerine göre boyutları farklılıklar gösterir. Bu konuda kendi deneyimlerime göre tavsiyelerim, Eğer web üzerinde kullanılacak bir resim ise, Kalite düzeyi 60 da olan bir jpeg, şeffaf bir resim olacaksa 8 bitlik png, animasyon olacaksa gif tercih ederim.

Resimlerin Url Yapısı

Resimlerin kaynak kod içerisinde sahip olduğu url yapısı da sitenin hızlanmasında az çok etkilir. Bu konuda aslında direk resimlerle alakalı olmasa da, resimlerde de dikkat edilmesi gereken bir hususa değineceğiz. Web sitelerinde resimlerin xhtml kaynaklı kullanımı genel olarak aşağıdaki örnekteki gibidir.

<img src=”https://www.seohocasi.com/wp-content/uploads/2010/07/seo-danismanligi2.jpg” alt=”SEO Danışmanlığı” width=”125″ height=”125″/>
yerine, ana dizine yakın resim klasörü oluşturup resimleri içerisine atıyoruz ve url yapısında site adresini yazmayarak oldukça fazla sayıda karakter tasarrufu yapıyoruz.

<img src=”/tema/images/seo-danismanligi2.jpg” alt=”SEO Danışmanlığı” width=”125″ height=”125″/>

url yapısını kullanıyorum, aynı şekilde resimi çağırıyoruz. 100 lerce resimde bu yöntem uygulandığında fazlaca karakter tasarrufu ile kaynak kodunuz sadeleşmiş ve siteniz hızlanmış olacaktır.

Css Sprite Tekniği

Css sprite tekniği, xhtml kaynaklı resimlerin birleştirlerek tek bir resim olmasını ve css kaynağına taşınarak hızlı bir şekilde gösterilmesini esas alır. Bu şekilde hem kaynak kod büyük ölçüde azalmış olur hem de onlarca resim 1 resim şeklinde çağırıldığı için sorgu sayısı azalmış olur. Bu sebeple hem hız hem de SEO da katkı sağlar.

Aşağıda yer alan 2 site ile, kod bilgisine gerek kalmadan css sprite işlemini web sitelerinize uygulayabilirsiniz.

csssprites.com
spritegen.website-performance.org

Bir önceki yazımız olan Site Hızlandırma Teknikleri 2 – Stil Dosyası başlıklı makalemizde css conbine, css dosyası ve css gzip hakkında bilgiler verilmektedir.

Site Hızlandırma Teknikleri 3 – Resim Optimize için Yorumlar

  • murat keleş
    Murat Keleş 5 Eylül 2014, 15:06

    Merhabalar ben pek anlayamadım css sprite tekniğinde siteye yüklenmeden önce mi oluyor halihazırdaki siteye ne gibi yararı olur? saygılar

  • Sercan
    Sercan 7 Mayıs 2014, 10:41

    Hocam Merhaba,
    Fazlaca resim kullanılan bir sitede (mesela oto haber sitesi gibi) SEO ve performans açısından içerik/haber resimlerini klasörlere ayırmak mı daha iyi olur yoksa tek klasöre yığıp oradan çağırmak mı daha iyi olur. Örneğin;
    1. site. com/resimler/bmw.jpg
    2. site. com/resimler/2014/06/bmw.jpg

  • Hüseyin Körbalta
    Hüseyin Körbalta 15 Mart 2014, 02:42

    Merhaba Kaan Hocam,

    Şimdi bu dediklerinizi harfiyen yaptım. Ben bir torrent sitesi sahibiyim ve hitim hergeçen gün artmakta ve buda trafik kullanımını büyük ölçüde artırmaktadır.

    Sitemde torrent dosyaları barınmıyor, kurduğum sistem dışında herhangi bir dosya barınmıyor, resim dosyalarını ve torrent dosyalarını yandex disk gibi,imgur gibi dosya barındırma sitelerine yüklemekteyim.

    Trafik kullanımını nasıl azatabilirim ? veya en aza nasıl indirgeyebilirim.

    Öğrenci olmasam sunucu alırdım fakat öğrenci olduğum için belli bir bütçem var bundan dolayı elimden geldiğince optimize etmeye çalışıyorum.

    Kullandığım sistem bu arada MyBB’dir.

    Şimdiden yardımlarınız için çok teşekkür eder,iyi çalışmalar dilerim.

  • murat
    Murat 15 Ocak 2014, 12:22

    cok güzel yazı olmuş teşekkürler hocam bir sorum olcak benim resim url alınca cok uzun bir url oluyor bu neden olabilir tasarımı yapan arkadaşa sordum SEOcular böyle istiyor dedi bu doğrumu acaba emin olmak istedim

  • Mert Görkem Esgin
    Mert Görkem Esgin 28 Nisan 2013, 14:38

    kodlarda kullandığınız ” işareti çalışmıyor hepsini ” bununla değiştirdim çalıştı.

  • ferdi
    Ferdi 6 Nisan 2013, 15:19

    Spritegen sitesinde sprite tekniğinde resmi ekliyorum kod çıkıyor ama bunu nereye ekliyeceğim konusunda bilgi verirseniz sevinirim

  • Arslan Özgenç
    Arslan özgenç 31 Mart 2013, 09:25

    Sitenizden ve yazılarınızdan fazlasıyla istifade ediyorum. Emeği geçen herkese teşekkür ediyorum. Sitenizi ve yazılarınızı severek takip ediyorum.

  • Ali kara
    Ali Kara 4 Ocak 2013, 13:30

    Selam url yapısında /tema/images demişsiniz.Ben sidebarda resim kodlarını bu şekilde kullanıyorum yanlız böyle kullanınca category ve etiket sayfalarında resimler gözükmüyor .Bu sefer url eklemek zorunda kalıyorum sorun düzeliyor.Ne yapmak lazım?

  • Ecem Hatice Ay
    Ecem Hatice Ay 24 Mayıs 2012, 00:25

    ömcelikle dokuman icin teşekürler..
    yukarida verdiginiz Css sıkıştırmayı yaptim ve resim boyutlarini photoshop ile düsürdüm sitemde asiri hizlanma oldu bilgileriniz icin tesekurler ederim.

  • ibrahim
    Ibrahim 27 Mart 2012, 10:56

    Selam kolay gelsin ben dle de css sprite tekniği ile resimleri nasıl kullanabilirim.Bilgisi olan varmı.Tam olarak yapılan kodu nereye eklemek gerekiyor ?

  • hakan
    Hakan 30 Haziran 2011, 23:01

    Kaan bey cSprites for WordPress eklentisini kurdum nasıl kullanılacağı hakkında bilgi verirseniz çok memnun olurum.

  • Selen Elif Schmitz
    Selen Elif Schmitz 4 Nisan 2011, 13:23

    Merhaba ben bir sorum olacak.Bir resim sitesi yapıyorumda,
    Web sitem bir kaç dilde olacak
    Dile göre farklı başlıklar ve farklı etiketler vermeyi düşünüyorum.
    Bir resimde siteyi İngilizce yapınca “vista”, Türkçe yapınca “manzara” yazacak
    Böyle yaparsam site her iki dilde de resim indexlenir mi? yoksa en doğrusu tek dilde mi kurmalıyım? veya başka bir yol var mı? cevaplarsanız çok sevinirim.

  • Yaşar AVUTAN
    Yaşar Avutan 7 Ekim 2010, 18:42

    Css Sprite tekniği gerçekten ilginçmiş. Ben de ilk defa duydum. Uygulamak gerekiyor. Sonuçta makalede yazılan her şey bize fayda sağlayacaktır. Çok başarılı bir uygulama. Teşekkürler SEO Hocası

  • hakan güfte
    Hakan Güfte 28 Eylül 2010, 20:38

    son bir soru daha sorsam olur mu kafama çok takılda sitede bulamadım …
    aşağıdaki iki link verdim burada htaccses yaptım buradki 426 sayfa id si
    burada 426 nın ornek1 yada örnek2 deki gibi olmasını ele alırsak
    426 baştamı olsa yoksa sonda mı olsa google için daha önemlidir?

    • Kaan Gülten
      Kaan Gülten 28 Eylül 2010, 20:49

      @Hakan Güfte, url yapısında daima önemli kelimeler önde olmalı baş tarafa yakın olmalıdır. Kelimeler sona yaklaştıkça ve domain uzadıkça bu kelimedeki sayfanın önemi azalmaktadır. En faydalı url yapısı aşağıdaki gibidir.

      Eğer video kelimesinde çıkmak istiyorsanız klasör isminin geçmesini sağlayabilirsiniz. Ancak bu sefer sayfa ismi ikinci plana düşecektir.

  • hakan güfte
    Hakan Güfte 28 Eylül 2010, 20:53

    çok Teşekkur ederim hocam aslında sitede soru cevap bölümü varmış , çok geç gördüm bu konuyu oraya koyarsanız başkalarınında işine yarayacaktır.
    Çok teşekkurler

  • hakan güfte
    Hakan Güfte 28 Eylül 2010, 20:31

    saolasın hocam çok hızlısın…
    xhtml kaynaklı aşağıdaki gibi demek değil mi?
    | img width=”60″ height=”85″ alt=”” src=”images/avatars/suckxp.gif” |

    • Kaan Gülten
      Kaan Gülten 28 Eylül 2010, 20:47

      @Hakan Güfte, evet bu şekildedir.

  • hakan güfte
    Hakan Güfte 28 Eylül 2010, 20:23

    burada dediğiniz şı dikkatimi çekti de
    Bilgi : “Sitede gösterilen her resimde mutlaka height ve width ölçüleri belirtilmelidir. Çünkü web tarayıcıları, genişlik ve uzunluk ölçüsü girilmemiş resimleri önce tam ekran açar, sonra resimin kendi ölçülerine getirir, bu durum da zaman kaybına sebep olur. Eğer resimlere genişlik ve yükseklik değerleri ilave edilirse, resimler ilk açılırken orjinal boyutları ile görüntülenir. Bu şekilde daha hızlı yüklenir.Örnek height=”100″ width=”100”

    height ve with css ile tanımlı olursa ne olur yoksa illaki img scr ye tanımlamak mı lazım?
    tEşekkurker

    • Kaan Gülten
      Kaan Gülten 28 Eylül 2010, 20:26

      @Hakan Güfte, Eğer sitedeki resim css kaynaklı bir resim ise, yani css üzerinden çağırılıyorsa boyutlarının css üzerinden belirtilmesi yeterlidir. Ancak xhtml kaynaklı bir resim ise bu durumda xhtml kodlamada bunu belirtmek gerekir.

  • Irazhakkına Ayanoglu
    Irazhakkına Ayanoglu 13 Eylül 2010, 14:54

    Yazılarınızı gerçekten büyük bir keyif ve dikkatle takip ediyorum.. Çoğu yazdıklarınızı zaten siteme de uyguladım ve faydalarını gördüm. Bunlara karşı küçük bir şükran olarak da sayfalarımdan birinde SEO analiz başlığı ile sitenizi tanıttım ve link verdim..Diğer yazılarınızı da merakla bekliyoruz. Teşekkürler bu güzel paylaşımlarınız için..

    • Kaan Gülten
      Kaan Gülten 13 Eylül 2010, 16:05

      Güzel yorumunuz ve SEOhocasi.com a katkılarınız için çok teşekkürler. Gösterdiğiniz ilgiye layık olmaya çalışıyoruz.

  • Murat SON
    Murat Son 13 Ağustos 2010, 18:08

    Çok teşekkürler güzel bir yazı. Söylediklerinden bazılarını yaptım ve yararlı buldum.

  • Faik Altuğ Fatih
    Faik Altuğ Fatih 11 Ağustos 2010, 14:29

    hocam anlattıkların için teşekürler.Verdiğin bu sitelerde bi işlem yapabilmek için bolca vaktinin olması gerek:) oldukça geç işlem yapıyorlar..

  • Can Talaylı
    Can Talaylı 6 Ağustos 2010, 11:43

    @Cem Google aramayı kullanırsa yeniden sitende ki başka bir sayfaya geleceği için bir zararı olmaz. Hatta Google üzerinden sitene geldiği için yararı bile olabilir. Google üzerinden sitene gelipte bir sayfada zaman geçirmesi daha faydalı. Ama ben insanların daha çabuk aradıkları sayfalara ulaşmalarını istiyorum diyorsan Google arama kullanmayabilirsin.

  • Cem Tuzlu
    Cem Tuzlu 5 Ağustos 2010, 23:07

    @Can bey verdiğiniz bilgiler için teşekkür ederim.Anlatmak istediğim google aramasını kullanırsam ne gibi artıları olur adsense dışında yani bileşen olarak kullansam aramayı sitede online kalma süresi vs sormak istediğim.Google aramayı kullanırsamda siteden çıkış yapmuş oluyor ve online süreleri düşüyor kullanıcılarn.Hangisi daha avantajlı onu demek istedim üstadım.

  • Can Talaylı
    Can Talaylı 5 Ağustos 2010, 22:32

    @Cem, Google Arama kullanırsan Adsense reklamları koyup ekstra kazanç sağlayabilirsin. Avantajı bu olur. Avatar olayına gelince Gravatars kullanabilirsin çok kullanışlı. Google’dan Gravatar diye aratman yeterli.

  • Cem Tuzlu
    Cem Tuzlu 5 Ağustos 2010, 21:58

    Üstadım birde şeyi sormayı unuttum wordpresste kendiliğinden bir avatar yükleme yeri yokmu.Yani user avatar diye bir eklenti buldum ve kurdum profil resimleri için.Ancak wordpressin kendinden varolan bir avatar yükleme sisteminin olup olmadığından emin değilim acaba var mı böyle birşey…

    Saygılarımla ;

  • Cem Tuzlu
    Cem Tuzlu 5 Ağustos 2010, 21:40

    Teşekkür ederim üstadım.O makalenizi 4 gözle bekliyor olacağım.Sizin gibi hocalarımızdan daha öğreneceğimiz çok şey var.Üstadım birşey daha soracaktım.Wordpress sitede bileşenlerden arama kutusunumu kullansak yoksa google arama motorunu mu kullanmalıyız hangisi daha avantajlı ikisi arasında ne gibi farklar var.

  • Cem Tuzlu
    Cem Tuzlu 3 Ağustos 2010, 20:35

    Üstadım merhabalar 1-2 sorum olacaktı size yine. Öncelikle verdiğiniz bilgiler ile çok yol kat ettim teşekkür ederim. İlk sorum yukarıda yorum yazan arkadaşların nikine tıklayınca web sitelerine yönlendiriyor zannedersem nofollow olayı bunu nasıl yaptınız eklenti ile mi?

    2. sorum ise üstadım SEO eklentisi olarak all in SEO pack ile SEO ultimate arasında kaldım.Sizce hangisini kullanmalıyım hangisi daha etkili ve detaylı.

    Saygılarımla ;

    • Kaan Gülten
      Kaan Gülten 4 Ağustos 2010, 10:39

      Yorum linklerinde yönlendirme yapılmaktadır. Ancak nofollow değildir. Git.php dosyası oluşturup bunun içerisine ileriki konularda anlatılacak kod yerlerştirilerek yapılıyor. Eklenti tercihim ise şu şekildedir: WpSEO – all in one SEO – SEO ultimate. Yazdığım öncelik sırasına göre kullanmanızı tavsiye ederim.

  • Şueda Kürk
    şueda Kürk 31 Temmuz 2010, 15:10

    benim sitemde işe yaramadı doğsu bende sunucuyu değiştim şimdi oldukça iyi durumda

  • Ebru Ece Kıryayla
    Ebru Ece Kıryayla 30 Temmuz 2010, 22:30

    Sitenin wordpress olduğunu düşünürsek ayarlar da ortam bölümüne gel . Dosya yüklenme adresini wp-content/uploads olarak manuel gir. Sorunun çözülecektir.

  • sinan
    Sinan 30 Temmuz 2010, 21:39

    ya benim sitemde resim yükleyemiyorum dosya adresinide yazıyorum 777 yapıyorum yazılır yapıyorum yinede resim yazıya yüklenmiyor :s

  • Gürol Köse
    Gürol Köse 30 Temmuz 2010, 10:36

    Ufak bir detaydan bahsedeyim: Photoshop da Save for Web seçeneğini kullanan kişiler boyut olarak iyi bir optimize yaptığını düşünebilir ama kaliteli resimlerin kullanılması gereken yerlerde çok büyük kalite kaybı olur. Bunu Fireworks da optimize ederek aşabilirsiniz.

  • Sinan Yorulmaz
    Sinan Yorulmaz 29 Temmuz 2010, 17:40

    Çok faydalı bir yazı olmuş Kaan abi. Boyut optimizasyonu, uzantı ve etiket hakkında söylediklerini harfiyen zaten uyguluyordum. Şu CSS Sprites özelliğine bir göz atayım. (:

  • Cem Tuzlu
    Cem Tuzlu 29 Temmuz 2010, 01:10

    Üstadım birde ben wordpress panelde tartışma bölümünde “Diğer bloglardan gelecek bağlantıları uyarılarını kapattım.Bir zararı olur mu açmalımıyım.Bu bölüm sizde işaretli mi?

    Buyrun ekran görüntüsü ;

    Saygılarımla ;

    • Kaan Gülten
      Kaan Gülten 29 Temmuz 2010, 09:17

      Herhangi bir zararı olmaz. Sadece size bağlantı verenlere sizinde bağlantı vermeniz için kullanılan bir sistem.

Site Hızlandırma Teknikleri 3 – Resim Optimize için Cevap Yaz

X