Anında resim optimizasyonu ve küçültme (timthumb)
28 Ağustos 2015 Furkan Atabaş 7.128 Okunma Yorum Yok

Anında resim optimizasyonu ve küçültme (timthumb)


Atabaş Yazılım Hazır Kod ve Fonksiyonlar PHP

Web site yaparken çok fazla ihtiyacımız olan bir durumdur. Örnek olarak anasayfada listelediğimiz içerikler için birer konu kapak fotoğrafı göstermek isteriz veya sidebar da en popüler konuları listelerken resimler gösterebiliriz yada bir galeri sayfasında galeri resimlerini tıklayıp büyük olarak görüntülemeden önce resimlerin küçük birer görüntüsünü listeleriz.

Böyle durumlarda göstereceğimiz resimleri temamız da bulunacakları alana göre küçültürüz. Bunu genelde html img elemanına width ve height değerleri atayarak yaparız. Resimler belirlediğimiz boyutlarda görünür fakat bu durumun çok ciddi sorunları olabilir. Bu sorunlardan bildiklerimi listelemem gerekirse

  • Resim dikey yada yatay ise büzülecektir.
  • E tabi bu misafirlerin hoşuna gitmeyecek.
  • Resim aslında büyük olduğu için kendi xxxByte lık boyutunda yüklenecektir.
  • Buda site verisinin yüklenmesini yavaşlatacak.
  • Yavaş yüklenen site seo için bir dezavantaj olduğundan google da üst sıralara çıkmayı daha çoooook bekleriz.

Peki çare ne? (timthumb.php)

Yukarıdaki sorunlarla karşılaşmamak için  resimlerimizi daha orantılı bir biçimde küçültüp, boyutunu düşürüp, resim enli yada boyluysa kırpmamız gerek. Bunun için sağolsunlar birileri oturup birşeyler yazmış ve adınıda timthumb.php koymuşlar. Bu sihirli dosya resimleri çok kolay bir şekilde

  • Küçültüyor
  • Çıktı kalitesini ayarlıyor
  • Ve bu sayede resmin byte olarak boyutu azalıyor.
  • Kırpıyor
  • Kırpılan resmin kırpılacak konumunu belirliyor.
  • Yakınlaştırma işlemi yapıyor
  • Efekt uyguluyor
  • Resmi keskinleştiriyor
  • Açıkta kalan arkaplana renk veriyor
  • “Cache” adında bir klasör oluşturup içerisine veriler yükleyerek bir sonraki sayfa yüklenmesinde aynı resimlerin daha hızlı yüklenmesini sağlıyor.
  • Daha da ne yapsın o.O şimdi kullanıma geçelim.

timthumb.php ye başlarken?

Bu sihirli dosyayı kullanabilmek için http://timthumb.googlecode.com/svn/trunk/timthumb.php linkine tıklıyoruz.
Açılan sayfayı sağ tuş farklı kaydet yaparak bilgisayarımıza indiriyoruz.
Daha sonra timthumb.php dosyasını sunucumuza yükleyelim.
Artık bu dosyaya http://site_adimiz.com/timthumb.php şeklinde ulaşıyor olmamız gerek.
timthumb.php dosyamızın olduğu dizinde yeni bir klasör açıp adını “cache” olarak verelim. (Bu dosyayı eğer yazma izni var ise kendi de oluşturabilir isterseniz önce oluşturmadan çalıştırmayı deneyebilirsiniz eğer bir işe yaramazsa cache klasörünü oluşturun)
Eğer klasörü siz oluşturmuşsanız ve hala işe yaramadıysa “cache” klasörünün izinlerini 777 yapın gitsin.  😎


Resim optimize dosyası timthumb.php nasıl kullanılır?

Tüm işlemleri yapıp hazır olduğumuza göre artık bir kaç resim optimize etme vaktimiz geldi. timthumb.php dosyasıyla resim optimize işlemi link yoluyla timthumb.php dosyasına parametre göndererek gerçekleşir. Dosyayı çalıştırabilmek için resimleri gösterdiğimiz img nesnesinin src özelliğine değer olarak resim yolumuzu direk değil bu dosya üzerinden vermemiz gerek yani img nesnemiz en basit haliyle şu şekilde olmalı.

<img src=”timthumb.php?src=resimyolu“/>

Yukarıda ki örnekte de görüldüğü üzere işlemimiz bu kadar kolay ilk önce timthumb.php dosyasının yolunu giriyoruz sonra da “?” işareti ekleyerek src parametresine resmimizin yolunu atıyoruz. Ardından src ye verilmiş olan resmin 100px genişliğinde ve 100px yüksekliğinde küçüldüğünü görebiliriz. Bu dosyanın varsayılan boyut değerleri 100px e 100px dir. Bunları değiştirmek için resim yolunun devamnı “&” karakterleri ekleyerek genişlik anahtarı olan “w” veya yükseklik anahtarı olan “h” parametrelerini ekliyoruz.

Şimdide http://site.com/img/manzara.png adresinde ki resmi 300px genişliğinde ve 280px yüksekliğinde küçültelim.

