Photoshop Magazin
 


Web için Görselleri Optimize Etmek

01 December 2006 | Sayı: Dec 2006
 
1 2 3 4 5
 

Web için Görselleri Optimize Etmek


Optimize etmek (optimizasyon), resmin verimliliğini, görsel çekiciliğini ve web tarayıcı sayfalarındaki kullanılabilirliğini kaybetmeden biçim, çözünürlük ve kalite ayarlarını en iyi şekilde yapılandırma sürecidir. Basitce, dosya boyutunu ve görüntüyü dengelemektir. Hiçbir ayar topluluğu bütün resim dosya türlerinin verimliliğini maksimize edemez. Optimize etme işlemi için iyi bir göz ve insan hükmü gerekir. Burada siteyi yapan kullanıcıya büyük bir sorumluluk düşmektedir. Hem resimlerin boyutlarını düşürecek hem de kalitelerinden ödün vermeyecektir.


hspace=0

Sıkıştırma seçenekleri dosyayı kaydetmek için kullanılan dosya tür adlarıdır. Dosya türleriyle ilgili bilgilerimize bir bakalım.

>> JPEG dosya türü sürekli tonlu resimlerin geniş renk aralığını ve hafif parlaklık varyasyonlarını korumak üzere tasarlanmıştır. Milyonlarca renk kullanılan resimleri gösterebilir.

>> GIF dosya türü düz renkli (tek veya iki renk) resimleri ve yinelenen renkler içeren ( Logolar, illüstrasyonlar gibi dosyaları) sıkıştırmak için etkilidir. Bu dosya türü resim göstermek için 256 renk içeren bir palet kullanır ve arka plan saydamlığını destekler.

>> PNG dosya türü düz renkli resimleri sıkıştırmak ve keskin ayrıntılarını korumak için etkilidir. PNG-8 biçimi bir resmi göstermek için 256 Renkli bir palet içerir. PNG-24 biçimi 24-Bit renk aralığını destekler (milyonlarca renk), Ayrıca animasyon programları için çalışmaları transparan götürmemize de olanak verir. (Flash benzeri programlar için)

>> WBNG dosya türü resimlerin cep telefonları gibi mobil cihazlar için optimizasyonuda standarttır. WBMP 1-bit renk desteği sağlar yani WBMP resimleri sadece siyah beyaz renkler içerir.

Bir JPEG Resmini Optimize Etmekhspace=0

İsterseniz Photoshop kulllanıcısı olun, isterseniz Image-Ready, bir resmi optimize etmek için her iki programda da mevcut olan ve aynı ayarlar üzerinden işleyen bir optimize yöntemi var.

Photoshop Save For Web iletişim kutusu bir resmin farklı optimizasyon ayarlarındaki sürümlerini yanyana görebilmemize imkan verir.




 

hspace=0

Çalışırken dosya boyutu ve resim kalitesi için en iyi olan kombinasyonu sağlayana kadar sürümleri karşılaştırabilir, optimizasyon ayarlarını yapabilir ve aralarındaki farkları inceleyebilirsiniz.

Photoshop'da açık bir resminiz ekranınızda bulunuyorsa hemen 'file' menüsünden 'Save For Web' seçeneğini işaretleyerek karşımıza gelen diyalog penceresini incelemeye başlayalım.

Photoshop orjinal resmin yanında otomatik olarak üç farklı optimizasyon ayarı kümesi oluşturur. Her resim görünümü altında listelenen bilgilere dikkat edin. Burada dosya boyutu ve resim yüklemesi için gereken saniye sayısı belirtilmektedir. İlk bölme orjinal dosyayı gösterir. İkinci, üçünçü ve dördüncü bölmeler resim için farklı optimizasyon ayarı kombinasyonlarına ve dosya türüne (GIF,JPEG veya PNG gibi) renk indirgeme algoritmasını belirtir.

Photoshop orjinal resmin yanında otomatik olarak üç farklı optimizasyon ayarı kümesi oluşturur. Her resim görünümü altında listelenen bilgilere dikkat edin. Burada dosya boyutu ve resim yüklemesi için gereken saniye sayısı belirtilmektedir. İlk bölme orjinal dosyayı gösterir. İkinci, üçünçü ve dördüncü bölmeler resim için farklı optimizasyon ayarı kombinasyonlarına ve dosya türüne (GIF,JPEG veya PNG gibi) renk indirgeme algoritmasını belirtir.

hspace=0

Photoshop'da açmış olduğunuz resmi 'Save For Web' iletişim kutusunun sol alt köşesinde Zoom Level açarak 300% seçimini yaparak resmi büyütün. Farklı optimizasyon ayarları için önceden ayarlanmış görünümleri kıyaslayın. Dört pencereden birine tıklayarak imlecin bir el simgesine dönüşmesini sağlayın ve resmi optimize edilmiş görünümlerle orjinal görünüm arasındaki farkları görebileceğiniz şekilde resmi sürükleyin. Resminizin üzerinde bulunan ayrıntıları incelemeye ve alanlar arasındaki karşılaştırmaları yapmaya devam edin. Resimde oluşan farklılıklar ekranda belirmeye devam edecek ve resmin boyutundaki düşüşleri inceleme ve sitemizde yüklenme sürelerini takip etme şansına sahip olacaksınız.

 

 

 

 

 

 

 

 

 

 

hspace=0

Save For Web iletişim kutusunda dilediğiniz üç optimize edilmiş görünümü kıyaslayabilirsiniz. Bunu yapmak için, optimize edilmiş önizmelerden birini seçer ve ardından diyalog penceresinin sağ tarafında bulunan ayarları yapabilirsiniz.Farklı ayar kombinasyonlarını deneyerek istediğiniz sonuca kolayca ulaşabilirsiniz.
Burada unutulmaması gereken JPG ve PNG dosya türleri resmin kalitesinden ödün verirken, GIF dosya türleri ise resmin kalitesinden değil renginden ödün vermektedir. Uygulamalar yapılıken bu kural baz alınır ve logo gibi tek renkli veya 3-5 renkli grafik çalışmalar GIF formatında, resimler ise JPG formatında kayıt edilir.
Photoshop ve ImageReady birçok ortak özelliğe sahiptir. Ancak Photoshop'da gerçekleştirdiğiniz belirli bazı işlemleri ImageReady uygulamasında yapamayabilirsiniz. Aynı şey tersi içinde bazı özel durumlarda geçerli olabilir. Bu uygulamalarla da işlemlerin gerçekleşmesi farklı avantajlara sahip olabilmenize de olanak sağlar.
Bu iki program arasında bir dosyadan diğerine geçerken açık bir dosya varsa, bu dosya geçiş yaptığınız uygulamada açılacaktır. Birden fazla dosya açık durumdaysa , sadece aktif dosya geçiş yapılan uygulamada açılacaktır.

ImageReady CS2'de Temel Optimizasyon İşlemi de Photoshop ile benzerlik göstermekte sadece 'File/Save For Web' seçeneği burda yerini 'File/Save Optimized As' seçeneğine bırakmıştır. Ekranda açık bir resmimiz varsa veya Photoshop'da yapmış olduğumuz her hangi bir tasarımı ImageReady CS2 programına 'File/Jump to / İmageReady' komutuyla ImageReady'ye aktif hale getirebilirsiniz. Yine ImageReady programımızda 'Window/Optimize' panelimizi açabilir ve resminizin kalitesini kullanmayı düşündüğünüz proje doğrultusunda ayarlayabilirsiniz.

 

December 2006

 


Image Ready