WordPress Resim Optimizasyonu

534 gün önce Beyaz tarafından yazılmıştır.
anasayfa
anasayfa
anasayfa

WordPress kullanan arkadaşların belkide en çok karşılaştıkları sorunlardan bir taneside Cpu sorunu diyebilirim..Wordpress normal olarak fazla sorgu kullanmasa da eklenti ve temalarıyla birlikte bu sorgu sayısı oldukça yüksek seviyelere çıkıyor..Ayrıca sorgu sayısından farklı olarak sitede kullanılan görsellerde hem page onload dediğimiz sayfa yükleme hızını yükseltip hem sunucuya hemde siteye giren insanlara zorluk çıkartıyor..

Bu amaçla daha önceden tanıtımını yapsam da kullanımı konusunda fazla detaylı bilgi vermediğim bir sistemi yani TimThumb sistemini wp severlere anlatmak istedim..

TimThumb tüm php scriptlerde çalışan alternatif bir resim cacheleme sistemidir..Yani şöyle düşünelim sitenize özel alanlardan bir resim eklediniz..Resmin boyutu 1024 pixel diyelim..Eğer wordpress’in kendi thumbnail özelliğini kullanmıyorsanız bu resim CSS veya XHTML aracılığıyla küçültülecektir..

Yani şöyle düşünün 120-75 pixel boyutlarında thumbnail yani küçük resim kullanıyorsunuz..Bu resim için 1024 pixellik bir resim eklediniz..Ana sayfanız da da 20 tane thumb olduğunu varsayarsak sayfanızın açılma süresi 20 tane 1024 pixel resmin açılması kadar uzayacaktır..Fakat timthumb sayesinde bu süre hem 10′da birine (1024 pixeli 10 saniyede açıyorsa 120 pixeli 1 saniye de açar mantıken) düşücektir hemde cpu’nuz pageonload yüzünden artmıyacaktır..

Olayın özetini anlatmak gerekirse sayfalarınızdaki resimler artık Sunucunuzdaki CPU değerlerinde kırmızı ışık yanmasına sebebiyet vermiyecektir.

Timthumb’u Nasıl Kullanırım?

Bu adresten timthumb dosyasını indirmeniz gerekmektedir..(Kod olarak göründüğü için ctrl-s yapıp timthumb.php olarak kayıt edin) Ardından dosyanın içindeki örnekteki gibi kodlarımızı wordpress’e entegre ediyoruz..


   HTML example: <img src="/scripts/timthumb.php?src=/images/whatever.jpg&w=150&h=200&zc=1" alt="" />

Bu kodu wordpress versiyonu halinde çevirmek istersek..Yani eski sistem (WordPress özel alan kullanan sistem) de kodlarını vermek gerekirse


<?php $anarschi = get_post_meta($post->ID,'kucukresim', true);
if($anarschi != "") {  ?>

<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php echo $resim; ?>" /></a>

<?php }else{ ?>
<?php } ?>

Şeklinde kullandığımız özel alan kodumuzu (Özel alan ismi örnek olarka kucukresim verdim) aşağıdaki şekilde değiştiriyoruz..

Yanlız timthumb.php’yi tema klasörünüzün içine atın (single.php vs onların olduğu yere) Ayrıca timthumb.php nin olduğu klasörün içine “cache” adında bir klasör daha yaratıp yazma izinlerinden 777 vermeniz gerekmektedir.


 <?php $anarschi = get_post_meta($post->ID,'kucukresim', true);
 if($anarschi != "") {  ?>

 <a href="<?php the_permalink() ?>" rel="bookmark"  title="<?php the_title_attribute(); ?>"><img src="<?php bloginfo('template_url'); ?>/timthumb.php?src=<?php  echo $resim; ?>&w=100&h=75&zc=1" /></a>

 <?php }else{ ?>
 <?php } ?>

Şeklinde değiştiriyoruz..Yanlız burada önemli olan resim linkinizin sonundaki w=100&h=75 değerleri..Bunlar resminizin hangi boyuta göre kesilip düzenleneceğini gösterir..Yani bunu nasıl öğrenebiliriz derseniz..Thumb resminizin üzerinde sağ tıklayıp resim bilgilerini göster dediğiniz de

1x1.trans Wordpress Resim Optimizasyonu

Böyle bir değer görüceksiniz..Burada css le 320-24o pixellik bir resmi 100-75 olarak küçültmüşsünüz..Demek ki buradaki thumbnail değeriniz 100-75 olacak..

&w=150&h=200&zc=1

değerini

&w=100&h=750&zc=1

olarak değiştirin..

Diğer Resim Optimizasyonları

Bu sistem içinse şöyle bir özellik kullanmanızı tavsiye ediyorum.

İlk olarak temanızın yazı bölümünün genişliğini hesaplayın..Yani ortalama popho v3 temasında 500 pixel yazı genişliği var misal..Bu özellik için aşağıdaki ayarları yapın.

1x1.trans Wordpress Resim Optimizasyonu


Şeklinde ayarlama yapın ..Resimleriniz taşmasın..Ve temanızda gereksiz görüntüler oluşmasın..

Ayrıca resimlerinizi mümkün olduğunca buradaki verdiğiniz değerden büyük yapmayın..Aksi halde yine wordpress resim küçültme kullanıcaktır..Ve büyük resimlerinizi
eklerken büyük boyut seçeneğinde ekleyin..Yada wordpress’in resim ölçeklendirme özelliğini kullanın..

Misal örnek olarak bir wallpaper üzerinde deneme yapalım..

1x1.trans Wordpress Resim Optimizasyonu

Gördüğünüz resim 1440-900 Pixel boyutunda bir resim ve panelden “büyük” boyut diyerek ekledik..Bu amaçla temamızda herhangi bir kayma problemini çözdük..

Fakat resmin boyutu ve açılma süresi üst resimde oldukça fazla olduğundan dolayı resmi tekrar ölçeklendirip kayıt edelim..

1x1.trans Wordpress Resim Optimizasyonu

Bu resimde ölçeklendirilmiş hali..Yani arasındaki farkı isterseniz resim açılma sürelerinden rahatlıkla anlıyabilirsiniz :)

Resim Ölçeklendirmeyi Nasıl Kullanabilirim?

Eklediğiniz bir resmin alt kısmında resim düzenle seçeneği çıkacaktır..

1x1.trans Wordpress Resim OptimizasyonuŞeklinde ölçeklendir diyerek resmin boyutunu küçültebilirsiniz..

Yanlız bunları wallpaper tarzı resimler de yapın yani öyle konu anlatırken filan içerisinde  yazı bulunan resimde önemli ayrıntılar varsa bu özelliği kullanmayın :)

Saygılarımla..

Konuyla ilgili yorumlar

“WordPress Resim Optimizasyonu” için 0 cevap

  1. Oğuzhan Aslan diyor ki:

    Başka sunucuda bulunan resim dosyalarında çalışmıyordu en son. Hala geçerlimi bu beyaz.

  2. Windmill diyor ki:

    yimthumb.php çalışıyor fakat özel alanı çağıran kod parçacığı çalışmıyor …

  3. Usluer diyor ki:

    Eyvallah abi. Şu timthumbu ayarlayamamıştım bir türlü.

Bir Cevap Yazın

anarschi.com © 2007-2011 | anarşik çocuk

Site içerisindeki içerikler izinsiz kopyalanamaz, alıntı yapılamaz.

Powered-Designed and Fucked By Beyazıt K. :)

PS-CSS-WP-WODKA = Gene Gri V2 Teması