Thumbnail yani Önizleme Resimlerini Optimize Etmek

| 11 Şubat 2013 | 1 Yorum




Thumbnails Optimizasyonu ve PageSpeed hızlandırma

Websayfaların genelde wordpress içerik yönetim sistemleri CMS kullanılıyor. Yazılan yazılar bir takım görseller ve bunları thumbnails leri ile desteklenerek açıklanıyor. Web sayfasında kullanılan bu görsellerin ve thumbnails rin Portable Network Graphics png formatında kayıpsız olarak kullanılması sayfanın yüklenmesi avantaj getiriyor. Bu durum Google Arama Motoru için oldukça önemli, ziyaretçilerin sayfalarının hızlı açılması bu site için artı bir avantaj olacaktır. Öncelikle;

  •  Google’ın web sayfa hızlarının kontrolu için webmaster ların hizmetine sunduğu https://developers.google.com/speed/pagespeed/insights adresine girelim.
  •  Bu adres kutusuna URL adını yazıp, sayfanın analiz edilmesini isteyelim.
  •  Kısa bir analiz ardından size bir takım öneriler gelecek. Bu öneriler Önemli, orta ve düşük seviye olarak bize kategorize ediliyor.
  •  Bizim burda ilgilendiğimiz görsellerin kayıpsız formatta minmum boyutlarda optimizasyonu olacak.
  •  Bu optimizasyon öneri kategoriler içersinde örneğin 150×150 piksel  dosyası HTML’ de veya  CCS’ de yeniden boyutlandırıldı ve boyutu 150×150 pikselden 72×72 piksele değiştirildi.Ölçeklenmiş Resim sunmak , 50 Kbyte tassaruf sağlayabilir.(%76 azalma) gibi bir öneriyi yorumlarsak aslında sayfanda 72×72  boyutlarında kullandığın halde ziyaretçi bunu 150×150 yükleyip, web tarayıcınızda yeniden ölçüklendirip gösteriyor anlamı taşıyor. Bu örnekte yapılması gereken küçük resim boyutlarını
    Wordpress admin panelinden Ayarlar> Ortam sekmesi içersinden aşağıdaki gibi ayarlamak olacaktır.

 sizethumbnailhighprioritypagespeed1



Thumbnails lerin yeniden boyutlandrılması

  • Ancak bu ayardan sonra siteye gönderilen bu Thumbnails önizleme görsellerinin tekrar boyutlandırılması gerekiyor. Bu konuda imdadımızı Regenerate Thumbnails wordpress eklentisi yetişiyor. http://wordpress.org/extend/plugins/regenerate-thumbnails/screenshots/ adresinden direk indirebileceğiniz gibi panelinizden bu ektentiyi yükleyip etkinleştirebilirsiniz.
thumnail önizleme resmi optimizasyonu

thumbnails önizleme resmi optimizasyonu

  • Panelden Araçlar > Regen.Thumbnails seçimi ve Regenerate ile tüm görselleriniz yeninden bu ayarlarınıza ve temanıza göre optimize edilecektir.
  • Bazen piksel aynı kalsada ile kayıpsız sıkıştırma ile boyutların küçülebileceği şeklinde de  uyarı alabilirsiniz.

 

Önceden yüklenen Thumbnails ler için bu işlemi yapmak

  • Benim önerim görsellerinizi yüklerken bu işlemi yapmanız yok eğer daha önce yüklü görselleriniz içinde manuel olarak bu işlemi yapmak isterseniz benim önerim irfan view image editör programı olacaktır. Bu ücretsiz ve yaralı programı google da aratıp bulabilirsiniz. http://www.irfanview.com/plugins.htm sayfasından indireceğiniz ektra eklentiler içersinde yer alan PNGOUT – allows optimized PNG saving bizim işimizi görecektir.
  • Pagespeed sayfasında tespit ettiğiniz dosyaları FTP den bulun ve bunu indirip editör programında açıp aşağıdaki gibi farklı kaydet seçeneği ile kaydedin ve FTP de geri yükleyin.Bu işlem sıkıştırma nedeniyle biraz zaman alabilir.
PNGout kayıpsız resim kücültme

PNGout kayıpsız resim kücültme

Sayfa Yüklenme hızınızın belirlemek ve öneriler almak için ,Pagespeed ‘ alternatif olarak oldukça güzel bir hizmet veren  http://gtmetrix.com/ sitesinide kullanmanızı öneririm.

 

 

 



Kategori: Webmaster

Bora M. Deniz ()

Teknoloji, internet, ve bilişim gibi konularda paylaşımlarım ve yazılarımla 2011 den beri teknorapor.com dayım. Sosyal medya da yararlı bulduğunuz yazılarımı paylaşmanız dileklerimle... The author shares and writings IT, internet and technology news blog offering

Yorum (1)

Trackback URL | Yorum RSS

  1. alperen diyor ki:

    Bu eklenti ewww image optimizer ile aynı işlevi mi görüyor ? Eğer aynı işlevi görmüyorsa ikisini birden kullanmak sıkıntı olur mu ? Hani ewww eklentisi resimler için daha küçük boyutlarda olan jpg.webp üretiyor ve bu özellik de fena durmuyor. Öneriniz nedir ?

Bir Cevap Yazın

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