Bu kodu yazdıktan sonra http://site.com/img/manzara.png kaynağında bulunan resim 300px genişliğinde ve 280px yüksekliğinde olacaktır. Şimdide kalitesinde biraz oynama yapalım ki byte türünden boyutu düşsün ve daha az yer kaplasınlar. Bunun için “q” parametresini kullanıp 0 ile 100 arası bir değer vererek kalitesinde azaltma yapalım.

Yukarıda görüldüğü üzere “q” değerini 70 olarak belirleyip oluşturulan yeni resimde %30 luk bir kalite azaltması yaptık. Kalite düşüklüğü huzurunuzu bozmasın küçük resimlerde çokta fark edilmiyor. Neyse en basit hali ile timthumb.php resim optimizasyon dosyasının nasıl kullanılacağını öğrendik şimdi tüm özellikleri kullanmak için gerekli olan parametreleri ve aldığı değerleri vermek istiyorum.


Parametre İşlem Açıklama
src
(source)
Görüntü Adresi Görüntülenecek resmin kaynağı girilmelidir ( Girilmesi zorunlu olan tek parametredir. )
w
(width)
Genişlik Oluşturulacak yeni resmin genişlik (width) değeri.
Girilmediği durumlarda “h” parametresi girilmiş ise yüksekliğe orantılı girilmemiş ise varsayılan olarak 100 değerini alır
h
(height)
Yükseklik Optimizasyonu yapılacak yeni resim yükseklik (height) değeri.
Girilmediği durumda “w” parametresi girilmiş ise genişliğe orantılı girilmemiş ise varsayılan olarak 100 değerini alır.
q
(quality)
Kalite  Optimize edilecek yeni göresilen görüntü kalitesini belirler. 0 ile 100 arasında değer alır.
zc
(zoom crop)
Yakınlaştır & Kırp  Bu parametre küçültülecek resmin kırpılıp yakınlaştırılmasını sağlar 4 farklı değer alır.

  • [0] = Zoom yada crop uygulanmaz normal küçülür resim büzülür.
  • [1] = (Varsayılan) Crop ve Zoom uygulanır resim istenilen boyutta küçültülür.
  • [2] =Crop uygulamaz istenilen boyutta bir resim oluşturur fakat resim eni veya boylu ise büzülmemesi için orantılı küçültür. w ve h değerlerine girilen alanlarda boz alan kalırsa “cc” ve “ct” parametrelerinin değerlerine göre doldurur.
  • [3] = Resme crop, zoom yada tuval arkaplanı uygulamaz orantılı bir şekilde küçültür.
a
(alignment)
Kırpılan Bölge  “zc” değeri 1 olan resimlerde resmin hangi konumdan kırpılacağını belirtir.

  • [c] = (Varsayılan) Orta  / center
  • [l] = Sol / left
  • [r] = Sağ / right
  • [t] = Üst / top
  • [tl] = Üst Sol / top left
  • [tr] = Üst Sağ / top right
  • [b] = Alt / bottom
  • [bl] = Alt Sol / bottom left
  • [br] = Alt Sağ / bottom right
f
(filter)
Efekt Filtre Resme efekt ekleme işlemleri bu olay biraz karışık.
Resme birden fazla filtre uygulanabiliyor.  Ör: …&f=3|5|8
Bazı filtrelere ekstra oran yada renk değerleri girilmesi gerekebiliyor. Ör: ..&f=3,50
Bu parametrenin alabileceği değerleri buraya sade bir şekilde ekliyorum daha sonra ki bir yazımda görseller ile örnekler gösteririm.

  • [1] = Negate
  • [2] = Grayscale
  • [3] = Brightness
  • [4] = Contrast
  • [5] = Colorize/ Tint
  • [6] = Edge Detect
  • [7] = Emboss
  • [8] = Gaussian Blur
  • [9] = Selective Blur
  • [10] = Mean Removal
s
(sharpen)
Keskinlik  Resmi keskinleştirir sadece 1 ve 0 değerlerini alır. Varsayılan 0 dır.
cc
(canvas color)
Tuval Rengi  “zc” yani kırpma özelliği “2” olarak belirlendiğinde oluşturulacak olan yeni resmin dışında kalan boş alanın rengini belirler. Çalışır durumda olması için “ct” parametresinin “0” değerini alması ve resim uzantısının “png” olması gerekir.
Bu parametre değer olarak #xxxxxx şekline renk kodu alır “#” karakteri kaldırılarak eklenir.
Örn:
…&cc=FFFFFF (varsayılan)
…&cc=000000
…&cc=FF55DD
…&cc=61FA91
ct
(canvas transparency)
Tuval Transparanlığı Bu parametre “zc” değeri “2” olarak belirtildiğinde oluşacak olan tuval boşluğunu resim “png” formatında ise transparan yapmaya yarar. 0 ve 1 değerlerini alır varsayılan “1” dir. 0 değeri girildiğinde boyanacak tuval rengi  “cc” parametresinin değerine göre belirlenir.

Şimdilik yazım bu kadar Allah izin verirse pek yakında yukarıdaki tabloda bulunan parametrelerle bol resimli bir örnek içeriği hazırlamak niyetindeyim. Şimdilik yararlı olması dileği ile kolay gelsin